Cara Membuat Related Post Bergambar di Bawah Postingan

Cara Membuat Related Post Bergambar di Bawah Postingan

related post bergambar
Membuat Artikel Terkait / Related Post Dengan Thumbnail Bergeser Di Bawah Postingan


Membuat Artikel Terkait atau Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

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

Kemudian cari kode seperti di bawah ini

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

atau kalau enggak ada cari yang seperti di bawah ini

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

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.
<!-- Marquee Kompiajaib 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://sarifpbg.blogspot.com/2012/12/cara-membuat-related-post-bergambar-di.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.


Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

Terima kasih telah membaca artikel tentang Cara Membuat Related Post Bergambar di Bawah Postingan , Jika anda merasa artikel ini penting,akan sangat membantu dan berguna bagi orang lain jika membagi dan mensharenya dengan mengklik icon G +1, Facebook dan Twitter disamping.

Judul: Cara Membuat Related Post Bergambar di Bawah Postingan
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Bfc Sarif SatriaSatriaan

Silahkan tinggalkan jejak anda di kolom komentar. Terima Kasih.

Baca Artikel Menarik Lainnya:

Teknik Rahasia Sukses Bisnis Online ClickBank



Dapatkan Artikel dan Informasi dari Tips dan Cara Mudah secara GRATIS
Silahkan masukkan Email Anda disini

BfcSarifBlog
Diposkan oleh Bfc Sarif SatriaSatriaan
Bfc Sarif Blog | Berbagi Tips dan Cara Mudah Updated at: 1:43 PM

41 comments

February 25, 2013 at 7:31 PM delete

makasih gan, info yg sangat menarik ne....

February 26, 2013 at 4:33 PM delete

@Driver Collectionsama-sama kawan,semoga bisa membantu :)

March 3, 2013 at 11:18 AM delete

Ini...sebelum tu diatas head ???

March 3, 2013 at 11:36 AM delete

@Alif Maulidinmaksudnya yang mana?

March 7, 2013 at 7:31 PM delete

keren sob, dicoba dulu..

ditunggu kunjungan baliknya di Suplemen Sun Hope

March 8, 2013 at 2:11 PM delete

mantap...mksh infonya

March 8, 2013 at 4:41 PM delete

@Rama Banten Blogssama-sama,semoga bermanfaat :)

March 31, 2013 at 9:00 PM delete

terimakasih ya gan, mantappp! kunjungi balik punya ane gan, banyak tips pasutri ni :)

April 4, 2013 at 9:24 PM delete

gak work gan .........

April 5, 2013 at 6:53 AM delete

@Tips pasutriokke terima kasih kunnjungannya :)

April 5, 2013 at 7:14 AM delete

@Bayu Qreenterima kasih atas koreksinya..
sekarang sudah saya updet yg terbaru,silahkan mas pake script ini aja <script src='https://bfcsarif.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>

April 12, 2013 at 1:47 AM delete

@Driver Collection kok script js nya eror mas..?

April 13, 2013 at 12:03 PM delete

@Tante Siskasudah saya updet tante :)

April 21, 2013 at 9:28 PM delete

makasi buat info nya mas

April 24, 2013 at 1:40 PM delete

mksi gan ibfo...dah aku pasang di blogq!
follow balik mas http://anrhy.blogspot.com

April 26, 2013 at 10:09 PM delete

mantappp banget dah gan infonya ini..
thanks ya, kalo bisa mampir balik ke blog ane www.infoahmadi.com

April 30, 2013 at 11:23 AM delete

thanks infonya...

May 6, 2013 at 11:22 PM delete

mantap mas
di tunggu atas kunjungannya
http://arletabloger.blogspot.com/

June 21, 2013 at 2:07 PM delete

Kunjungi jga Cara Blog Agar Tidak Bisa di CTRL+U Dengan Gambar

Link : http://jam-vista.blogspot.com/2013/06/cara-blog-agar-tidak-bisa-di-ctrlu.html

June 30, 2013 at 6:45 PM delete

Wah makasih bgt ini, utk artikel ini pas bgt sama desain blog saya.

August 7, 2013 at 11:38 AM delete

mas saya sarankan jangan pake sumber atomatis, soalnya waktu copy scriptnya sumbernya kebawa dan malah error. Atau scriptnya di google docs aja

August 8, 2013 at 12:23 PM delete

Di tempat ane gak tampil maz broo,, gemana solusinya,,, silahkan chek dulu trim's

September 3, 2013 at 5:41 PM delete

Ane juga gak jalan gan... help

September 11, 2013 at 1:26 PM delete

cuma nampak get this widget + gambar 18+,, waduh.. ngak percaya liat aja sendiri di http://goodfreedownload.blogspot.com

November 28, 2013 at 5:40 AM delete

Gan, cara buat popular post kayak di samping gimana? Thanks

December 1, 2013 at 2:41 PM delete

ma kasih sob

January 13, 2014 at 6:43 PM delete

blognya bagus gan.penerapan kodenya bisa dipasang pada web saya.http://www.serbahot.merabah.pw

January 16, 2014 at 1:07 PM delete

@Kang Sipitalhamdulilah..
salam sukses gan :)

January 16, 2014 at 1:07 PM delete

@Sun Hope Indonesiasama sama gan :)

January 16, 2014 at 1:09 PM delete

@Kang Gurusilahkan baca postingan Cara Membuat Popular Post Warna Warni :)

March 7, 2014 at 7:07 PM delete

gan, kalo mau ganti ukuran dan warna tulisan 'Baca Juga Artikel Terkait Lainnya:' yang mana gan?

March 11, 2014 at 6:26 PM delete

mantabs,,,,sangat membantu gan...
http://www.kumpulan-berita-unik.com/

March 13, 2014 at 11:51 AM delete

@Fajr Momotarosudah ada caranya di atas gan,silahkan dibaca dengan teliti lagi :)

March 13, 2014 at 11:52 AM delete

@wong transama sama terima kasih kunjungannya kawan :)

March 17, 2014 at 4:13 AM delete

gak berhasil gan...Thanks ya
www.kuatkurniawan.blogspot.com

April 6, 2014 at 7:34 AM delete

mau coba dulu, thanks ya

April 9, 2014 at 10:45 PM delete

Berdasarkan label ya gan?

April 10, 2014 at 12:09 PM delete

Udah coba n berhasil... makasih mas... :)

August 24, 2014 at 6:19 PM delete

mksh mastah utk artiklnya...

August 24, 2014 at 6:21 PM delete

salam blogwalking gan..

August 24, 2014 at 6:22 PM delete

thanks agan tutornya bagus

Post a Comment

 
Design by Bfc Sarif SatriaSatriaan | Support D-S Barokah Eyelashes - Produsen Bulu Mata Palsu Purbalingga Produsen dan Penjual Bulu Mata Palsu Murah