Widget Related Posts dengan Thumbnail dan Ringkasan untuk Blogger

Ada beberapa tutorial cukup tua di mana Anda telah melihat metode yang berbeda untuk menampilkan Post yang Terkait di Blogger seperti widget Related Post dengan thumbnail.

Tutorial kali ini, kami akan menunjukkan cara untuk menerapkan widget Related Posts yang benar-benar mengagumkan yang akan muncul di bawah semua postingan blog Anda.

Jika Anda ingin mendapatkan gambaran bagaimana tampak seperti, silakan kunjungi demo blog ini .

Sekarang mari kita lihat bagaimana cara menambahkan Widget Related Posts dengan thumbnail dan cuplikan di Blogger :

Menambahkan Widget Related Posts dengan Cuplikan ke Blogger Posts

Langkah 1. Buka Blogge Dashboard, pergi ke Template dan klik Edit HTML

Langkah 2. Klik di mana saja di dalam area kode dan kemudian tekan CTRL + F untuk membuka kotak pencarian Blogger.

Langkah 3. Ketik atau paste tag ini di dalam kotak pencarian dan tekan enter untuk menemukannya:

</head>

Setelah Anda menemukannya, sisipkan script ini tepat di atas itu:

<script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedUrls = new Array();var relatedpSummary = new Array();var relatedThumb = new Array();var relatedTitlesNum = 0;var relatedPostsNum = 4; // number of entries to be shownvar relatedmaxnum = 75; // the number of characters of summaryvar relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMD97abdY9w3ccb3SxQNMU59uvDCBWRGjq56hWQC_PtTDnAbKJMFlxx2SLCsdYx905NkBDnROvMVIwYqB1QFjuZiB9oq-Hbkcl4a-kNfxHr8hQXt10NkXCZeBhCni0Cgvb3_3RrbRgAkIb/s1600/no_image.jpg"; // default picture for entries with no imagefunction readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}//]]></script>

Catatan:

- Untuk mengubah jumlah posting yang ditampilkan, Ubah nilai merah (4)

- Untuk mengubah jumlah karakter yang akan ditampilkan dalam ringkasan posting, memodifikasi nilai hijau (75)

- Untuk mengubah default pic untuk posting tanpa gambar, tambahkan URL Anda bukan yang ditandai dengan warna biru

Langkah 4. Sekarang kita menambahkan script, kita perlu menambahkan CSS. Hanya paste kode berikut di atas tag <head /> :

<style>.relatedsumposts {padding: 0px 10px;text-align: center;/* width of the related posts area */width: 120px;float:left;margin-bottom:15px;border-right: 1px dotted #E5E5E5;display: inline-block;}.relatedsumposts h6 {margin: 5px 0;}.relatedsumposts h6 a {/* link properties */color: #linkcolor;text-transform: uppercase;font-size:12px;}.relatedsumposts img {/* thumbnail properties */height: 82px;width: 82px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.relatedsumposts p {/* summary properties */border-top: 1px dotted #E5E5E5;border-bottom: 1px dotted #E5E5E5;color: #summarycolor;font-size: 10px;height: 4em;line-height: 1;margin: 5px 0 0;padding: 5px 0 15px 0;}#relatedpostssum {width: 100%;}.relatedpoststitle {font-size: 19px;margin-bottom:15px;}</style>

Menyesuaikan Posting terkait Widget:

- Memodifikasi nilai merah ( 120px ) untuk menyesuaikan lebar area widget

- Ganti #linkcolor dengan nilai hex warna untuk mengubah warna judul posting

- Jika Anda ingin mengubah ukuran thumbnail, Ubah nilai yang ditandai dengan warna Ungu( 82px )

- untuk menentukan kebulatan perbatasan, memodifikasi nilai yang berwarna orange (50%)

- untuk mengubah warna potongan pos, perubahan #summarycolor dengan warna nilai hex

Langkah 5. Selanjutnya, pencarian (CTRL + F) untuk potongan kode berikut:

<b:includable id='postQuickEdit' var='post'>

Ketika Anda menemukannya, klik tanda panah ke samping untuk memperluas kode dan gulir ke bawah sampai Anda menemukan </ b: includable>

- lihat screenshot untuk bantuan lebih lanjut:

Langkah 6. Hanya ATAS tersebut </ b: includable> tag, tambahkan berikut kode html:

<!-- Related Posts with Thumbnails Code Start--><b:if cond='data:blog.pageType == &quot;item&quot;'><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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/></b:loop>  <div class='post-footer-line post-footer-line-4'>   <div class='relatedpoststitle'>RELATED POSTS</div><div id='relatedpostssum'>      <script type='text/javascript'>showrelated();</script>    </div>    <div style='clear:both;'/>  </div></b:if><!-- Related Posts with Thumbnails Code End-->

Langkah 7. Klik pada tombol "Save Template" untuk menyimpan perubahan dan Anda selesai!

Catatan: jika anda melihat 'undefined' pesan, pastikan bahwa Anda telah menambahkan label yang tepat untuk postingan Anda -yang dapat ditemukan setidaknya satu posting, jika script tidak mungkin bisa menemukan posting terkait untuk entri tersebut.