Step By Step Memasang Link Baca Juga Di Tengah Postingan Blog

Beginilah Cara membuat link terkait " Baca Juga " yang berada di dalam dan di tengah - tengah setiap postingan Blog Blogger Blogspot - Membuat link seperti related post yang akan tampil dengan susunan link di dalam tengah post blog sering di jadikan sebagai penambah trafik untuk blog,Karena link artikel yang sedang di baca akan menampilkan sejumlah Artikel / Postingan dengan satu label / kategori.Dengan begitu ,pengunjung akan dengan mudah menemukan apa yang di cari dan isi postingan blog tersebut akan menampilkan link yang berkaitan dengan label postingan yang sedang di baca.

Membuat serta memasang sebuah link artikel " Baca juga " Untuk blogger ,bisa di lakukan melalui template ( edit HTML template ),dengan tujuan agar semua link artikel bisa muncul dan berhasil tampil di setiap isi postingan Blog.Tidak sedikit yang mentutorialkan cara ini,seperti pada sumber postingan kali ini ialah dengan alamat blog atau Url https://www.bloginjase.club/2019/09/cara-membuat-artikel-terkait-baca-juga-ditengah-postingan-blog.html ,dan yah.Myapgoblog menshare tutorial tersebut disini.Dan yang di ambil hanyalah sebuah KOde pembentuk atau Kode html/javascript pembuat link artikel terkait ( Baca juga automatisnya ) saja.

Jika selama ini kamu mencari cara untuk memasang dan membuat sebuah susunan link sampai 3  postingan yang mempunyai Caption " Baca Juga " dan sering muncul di tengah postingan blog? Maka kamu bisa menemukan cara dan kodenya seperti apa yang telah di jelaskan di atas.pada artikel tutorial kali ini.

Cara Mmebuat link terkait baca juga di dalam blog ini memang jika kita mencari caranya di google maka akan muncul sangat banyak sekali Blog master yang sudah mentutorialkannya,dan maka dari itu,jika kode atau sebuah trik / tips nya sama, maka tidak heran lagi,karena sebelumya Mywapgoblog sudah menguraikannya di aats,dan untuk langsung skip ke tutorialnya silahkan simak di bawah ini.

Cara memasang dan membuat Kotak Link "Baca juga " / "Artikel terkait " Di tengah postingan Blog melalui Edit HTML tema Blog

Cara ini adalahh cara mudah untuk membuat serta menampilkan sebuah Kotak dengan link postingan dan juga penjelasan dengan kalimat Baca juga di dalam sebuah blog,jika kamu ingin membuat dan memasangnya di blogmu,maka berikut ini adalah caranya,silahkan di simak.

Untuk di ketahui kalau jenis dari peampilan kotak link nya ada dua model ,dan kamu juga perlu memasang atau menginstal Font awesome di dalam template blogmu agar Ikon dan symbolnya bisa tampil.okey langsung ke caranya di pasang pada template bloggermu.

1. Memasang Artikel Terkait [ Baca Juga ] Dengan untuk Pembentuk .

- Pertama tam silahkan kamu buka dasbhord bloggermu.

- Jika sudah,langsung saja pilih Tema dan klik Edit Html.Jika perlu copy semua kode template ke dalam Text editor seperti Sublime text,notepad++ dan lain lain,untuk memudahkan pengeditan.atau bisa langsung id edit melalui bloggger.

- pada kotak atau Edit HTML tekan Ctrl F dan masukan tag </head> kemudian Copy Kode html di bawah 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>

- Jika sudah Klik simpan tema.untuk menyimpan kode di atas.


- Langkah berikutnya ,silahkan copy juga Kode pembentuk artikel atau kode js di bawah ini dan di letakan pada tag atau di atas tag ]]></b:skin> atau </style> tepat di dalam kotak edit htmlnya.Ingan tag ]]></b:skin> di ketikan pada kotak kecil find setelah menekan ctrl F pada keyboar laptopmu.Inilah kodenya silahkan di copy paste semuanya.

/* 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)}}

- Kemudian klik simpan tema Kembali.


Perlu di ketahui Kode di atas tag ]]></b:skin> di atas merupakan model dan bentuk yang berbeda ,ini yang akan tampil pada setipa postingan dan membentuk sebuah kotak dengan link postingan dan caption baca juga ,Jika kamu ingin menggunakan atau Model yang lain ,Bisa juga menggunakan Kode related post 2 di bawah ini.silahkan Di copy.

/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';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}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

- Jika sudah ,lakukan hal sama untuk mengklik simpan tema ,agar hasilnya work.


2. Memasang Kode kedua Untuk penempatan Kotak link artikelnya.

Jika di atas adalah kode untuk kotak link dengan baca juga,maka di bawah ini kode untuk tempat menampilkannya silahkan di simak.

- Buka dasbhord blogger.

- Pilih Tema dan klik Edit HTML.

- Pada edit HTML ,tekan ctrl F dan masukan tag <data:post.body/> pada kotak find yang muncul dan tentunya langsung tekan enter.

- Jika muncul tag <data:post.body/> ,maka hapus kode tag tersebut dan ganti dengan kode di bawah ini.Namun ingat hapus tag <data:post.body/> yang pertama nya saja.Dan inilah kodenya.

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

- Terakhir ,Silahkan klik Simpan Tema 

- Kemudian lihat hasilnya pada setiap postingan Blogmu.


Nah tutorial dari artikel kali ini sudah mejelaskan bagaimana caranya untuk membuat sebuah kotak link artikel untuk mmebaca juga postingan blog yang lain dan tepat berada di tengah- tengah postingan blog,Ini tentunya akan memperindah tampilan blog dan bisa juga untuk membuat blog mendapatkan hasil traffik yang lumayan tinggi.Bisa di bilang cukup untuk Seo sederhana juga.

Untuk mengetahui apakah link tersebut masuk ke serp google index atau link yang muncul tersebut di crawl oleh bot google indexing,silahkan kamu teliti sendiri mengenai hal itu,Soalnya ini bersifat automatis dan akan tampil jika postingan di kunjungi dan tentunya di buat menggunakan kode html melalui tambahan Html template.

Okeh,baik mungkin hanya itu saja postingan blog mywapgoblog untuk kali ini,semoga bermanfaat mohon maaf bila ada kesilapan atau kesalahan dalam penyajian.

wassallam.