Widget Related Posts Dengan Thumbnail Dan Ringkasan Untuk Blogger

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

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

Jika Anda ingin mendapat citra 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 arahan dan lalu 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 sempurna di atas itu:

<script type='text/j4vascript'>//<![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/AVvXsEhkaqyneETSXPZ3QfvnJM0T_CeGZnpIefYK0cZhR0p0cPrixid_oYaARTFlyPG8honrjPfKJQx5Ja1oqrz0Yi2_Ey6KqSJD5mExTLva1BlYZiZLj1XJcgne2tW3mnyop7NooRcq0ZyquCCp/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 abjad 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 arahan 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 memilih kebulatan perbatasan, memodifikasi nilai yang berwarna orange (50%)

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

Langkah 5. Selanjutnya, pencarian (CTRL + F) untuk bagian arahan berikut:

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

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

- lihat screenshot untuk pinjaman lebih lanjut:

Langkah 6. Hanya ATAS tersebut </ b: includable> tag, tambahkan berikut arahan 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/j4vascript'/></b:loop>  <div class='post-footer-line post-footer-line-4'>   <div class='relatedpoststitle'>RELATED POSTS</div><div id='relatedpostssum'>      <script type='text/j4vascript'>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: jikalau anda melihat 'undefined' pesan, pastikan bahwa Anda telah menambahkan label yang sempurna untuk postingan Anda -yang sanggup ditemukan setidaknya satu posting, jikalau script mustahil sanggup menemukan posting terkait untuk entri tersebut.

Sumber http://bangpels21.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: