Cara Membuat Artikel Terkait dengan Gambar V2

Cara Membuat Artikel Terkait dengan Gambar V2 - Free Shop Ilmu - bagi seorang blogger widget ini tidak lah asing. memunculkan suatu artikel yang terkait pada artikel yang sedang dibaca dapat pula meningkatkan pageview serta menurunkan bounce rate (dalam google analytic(lebih kecil lebih baik).

Nah kali ini saya akan share cara membuat artikel terkait dengan Gambar/Thumnail. mungkin kalian sudah pernah widget seperti ini. tapi ini sedikit berbeda, pada code dari widget ini jika tidak ada artikel yang sejenis (memiliki label yang sama/hanya satu artikel dengan pada label tersebut) maka yang akan tampil adalah artikel terbaru.

Bagi yang berminat menggunakan artikel terkait seperti ini silahkan ikuti langkah berikut:

1. Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
2. Salin kode di bawah ini, kemudian letakkan tepat di bawah kode ]]></b:skin>:
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style type="text/css">
   #related-postsx h4{margin:0;padding:2px 5px;font-size:14px}
   #related-postsx ul,#related-postsx li{list-style:none;margin:0;padding:0;overflow:hidden}
   #related-postsx ul.loadingnya{width:100%;height:50px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2BOs1D8qkO0JwQoZzcEPIHYoTK1Pe_JSLiTJo0z802GIwPdqj6_KpoHZvYh3NIXPTNZjmNEvrYWhhdToQXzSl5JpPd5bwPlFwtt1hT2fIKo3aJtOCQRtefciedavIiyrMzDdmJsMRsI/s1600/loading-32-v1.gif) no-repeat 50% 50%}
   #related-postsx li{position:relative;float:left;width:19%;margin:0.5%;height:124px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height: 15px}
   #related-postsx img,#related-postsx .gmbrrltd{width:100%;height:100%;display:block}
   #related-postsx strong,#related-postsx img{-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s}
   #related-postsx img{-khtml-opacity:0.3;-moz-opacity:0.3;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3}
   #related-postsx li:hover img{-khtml-opacity:0.8;-moz-opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";filter:alpha(opacity=80);opacity:0.8}
   #related-postsx strong{position:absolute;z-index:2;left:0;top:0;padding:0 5px;height:100%;color:white}
   #related-postsx .gmbrrltd{background:black}
   #related-postsx .jkmt a{position:absolute;z-index:2;bottom:5px;right:5px;padding:0 20px 0 0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7B9u4hz-6LCuRvkBdQDYmZRLqolA-A8XTMTXkkgZnS5C8bSAaiGy578Z5gXJcwoK-5nnSSYCdbp4-07oKaR_j86YEE_J422pBfD8w8Swug9kjGVAYT2octdTFEL6Cd4qA4uUdXOINjY/s20/comment.png) no-repeat 100% 0;line-height:20px}
   #related-postsx .dt{position:absolute;bottom:5px;z-index:3;left:5px;color:white;line-height:20px}
   </style>
   </b:if>

   
   
3. Selanjutnya pemasangan kode JS (ada 2 cara):
   

   CARA 1

   Temukan kode berikut:
   <div class='post-footer'>
   
   TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.
   Salin kode di bawah ini, kemudian letakkan tepat di atasnya:
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
   <div id='artikelterkaitmkr'>
   <script type='text/javascript'>
   //<![CDATA[
   $(window).load(function(){
   relatedPostsWidget({
   related_title: "Artikel Terkait",
   recentTitle: "Artikel Terbaru",
   containerSelector: "#artikelterkaitmkr", 
   blogURL: "URL_BLOGmu",
   maxPosts: 5,
   maxPostsPerTag:5,
   rlt_thumb: 120
   });
   });
   //]]>
   </script>
   </div>
   </b:if>

   
   Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>.
   Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
   

   CARA 2

   Selain cara di atas juga bisa dengan cara menargetkan didalam class post-body.
   
   Jika ingin menggunakan cara ini kode diletakkan sebelum </body> dan kode yang digunakan seperti berikut:
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   $(window).load(function(){
   relatedPostsWidget({
   related_title: "Artikel Terkait",
   recentTitle: "Artikel Terbaru",
   containerSelector: "div.post-body", 
   blogURL: "URL_BLOGmu",
   maxPosts: 5,
   maxPostsPerTag:5,
   rlt_thumb: 120
   });
   });
   //]]>
   </script>
   </b:if>

   
   
4. Jika sudah selesai, klik Simpan Template dan lihat hasilnya

Opsi-opsi Pengaturan

• blogURL:'' | diisi dengan url Blog anda contoh http://mkr-site.blogspot.com
• maxPosts:5 | Jumlah maksimal artikel terkait yang muncul (defaultnya 5)
• maxTags:5 | Jumlah maksimal tag/label yang dicari untuk dijadikan artikel terkait (defaultnya 5)
• maxPostsPerTag:5 | Jumlah maksimal artikel untuk setiap tag/label (akan terlihat jika hanya satu label/ketika tidak memiliki tag(artikel terbaru yang muncul)). (defaulnya 5))
• containerSelector:'' | Dimana artikel terkait ini akan dipanggil contoh: <div id="artikelterkaitmkr"></div> maka dituliskan #artikelterkaitmkr
• relatedTitle:'Related Posts' | Judul Heading dari Artikel terkait (defaultnya Related Posts)
• rlpBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif' | Gambar yang tampil jika artikel tidak memiliki gambar (defaultnya http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif)
• rlt_thumb:70 | Ukuran gambar yang dimuat (defaultnya 70)
• rlt_monthNames:["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Dec"] | Nama bulan yang tampil
• recentTitle:'Recent Posts' | Judul Heading dari Artikel terbaru (defaultnya Recent Posts)

NB: Perhatikan tanda "" atau '' pada setiap ingin menambahkan tambahan Opsi kecuali yang angka seperti maxPosts. Juga untuk setiap tambahan opsi diakhiri tanda , (koma) kecuali pada bagian akhirnya. Cara Membuat Artikel Terkait dengan Gambar V2

Sumber:http://amminessalafy.blogspot.com/2013/01/cara-membuat-artikel-terkait-dengan.html

Single Links (Recommended)