Minggu, 12 Februari 2012

Cara Membuat Related Post Dengan Icon


By on 16.03

Kali ini saya akan berbagi Tips Dan Tutorial Blog yaitu Cara Membuat Related Post Dengan Icon yang biasanya kamu temukan Related Post atau Artikel Terkait hanya link dan nomer saja, nah kali ini saya akan berbagi Tips untuk mempercantik Related Post atau Artikel Terkait dengan Memberi Icon disamping Link nya. Kaya di Blog Blazer



Langsung aja Cara Membuatnya
  • Login Ke Blog kamu.
  • Pilih Rancangan.
  • Pilih EDIT HTML.
  • Jangan Lupa Centang Expand Widget Template.
  • Lalu Copy Kode di bawah ini dan letakan di bawah kode </head>
<style type='text/css'> #related-posts { float : left; width : 100%; 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(&quot;http://3.bp.blogspot.com/-NxjtveQnzGg/TzZKcBnn_OI/AAAAAAAAAhg/ujxyW7hxzl4/s1600/Rss-icon+(11).png&quot;) 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://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>
Sobat bisa ganti kode yang berwarna Merah dengan URL Icon lainnya.

Selanjutnya Cari Kode <data:post.body/>, lalu copy kode Di bawah ini tepat di bawah kode <data:post.body/>

<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>
Jika sobat menemukan 2 kode <data:post.body/> letakan aja di bawah kode yang ke 2 nya.
Jika sobat menemukan masalah haraf tinggalkan pesan di Kotak Komentar, dan jika sobat kebingungan Cari Icon nya lihat ini  Kumpulan Icon Keren

SELAMAT MENCOBA

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

13 komentar:

  1. Gan, artikelnya sungguh sangat bermanfaat.

    Oh ya bila Agan berkenan, ane ada sebuah trik untuk Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot.

    Salam kenal dan terimakasih.

    BalasHapus
  2. @Semar Bingung terimakasih atas kunjungan nya gan.

    BalasHapus
  3. waaaah... mantap gan :) udah ane coba nih, thx ya...
    tolong kunjungi juga blog peta konsep saya, isinya berbagai macam ilmu :) dan jangan lupa tinggalkan pula komentar :)

    BalasHapus
  4. mantap gan, ilmunya sangat bermanfaat terima kasih atas sharingnya gan, visit back ya gan..........

    BalasHapus
  5. Mas..
    punya saya ada 4 yang ini () di taroh yang mana gan...

    BalasHapus
  6. ralat dari ardian, data:post.body, kode yang ituada 4 di blog saya,trus di taroh di mana..?

    BalasHapus
  7. Taruh aja di kode yang kedua.

    BalasHapus
  8. nah,di blog saya malah ga ada gan (data:post.body )nya ada solusi lain nggaa..??

    BalasHapus
  9. Sebelum mencari kode tersebut, Centang Dulu Expand Widget Template nya yang ada di kanan pojok atas, kalau ga di centang pasti ga akan ada

    BalasHapus
  10. kalau membuat kotak tulisan "Hallo Sahabat Blazer Blog,Kamu dapat menemukan artikel ini dengan URL..." gimana mas..?

    BalasHapus
  11. @cimotivator : kata diatas sama dengan permalink tapi saya edit, jika sobat mau tahu cara membuatnya silahkan baca http://blazerracing.blogspot.com/2012/01/cara-membuat-permalink-di-bawah-posting.html

    BalasHapus
  12. makasi yah telah berbagi.. salam kenal

    BalasHapus