Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Selasa, 21 Juni 2016

Widget Related Post dengan Gambar

Widget ini sebagaimana widget lainnya memang memiliki banyak versi, kalau yang sebelmnya hanya dilengkapi judul, widget berikut dilengkapi juga dengan thumbnails (image/gambar) yang dapat mempercantik tampilan related post pada blog anda. Widget ini juga bisa dengan mudah anda atur dan sesuaikan jumlah artikel terkait yang ingin ditampilkan atau merubah jenis huruf dan background hover dari link dll.
Widget berikut mirip pula dengan widget related post yang disediakan oleh link within, nah jika anda tidak ingin menggunakan widget dari pihak ketiga silahkan mencoba tutorial berikut:
1. seperti biasa, silahkan loggin dahulu ke account blogger anda, pada dasbor pilih atau klik rancangan >>> edit HTML >>> jangan lupa untuk mencentang kotak kecil disamping tulisan Expand Template Widget.
2. Tekan control F dan cari kode </head>
3. Selanjutnya letakkan kode berikut diatas kode nomor dua tadi:

<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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if> 
4. Kemudian cari kode berikut:
<div class='post-footer-line post-footer-line-1'>
atau
<div class='post-footer-line post-footer-line-3'>
atau
<p class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-3'>
5. Selanjutnya letakkan kode berikut setelah kode atau dibawah kode nomor 4 tadi:
<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><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Kode diatas bisa anada rubah lagi untuk menyesuaikannya dengan blog anda.
6. Selesai, silahkan simpan template dan lihat hasilnya diblog anda.


Baca Juga:

Comments
0 Comments
 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi