Cara Membuat Widget Related Posts Dengan Thumbnail

Ikuti langkah demi langkah bagaimana cara membuat widget Related Posts dengan Thumbnail, gambar, photo dan cuplikan artikel yang lebih menarik.

Related Post dengan Thumbnail - Pada postingan sebelumnya telah dibahas bagaimana cara menambahkan widget related post tanpa thumbnail atau tanpa gambar yang hanya menampilkan judul postingannya saja.

Pada Tutorial kali ini kita akan membahas bagaimana cara membuat Related Post yang lebih aktraktif, lebih terlihat eye catching dan lebih terlihat menarik bagi pengunjung blog Anda yakni Related Post menggunakan Thumbnail dan cuplikan postingan Anda.
Jika Anda ingin tahu bagaimana tampilan Related Post dengan Thumbnail, silakan kunjungi blog demo ini.

Sekarang mari kita lihat bagaimana menambahkan widget Related Post dengan thumbnail dan cuplikan artikel di Blogger:

Menambahkan Widget Related Post dengan Thumbnail dan Cuplikan Artikel ke Pos Blogger


1. Langkah Pertama: Dari Dasbor Blogger Anda, buka "Template" dan klik "Edit HTML"


2. Langkah Kedua: Klik di manapun dalam area kode dan kemudian tekan CTRL + F untuk membuka kotak pencarian Blogger


3. Langkah Ketiga: Ketik atau paste tag dibawah ini di dalam kotak telusur dan tekan enter untuk menemukannya:
[</head>]

4. Langkah Keempat: Setelah Anda menemukannya, copas kode dibawah ini tepat di atas kode </head>
[<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 shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image
function 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 ingin ditampilkan, ubah nilai 4 (merah) sesuai keinginan Anda.
  • Untuk mengubah jumlah karakter yang akan ditampilkan dalam ringkasan posting, ubah nilai 75 (hijau) 
  • Untuk mengubah gambar default untuk posting tanpa gambar, tambahkan URL Anda dan ganti URL yang diberi warna biru.

5. Langkah Lima: Sekarang setelah kita menambahkan scriptnya, kita perlu menambahkan style CSS. Cukup copas kode CSS berikut di atas tag </head> (Petunjuk lihat langkah pertama dan kedua):
[<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>]
Catatan: Menyesuaikan Widget Related Posts:
  • Ubah nilai merah (120px) untuk menyesuaikan lebar area widget
  • Ganti #linkcolor dengan nilai hex warna Anda untuk mengubah warna judul artikel
  • Jika Anda ingin mengubah ukuran thumbnail, ubah nilai yang ditandai dengan warna ungu (82px)
  • Untuk menentukan kebulatan batas, ubah nilai dalam warna oranye (50%)
  • Untuk mengubah warna cuplikan artikel, ganti #summarycolor dengan nilai hex warna
  • Untuk mencari warna silakan gunakan Generator Kode Warna.
6. Langkah Keenam: Selanjutnya, cari kode dibawah ini (gunakan CTRL + F)

[<b:includable id='postQuickEdit' var='post'>]
Bila Anda menemukannya, klik panah samping (segitiga hitam menyamping) untuk memperluas kode dan gulir ke bawah sampai Anda menemukan </b:includable> - lihat screenshot untuk lebih jelasnya:


7. Langkah Ketujuh: Di atas kode </b:includable>, tambahkan kode html berikut ini:
[<!-- 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-->]

8. Langkah Kedelapan: Klik pada tombol "Simpan Template/Save Theme" untuk menyimpan perubahan dan selesai! Sekarang coba lihat blog Anda dan klik salah satu artikelnya dan lihat Related Post dengan thubnail ini berfungsi dengan baik?

Catatan: jika Anda melihat pesan 'undefined', pastikan artikel Anda telah diberi Label/Kategori yang memiliki post lebih dari satu, jika label tersebut baru satu artikel, skrip ini tidak dapat menunjukkan Related Posts.

Demikian semoga bermanfaat.

*Disarikan dari helplogger

COMMENTS

BLOGGER
Name

1 Left Sidebar 1 Right Sidebar 2 Column 2 Right Sidebar 2 Sidebar 3 Column 3 Column footer 4 Column 4 Column Footer Ads Ready Adsense Afiiliasi Belajar Teks HTML Berita dan Informasi Bisnis Internet Black Blog HTML Blog Travel Blogger Template Blogger Tips Blogger Triks Blogger Tutorial Blogger Widget Blogging Blue Bookmark Ready Brown Business Catatan Blogger Catatan Hari Ini Contoh Teks HTML eCommerce Facebook Comment Feedburner Fixed Food FoodBlogger Footer Widget Ready Form Kontak Gallery Game Blogger Template Google Gray Green Hotel Info Kesehatan Komputer Kuliner Kutipan Left Right Sidebar Magazine Mario Teguh Quote Microsoft Movie News Online Store Orange Personal Popular Posts Premium Properti Purple Red Related Posts Religi Review Santai Seo SEO Template Shoutbox Sidebar Slider Ready Software Sport Tahu Ngga? Tekno Template Blog Tips Tips Blog Tutorial Tutorial Blog Pemula Video Website and Internet White Windows Wisata Bandung Wordpress WordPress Convert Yellow
false
ltr
item
Hakimtea.com | Blogger Bandung: Cara Membuat Widget Related Posts Dengan Thumbnail
Cara Membuat Widget Related Posts Dengan Thumbnail
Ikuti langkah demi langkah bagaimana cara membuat widget Related Posts dengan Thumbnail, gambar, photo dan cuplikan artikel yang lebih menarik.
https://1.bp.blogspot.com/-EvarqUBQGzA/WmNNa-aa9NI/AAAAAAAARhk/dZYdlVXqbYsgpVIkWhsH6txrX09sIrJuwCLcBGAs/s320/Cara%2BMembuat%2BWidget%2BRelated%2BPosts%2BDengan%2BThumbnail.jpg
https://1.bp.blogspot.com/-EvarqUBQGzA/WmNNa-aa9NI/AAAAAAAARhk/dZYdlVXqbYsgpVIkWhsH6txrX09sIrJuwCLcBGAs/s72-c/Cara%2BMembuat%2BWidget%2BRelated%2BPosts%2BDengan%2BThumbnail.jpg
Hakimtea.com | Blogger Bandung
http://www.hakimtea.com/2018/01/related-posts-dengan-thumbnail.html
http://www.hakimtea.com/
http://www.hakimtea.com/
http://www.hakimtea.com/2018/01/related-posts-dengan-thumbnail.html
true
7553029949173842694
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Blogger Bandung