Cara Membuat Widget Baca Juga Otomatis Ditengah Artikel Blogger

MURIDSIANA pernahkah kamu mengunjungi sebuah artikel blog dan melihat sebuah daftar isi pada tengah-tengah artikel blog tersebut?. Lalu bagaimanakah apakah kamu juga ingin memberikan fitur widget baca juga otomatis di tengah-tengah artikel blog milikmu?

Hampir blogger pemula di seluruh Indonesia tidak mengetahui sebuah fitur yang dapat mempengaruhi rangking artikel blog pada pencarian Google. Salah satu fitur tersebut ialah sebuah widget daftar isi artikel di tengah-tengah postingan blog atau yang lebih dikenal dengan fitur widget baca juga.

Kebanyakan para blogger khususnya pemula tidak mengetahui cara membuat fitur tersebut, terkadang mereka terbilang asal-asalan saat membuat sebuah blog.

Seperti:

Membuat blog menggunakan template bawaan blogger.
Membuat blog menggunakan template hasil download atau comotan dari Google.

Jika kita menggunakan template bawaan blogger maka pasti kamu mengetahui bahwa fitur tersebut belum tersedia pada template bawaan blogger.

Namun jika kita menggunakan template gratisan hasil dari download atau comotan dari Google tergantung keberuntungan. Terkadang pihak pembuat template tersebut memang sengaja memberikan widget tersebut pada template mereka yang dibagikan secara gratis.

Namun ada pula dari pembuat template blog tersebut yang tidak memberikan fitur widget baca juga otomatis pada template yang mereka bagikan secara gratis.

Namun jika kamu ingin membuat sebuah widget daftar isi artikel di tengah-tengah postingan blog atau yang lebih dikenal saat ini yaitu sebuah widget baca juga maka kamu mengunjungi artikel yang tepat.

Karena Pada kesempatan kali ini MURIDSIANA akan memberikan tutorial mengenai cara membuat widget baca juga otomatis di blog. Namun sebelum pada inti pembahasannya kamu wajib mengetahui apa saja manfaat serta keuntungan membuat daftar isi baca juga Di tengah-tengah artikel pada blog milik kamu.

Berikut penjelasannya :

Dapat membuat pengunjung blog lebih betah berlama-lama.
Dapat meningkatkan traffic organik dari setiap artikel yang kita publikasikan.
Dapat meningkatkan rangking artikel serta website pada pencarian Google.
Dapat meningkatkan traffic pendapatan seorang blogger dari iklan AdSense.

Itulah beberapa keuntungan dari membuat sebuah daftar isi baca juga Di tengah-tengah artikel blog milik kamu.

Pengertian baca juga Di tengah-tengah artikel blog

Fitur baca juga Di tengah-tengah artikel blog adalah sebuah daftar isi yang terdapat berada di posisi tengah-tengah artikel blog yang menampilkan beberapa daftar isi judul dari setiap artikel blog yang kamu publikasikan pada situs blogmu dengan memiliki label yang sama.

Jika kamu bingung berikut ini kami akan memberikan contoh penjelasannya.

1. Kamu mengunjungi sebuah artikel dengan judul membuat baca juga Di tengah-tengah artikel blog dengan label tutorial.

2. Kemudian kamu saat membaca artikel di tengah-tengah akan melihat sebuah daftar isi yang menampilkan dari setiap judul artikel yang menggunakan label yang sama yaitu label tutorial pada blog tersebut.

Seperti contoh saat kamu mengunjungi halaman ini kamu akan melihat sebuah daftar isi judul artikel dari setiap blog yang memiliki kesamaan label dengan postingan ini.

Cara membuat Widget BACA JUGA juga Di tengah-tengah artikel blog

Jika kamu sudah tidak sabar ingin membuat sebuah tampilan daftar isi artikel baca juga Di tengah-tengah blog maka silakan ikuti tutorial yang akan MURIDSIANA berikan berikut ini.

1. Silakan masuk ke halaman blogspot milikmu kemudian pilih menu setelan silakan pilih menu fEED kemudian pilih with penuh dan lihat hasilnya. Namun jika belum berhasil kamu bisa ngikuti langkah nomor 2 di bawah ini.

2. Langkah pertama silakan kamu masuk ke bloggermu dan pilih menu tema atau template kemudian pasang kode tepat di atas

/head

<b:if cond='data:blog.pageType == "item"'>
<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>

3. Silakan pasang 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)}}

4. Langkah berikutnya Silakan cari kode <data:post.body/> lalu ganti dengan Kode dibawah ini.

<div expr:id='"post1" + 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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Kemudian silakan klik simpan dan lihat hasilnya 100% kamu akan berhasil membuat widget baca juga Di tengah-tengah postingan secara otomatis.

Itulah tutorial yang dapat MURIDSIANA berikan mengenai cara membuat halaman daftar isi artikel di tengah-tengah postingan blog atau yang lebih dikenal dengan baca juga otomatis daftar isi artikel di tengah-tengah blog.