Mebuat Related post dengan gambar/thumbnail adalah utuk memperindah tampilan blog dan juga untuk mempercepat agar blog terindex oleh google membuat related post/artikel terkait sebenarnya tidak terlalu sulit untuk membuat-nya langsung saja berikut langkah-langkah Mebuat Related post dengan gambar/thumbnail:
1.Seperti biasa sobat login dulu ke blogger.com
2.pilih template --> Edit html
3.centang expand widget
4.Cari kode <head> caranya tekan ctrl+f
5.letakan kode di bawah ini sebelum atau diatas kode <head>
<!--Related Posts with thumbnails Scripts and Styles Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <style type='text/css'> #related-posts {float:center;text-transform:none;height:215px;background-color: #f4f4f4; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;border: 1px solid black; } #related-posts h2{padding: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;} #related-posts a{color:#D80556;} #related-posts a:hover {background-color: #D80556;color: white; font-weight: bold; text-decoration: initial;} </style><br /> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWyUAHsIPstafWfBsQVkRgn6nKgIssyo1jaMseeNWIWVI02St_IaKrMrpE3-DQAE18ku8US7ODXBRbCIveMMeDeRfyakkDg53MI84NkzAY5Pw0HpeKUGv1xSLstgQLo476Zo6cv6piHlE/s400/noimage.png"; var maxresults=6; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script><br /> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
6.Kemudian sobat cari kode di bawah ini:
<div class='post-footer-line post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'>
</div>
</div>
</div>
Jika sudah ketemu sobat copy paste kode di bawah ini dan letekan setelah kode diatas (yang sobat cari tadi).
<!-- Related Posts with Thumbnails Code Start--> <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><br /> </div> <div style='clear:both'/> </b:if><br /> <!-- Related Posts with Thumbnails Code End-->
7.sekarang tinggal Save template sobat.
0 komentar:
Posting Komentar