Penulis: Moch Adnan dipublikasikan: 23 Desember 2023
Moch Adnan Blog - Bagi kebanyakan pemilik blog, widget related posts sangat penting untuk ditempatkan dalam setiap postingan blog mereka. Dengan bertujuan agar pengunjung blog bisa melanjutkan ke next artikel yang bersangkutan, sehingga dengan demikian dapat meningkatkan durasi kunjungan yang mungkin bagi sebagian besar blogger menguntungkan.
 
Oleh karena itu,dengan berbekal keyakinan bahwa dengan memasang widget related posts ini pemilik blog akan mendapatkan keuntungan untuk blognya. Maka saya ingin merefresh kembali tentang bagaimana cara membuat widget related posts ini.
 
Dari sekian banyaknya tutorial semoga kali ini masih bisa bermanfaat buat sobat semua, berikut penampakannya:
hasilnya akan terlihat seperti pada gambar di bawah ini
Widget Related Posts Keren Untuk Blogger
Widget Related Posts Keren Untuk Blogger


Cara Memasang Widget Related Posts Keren Untuk Blogger


Tanpa berpanjang lebar lagi, kita langsung menuju cara pemasangannya ke dalam halaman blog blogger Let's go.!

  • Langkah #1

    Login ke dalam dasbor blog sobat, kemudian pilih "Tema", klik tanda panah bawah yang ada di sebelah kolom "Sesuaikan". Kemudian pilih "Edit HTML".

  • Langkah #2

    Cari dan temukan kode seperti berikut    ]]></b:skin>   dalam Template HTML blog sobat, (Gunakan pencarian cepat dengan menekan tombol "Ctrl + F" )
    Jika sudah menemukannya, kemudian copy kode CSS berikut dan pastekan tepat di atas kode ]]></b:skin>   
    • 
.post-related { display: inline-block; background: #fff; padding: 10px; width:100%; } .post-box .heading { margin-bottom: 10px; text-align: center; margin-top: 10px; position: relative; } .post-box .heading:after { content: "" ; position: absolute; top: 100%; left: 50%; margin-left: -11px; width: 21px; height: 1px; margin-top: 2px; background: #b565a7; } .item-related { width: 31.6%; display: block; float: left; margin-right: 10px; height: 100%; } .item-related:last-child { margin: 0!important; } .item-related .link {display: block; margin: -1px; margin-bottom: 0;} .item-related img {margin-left:0px !important; display: block; opacity: 1; width: 100%; height: 200px; object-fit: cover; } .item-related h3 { font-weight: 400; font-size: 14px; line-height: 1.71429; font-family: Muli; text-transform: uppercase; } img.noops-smly { padding: 0 !important; margin-top: -2px !important; width: 19px; display: inline; }
@media (max-width: 520px)
.item-related {
width: 100%!important;
}

  • Langkah #3

    Cari dan temukan kembali kode seperti berikut </head>  dan simpan kode Script di bawah ini tepat di atasnya
    • <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  • Langkah #4 

    • Cari kode yang mirip seperti berikut :  <data:post.body/> Kemudian copy dan pastekan kode HTML di bawah ini, tepat setelah kode <data:post.body/>

    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script id='related-posts' type='text/javascript'> /*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_uLFNKm3jVLLQuR2zRMoICYw79r-GfYeBLFD7MQ3QUBpmJaF6R7HUiO4IhvY1xF9oNgLarc_GXeKAlv4pn5fXfBpPNOL7wkQevvXkAUlIeLlphlBxzmYHNa0BCMB2ZqxZKHApjBsHvY/s1600/no_pic_available.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72','s300'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script>
                  <div class='post-related'>
                    <div class='post-box'>
                      <h4 class='heading common-heading'> <i class="fa fa-th-list" aria-hidden="true"></i> Related Posts</h4>
                    </div>
                    <b:loop values='data:post.labels' var='label'>
                      <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 defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWidPv-XCxBPUQTYC0QPjiazF95iWsjML9yegq70ZaLlLZUri78UlXLd_-Jc_cOFTRW9DLC6B6FLJ3ri7ITE-kuHw_sPpZRezvAszg-Cz2_PlkLPy2aMWe4GgsXhfCxmHFejNAbG9S_0/s400/noimage.png&quot;;
                      var maxresults=3; // Number Of Posts
                      removeRelatedDuplicates_thumbs();
                      printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                    </script>
                  </div>    
</b:if>

    Untuk mengatur jumlah Artikel yang ingin ditampilkan dalam widget Related posts ini, sobat bisa merubah pada bagian kode yang sengaja saya warnai merah atau mengatur jumlah nomor yang terdapat dibagian var maxresults=3;

  • Langkah terakhir

    klik Simpan Template dan selesai.


    •  
    Sumber : https://danteizm.blogspot.com/