Cara memasang BACA JUGA di artikel secara otomatis dan manual

Halo guys! Bagaimana kabar nya? Sehatkan
Pada artikel ini saya akan share tutorial tentang Cara memasang BACA JUGA di artikel secara otomatis dan manual.

 Kenapa saya share tentang Cara memasang BACA JUGA di artikel secara otomatis dan manual , karena bertujuan agar Artikel kita yang lain mendapatkan banyak pengunjung dan agar pengunjung merasa penasaran tentang artikel kita yang lainnya.

Tidak hanya meshare artikel kita ke sosial media untuk mendapatkan pengunjung, membuat BACA JUGA di artikel adalah salah satu trik blogger agar pengunjung membuka tautan artikel kita yang lainnya.

Dengan membuat BACA JUGA di artikel akan membuat pengunjung berlama lama di blog kita bahkan jika semua artikel kita menarik dan bermanfaat maka bisa jadi semua artikel yang ada di blog kita di lihat semua, wah lumayan kan.

Jika pengunjung berlama lama di blog kita secara otomatis performa situs kita akan berkembang menjadi lebih baik lagi dan lebih lebih baik lagi.

Sebenarnya membuat link BACA JUGA bisa terbilang gampang tapi jika kalian tidak membuatnya dengan benar maka akan mempengaruhi tampilan blog kalian, dan jika tampilan blog kita tidak bagus maka pengunjung tidak akan tertarik dan pengunjung pun lari ke blog sebelah.

Ada dua cara untuk membuat link BACA JUGA di sebuah artikel yaitu membuat link BACA JUGA secara otomatis dan link BACA JUGA secara manual, kedua cara tersebut mempunyai kelebihan dan kekurangan masing masing.

BACA JUGA secara otomatis mempunyai kelebihan yaitu akan menghemat waktu, kekurangan nya adalah jika artikel kita hanya 200-300 kata saja akan membuat tampilannya tidak rapi.

Sedangkan  BACA JUGA secara manual mempunyai kelebihan yaitu kita dapat mengatur sendiri letak nya, dan ini sangat di sarankan jika anda menempatkan iklan di tengah-tengah artikel maka iklan  akan menutupi link BACA JUGA, untuk kekurangannya adalah kita akan menyita banyak waktu jika kita membuat link BACA JUGA lebih dari 2 link BACA JUGA

Yo tunggu apa lagi mari saya jelaskan yang BACA JUGA otomatis terlebih dahulu.

CARA MEMASANG BACA JUGA DI ARTIKEL SECARA OTOMATIS

Sebelum itu perlu diingat jika kalian memasang BACA JUGA secara otomatis saya sarankan untuk membuat artikel diatas 500 kata karena apa, karena jika hanya 200 kata maka tempat untuk link BACA JUGA akan mempengaruhi penampilan, bisa saja pengunjung baru saja lihat artikel kita lalu link BACA JUGA langsung berada di paling atas artikel kan tidak bagus kan, oke sekarang ikuti tutorial saya ini.

1. Pertama tama silahkan masuk ke dashboard blogger lalu pilih template lalu Edit HTML. Cari kode </head> lalu masukkan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

2. Selanjutnya kalian cari kode ]]></b:skin> atau </style> kalo masukkan kode berikut sebelum kode ]]></b:skin> atau </style> .

/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify 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}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify 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)}}

 Atau

/* Related Post Style 2 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify 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}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify 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)}}

3. Setelah itu di langkah yang ketiga kalian cari kode  <data:post.body/> lalu kalian ganti kode tersebut dengan kode berikut ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

4. Selesai deh kalian tinggal simpan
template nya.  

jika kode terpasang dengan benar maka hasilnya akan bagus , sebelum itu pastikan blog kalian sudah memasang font awesome ya, cara memasang font awesome gimana bang?? Next Artikel ya, sebenarnya saya sudah pernah share tapi saya campur dengan tutorial yang lain.

CARA MEMASANG BACA JUGA DI
ARTIKEL SECARA MANUAL.

Untuk cara manual kita tidak membutuhkan kode kode seperti diatas, dan harus anda ketahui jika kalian mengunakan yang otomatis dan salah dalam memasukkan kode kode tersebut maka akan mempengaruhi loading blog kalian. 

Loading blog kalian akan lemot dan karena loading blog kalian lemot akan mempengaruhi blog kalian, bisa saja jika loading blog kita lemot maka blog kita sulit untuk bersaing di halaman google, waduh bahaya juga kan, berbeda Jika kalian membuat link BACA JUGA secara manual kalian bisa menyesuaikan dimana akan Anda pasang link BACA JUGA tersebut.
Contoh nya seperti ini

Baca juga : Cara memberi efek animasi gradasi pelangi di header 

Nah begitu contoh nya kita bisa meletakkan dimana saya yang kita mau dan kita bisa memasang link BACA JUGA lebih dari satu link anda bisa menempatkan di atas saru ditengah dua di bawah satu, dan kita bisa custom apa waran link nya contoh seperti ini :

Baca juga : Cara memberi efek animasi gradasi pelangi di header 

Nah begitu juga contoh nya, perlu Anda terapkan ketika membuat link secara manual anda jangan lupa centang "Open this link in a new window" dan klik OK

Itu dia tutorial Cara memasang BACA JUGA di artikel secara otomatis dan manual. 

Secara tampilan memang lebih baik yang otomatis tapi secara penempatan lebih baik yang manual, oh iya pesan saya jangan sampai hanya memikirkan kecantikan blog kalian juga harus memikirkan page speed blog.

Jika kalian ingin request tutor tutor yang lain kalian bisa chat saya di media sosial, saya aktif di WhatsApp dan Facebook saja di media sosial yang lain mungkin akan lowrespon, tutorial kali ini saya buat karena ada yang request ke saya.

Demikian lah artikel yang dapat saya bahas kali ini semoga artikel bermanfaat bagi kalian semua saya ucapkan banyak terima kasih atas kunjungan kalian di artikel saya.

Sampai jumpa di next artikel.

Bagikan Artikel ini