Cara Mudah Membuat Related Post Blogger Bergambar
Cara Mudah Membuat Related Post Blogger Bergambar - Untuk meningkatkan kunjungan ke setiap postingan kita, salah satunya dengan membuat Related Post atau Artikel Terkait yang akan tampak lebih menarik jika menampilkan gambar dan cuplikan postingannya. Seperti tampilan di bawah ini.
1. Masuk ke Menu Dashboard Blogger, dan pilih navigasi Layout/Rancangan kemudian klik Edit HTML dan centang expand Widget Tempalate.
2. Selanjutnya cari kode dan letakkan kode di bawah ini tepat sebelum kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xCRqXgN0rIsdYf1I96ohFJay3D5czR1Rbzj_WtJXK88X65MUFKBv4fIPAjMolRhIv4QMBTsyjsAXlWqNiXW6G68ovzU3NHnX7XAlYIVeg3iXZYW5IBDrdZ1Sgcw6ifczD0oviA9tWYY/s400/noimage.png";
var maxresults=20;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
3. Kemudian temukan kode
<div class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-1'>
dan letakkan kode berikut setelah kode di atas
<!--Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
4. Untuk menentukan jumlah tampilan, ganti angka ’5′ dengan yang anda inginkan.
var maxresults=5;
0 komentar:
Posting Komentar