Cara Membuat Widget Related Posts Widget Tanpa Thumbnail

Bagaimana cara menambahkan widget related posts tanpa thumbnail di blogger? Berikut ini langkah-langkahnya.

Related Posts Tanpa Thumbnail - Widget simple related post atau widget postingan terkait tanpa thumbnail (gambar). Widget related posts memang cukup penting jika kita ingin agar pengunjung betah berlama-lama di blog kita dengan membaca berbagai artikel yang saling berhubungan.


Lantas apa untungnya jika pengunjung betah berlama-lama membaca blog kita? Dari segi psikis, tentu kita akan merasa puas dengan hasil jerih payah kita dalam menulis, sedangkan dimata google atau SEO dengan berlama-lamanya pengunjung berada di blog kita tentunya menambah nilai lebih akan kualitas blog kita.

Tutorial kali ini, saya akan membahas tentang bagaimana cara menambahkan widget related posts simple tanpa thumbnail atau tanpa gambar. Untuk related posts dengan thumbnail akan dibahas pada artikel selanjutnya.


Baik, kita langsung saja, jika Anda ingin menambahkan widget related posts seperti pada gambar diatas, silakan ikuti langkah-langkah dibawah ini.

1. Langkah Pertama: Pada dasbor blog Anda klik 'Theme' lalu klik 'Edit HTML'

2. Langkah Kedua: Setelah editor template terbuka, klik di manapun dalam area kode dan tekan tombol CTRL + F pada keyboard, lalu ketik kode dibawah ini di dalam kotak pencarian (tekan Enter untuk menemukannya):

[</head>]

3. Langkah Ketiga: Copas kode CSS dibawah ini tepat di atas kode </head> :

[<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #fff;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #949494;
text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #f4f4f4;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #f9f9f9;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>]

Cara Menyesuaikan widget Simple Related Posts untuk Blogger:
  • Untuk mengubah ukuran (27px) dan warna (#fff) judul 'Related Posts', ubah nilainya (warna merah)
  • Untuk warna link Related Posts, ganti nilai #949494 (warna biru)
  • Untuk mengubah warna background, ganti warna hex f9f9f9 (warna merah)
  • Untuk warna background pada mouseover, ubah nilai f4f4f4 (warna merah)
Catatan: Anda dapat menggunakan kode generator warna untuk memilih warna favorit Anda.

4. Langkah Keempat: Setelah menambahkan script/kode untuk membuat Related Posts berfungsi, maka kita perlu menambahkan kode yang akan menampilkannya di akhir postingan blog kita. Temukan baris kode di bawah ini pada Edit Html (seperti pada langkah pertama dan kedua):

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

5. Langkah Kelima: Setelah kode diatas Anda temukan, Anda perlu mengklik panah samping (segitiga hitam menyamping) yang akan memperluas kode. Gulir ke bawah sampai Anda menemukan kode </b:includable> - perhatikan screenshot dibawah ini:


6. Langkah Keenam: Tepat di atas tag </b:includable>, tempel kode di bawah ini:

[<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://www.hakimtea.com/2018/01/related-posts-tanpa-thumbnail.html" rel="nofollow" >Related Posts Tanpa Thumbnail</a></div></b:if>]

Catatan: Untuk mengubah jumlah artikel pada Related Posts, ganti nilai "5" dari max-results=5

7. Langkah Ketujuh: Simpan perubahan dengan mengklik tombol 'Save Template/Simpan Template' dan kunjungi blog Anda. Sekarang, coba klik salah satu postingan Anda untuk melihat widget related post tanpa thumbnail ini berfungsi.

Demikian, selamat mencoba, 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 Widget Tanpa Thumbnail
Cara Membuat Widget Related Posts Widget Tanpa Thumbnail
Bagaimana cara menambahkan widget related posts tanpa thumbnail di blogger? Berikut ini langkah-langkahnya.
https://1.bp.blogspot.com/-c2RmepKkAtQ/WmMBfjEKQgI/AAAAAAAARgg/zVp3UHl8nC49c8sx_r5ScupfwWkKzYRdACLcBGAs/s640/Cara%2BMembuat%2BWidget%2BRelated%2BPosts%2BWidget%2BTanpa%2BThumbnail.jpg
https://1.bp.blogspot.com/-c2RmepKkAtQ/WmMBfjEKQgI/AAAAAAAARgg/zVp3UHl8nC49c8sx_r5ScupfwWkKzYRdACLcBGAs/s72-c/Cara%2BMembuat%2BWidget%2BRelated%2BPosts%2BWidget%2BTanpa%2BThumbnail.jpg
Hakimtea.com | Blogger Bandung
http://www.hakimtea.com/2018/01/related-posts-tanpa-thumbnail.html
http://www.hakimtea.com/
http://www.hakimtea.com/
http://www.hakimtea.com/2018/01/related-posts-tanpa-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