Halo sobat blogger semua, jumpa lagi nih.. iseng - iseng nulis buat artikel biar tidak kaku kakinya..🤣 ,eh, tangannya maksudnya 🤣 , itung - itung juga biar ingatan tidak tumpul. Masihkah ada yang selalu setia menggunakan blogger ataupun ada blogger pemula yang mungkin lagi bingung atau iseng biar tampilan blognya terlihat bagus dan juga menarik bagi pengunjung ?
Banyak metode yang bisa dilakukan untuk mempercantik tampilan blog, selain template, font, widget maupun tambahan script code lainnya yang pada dasarnya adalah untuk membuat tampilan menjadi sedemikian rupa agar sesuai dengan apa yang diinginkan. Katakanlah sudah menemukan template yang tepat, namun setelah diamati mungkin merasa ada yang kurang atau mungkin ingin menambahkan sesuatu di source codenya.
Diluar sana mungkin banyak bertebaran cara - cara menambah maupun merubah tampilan blog, tak jarang juga banyak yang kurang begitu paham dengan apa yang di jelaskan, karena kemungkinan besar kurang menguasai ataupun mengerti tentang source code bahkan belum familier.
Kali ini saya coba memberikan tips dan trik bagaimana cara membuat "baca juga" di blog pada halaman atau postingan disetiap artikel terkait. Jadi pembaca bisa langsung melihat artikel terkait maupun yang berhubungan dengan artikel yang sedang dibaca.
Oke langsung saja pertama buka pengaturan blogger, iyah.. yang itu tuh.. 🤣 kemudian pilih tema yang dipakai lalu edit html. Kemudian cari source code <data:post.body/> dengan menekan ctrl + f pada keybord. Disini akan menemukan 2 buah source code, untuk source code paling atas sisipkan source code berikut untuk menggantikan <data:post.body/> :
<div id='body-post-it'>
<data:post.body/>
</div>
Untuk lebih jelasnnya source code mana yang dimaksud lihat pada gambar dibawah ini :
Kemudian di lanjut ke souce code ke-2 , untuk pencariannya sama seperti langkah pertama. Jika sudah ketemu ganti <data:post.body/> dengan source code yang baru, yang ada dibawah ini, copy semuanya kemudian blok source code yang akan digantikan kemudian paste.
Berikut script code listingnya :
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function bacajuga(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(relatedTitles.length>1){for(document.write("<h2>Baca Juga</h2>"),document.write("<ul>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<div id='baca-juga'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=bacajuga&max-results=5"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var jumlahbacajuga=3;
removeRelatedDuplicates();
printRelatedLabels("<data:post.url/>");
</script>
</div>
<div id='body-post-it'>
<data:post.body/>
</div>
Jika sudah dipastekan maka tampilan source code listingnya akan menjadi seperti yang ada pada gambar dibawah ini :
Blok biru dan hijau adalah source code yang baru untuk menampilkan baca juga di setiap artikel yang diposting. sedangkan blok warna merah adalah source code aslinya. Gambar diatas hanya untuk memperjelas saja sebelum dan sesudah perubahan. jadi nantinya blok merah pada gambar diatas dihilangkan dan digantikan dengan blok biru dan hijau. Jika sudah dirasa tidak ada yang salah kemudian simpan dan keluar.
Sampai disini source code sudah bisa menampilkan baca juga pada setiap postingan, agar lebih menarik langkah terakhir adalah mempercantik tampilan baca juga dengan css berikut. Copy semua css (style) dibawah ini kemudian masuk ke halaman tema blogger lalu pilih sesuaikan, lanjutan dan pilih tambahkan CSS.
Berikut adalah cssnya :
/* BACA JUGA*/
#baca-juga{position:relative;padding:0;margin:15px auto;}
#baca-juga h2{color:#34495a;position:absolute;top:-15px;left:20px;border:2px solid #efefef;padding:2px 12px;font-size:14px;background:#ffffff;font-weight:500;z-index:1;border-radius:3px}
#baca-juga ul{max-width:100%;margin:30px 0 20px;padding:20px 20px 10px 22px;position:relative;border:2px solid #efefef;border-radius: 5px;}
#baca-juga ul li:before{font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#001e8c;overflow:hidden;transition:all .3s}
#baca-juga ul li:hover:before{font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
#baca-juga a{color:#5b696f;font-size:14px;margin:0 0 0 30px;}
#baca-juga a:hover{color:#0383d9;}
#baca-juga ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
Huff... cape juga ngetik segini aja 🤣 selamat mencoba semoga berhasil dan suka.
Kesimpulan : Dengan menambahkan atau menempatkan baca juga diantara artikel maka pembaca akan lebih mudah untuk menemukan apa yang dicari dan pembaca juga dimudahkan untuk menentukan halaman atau link lain yang akan dituju setelah selesai membaca artikel.
Disini saya selalu berusaha menggunakan bahasa umum yang mudah dipahami, bukan bahasa teknik yang malah membuat pusing dan bertannya - tanya.
Terima kasih, Sudah membaca artikel ini dan berkunjung ke blog kanggantex.blogspot.com. Saya nantikan kunjungan Anda berikutnya.
Warm regard, Kang GanteX