Cara membuat BACA JUGA di Blog secara Otomatis yang Benar

Menulis di Blogger ataupun Wordpress untuk membentuk sebuah artikel yang menarik diperlukan pengetahuan yang cukup. Tujuan membuat tulisan ini adalah supaya banyak para pengunjung yang datang. Bukan hanya melalui share link ke Sosial Media tetapi mendapatkan tempat di Page One Google adalah tujuan utama. Baca Juga adalah salah satu trik supaya Visitor membuka link artikel lainnya.

Dengan cara membuat pengunjung berlama lama maka performa sebuah situs akan menjadi lebih baik. Ada dua cara untuk membuat Link Baca Juga atau biasa kita ketaui dengan istilah Artikel Terkait. Bisa juga kita menyebutnya dengan istilah Related Post. Jika anda tidak membuatnya dengan benar maka tampilan blog anda akan tidak menarik dan tentunya menggangu pengunjung.

Membuat Baca Juga atau Lihat juga secara otomatis itu baik karena kita tidak akan repot membuat linknya. Secara otomatis akan tampil apabila kita update artikel dan yang ada adalah berdasarkan Label Blog. Untuk artikel di atas 500 kata cukup baik anda buat Related Post otomatis tetapi jika artikel anda pendek maka tampilannya akan tidak rapi.

Pengunjung akan merasa tergangu dengan penumpukan hal yang tidak dibuhkan tepat di tengga postingan. Terlebih lagi anda juga membuat atau memasang Iklan adsense secara otomatis di tenggah Postingan. Tidak menutup kemungkinan Artikel terkait tersebut akan berdampingan dengan Iklan Adsense yang anda pasang.

Saya lebih memilih menggunakan cara manual karena selain kita dapat mengatur sendiri maka tampilannya juga bisa kita sesuaikan. Disini akan saya buatkan tutorial bagaimana cara membuat Baca Juga untuk link di tenggah artikel Blog baik secara manual maupun secara Otomatis. Silahkan anda renungkan mana yang kira kira membuat pengunjung merasa nyaman.

Cara membuat BACA JUGA di Blog dengan cara Manual :

Cara manual kita tidak perlu membutuhkan Kode HTML ataupun Script yang ribet. Jika anda menggunakan yang otomatis dan salah dalam menggunakannya maka akan mempengaruhi Loading Blog. Load blog anda akan semakin lemot dan kemungkinan besar dapat bersaing di beranda google berat. Berbeda jika kita membuat secara manual karena Teks manapun bisa kita berikan link.

Baca Juga : Cara Upload atau ganti Template Blogger menggunakan file XML dan TEXT

Diatas adalah salah satu contoh pembuatan secara manual dan bisa ditempatkan dimana saja. Caranya cukup mudah anda cukup membuat teks seperti di atas. Blog Teks yang akan diberikan Link lalu klik Link di menu Blogger. Selanjutnya copas Link artikelnya dan jangan lupa conteng "Open this link in a new window" dan klik OK. Link DoFollow ke tab baru saat di klik sudah jadi.

Cara membuat BACA JUGA di Blog secara Otomatis :

Jika membuat Artikel terkait secara Otomatis maka anda wajib membuat artikel di atas 500 kata supaya para pengunjung tidak terhgangu. Belum juga membaca sudah di sugukan link Baca Juga dengan banyak Link. Jika anda berminat silahkan ikuti tutorial berikut ini. Anda harus masuk ke HTML untuk menambahkan Kode dan CSS.

1. Langkah pertama silahkan masuk ke Blogger >> Template >> Edit HTML. Letakkan kode dibawah 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>

2. Langkah berikutnya 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)}}

3. Langkah ketiga yaitu silahkan anda cari Kode <data:post.body/> lalu ganti 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="http://www.mastimon.com/&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>

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

Baca Juga : 9 Kunci SUKSES seorang Blogger dari Awal sampai Berhasil

Itulah cara membuat Link Baca Juga di tenggah Postingan Blog baik secara manual maupun secara otomatis. Jika anda inggin melihat hasilnya silahkan lihat gambar di atas. Tampilannya cukup menarik tetapi yang otomatis terkadang memakan tempat dan membuat Penuh Postingan. Gunakan dengan bijak dan jangan sampai hanya karena inggin menampilkan kecantikan blog tetapi mengabaikan Page Speed blog.

Inggin tau lebih banyak tentang Tutorial Blog, Informasi Bisnis, Internet dan Traveling, anda bisa berkunjung ke situs TulisanNdeso.Com. Ada banyak informasi yang bisa anda dapatkan dan bisa menambah wawasan bagaimana cara mengetahui perkembangan Teknologi pada saat ini. Semoga bermanfaat dan terimakasih sudah berkunjung.

Source link

Share this post