Membuat Artikel terkait v3.0
















aduh, tumben sehari Bisa Update 2 postingan?, jawabannya, saya ingin bagi-bagi ilmu sekarang, karena kemungkinan 2 minggu ke depan susah update dikarenakan akan ada Final Exam, doakan saya ya semoga naik kelas dengan hasil memuaskan, oia apa sih yang dibahas? Tutorial Blog pastinya, sekalian mau ngasih tau Mas Sawebring kalau script yang dia post di blog ada yang rusak, cepat diperbaiki Mas, biar pengunjung gak kecewa, loh-loh, knpa pada mangap? heran sama tampilan blog saya ya? iya nih, saya ganti template soalnya yang dulu ngeloadnya lama banget, bisa-bisa pengunjung yang punya koneksi lelet kabur duluan. Ekhem, oke, postingan saya kali ini adalah

Membuat Artikel terkait v3.0

Artikel ini sedikit diambil dari Blogger Tune Up, makasih ya mas scriptnya, emang sip nih, saya juga tergiur dari Blog Dj-Site yang pake sistem artikel terkait V3.0. Apa sih bedanya? bedanya tuh yang ini gak kayak biasanya, Artikel terkait ini disertai gambar 75x75 pixel yang membuat tampilan lebih menarik, berbeda dengan Artikel Terkait versi terdahulu yang tampilannya standar-standar saja. Ya udah langsung aja mulai tutorialnya.

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Tata Letak - Edit HTML"

Langkah 3
Checklist "Expand Template Widget"

Langkah 4
Cari kode dibawah ini

</head>


Langkah 5
Masukan kode CSS dibawah ini tepat diatas kode pada langkah 4
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:black;}
#related-posts a:hover{color:black;}
#related-posts a:hover {background-color:#d4eaf2;}
</style>
<script src='http://hensblog.googlecode.com/files/rpthumbsv30.js' type='text/javascript'/>
</b:if>



Langkah 6
Cari kode dibawah ini:

<div class='post-footer-line post-footer-line-1'>



jika tidak ditemukan, coba cari kode dibawah ini:

<p class='post-footer-line post-footer-line-1'>



Langkah 7
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 6:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<a href='http://modification-blog.blogspot.com/2009/08/membuat-artikel-terkait-versi-30.html' style='display:none;'>Related Posts with thumbnails for blogger</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>



Langkah 8
Simpan template dan lihat hasilnya


Keterangan:

* var maxresults=5; = Ubah nilai 5 untuk menentukan jumlah artikel terkait yang akan ditampilkan
* var relatedpoststitle="Artikel Terkait"; = Ubah kalimat "Artikel Terkait" sebagai nama widget

Sekian Deh Postingan hari ini, Ditunggu komentarnya NO SPAM OK!!!

4 Response to "Membuat Artikel terkait v3.0"

camera said...

wah berat juga ilmunya..

hehehe...

Ferdinand said...

hahaha......tertarik sama punyaku ya Sob hhe......wah udah langsung dipraktekin ....... tambah keren aja nie Sobat....yg pasti klo dipasang related pake gambar jd nambah yg koment Sob.....wkwkwkk,....

Wah ujian kenaikan kelas toh??? smoga sukses brow.....

dicky renaldy said...

8-} 8-} 8-} 8-} 8-}
Thx ya ...

adekur said...

makasih atas trick nya...

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Silahkan Komentarnnya Mas, Tapi Jangan SPAM!!!