• put your amazing slogan here!

    Blogger tutorial Membuat Widget Related Post / Artikel Terkait


    Mungkin anda pernah melihat related post blog lain yang sangat bagus dengan icon atau gambar disamping judul related post, jika anda ingin membuatnya Related Post Widget for Blogger dengan Javascript ini menggunakan sebuah javascript dari
    http://theblogtemplates.com/scripts/Related_posts_hack.js, silahkan anda melihat sumbernya. Dan untuk lebih baiknya anda download dan upload di hosting anda supaya sewaktu-waktu tidak hilang jika JS dari sumbernya ini sudah dihapus. Tampilan dari related post ini sangat unik dan menarik serta juga dapat membuat pembaca blog anda melihat beberapa posting yang mungkin tertarik untuk melihatnya juga.
    Untuk contohnya bisa anda lihat dibawah posting ini. atau ini pada gambar dibawah:

    Related Post Widget Untuk Blogger (Keren Abis!)
    Lihat Gambar Besar

    Untuk cara membuatnya ikuti langkah-langkah berikut ini:

    1. Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Related Post Widget.
    Gb.1


    2. Selanjutnya pilih tab Edit Html (Gb.2).

    Widget Artikel Yang Berhubungan.
    Gb.2


    3. Setelah itu centang tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Artikel Terkait / Yang Berkaitan Widget.
    Gb.3



    Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

    <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

    Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:
    <br/><br/><b:if cond='data:blog.pageType == "item"'>
    <div id="related-posts">
    <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>


    Setelah itu anda save dan selesai. realted post anda kini lebih bagus, jika anda mau merubah iconya dengan icon yang lain/icon anda sendiri anda tinggal edit Javascriptnya tadi dan usahakan ukuran gambarnya sama jadi tidak akan merubah tampilan seperti halnya nanti terlalu besar ataupun terlalu kecil. selamat mencoba ^^

    14 komentar:

    1. Nice post,, I like your blog,,,,

      ReplyDelete
    2. blognya keren !!!
      terima kasih atas tipsnya.

      ReplyDelete
    3. dhiibhiehh : terima kasih ,, n sama2 smoga bermanfaat ^^

      ReplyDelete
    4. kolom lyrics silahkan bro :D

      ReplyDelete
    5. I love your each post and each post is unique and different really i am inspired from your blog.

      ReplyDelete
    6. website ,, thanks a lot,, n the bad thing is i cant always keep the post right now,, so bussy with my job ,, thanks for comming :)

      ReplyDelete
    7. thank gan..,
      follow pnya saya jga yaa..
      http://nikoselex.blogspot.com/

      ReplyDelete
    8. Tampilan dari related post ini sangat unik dan menarik serta right herejuga dapat membuat pembaca blog anda melihat beberapa posting yang mungkin tertarik untuk melihatnya juga.

      ReplyDelete
    9. Tampilan dari related post ini sangat unik dan menarik serta juga dapat membuat pembaca blog anda melihat beberapa posting yang mungkin tertarik untuk melihatnya juga. essay help

      ReplyDelete
    10. BlueHost is ultimately one of the best hosting provider with plans for all of your hosting needs.

      ReplyDelete

     

    About Me

    My Photo
    Hi, Im joys, Its my dreaming to be a full-time blogger, imagining a master blogger. But until now all still the same, just an ordinary Joys, newbie a blogger who tries to writing and share information about the culture of blogging. begin actively blogging from september 2009... read more about me

    Recent Comments

    Followers