Cara memasang artikel "Baca juga" ditengah postingan blog






Cara membuat artikel terkait (baca juga) ditengah postingan blog:Pada kesempatan kali ini blog ini akan berbagi tutorial lagi buat para bloggers yang berbahagia,Artikel yang akan di posting pada blog ini mengenai sebuah artikel terkait yang berada di tengah-tengah postingan,Biasanya akan muncul 3 atau 4 baris dengan judul artikel beserta linknya yang muncul secara automatis pada setiap halaman postingan blog.

Mungkin pernah juga melihat blog bloggers lain yang menampilkan semacam ini,Biasanya ketika tengah asyik membaca artikel blognya ,maka akan di hadapkan sebuah link yang berkotak dengan caption baca juga.

Link berkotak/atau artikel terkait berfungsi agar seluruh isi postingan yang ada pada blog dapat di baca oleh setiap pengunjung,dengan menyuguhkannya pada setiap halaman postingan.Dengan begini juga semua semua postingan blog bisa terbaca jika di klik.Ini juga bisa meningkatkan visitor blog ,kalau di situs periklanan bisa di sebut cpm nya.

Dengan adanya artikel otomatis yang muncul ini,pembaca dengan mudah menjumpai seluruh isi postingan blog anda tersebut.

Agar blog bisa menghasilkan artikel terkait secara otomatis pada blog,Di butuhkan sebuah tambahan html/javascript ke element template blog yang digunakan.Yang nantinya akan bisa menampilkan artikel terkait pada per halaman postingan blog.

Namun bagaimana cara mendapatkan dan memasang script html artikel terkait untuk blog? Berikut ini adalah kode html yang dapat di gunakan,Tinggal copy dan paste pada template blog anda.

Cara memasang atau membuat artikel terkait "Baca Juga" Di tengah postingan blog.
Cara membuatnya cukup sederhana,Yang di butuhkan hanyalah sebuah ketelitian dalam menempatkan kode di dalam edit template yang dimana tempat menambahkan berbagi kode html untuk tampilan pada blog untuk blogger.Langkah-langkah untuk membuat artikel terkait "Baca juga" Pada postingan blog adalah sebagai berikut.




#Artikel terkait "Baca juga" Model 1
1.Silahkan buka blogger,Pilih theme dan klik edit template

2.Tambahkan kode di bawah ini atau copy kode di bawah dan faste kodenya di bawah tag <head> atau di atas tag </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>


3.Jika sudah langkah selanjutnya ialah menambahkan kode css untuk pemanggil atau pembentuk artikel terkaitnya,Copy kodenya dan tempelkan pada template dengan menekan ctrl f dan masukan tag ]]></b:skin> atau </style>.Copy kodenya di bawah script di bawah ini dan tempel tepat di atas tag ]]></b:skin>.

/* 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.Untuk melihat hasil dari kode html/java script artikel terkait secara otomatis pada blog,bisa langsung save di bagian edit templatenya.Hasilnya juga bisa dengan melihat gambar di bawah ini.



#Artikel terkait otomatis "Baca juga" Model 2.


Untuk model artikel terkait baca juganya ada yang model keduanya juga,Untuk cara pemasangan kode html/javascript sama seperti cara yang di atas tepat di atas tag ]]></b:skin> dan berikut ini adalah kode css yang dapat di gunakan alias langsung copy dan paste pada halaman edit template blogger.

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





Untuk gambar hasilnya dari model artikel terkait yang kedua ini bisa langsung di lihat pada gambar di bawah di template,dan lihat hasilnya di blog anda nanti jika semuanya sudah benar.dan ini adalah 
gambar untuk artikel terkait otomatis blogger yang no dua.



Agar icon dapat muncul,Blog anda harus sudah menginstal font awesome,Agar ikonnya bisa tampil dengan rapi dan kelihatan bagus,Jika belum menginstal font awesome maka hasilnya akan kotak pada tanda panahnya,dan inilah Cara menginstal atau memasang Font Awesome pada Blog .

#.Memasang dan mengganti kode tag <data:post.body/> dengan kode di bawah.

cara Yang terakhir dalam proses pemasangan artikel terkait adalah dengan mengganti satu persatu kode tag <data:post.body/> dengan kode html yang ada di bawah 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>


Dan terakhir klik save templatenya lihat hasilnya pada blog anda apakah artikel terkait "Baca juga" sudah bisa muncul pada blog anda atau tidak,Jika tidak silahkan cek,mungkin ada yang salah,mungkin dari postingan ini atau anda yang kurang beruntung,Ini juga tergantung template yang anda gunakan.

Nah jika anda sudah menerapkan semua kode pemanggil Html&javascriptnya terpasang dengan benar kemungkinan ini akan berhasil dan artikel terkait secara otomatis di blog anda sudah bisa muncul pada saat di buka atau di baca artikelnya.semoga ini bisa bermanfaat untuk blog anda juga,sumber:





..........................................................................................


keywords:
Cara memasang konten "Baca juga" pada postingan blog,Cara menambahkan artikel terkait "Baca juga" di tengah-tengah postingan blog,Cara mudah membuat artikel terkait,Cara memasang link kotak baca juga di blog blogger,Cara jitu memasang kotak artikel postingan di blog,Memasang link dengan kotak baca juga untuk blog blogger


Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Membuat Related Post Grid Untuk Template AMP Blogger

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Download Template Igniel versi premium Gratis

Cara membuat Link Model no follow dan Do follow

Cara Membuat Akun Google Adsense Hosted Terbaru

Tutorial Hack Nokia Symbian S60v3 Dan s60v5

Download Aplikasi Winloader Extreme untuk Windows 7