Iklan 300 x 250

Random Post

Recent Post

 

Membuat Related Post Bergambar Atau Thumbnail

Text Resizer: Click for Resizer
Banyak sekali model-model related post,seperti model related post standart,model related post fungsi scroll dll. Begitupula dengan related post yang satu ini yakni related post bergambar atau dalam bahasa inggris thumbnail related post, dinamakan related post bergambar atau thumbnail related post karena tampilannya cukup menarik dengan adanya gambar atau thumbnail. Sehingga akan tampak lebih menarik dan merupakan salah satu cara untuk mempercantik blog yang kita miliki. Sebagai contohnya lihatlah gambar dibawah ini:


Bagaimana setelah anda melihat contoh diatas apakah sobat tertarik untuk membuatnya. Jika tertarik untuk membuat related post bergambar, langkah-langkahnya sebagai berikut :

1.Log in ke blogger.com dengan ID yang dimiliki
2.Klik Rancangan pada dashboard menu
3.Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
4.Selanjutnya cari kode berikut </head>
5.Letakkan kode di bawah ini sebelum kode tersebut :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
6. Sekarang cari lagi kode dibawah
<div class='post-footer-line post-footer-line-1'>
Jika tidak menemukan kode diatas, coba cari kode seperti ini
<p class='post-footer-line post-footer-line-1'>
Kalo sudah ketemu, sobat tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.
<!-- Related Posts with Thumbnails Code Start-->
<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>
<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'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
7. Langkah terakhir Simpan Template kemudian lihat hasilnya.

Keterangan : kode yang berwarna merah dapat diganti sesuai dengan yang sobat inginkan, #585858 (kode background), Angka 5 menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Judul yang diinginkan).

Selamat mencoba dan Semoga bermanfaat,silahkan tulis komentar dibawah ini jika ada pertanyaan. Silahkan baca juga artikel selanjutnya tentang membuat relatedpost bergambar dan bergerak.


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Related Post Bergambar Atau Thumbnail
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

15 komentar:

waduh
udah nambah lagi nih
ijin simpen dulu ya gan
tak pelajari dulu :e:

@Faris Farhan

Ok sobat silahkan dipelajari ya :j:

mau coba ah :)

mantabbb!! ngomong2 klo g salah ada website yg namanya LINKWITHIN yang menyediakan layanan kyk gini y sob...? :x:

Unknown mengatakan... Reply Comment

gw ko ga muncul ya :e:

@Full Blog Tricks

Yupz benar sekali :a:

Tetapi pada tutorial related post ini kita tidak menggunakan layanan dari linkwithin melainkan kita membuatnya sendiri di blog kita :r:

@Adwinyha

Aku cek dulu sobat :e:

wildan mengatakan... Reply Comment

revisi
"..................post-footer-line-1'>"
seharusnya
"..................post-footer-line-1'/>"

salam hangat... wildanadibi.co.cc

Koq gak kluar Gan??

mantap nih mas... makasih tipsx..
bdw berhail kok..bisa d lihat hasilnya..

pny'ku berhasil, tapi koq g' bergerak ya mas...
tlong pencerahannya
:b:

:b kacau gan kok gx isa ya, padahal, swaktu di save tamplate berhasil, trus waktu ana klik View blog ap nya yg berubah????
Mohon pencerahannya....
http://sangpublisher.blogspot.com

ria mengatakan... Reply Comment

makasih mas, berhasil.
dilihat dong

dl mengatakan... Reply Comment

ga bisa berhasil gagal nih
http://shareknowledge-dlaksi.blogspot.com/2011/09/ptc-di-bayar-euro.html
:W:

shinta mengatakan... Reply Comment

thx infonya mas. .
mampir ke blog ku ya http://www.barcalover10.co.cc

kok relatednya gak nampil ya di blogku... kira2 kenapa yaa... ? mohon bantuannya... (http://nihlah-life.blogspot.com)

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky