Cara menambahkan Tombol Baca Juga dalam Postingan Blog

Menambahkan tombol baca juga ditengah postingan dapat dialakukan dengan berbagai macam gaya oleh para blogger. memsang artikel terkait (tombol baca juga) didlalam potingan blog dianggap sebagai alternatif menurunkan score bounce rates blog. cara ini dapat memancing pengunjung blog tidak meninggalkan blog, dengan adanya tombol baca juga dipostingan blog maka pengunjung akan melihat atrikel lain kalau pengunjung tertarik pada judul yang kita terapkan.

Membuat tombol baca juga dalam postingan blog

Disini saya akan mencoba menjelaskan cara menambahkan tombol baca juga secara otomatis ditengah postingan blog dan anda bisa memilihnya dengan 3 macam tampilan.

Masuk ke Menu Tema - klik tombol Edit HTML - tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

A. Baca Juga tampilan 1

/* dp baca juga 1 */
.dewa-bacajuga{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:84%;border:6px double #fff;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px 8px 30px;margin:0;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga h4:before{content:'\f05a';font-family:fontawesome;position:absolute;font-weight:400;margin:0 5px 0 2px;color:#fff;overflow:hidden;left:10px;transition:all .3s}
.dewa-bacajuga ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f087';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.bacajuga ul li:hover:before{content:'\f058';font-family:fontawesome;color:#f1c40f;}
.bacajuga a{color:#fff;font-size:15px;margin:0 0 0 30px;}
.bacajuga a:hover{color:#fff;text-decoration:underline}
.bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.bacajuga ul li{padding:5px 0}
.bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

Bentuk Tampilan 1

B. Baca juga tampilan 2

/* dp baca juga 2 */
.dewa-bacajuga{position:relative;padding:0;margin:15px auto;width:100%;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.dewa-bacajuga ul li:nth-child(odd){background:#fefefe}
.dewa-bacajuga ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.dewa-bacajuga ul li:before{content:'\f026';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#a158e4;overflow:hidden;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f026';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.dewa-bacajuga a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;text-decoration:underline}
.dewa-bacajuga 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)}}

Bentuk Tampilan 2

C. Baca juga tampilan 3

/* dp baca juga 3 */
.dewa-bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:87%;background:#e2e2e2;border:4px double rgba(0,0,0,0.2)}
.dewa-bacajuga h4{background:#ca4444;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#fff;border-radius:20px;top:-21px;left:2.5%}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f02b';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f02b';font-family:fontawesome;color:#0383d9;}
.dewa-bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

Bentuk Tampilan 3

Kode CSS ini menggunakan Font awesome, silahkan chek pada templete anda, apakah sudah menggunakan front awesome. jika belum, silahkan dipasang agar iconnya muncul.

Kode diatas tegantung yang mana pengen anda terapkan dalam dalam blog

Pemasangan Otomaatis baca juga ditengah postingan Blog

Setelah menempatkan kode CCS tadi, sekarang pemasangan Script baca juga otomatis.

1. Tambahkan Kode dibawah ini sebelum tag </head>

<b:if cond ='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
var dewaBacajuga=new Array,dewaBacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];dewaBacajuga[dewaBacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[dewaBacajugaNum]=r.link[t].href,dewaBacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=dewaBacajuga[r]);dewaBacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((dewaBacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<dewaBacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+dewaBacajuga[e]+"</a></li>"),e<dewaBacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>

2. Selanjutnya, anda cari kode <data:post.body/> dengan kode dibawah ini yang kemungkinan akan beberapa kode <data:post.body/> dalam templete anda, tergantung pada templet yang anda gunakan, maka coba saja satu persatu sampai artikel terkait muncul .

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='dewa-bacajuga'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

sobat bisa mengganti angka 3 dengan keinginan sobat,

Jika sudah anda terapkan kode diatas, selanjutnya anda save atau simpan. kemudian lihat hasilnya di dalam postingan, apakah cripst baca juga otomatis sudah muncul. Jika belum, coba perikasa lagi proses dari awal.

Semoga bermanfaat....

sumber: https://www.dewaplokis.com/2019/11/memasang-artikel-terkait-dalam-postingan.html