Cara mudah membuat related post Random untuk blogger

Tutorialmixs - Sobat, setelah beberpa minggu tidak aktive, kali ini aku mo share kembali tutorial, bagaimana cara membuat related post secara random. Karena aku nyakin ada beberapa sobat blogger yang mungkin jenuh dengan tutorial cara membuat related post reguler by label. Karena kita tau sendiri bukan, semakin banyak kita menyuguhkan beberapa pilihan untuk pengunjung agar betah nangkring pada blog kita, related post ini adalah media yang aku rasa ampuh untuk meningkatkan page view pengunjung blog kita..

Kalau berkenan, silahkan lakukan langkah berikut ini:
1. Sobat silahkan masuk saja ke Template edit htmlnya yah..
2. Silahkan search (dengan tekan ctrl+F) ketik </head> dan letakkan kode berikut di atas kode headnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:14px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:130px;height:70px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 5px;font-size:12px;width:130px; height: 70px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

3. sedangkan untuk langkah selanjutnya, (saya mau memakai tutorial berdasarkan karakteristik masing-masing blogger) jadi silahkan anda lihat bentuk template sobat, biasanya struktur dari template untuk artikel blog kebanyakan mencantumkan media share/like social media setelah artikel post. jadi silahkan masukkan kode script berikut setelah anda melihat related post ini mau anda munculkan di mana. ( karena aku memang tidak suka cara pakem kebanyakan, dan silahkan pakai logika sobat saja, karena ini memang tidak suatu keharusan harus di tampilkan di mana) sobat mau menampilkan pada sibebar sebelah juga bisa..

dan berikut adalah kode yang harus sobat pasangkan pada edit html sobat:

<!-- related post google -->
<!-- Related Posts with Thumbnails Code 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.isRandom != &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=999&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:blog.pageName/>&quot;;
var maxresults=12;var relatedpoststitle=&quot;<b>Mungkin ini yang anda cari:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 7px;float: right; margin: 5px;"><a  style="font-size: 7px; text-decoration: none;" href="http://tutorialmixs.blogspot.com/2016/05/cara-mudah-membuat-related-post-random.html" rel="nofollow" >get this widget</a></div>
</b:if>
<!-- related post google end -->

oke setelah itu simpan saja dan lihat hasilnya..

nb: untuk mengubah berapa related yang mau di tampilan silahkan ubah saja di
var maxresults=12; untuk lebar image ubah saja yang aku kasih warna merah

semoga bisa membantu, jika ada pertanyaan silahkan isi koment saja. terima kasih

Share this

Related Posts