Tentukan sendiri jalan cerita selanjutnya.

Tentukan sendiri jalan cerita selanjutnya.
SET YOURSELF THE NEXT STORY

Ads : 1 USD forever

This blog started to be written January 11, 2015.
Advertise your products and services here.
With 1 USD then your ad posted in the article forever.
1 USD per article forever.

A story with tens of thousands of articles.

A story with tens of thousands of articles.
life and death, blessing and cursing, from the main character in the hands of readers.

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."
Campaign started October 17, 2015 (45 days)

Your contribution to my campaign

Tuesday, March 10, 2015

Cara Membuat Related Post Dengan Thumbnail



Cara Membuat Related Post Dengan Thumbnail, setelah sebelumya saya memposting Cara Membuat Artikel Terkait Di Sidebar . Sekarang saya akan mencoba untuk  menerangkan bagaimana cara membuat related post dengan thumbnail yang letaknya di bawah postingan. Related Post sangat diperlukan karena bisa membantu mempromosikan postingan yang lainnya dan pastinya bisa menambah pageview. Dengan adanya thumbnail akan lebih menarik pengunjung untuk melihat postingan-postingan tersebut.

Yuk langsung kita ikuti caranya membuat related post dengan thumbnail :
  • Klik Desain
  • Pilih Template 
  • Klik EDIT HTML Jangan Lupa " Centang Expand Widget Template".
    Cari kode </head> . setelah ketemu copy kode di bawah ini tepat di atas 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="http://4.bp.blogspot.com/-dmk10jmNg9s/UK_9bdB2JkI/AAAAAAAAD_Y/L2PGLedhcKM/s1600/Serpihan+waktu+Related+Post+Dengan+Thumbnail.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://djangkarubumi.googlecode.com/files/SerpihanWaktuRelatedPostThumnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
  • Selanjutnya Cari kode <data:post.body/> . Setelah ketemu copy kode di bawah ini tepat di bawah kode <data:post.body/> . ( jika lebih dari satu silahkan mencoba satu-persatu ).
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
  • Klik Simpan dan lihat hasilnya.

Keterangan :
  • var maxresults = 5 adalah jumlah artikel yang ditampilkan. jika ingin memperbesar angka var maxresults = 5 , jangan lupa memperbesar angka juga max-results=6  , intinya angka max-results=6 harus lebih besar dari pada var maxresults = 5.
  • var relatedpoststitle="Related Posts";  bisa ganti kata Related Posts dengan Kata lainnya.
  • #related-posts a:hover {
  • background-color:#d4eaf2; } , silahkan rubah kode warnanya sesuai yang dikehendaki.
Sekian penjelasan dari saya semoga bisa memahami dan selamat mencoba.Dan semoga behasil.


sumber : http://www.djangkarubumi.com/2012/11/cara-membuat-related-post-dengan.html
♥♥DjB♥♥

No comments:

Post a Comment

Related Posts

Related Posts Plugin for WordPress, Blogger...