Click Here

Labels

Thumbnail Related Post (Artikel Terkait Menggunakan Gambar)

Setelah kemaren membahas tentang cara membuat related posting versi Daftar list berdasarkan label, nah kali ini mencoba mengangkat versi lainnya dalam membuat Related Posting. Untuk kali ini, Related Posting yang akan dipaparkan yaitu menggunakan "Gambar". Untuk contohnya, silakan anda scroll halaman blog ini hingga bagian bawah posting.
Setelah anda puas melihatnya, mungkin ada yang tertarik untuk menggunakannya, anda bisa lanjutkan membaca artikel ini hingga akhir, jangan lupa untuk mempraktekkannya juga yaaa...

Oke, cara untuk membuat Related posting ini sebagai berikut :
  • Login dahulu ke Blogger
  • Masuk pada Tata Letak/Layout
  • Lalu pilih Edit HTML
  • Centang tulisan Expand Widget Template
  • Kemudian cari code ini </head>
  • Letakkan code dibawah ini sebelum code </head> tadi

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

  • Langkah selanjutnya, cari code ini
<div class='post-footer-line post-footer-line-1'>
  • Jika tidak menemukannya coba cari yang ini
<p class='post-footer-line post-footer-line-1'>
  • Jika sudah ketemu, letakkan code dibawah ini Setelah code diatas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->


Jika anda ingin merubah warna atau yang lainnya, anda bisa merubah dibagian CSS.

Jika blog anda  tidak menggunakan sistem Read More, dan anda ingin menampilkan Related Posting ini di seluruh halaman, tidak hanya di postingan pertama saja, silakan hapus code yang diberi tanda keterangan <!-- remove --> pada code di dalam kotak yang pertama dan kedua

Selamat mencoba
Semoga bermanfaat
Terima Kasih
(Sumber : http://www.bloggerplugins.org)
Harga Notebook Acer Aspire S3 Ultrabook

Sudah 18 Orang Berkomentar, Silakan anda yang selanjutnya :

Komentar dari ngepostingdoang :

pertamax sOb,,
bOleh jUga nI sOb,,
tHanks ya,,

Komentar dari Bayu Lebond :

asemik...telat...langsung diotopsi HTMLnya sam...

Komentar dari Ngeposting ni yee :

sOb di bLog aq gak bIsa di jUmpai code yang ini sOb
"div class='post-footer-line post-footer-line-1'"
" p class='post-footer-line post-footer-line-1'"

Komentar dari Bayu Lebond :

KODE 2 7 3 GAK ADA SAM...

tp sayang...code yg ini gak ada diblog gw...

Komentar dari G E O R G E O U Z :

@ Ngeposting ni yee & Mas bayu lebond :
nah...kebetulan menggunakan template yg sama, utk template ini letakkan script code kotak kedua setelah code-> <p><data:post.body/></p> yang ketiga....
udh dicoba koq...berhasil...

Komentar dari Bayu Lebond :

tengkyu...emang tuh si ngeposting ni yee ngikutin gw...wkwkwkwkwkwkw

Komentar dari Ngeposting ni yee :

hehehe,,
tHanks sOb,,

Komentar dari cozyeslife :

wah puyeng lagi aku..... mantap grak

Komentar dari sulastiono :

makin mantap saja tutorialnya, bikin ngiler pakde untuk bisa buat tutorial yang bermutu
moga tambah sukses kawan

Komentar dari Ambar :

related postnya keren sob.. pake thumnails gitu.. jadi lebih menarik..

Komentar dari G E O R G E O U Z :

@ bayu lebond & ngeposting nie : smoga berhasil...
@ cozyeslife : santai sob...jgn diambil pusing...
@ Pakde sulas : thanx pakde, moga sukses
@ ambar : thanx sob...

Komentar dari Sayyid Ali Ridho Bin Yahya :

keren sob, tapi kok postingan yg gak bergambar gak tampil ya?yg bergambar doank yg tampil, gmana solusinya sob?

Komentar dari crowjagarichu :

Tks atas petunjuknya.. bisa tampil di postingan tp tidak muncul di halaman depan. Dan tidak slideshow.. Gmn gan solusinya.. slm kenal

Komentar dari Asgin :
This comment has been removed by the author.
Komentar dari kaseenoer :

Maaf kok disaya nggak nonggil yah... padahal dah sesuai dengan petunjuk...ada apakah...???? tx sob

Komentar dari @kampungan :

iyani mz... d blog gw koq g tmpl jg ya,,, solusi ny mz..

Komentar dari The Creation :

oke2...sudah q coba gan maksih yak....

Komentar dari gusari iman :

Assalamualaikum bg,
Ne ane dah simpan sesuai dengan petunjuk di atas, tapi kok gk ada artikel terkaitnya ? pencerahannya di tunggu bg..

Syukron dah berusaha membagi ilmunya..
Jazakumulloh.

Silakan Tulis Komentar Anda di Bawah ini :

Silahkan tulis komentar anda dibawah ini, namun diharapkan jangan melakukan spamming,hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat