Cara membuat Artikel Terkait pada Blogger Responsive dengan Gambar

Monday, January 15, 2018

Bagikan :

Tweet

Related Post adalah suatu navigasi yang memungkinkan pengunjung untuk menjelajahi blog/website anda lebih lanjut dengan membaca artikel terkait. Pada suatu template yang terpasang di sebuah blog, ada template yang langsung meng-include-kan fitur ini, dan ada pula yang tidak. Jika template anda tidak terpasangkan Related Post/Artikel terkait, silahkan baca thread ini lebih lanjut.

Style  ini tampil lebih bagus dengan tampilan gambar kecil/thumbnail untuk menarik perhatian pembaca untuk mengklik artikel terkait yang anda miliki. Berikut cara pemasangannya:

1. Login ke Dashboard Blog Anda
2. Pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>
   
   Code:

   <!--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:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
   #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;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 10px;font-size:12px;width:110px; height: 40px;}
   #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
   <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
   </b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->

5. Tekan CTRL+F dan cari kode <data:post.body/>
6. Copy-paste script dibawah ini dibawah kode <data:post.body/> (biasanya kode tersebut lebih dari 2, silahkan pilih kode yang terakhir atau coba satu per satu)
   
   Code:

   <!-- 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.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'>
   var currentposturl=&quot;<data:post.url/>&quot;;
   var maxresults=6;
   var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs();
   </script>
   </div>
   </b:if>
   <!-- Related Posts with Thumbnails Code End-->
   

7. Simpan template

Tag : Blog