Cara Membuat Widget Artikel Terkait dengan Gambar di Blogger

Kali ini saya akan membuat artikel mengenai Cara Membuat Widget Artikel Terkait Dibawah Postingan Dengan Gambar. Untuk lebih jelasnya silahkan sobat liat gambar dibawah ini.

Sobat Login ke akun blog sobat.

Pilih Template =>> Edit HTML. (Saya sarankan untuk mem-backup dulu template sobat untuk menghindari hal-hal yang tidak diinginkah / error). Sobat cari kode berikut </head> Untuk mempercepat pencarian sobat tekan Ctrl+F di kotak script Edit HTML sobat. Kemudian letakan kode dibawah ini tepat diatas kode </head>

<!--Related Posts http://wolf-86-gtm.blogspot.com/ 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: 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://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>

</b:if>

<!--Related Postshttp://wolf-86-gtm.blogspot.com/ Styles End-->

Lalu sobat cari lagi kode <data:post.body/> Untuk mempermudah pencarian gunakan Ctrl+F di kotak Edit HTML. (biasanya ada 3 kode seperti ini. Jika memang benar, pilih kode yang ke 2)

Copy kode berikut, dan letakan di bawah kode <data:post.body/>

<!--Related Posts http://wolf-86-gtm.blogspot.com/ Styles 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>Related Posts</b></h3>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=10;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://wolf-86-gtm.blogspot.com/' style='display:none;'></a>

</b:if>

</b:if>

<!--Related Posts http://wolf-86-gtm.blogspot.com/ Styles End-->

Kode yang berwarna Hitam bisa sobat ganti dengan kata-kata sobat sendiri apakah Artikel Terkait / Related Post.

Kode yang berwarna Hijau adalah kode banyaknya artikel terkait yang akan di tampilkan di blog sobat, jadi modifikasikan sesuai dengan keinginan dan kebutuhan sobat.

Kode yang berwarna Biru sobat ganti dengan alamat URL blog sobat.

Kemudian Simpan Template dan lihat hasilnya.

Ditulis Oleh Unknown Tanggal Wednesday, October 15, 2014 | 2:37 AM

Bagikan Artikel ini Di :

Tweet