Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, October 15, 2013

cara membuat related post thumbnail

Related post thumbnail adalah suatu andalan blogger, cara membuat related post thumbnail di blog sangat beragam.Related post thumbnail pada postingan kali ini memiliki design yang menarik dan unik. Buat para blogger mania menggunakan widget related post thumbnail adalah salah satu cara meningkatkan trafik pengunjung blognya. Jadi tidak salah jika kita mengikuti prinsip para blogger mania tersebut untuk, untuk melihat tehnik pemasangan related post thumbnail paa halaman blog kesayangan anda, silahkan simak penjelasan dibawah ini, jangan lupa klik DEMO untuk melihat tampilan aslinya setelah halaman terbuka lihat tulisan kuning " Related Post Thumbnail " nah itu dia tampilannya, langsung saja menuju TKP.

Demo


Install Program CSS

  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code </head> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code </head> yang anda cari tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*****************************************
Name : Widget Related Post Thumbnail
By : Rivai Silaban | Blog Design
Update : Selasa, 15 Oktober 2013
******************************************/
#bdrsrelated-thumbnail {
background:#cccccc;
padding:1px;
margin:10px auto;
}
#bdrsrelated-thumbnail h2{
color: #00CCFF;
margin:0;
padding:5px 0 10px 0;
font-family: Georgia;
font-style: italic;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
text-align: center;
}
#bdrsrelated-thumbnail a{
position:relative;
padding:15px;
margin:13px;
color:#990000;
background:#eee;
border-radius:10px;
font-family: Verdana;
font-size: 14px;
font-style: italic;
font-weight: bold;
border: solid #999999 1px;
background-color: #F4F4F4;
}
#bdrsrelated-thumbnail a:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:45px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#F4F4F4;
}
#bdrsrelated-thumbnail a:hover{
background-color:#999999;
}
#bdrsrelated-thumbnail a:hover:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:45px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#999999;
}/* CSS end Widget Related Post Thumbnail */
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://4.bp.blogspot.com/-vfA36HQetAQ/UkBmDD_cN9I/AAAAAAAAB2Q/TTADbwWFavo/s1600/no-gambar.jpg&quot;;
var maxresults=4;
var splittercolor="";
var relatedpoststitle=&#39;Related Posts Thumbnail&#39;
</script>
<script src='http://yourjavascript.com/421401735101/related-thumbnail.js' type='text/javascript'/>
</b:if>


Install Program Tag HTML

  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Cari code
    <div class='post-footer-line post-footer-line-2'/>
    atau Kode
    <div class='post-footer-line post-footer-line-3'/>
  • Copy kode dibawah ini pastekan tepat dibawah code diatas.
    Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
  • Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
  • Copy Code HTML dibawah ini, paste di bawah code
    <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti related post diatas sosial share yang ada dibawah postingan ini.
  • Save template anda dan lihat hasilnya, selamat atas keberhasilan anda.

lt;!--BDRS start related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bdrsrelated-thumbnail'>
<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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- BDRS end related posts-->



Kesimpulan

Widget related post thumbnail ini memiliki tampilan yang menarik dan code yang ringan. Pemasangan widget related post thumbnail pada halaman blog kesayangan anda merupakan suatu trik jitu untuk meningkatkan pengunjung blog anda.

Bila anda mengalami kesulitan dalam memasang widget related post thumbnail ini pada template anda atau menemukan kode yang error silahkan hubungi saya atau anda bisa saja share bersama saya melalui form komentar dibawah ini. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda, Selamat berkarya.

Widget related post thumbnail
Selasa, 15 Oktober 2013
Owner BLOG DESIGN | Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 6:12 PM

16 comments :

  1. Kalau related post ada title nya gimana yah mas? soalnya saya masih pemula. Di tunggu jawabanya ya mas saya izin bookmark dulu :)

    ReplyDelete
    Replies
    1. coba dulu di cek halaman dengan label 'related post' pada link diatas halaman ( label dibawah heaer halaman ) mas, soalnya semua tentang pembuatan related post ada pada halaman tersebut.

      Delete
  2. supaya gambarnya ga berbentuk bulat gmna?

    ReplyDelete
    Replies
    1. cari kode border-radius: 50%; , kalo sudah ketemu hapus saja

      Delete
    2. kode border-radius:50%; saya sematkan di javascriptnya..

      coba browsing kode ini
      http://yourjavascript.com/421401735101/related-thumbnail.js

      setelah di browsing simpan balik di penyimpanan hosting atau di situsnya mas, agar lebih ringan, soalnya bila dipenyimpanan saya ini kemungkinan sudah banyak yang make jadi nantinya seikit lambat...

      Delete
  3. wow keren blognya...bisa seperti ini berapa lama ngeditnya mas^_^

    ReplyDelete
    Replies
    1. wah lumayan lama gan buat dari dasar... bisa bulanan gan..

      Delete
    2. biasanya agan cari tutornya di link apa,soalnya udah cari di google standart semua,pengen coba bkin yg woow hee ^_^...kirim ke email ane aja ya gan....boleh gak ^_^

      Delete
    3. Untuk pembuatan template saya pikir tutorialnya tidak adalah, soalnya membuat template ini memerlukan penguasaan tag tag html dan script jadi saya pikir buat tutorialnya sangat repot makanya untuk tehnik ini mungkin tidak ada, saya memahami tag html ini memang jurusan saya dulu pemprograman mas jadi sedikit memahami blogspot ini..

      Delete
  4. ini related postnya keren banget sob.berhasil dan work dipasang diblog saya.salam kenal dan terus berkarya buat posting artikel menarik lainnya.

    ReplyDelete
    Replies
    1. salam kenal juga gan...
      thx atas pendapatnya..

      Delete
  5. Matur Thanks gan, blog ane sukses pake itu cara, tapi kode ini
    lt;!--BDRS start related posts--> muncul di halaman post punya ane gan, di beranda dan postingan artikel. Trus saya coba-coba ganti menjadi
    eh berhasil gan, tak muncul lagi di beranda dan postingan blog ane. Trimk. Salam Kenal. maap sedikit merubah kode itu.

    ReplyDelete
  6. berhasil, tutorial sangat jelas, tq

    ReplyDelete
  7. Thank buat tutorialnya gan :D sukses! Btw ini related di ane nongol cuma 3, pengen ditambah jadi 4 gimana caranya ya gan? :bingung

    ReplyDelete
  8. Gan tutornya berhasil, tapi related postnya jadi dua gan, sama yg sebelumnya, cara hapusnya gmana ya gan... tolong gan stub-out(dot)blogspot(dot)com

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog