-->

Comments

AndikaBM Santri Baitul Mustaqim Punggur Blog Dan Informasi Terupdate Dirgahayu Republik Indonesia Ke - 76

Cara Setting BACA JUGA Secara Cepat dan Praktis Di Blogger

Cara Setting BACA JUGA Secara Cepat dan Praktis Di Blogger - Disaat kita sedang asyik-asyiknya membaca artikel disebuah blog yang ada di laman google, eh ada aja yang bikin kesel, apaan tu..... link-link baca juga yang mengarah ke artikel yang lain. Parahnya lagi tanpa sengaja link tersebut ke klik jadi ya otomatis link artikel yang kita baca berubah dan pindah ke artikel yang barusan kena klik jemari kita. Sebenarnya mengganggu gak sih link-link tersebut. Ya kalau masih dalam satu topik gak mengganggu sich, tapi sayangnya link tersebut tidak nyambung dengan artikel yang pertama, kan jadi bikin kesel para pembaca.
Contoh Jadi Baca Juga Untuk Link Otomatis
Nah ... untuk itu kali ini admin akan bagikan yaitu Tentang Cara Setting BACA JUGA Secara Cepat dan Praktis Di Blogger. Kenyamanan para pengunjung di blog kita adalah sebagai prioritas. Dan yang paling prioritas lagi sebagai seorang penulis dalam blog adalah menjadi Page One di pencarian google.

Tentunya tidak mudah untuk meraih Page One dalam pencarian Google, Namun membuat atau Setting BACA JUGA adalah salah satu cara membuat pengujung atau visitor supaya membuka artikel kita yang lain. Yang akhirnya artikel kita bisa menduduki peringkat page one yang kita inginkan.  

Ketika akan membuat Artikel terkait secara Otomatis maka wajib membuat artikel di atas 500 kata supaya para pengunjung tidak tergangu. Belum sempat membaca isi dari artikel sudah di menemukan  link Baca Juga dengan jumlah link yang cukup banyak. Jika sobat ingin membuat atau setting BACA JUGA didalam Blog silahkan ikuti tutorial berikut ini. Anda tinggal masuk ke Tema, pilih HTML untuk menambahkan Kode dan CSS.

Cara Setting BACA JUGA Secara Cepat dan Praktis Di Blogger


Langkah pertama silahkan masuk ke Blogger >> Template >> Edit HTML. Pastekan kode berikut ini sebelum Kode </head>.

<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>

Langkah selanjutnya memasang CSS dibawah ini 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)}}

Langkah ketiga yaitu cari lagi Kode <data:post.body/> lalu ganti kode tersebut dengan Kode dibawah 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>

Langkah terakhir sebagai langkah penutup silahkan Simpan Template dan lihat Hasilnya. Pastikan di Blog sobat sudah memasang Font Awesome agar icon bisa muncul.

Itulah Tutorial Membuat atau Setting BACA JUGA dengan Cepat dan Praktis di Blogger. Silahkan di coba di blog sobat, untuk melihat hasilnya sudah admin sertakan pada gambar diatas. Untuk warna dan model lainnya bisa dirubah sesuai keinginan masing-masing. 

Terimakasih, tetap kunjungi AndikaBM yang selalu update info-info terkini dan tutorial menarik lainnya. Wassalam..... Selamat Mencoba.

Artikel Terkait

  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>