Februari 20, 2011

Cara Buat Wdiget Top Artikel

Cara Buat Wdiget Top Artikel, top artikel disini diqueri berdasarkan banyaknya komentar yang masuk untuk setiap artikel, diurut secara descending (dari besar ke kecil) berdasarkan jumlah komentar. Selain itu fungsinya untuk menarik pembaca agar turut serta membaca artikel yang menjadi 10 Top Artikel.

Berikut ini langkah-langkah untuk memasang Widget Top Artikel :
  • Dashbord > Rancangan > Tambahkan Gadget, lalu masukkan script berikut ini:
    <script language='javascript'>
    aBold = true;
    numposts=200;
    maxshowresult=10;
    home_page = "http://www.dillablog.co.cc/";
    </script>
    <script src='http://dillablog.googlecode.com/files/toppost.js' type='text/javascript'></script>
    Keterangan :
    • aBold = true;, menebalkan artikel
    • numpost = 200;, menampilkan sebanyak 200 character
    • maxshowresult = 10; menampilkan sebanyak 10 artikel
    variabel tersebut di atas (aBlod, numpost, maxshowresult) dapat dicustom oleh anda sesuai keinginan.
  • elesai, jangan lupa disimpan, dan lihat hasilnya.
  • Selamat mencoba.

Widget Sexy Auto Hide Social Bookmarking

Widget sosial bookmarking menjadi keharusan yang harus dipasang pada setiap blog, disamping bentuknya yang memang indah dan sexy juga sangat penting sebagai media pendistribusian artikel yang kita miliki ke berbagai media sosial tersebut, salah satunya facebook atau twitter.

Berikut ini langkah-langkah cara pasang Widget Sexy Auto Hide Social Bookmarking :
  • Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  • Download dulu template anda sebelumnya.
  • Gunakan Ctrl+F untuk mencari </head>
  • Jika sudah, lalu copy script di bawah ini tepat di atas </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'
    type='text/javascript' />
    <link href='http://bloggerblogwidgets.googlecode.com/svn/trunk/auto-hide-social-bookmarking-way2blogging.css'
    rel='stylesheet' type='text/css' />
    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
    var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
    var sexyFullHeight = jQuery('.sexy-bookmarks ul.socials').height();
    if (sexyFullHeight > sexyBaseHeight) {
    jQuery('.sexy-bookmarks-expand').hover(

    function() {
    jQuery(this).animate({
    height: sexyFullHeight + 15 + 'px'
    }, {
    duration: 800,
    queue: false
    });
    }, function() {
    jQuery(this).animate({
    height: sexyBaseHeight + 'px'
    }, {
    duration: 800,
    queue: false
    });
    });
    }
    if (jQuery('.sexy-bookmarks-center')) {
    var sexyFullWidth = jQuery('.sexy-bookmarks').width();
    var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socials li').width();
    var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socials li').length;
    var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
    var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
    var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
    jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
    }
    });
    </script>
  • Selanjutnya cari <data:post.body/> dengan menggunakan Ctrl+F, jika sudah lalu tambahkan script dibawah ini sesudah <data:post.body/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='post-width-w2b' style='width:600px;'>
    <div class='sexy-bookmarks-bg-caring sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '>
    <ul class='socials'>
    <li class='sexy-yahoomail'>
    <a class='external' expr:href='&quot;http://compose.mail.yahoo.com/?Subject= &quot; + data:post.title + &quot;&amp;body=Link:&quot;+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
    </li>
    <li class='sexy-gmail'>
    <a class='external' expr:href='&quot;https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=&quot; + data:post.title + &quot;&amp;body=Link:&quot; + data:post.url' rel='nofollow' title='Email this via Gmail'/>
    </li>
    <li class='sexy-twitter'>
    <a class='external' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'/>
    </li>
    <li class='sexy-facebook'>
    <a class='external' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'/>
    </li>
    <li class='sexy-linkedin'>
    <a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'/>
    </li>
    <li class='sexy-googlebuzz'>
    <a class='external' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'/>
    </li>
    <li class='sexy-yahoobuzz'>
    <a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url + &quot;&amp;submitHeadline=&quot; + data:post.title + &quot;&amp;submitSummary=&amp;submitCategory=science&amp;submitAssetType=text&quot;' rel='nofollow' title='Buzz up!'/>
    </li>
    <li class='sexy-blogger'>
    <a class='external' expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=1&quot;' rel='nofollow' title='Blog this on Blogger'/>
    </li>
    <li class='sexy-googlebookmarks'>
    <a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to Google Bookmarks'/>
    </li>
    <li class='sexy-googlereader'>
    <a class='external' expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcUrl=&quot; + data:post.url + &quot;&amp;srcTitle=&quot; + data:post.title + &quot;&amp;snippet=&quot;' rel='nofollow' title='Add this to Google Reader'/>
    </li>
    <li class='sexy-stumbleupon'>
    <a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'/>
    </li>
    <li class='sexy-delicious'>
    <a class='external' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/>
    </li>
    <li class='sexy-digg'>
    <a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'/>
    </li>
    <li class='sexy-comfeed'>
    <a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/&quot; + data:post.id + &quot;/comments/default?alt=rss&quot;' rel='nofollow' title='Subscribe to the comments for this post?'/>
    </li>
    <li class='sexy-orkut'>
    <a class='external' expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;tt=&quot; + data:post.title + &quot;&amp;du=&quot; + data:post.url + &quot;&amp;cn=&quot;' rel='nofollow' title='Promote this on Orkut'/>
    </li>
    <li class='sexy-designbump'>
    <a class='external' expr:href='&quot;http://designbump.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Bump this on DesignBump'/>
    </li>
    <li class='sexy-reddit'>
    <a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'/>
    </li>
    <li class='sexy-designfloat'>
    <a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to DesignFloat'/>
    </li>
    <li class='sexy-friendfeed'>
    <a class='external' expr:href='&quot;http://www.friendfeed.com/share?title=&quot; + data:post.title + &quot;&amp;link=&quot; + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/>
    </li>
    <li class='sexy-zabox'>
    <a class='external' expr:href='&quot;http://www.zabox.net/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Box this on Zabox'/>
    </li>
    <li class='sexy-dzone'>
    <a class='external' expr:href='&quot;http://www.dzone.com/links/add.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;description=&quot;' rel='nofollow' title='Add this to DZone'/>
    </li>
    <li class='sexy-webblend'>
    <a class='external' expr:href='&quot;http://thewebblend.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Blend this!'/>
    </li>
    <li class='sexy-propeller'>
    <a class='external' expr:href='&quot;http://www.propeller.com/submit/?url=&quot; + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/>
    </li>
    <li class='sexy-tumblr'>
    <a class='external' expr:href='&quot;http://www.tumblr.com/share?v=3&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Share this on Tumblr'/>
    </li>
    <li class='sexy-squidoo'>
    <a class='external' expr:href='&quot;http://www.squidoo.com/lensmaster/bookmark?&quot; + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/>
    </li>
    <li class='sexy-posterous'>
    <a class='external' expr:href='&quot;http://posterous.com/share?linkto=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;selection=&quot;' rel='nofollow' title='Post this to Posterous'/>
    </li>
    <li class='sexy-technorati'>
    <a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'/>
    </li>
    <li class='sexy-hotmail'>
    <a class='external' expr:href='&quot;http://mail.live.com/?rru=compose?subject=&quot; + data:post.title + &quot;&amp;body=Link: &quot; + data:post.url ' rel='nofollow' title='Email this via Hotmail'/>
    </li>
    <li class='sexy-bebo'>
    <a class='external' expr:href='&quot;http://www.bebo.com/c/share?Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title ' rel='nofollow' title='Share this on Bebo'/>
    </li>
    <li class='sexy-bitacoras'>
    <a class='external' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url ' rel='nofollow' title='Submit this to Bitacoras'/>
    </li>
    <li class='sexy-blinklist'>
    <a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title ' rel='nofollow' title='Share this on Blinklist'/>
    </li>
    <li class='sexy-100zakladok'>
    <a class='external' expr:href='&quot;http://www.100zakladok.ru/save/?bmurl=&quot; + data:post.url + &quot;&amp;bmtitle=&quot; + data:post.title ' rel='nofollow' title='Add this to 100 bookmarks'/>
    </li>
    <li class='sexy-blogengage'>
    <a class='external' expr:href='&quot;http://www.blogengage.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Engage with this article!'/>
    </li>
    <li class='sexy-blogmarks'>
    <a class='external' expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/>
    </li>
    <li class='sexy-bobrdobr'>
    <a class='external' expr:href='&quot;http://bobrdobr.ru/addext.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on BobrDobr'/>
    </li>
    <li class='sexy-bonzobox'>
    <a class='external' expr:href='&quot;http://bonzobox.com/toolbar/add?pop=1&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title + &quot;&amp;d=&quot;' rel='nofollow' title='Add this to BonzoBox'/>
    </li>
    <li class='sexy-boxnet'>
    <a class='external' expr:href='&quot;https://www.box.net/api/1.0/import?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&amp;import_as=link&quot;' rel='nofollow' title='Add this link to Box.net'/>
    </li>
    <li class='sexy-current'>
    <a class='external' expr:href='&quot;http://current.com/clipper.htm?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Post this to Current'/>
    </li>
    <li class='sexy-diigo'>
    <a class='external' expr:href='&quot;http://www.diigo.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;desc=&quot;' rel='nofollow' title='Post this on Diigo'/>
    </li>
    <li class='sexy-ekudos'>
    <a class='external' expr:href='&quot;http://www.ekudos.nl/artikel/nieuw?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;desc=&quot;' rel='nofollow' title='Submit this to eKudos'/>
    </li>
    <li class='sexy-evernote'>
    <a class='external' expr:href='&quot;http://www.evernote.com/clip.action?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Clip this to Evernote'/>
    </li>
    <li class='sexy-faqpal'>
    <a class='external' expr:href='&quot;http://www.faqpal.com/submit?url=&quot; + data:post.url ' rel='nofollow' title='Submit this to FAQpal'/>
    </li>
    <li class='sexy-fwisp'>
    <a class='external' expr:href='&quot;http://fwisp.com/submit?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Fwisp'/>
    </li>
    <li class='sexy-globalgrind'>
    <a class='external' expr:href='&quot;http://globalgrind.com/submission/submit.aspx?url=&quot; + data:post.url + &quot;&amp;type=Article&amp;title=&quot; + data:post.title ' rel='nofollow' title='Grind this! on Global Grind'/>
    </li>
    <li class='sexy-hackernews'>
    <a class='external' expr:href='&quot;http://news.ycombinator.com/submitlink?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/>
    </li>
    <li class='sexy-hatena'>
    <a class='external' expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Bookmarks this on Hatena Bookmarks'/>
    </li>
    <li class='sexy-hyves'>
    <a class='external' expr:href='&quot;http://www.hyves.nl/profilemanage/add/tips/?name=&quot; + data:post.title + &quot;&amp;text=Text about this site+-+&quot; + data:post.url + &quot;&amp;rating=5&quot;' rel='nofollow' title='Share this on Hyves'/>
    </li>
    <li class='sexy-identica'>
    <a class='external' expr:href='&quot;http://identi.ca//index.php?action=newnotice&amp;status_textarea=Reading:&quot; + data:post.title + &quot;+-+from+&quot; + data:post.url ' rel='nofollow' title='Post this to Identica'/>
    </li>
    <li class='sexy-izeby'>
    <a class='external' expr:href='&quot;http://izeby.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Add this to Izeby'/>
    </li>
    <li class='sexy-jumptags'>
    <a class='external' expr:href='&quot;http://www.jumptags.com/add/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/>
    </li>
    <li class='sexy-kaevur'>
    <a class='external' expr:href='&quot;http://kaevur.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Kaevur'/>
    </li>
    <li class='sexy-mail'>
    <a class='external' expr:href='&quot;mailto:?subject=%22&quot; + data:post.title + &quot;%22&amp;body=Link: &quot; + data:post.url + &quot; (sent via Way2blogging) &quot;' rel='nofollow' title='Email this to a friend?'/>
    </li>
    <li class='sexy-memoryru'>
    <a class='external' expr:href='&quot;http://memori.ru/link/?sm=1&amp;u_data[url]=&quot; + data:post.url + &quot;&amp;u_data[name]=&quot; + data:post.title ' rel='nofollow' title='Add this to Memory.ru'/>
    </li>
    <li class='sexy-meneame'>
    <a class='external' expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Meneame'/>
    </li>
    <li class='sexy-misterwong'>
    <a class='external' expr:href='&quot;http://www.mister-wong.com/addurl/?bm_url=&quot; + data:post.url + &quot;&amp;bm_description=&quot; + data:post.title + &quot;&amp;plugin=sexybookmarks&quot;' rel='nofollow' title='Add this to Mister Wong'/>
    </li>
    <li class='sexy-moemesto'>
    <a class='external' expr:href='&quot;http://moemesto.ru/post.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to MyPlace'/>
    </li>
    <li class='sexy-mylinkvault'>
    <a class='external' expr:href='&quot;http://www.mylinkvault.com/link-page.php?u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/>
    </li>
    <li class='sexy-myspace'>
    <a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Post this to MySpace'/>
    </li>
    <li class='sexy-n4g'>
    <a class='external' expr:href='&quot;http://www.n4g.com/tips.aspx?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit tip to N4G'/>
    </li>
    <li class='sexy-netvibes'>
    <a class='external' expr:href='&quot;http://www.netvibes.com/share?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/>
    </li>
    <li class='sexy-netvouz'>
    <a class='external' expr:href='&quot;http://www.netvouz.com/action/submitBookmark?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;popup=no&quot;' rel='nofollow' title='Submit this to Netvouz'/>
    </li>
    <li class='sexy-newsvine'>
    <a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot; + data:post.url + &quot;&amp;h=&quot; + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/>
    </li>
    <li class='sexy-ning'>
    <a class='external' expr:href='&quot;http://bookmarks.ning.com/addItem.php?url=&quot; + data:post.url + &quot;&amp;T=&quot; + data:post.title ' rel='nofollow' title='Add this to Ning'/>
    </li>
    <li class='sexy-nujij'>
    <a class='external' expr:href='&quot;http://nujij.nl/jij.lynkx?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url + &quot;&amp;b=&quot;' rel='nofollow' title='Submit this to NUjij'/>
    </li>
    <li class='sexy-oknotizie'>
    <a class='external' expr:href='&quot;http://oknotizie.virgilio.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on OkNotizie'/>
    </li>
    <li class='sexy-pfbuzz'>
    <a class='external' expr:href='&quot;http://pfbuzz.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on PFBuzz'/>
    </li>
    <li class='sexy-pingfm'>
    <a class='external' expr:href='&quot;http://ping.fm/ref/?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Ping this on Ping.fm'/>
    </li>
    <li class='sexy-plaxo'>
    <a class='external' expr:href='&quot;http://www.plaxo.com/?share_link=&quot; + data:post.url ' rel='nofollow' title='Share this on Plaxo'/>
    </li>
    <li class='sexy-plurk'>
    <a class='external' expr:href='&quot;http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+&quot; + data:post.url + &quot;&amp;qualifier=shares&quot;' rel='nofollow' title='Share this on Plurk'/>
    </li>
    <li class='sexy-printfriendly'>
    <a class='external' expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/>
    </li>
    <li class='sexy-pusha'>
    <a class='external' expr:href='&quot;http://www.pusha.se/posta?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Push this on Pusha'/>
    </li>
    <li class='sexy-scriptstyle'>
    <a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to Script &amp; Style'/>
    </li>
    <li class='sexy-slashdot'>
    <a class='external' expr:href='&quot;http://slashdot.org/bookmark.pl?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/>
    </li>
    <li class='sexy-sphinn'>
    <a class='external' expr:href='&quot;http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=&quot; + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/>
    </li>
    <li class='sexy-springpad'>
    <a class='external' expr:href='&quot;http://springpadit.com/clip.action?body=&amp;url=&quot; + data:post.url + &quot;&amp;format=microclip&amp;title=&quot; + data:post.title + &quot;&amp;isselected=true&quot;' rel='nofollow' title='Spring this on SpringPad'/>
    </li>
    <li class='sexy-strands'>
    <a class='external' expr:href='&quot;http://www.strands.com/tools/share/webpage?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Strands'/>
    </li>
    <li class='sexy-stumpedia'>
    <a class='external' expr:href='&quot;http://www.stumpedia.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to Stumpedia'/>
    </li>
    <li class='sexy-techmeme'>
    <a class='external' expr:href='&quot;http://twitter.com/home/?status=Tip+@Techmeme+&quot; + data:post.url + &quot;--&quot; + data:post.title + &quot;&amp;source=Way2blogging&quot;' rel='nofollow' title='Tip this to TechMeme'/>
    </li>
    <li class='sexy-tipd'>
    <a class='external' expr:href='&quot;http://tipd.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Tipd'/>
    </li>
    <li class='sexy-tomuse'>
    <a class='external' expr:href='&quot;mailto:tips@tomuse.com?subject=&quot; + data:post.title + &quot;&amp;body=Link: &quot; + data:post.url ' rel='nofollow' title='Suggest this article to ToMuse'/>
    </li>
    <li class='sexy-twittley'>
    <a class='external' expr:href='&quot;http://twittley.com/submit/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;desc=&amp;pcat=Technology&amp;tags=&quot;' rel='nofollow' title='Submit this to Twittley'/>
    </li>
    <li class='sexy-viadeo'>
    <a class='external' expr:href='&quot;http://www.viadeo.com/shareit/share/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;urlaffiliate=31138&quot;' rel='nofollow' title='Share this on Viadeo'/>
    </li>
    <li class='sexy-virb'>
    <a class='external' expr:href='&quot;http://virb.com/share?external&amp;v=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Virb'/>
    </li>
    <li class='sexy-wikio'>
    <a class='external' expr:href='&quot;http://www.wikio.com/sharethis?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Wikio'/>
    </li>
    <li class='sexy-wykop'>
    <a class='external' expr:href='&quot;http://www.wykop.pl/dodaj?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to Wykop!'/>
    </li>
    <li class='sexy-xerpi'>
    <a class='external' expr:href='&quot;http://www.xerpi.com/block/add_link_from_extension?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Save this to Xerpi'/>
    </li>
    <li class='sexy-yandex'>
    <a class='external' expr:href='&quot;http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&amp;lurl=&quot; + data:post.url + &quot;&amp;lname=&quot; + data:post.title ' rel='nofollow' title='Add this to Yandex.Bookmarks'/>
    </li>
    <li class='sexy-way2blogging'>
    <a class='external' href='http://way2blogging.blogspot.com' rel='follow' title='Grab this Widget'></a>
    </li>
    </ul>
    <div class='sexy-link'>
    Widget for blogger by <a href='http://way2blogging.blogspot.com/2010/12/add-sexy-auto-hide-social-bookmarking.html' rel='follow' title='Grab this Widget'>Way2Blogging</a>
    </div>
    </div>
    </div>
    </b:if>
    Catatan :
    • width:600px merupakan lebar postingan, bisa disesuaikan dengan lebar postingan anda.
    • ada 8 pilihan lainnya untuk bentuk tulisan "Sharing is caring!"
      sexy-bookmarks-bg-sexy
      sexy-bookmarks-bg-caring
      sexy-bookmarks-bg-caring-old
      sexy-bookmarks-bg-love
      sexy-bookmarks-bg-wealth
      sexy-bookmarks-bg-enjoy
      sexy-bookmarks-bg-german
      sexy-bookmarks-bg-knowledge
  • Sumber : http://www.way2blogging.org

Februari 19, 2011

Cara Buat Recent Post Thumbnail

Cara Buat Recent Post Thumbnail. Ide ini mulanya datang dari bloggertricks, recent post thumbnail ini dikemas cukup keren dengan menggunakan java script. Keinginan saya memposting ini, biar supaya ngga kemana-mana kalau ada yang mau cari widget recent post thumbnail, bisa di sini aja, hi hi hi. Tapi itu juga kalau bisa ditemukan, kalau ngga ya ngga apa-apa.

Intermezo dah dulu, ok skarang langsung aja ke langkah berikutnya :
  • Dashbord > Rancangan > Tambahkan Gadget, lalu masukkan script berikut ini:
    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
    showRandomImg = true;
    boxwidth = 298;
    cellspacing = 8;
    borderColor = "#444";
    bgTD = "#000000";
    thumbwidth = 40;
    thumbheight = 40;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 5;
    home_page = "http://namablog.blogspot.com/";
    </script>
    <script src="http://dillablog.googlecode.com/files/recentposthumbnail.js" type="text/javascript"></script>
  • Keterangan:
    • boxwidth : Lebar widget
    • cellspacing : Jarak antar thumbnail
    • borderColor : Warna border sekaligus background template
    • thumbwidth & thumbheight : Ukuran pixel thumbnail
    • fntsize : Ukuran huruf judul post
    • acolor : Warna judul yang biasanya menyesuaikan dengan warna link blog masing-masing
    • aBold : Bentuk huruf normal atau tebal
    • numposts : Banyaknya post terbaru yang ingin ditampilkan
    • home_page : http://namablog.blogspot.com/ (Ganti dengan url blog masing-masing)
    • imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; Gambar alternatif jika post sobat tanpa image
  • Selesai, jangan lupa disimpan, dan lihat hasilnya.
  • Selamat mencoba.

Februari 18, 2011

Cara Buat Read More Otomatis 2

Cara Buat Read More Otomatis 2. Read more ini sebenarnya melengkapi Cara Buat Read More Otomatis yang pertama. Pada read more ini, kelebihannya dapat mengatasi halaman statis (statics page), maksudnya pada saat menampilkan halaman statis tidak mengalami kendala.

Berikut ini langkah-langkah cara membuat read more otomatis 2 :
  • Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  • Download dulu template anda sebelumnya.
  • Gunakan Ctrl+F untuk mencari </head>
  • Jika sudah, lalu copy script di bawah ini tepat di atas </head>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot;;
    summary_noimg = 300;
    summary_img = 280;
    img_thumb_height = 100;
    img_thumb_width = 120;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(thumbnail_mode == "yes") {
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>
    keterangan:
    • var thumbnail_mode = "yes" diset yes akan menampilkan thumbnail
    • summary_noimg = 300; adalah banyaknya karakter yang akan ditampilkan jika tidak ada gambar dalam postingan.
    • summary_img = 280; adalah banyaknya karakter yang akan ditampilkan jika ada gambar dalam postingan.
    • img_thumb_height = 100; adalah tinggi gambar thumbnail.
    • img_thumb_width = 120; adalah lebar gambar thumbnail.
  • Catatan: besarnya angka di atas dapat disesuaikan dengan keinginan anda.
  • Selanjutnya cari <data:post.body/> dengan menggunakan Ctrl+F, jika sudah lalu ganti dengan script berikut:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <a class='more' expr:href='data:post.url'>Read More >></a>
    </b:if>
    </b:if>
  • Keterangan:
    • <b:if cond='data:blog.pageType == &quot;static_page&quot;'> dapat mengatasi halaman statis (statics page) yang tidak tampil.
  • Selesai, untuk amannya lebih baik di-preview dulu, jika sudah benar baru disimpan.

Cara Buat Read More Otomatis

Cara Buat Read More Otomatis. Sebelumnya dari Hackosphere pernah dikenalkan read more yang menggunakan script kode <span id="fullpost"> yang ditempatkan diawal kalimat lalu dilanjutkan dengan kalimat berikutnya sampai akhir lalu diberikan script kode </span>. Kini ada cara yang lebih enjoy dikit, karena ada read more otomatis sehingga tidak perlu lagi menggunakan script kode <span id="fullpost"> ... </span>.

Berikut ini langkah-langkah cara membuat read more otomatis :
  • Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  • Download dulu template anda sebelumnya.
  • Gunakan Ctrl+F untuk mencari </head>
  • Jika sudah, lalu copy script di bawah ini tepat di atas </head>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 230;
    summary_img = 140;
    img_thumb_height = 100;
    img_thumb_width = 120;
    </script>
    <script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>
    keterangan:
    • summary_noimg = 300; adalah banyaknya karakter yang akan ditampilkan jika tidak ada gambar dalam postingan.
    • summary_img = 280; adalah banyaknya karakter yang akan ditampilkan jika ada gambar dalam postingan.
    • img_thumb_height = 100; adalah tinggi gambar thumbnail.
    • img_thumb_width = 120; adalah lebar gambar thumbnail.
    Catatan: besarnya angka di atas dapat disesuaikan dengan keinginan anda.
  • Selanjutnya cari <data:post.body/> dengan menggunakan Ctrl+F, jika sudah lalu ganti dengan script berikut:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
    </b:if>
    Keterangan:
    • padding-top:5px, merupakan jarak antara tulisan di atas dengan readmore.
    • float:right, merupakan posisi readmore, yang akan muncul di sebelah kiri.
  • Selesai, untuk amannya lebih baik di-preview dulu, jika sudah benar baru disimpan.

Cara Buat Read More

Read More. Pertama kali digunakan pada platform WordPress, di Blogspot pada awalnya belum dapat menggunakan fungsi ini, berkat bantuan Hackosphere, untuk pertama kalinya fungsi Read More dapat difungsikan pada platform Blogspot. Konsepnya sederhana yaitu dengan memenggal sebuah kalimat menjadi dua bagian. Di mana pada bagian pertama adalah kalimat awal yang akan ditampilkan beberapa baris sesuai kehendak Anda kemudian diberikan fungsi <span id="fullpost"> lalu dilanjutkan dengan kalimat berikutnya sammpai akhir lalu diberikan fungsi </span> seperti gambar di bawah ini.


fungsi ini dapat dibuat secara otomatis, tanpa harus mengetikkan setiap kali membuat postingan, maka fungsi ini <span id="fullpost"> .... </span> dapat dimasukkan pada setelan di bagian entry posting.

Selanjutnya fungsi yang harus dimasukan pada bagian template, dilakukan dengan cara :
  • Masuk ke bagian Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  • gunakan Ctrl+F untuk mencari <div class='post-body', tampilannya sepert ini:
    <div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>#fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <a expr:href='data:post.url'>Read more...</a>
    </span>
    <script type='text/javascript'>
    checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
    </script>
    </b:if>

    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <div class='post-footer'>

    <div class='post-footer-line post-footer-line-1'>
    <span class='post-author'>
    script kode yang berwarna hitam adalah script asli template yang belum memakain read more, dan yang berwarna merah adalah script yang harus ditambahkan ke dalam template.
  • Selesai, jangan lupa disimpan.
  • Catatan : bila tidak menginginkan adanya read more pada template anda, cukup dihapus script kode <p><data:post.body/></p>

Januari 13, 2011

Cara Membuat Daftar Isi Blog

Berikut ini langkah-langkah cara membuat breadcrumb:
  1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
  2. Sekedar saran, download dulu template anda sebelumnya untuk keamanan jika terjadi sesuatu anda tinggal upload ulang template sobat.
  3. Gunakan Ctrl+F untuk mencari <b:include data='post' name='post'/>
  4. Jika sudah ketemu, dihapus dan diganti dengan kode di bawah ini:
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
    <data:post.title/></div></a>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    lalu disimpan.
  5. Kemudian letakkan (paste) kode di bawah ini untuk menampilkan link Daftar Isi, lalu disimpan.
    <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>
    ganti http://NamaBlogAnda.blogspot.com dengan url blog sobat.
  6. Selesai.

Cara membuat daftar isi otomatis
.

Demikian cara membuat daftar isi yang sederhana tanpa memerlukan javascript, smoga bermanfaat.

Copyright © / dillablog

Template by : Urang-kurai / powered by :blogger