Baca juga , membantu pengunjung blog menemukan artikel kita yang sudah di publish.
Selain itu , baca juga bisa di sebut sebagai artikel terkait ,, atau related post.baik pengguna platform wordpres maupun blogspot..
Keuntungan membuat Baca Juga di tengah artikel postingan , selain bisa menaikan visitor, juga bisa membuat tampilan blog kita menjadi lebih keren ,,dan di tambah lagi ini juga merupakan salah satu SEO para blogger. karna pada dasarnya Baca Juga atau related post adalah sebuah link dimana link tersebut akan menuju ke URL yang terkait.
Baca Juga : JQuery Terbaru 2023 V.3.6.0
Ada dua cara untuk membuatnya , bisa dengan cara manual , bisa juga dengan cara otomatis ,,
Jika sobat ingin membuat secara manual , sobat harus membuatnya secara benar dan teliti , kalau bisa buatlah semaksimal mungkin dengan tampilan yang sangat kreatif , buatlah dengan huruf besar dan untuk judulnya beri dengan ukuran font yang normal , jangan lupa beri warna link tersebut , misal warna biru,,sehingga bisa menarik pengunjung untuk melakukan pengeklikan link baca juga.
Jika sobat mampu membuat artikel postingan dengan 10.000kata dalam satu postingan , sobat bisa menambahkan baca juga yang secara manual. Sobat bisa menyisipkan beberapa Link ke dalam artikel.
" Perlu di ketahui , jika sobat mampu membuat artikel yang panjang , ini akan di anggap sebagai penulis blogger yang bisa naik di peringkat serp Google ,,
Akan tetapi , dalam artikel yang sangat panjang tersebut masih berada di dalam kondisi pembahasan konten dengan apa yang sobat bahas,,
Jadi walaupun artikelnya panjang lebar tetap tidak boleh di tulis secara asal asalan.
" Lalu bagaimana dengan baca juga atau artikel terkait yang secara otomatis,
Ini biasanya bersifat random atau (acak).
Dan biasanya jika memang sudah di setting hanya menampilkan 3 artikel , maka akan tetap hanya tampil 3 postingan saja.
Tapi gak papa mungkin ada juga yang malahan menyembunyikan related post , ini bertujuan untuk tidak merusak mod si pembaca , misal...
Blog sobat membahas tentang Kunci Gitar , jika di sisipkan baca juga di tengah postingan , menurut saya agaknya sangat kurang cocok.
Baca Juga : Kunci Gitar - Tiara | Kris
Semua pilihan ada kurang dan kelebihan masing-masing.
Cara Membuat Baca Juga Di Tengah Tengah Postingan.
Tutorial ini adalah cara membuat baca juga secara manual dan secara otomatis.
Manual :
Sobat harus menyisipkan Link kedalam artikel yang akan di jadikan related post.
Otomatis :
Sobat tidak harus bersusah payah menyisipkan Link.
Karna yang otomatis akan menampilkanya secara otomatis dan bersifat random.
Jika sobat berminat , sobat bisa ikuti panduan di bawah ini..
Membuat Baca Juga Secara Manual
Caranya cukup mudah , sobat tinggal buat artikel , lalu pada tab selanjutnya buat tulisan :
Baca Juga : beri ukuran huruf yang besar.
Judul artikel : beri ukuran huruf yang normal , lalu berikan Link atau URL ,sobat bisa ambil link dari postingan sobat yang sudah terpublish.
Contoh :
Cara diatas kami membuatnya menggunakan kode syntax highlighter.
Jika ingin membuat syntax highlighter , silahkan sobat kunjungi Link Tersebut.
Membuat Baca Juga Secara Otomatis
Jika dengan cara yang pertama sobat kurang suka ,
Sobat bisa mencoba dengan cara yang kedua. (Otomatis)
Disini sobat perlu melakukan pengeditan template milik sobat.
Saran :
Alangkah baiknya sobat BackUP terlebih dahulu template blogger milik sobat , jika terjadi error maka bisa segera di pulihkan.
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML
Cari kode <head>
Lalu taruh kode ini tepat dibawahnya :
ini code nya gaes..
<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>
Selanjutnya cari kode ]]></b:skin>
Lalu taruh kode ini tepat diatasnya :
ini code nya gaes..
/* 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)}}
Selanjutnya cari kode <data.post.body/>
Lalu taruh kode ini tepat di bawahnya :
ini code nya gaes..
<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>
Selanjut klik simpan dan selesai. !
Nah itu tadi tutorial nya , semoga berhasil.
Catatan :
Jika cara yang kedua tidak kompatibel dengan template blogger milik sobat.sila pilih dengan cara yang pertama.
Post a Comment