Membuat Related Post Ala Template Fastest Magz

Membuat Related Post Ala Fastest Magz - Asslamualaikum Wr Wb. Pada kesempatan kali ini saya akan membagi sebuah tutorial yang mungkin terlihat sangat simpel yaitu "Membuat Related Post Ala Fastest Magz". Beberapa waktu lalu saya menemukan sebuah template yang sempat juga saya aplikasikan ppada blog saya ini. Disitu saya melihat sebuah related post yang menurut saya bagus, rapi, dan mudah dilihat. Dan setelah saya uprek-uprek template nya saya menemukan kode script nya. Ternyata lumayan mudah membuatnya. Langsung saja deh saya bahas topiknya.

1. Masuk akun Blogger anda.
2. Menuju Template >> Edit HTML. (pastikan template anda sudah ter backup.
3. Langkah berikutnya, Masukkan kode CSS berikut tepat sebelum Kode  ]]></b:skin>.

#at-gambar{background:#f2f2f2;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden;}#at-gambar h2{font-family:"Oswald", Arial, Sans-Serif;font-weight:600;font-size:1.5em;padding:0 0 10px;margin:0}#at-gambar a{background:#f8f8f8;font-family:'Oswald',Verdana,Sans-serif;color:#4b4b4b;box-shadow:0px 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 5px 5px 0;padding:6px;float:left;}#at-gambar a img{width:100px;height:98px;}.box-related{width:100px;padding-left:3px;height:50px;border:0px none;margin:0 0 5px;padding:0pt;line-height:normal;font-stretch:normal;}#at-gambar a:last-child{margin-right:0px;}
#at-gambar a:nth-child(1):hover{box-shadow:0px -3px 0px #E50700 inset;}
#at-gambar a:nth-child(2):hover{box-shadow:0px -3px 0px #0084C5 inset;}
#at-gambar a:nth-child(3):hover{box-shadow:0px -3px 0px #6CAC00 inset;}
#at-gambar a:nth-child(4):hover{box-shadow:0px -3px 0px #00C3B7 inset;}
#at-gambar a:nth-child(5):hover{box-shadow:0px -3px 0px #FF8168 inset;}
#at-gambar a:nth-child(6):hover{box-shadow:0px -3px 0px #E50700 inset;}
#at-gambar a:nth-child(7):hover{box-shadow:0px -3px 0px #0084C5 inset;}
#at-gambar a:nth-child(8):hover{box-shadow:0px -3px 0px #6CAC00 inset;}
#at-gambar a:nth-child(9):hover{box-shadow:0px -3px 0px #00C3B7 inset;}
#at-gambar a:nth-child(10):hover{box-shadow:0px -3px 0px #FF8168 inset;}
#at-gambar a:hover{box-shadow:0px -3px 0px #FF8168 inset;}
#at-gambar a:nth-child(1):hover,
#at-gambar a:nth-child(2):hover,
#at-gambar a:nth-child(3):hover,
#at-gambar a:nth-child(4):hover,
#at-gambar a:nth-child(5):hover,
#at-gambar a:nth-child(6):hover,
#at-gambar a:nth-child(7):hover,
#at-gambar a:nth-child(8):hover,
#at-gambar a:nth-child(9):hover,
#at-gambar a:nth-child(10):hover,
#at-gambar a:hover{background:#fff;}#at-gambar img{width:100%;margin:0;padding:0}
#posting{width:auto !important;max-width:100%;margin:15px 20px 15px 0px;}

4. Selanjutnya letakkan kode berikut tepat sebelum kode </head>

<script> var defaultnoimage = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlxhOnRP0zxmhEsupEuOfQLjVdGSfIltCTWM-w53PsmnAlnv2T0dwLvucsiWzZzuFoo4Piijbe7C76BiJEcJz7gX7NxfHSVUVdrPhK6YvjOfbx1-KiJtuD_y9pkoTu1fk4s_N1mz47Yg/s100/picture_not_available.png&quot;; var maxresults = 5; var splittercolor = &quot;#d3d3d3 &quot;; var relatedpoststitle = &quot;You Might Like :&quot;; </script>
<script src='http://yourjavascript.com/1376828511/terkait-v8.js' type='text/javascript'/> 

5. Dan yang terakhir letakkan kode berikut tepat dibawah / sesudah kode <data:post.body/>

 Mungkin ada Dua atau Tiga kode <data:post.body/> Silahkan coba satu persatu.

<div id='at-gambar'>
<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=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div>

Sekian artikel dari saya, Semoga bermanfaat. 

Wassalamualaikum Wr Wb.