Menulis di Blogger ataupun Wordpress untuk membentuk sebuah artikel yang menarik dibutuhkan pengetahuan yang cukup. Tujuan menciptakan goresan pena ini yaitu supaya banyak para pengunjung yang datang. Bukan hanya melalui share link ke Sosial Media tetapi mendapat daerah di Page One Google yaitu tujuan utama. Baca Juga yaitu salah satu trik supaya Visitor membuka link artikel lainnya.
Dengan cara menciptakan pengunjung berlama usang maka performa sebuah situs akan menjadi lebih baik. Ada dua cara untuk menciptakan 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 alasannya kita tidak akan repot menciptakan linknya. Secara otomatis akan tampil apabila kita update artikel dan yang ada yaitu menurut Label Blog. Untuk artikel di atas 500 kata cukup baik anda buat Related Post otomatis tetapi kalau artikel anda pendek maka tampilannya akan tidak rapi.
Pengunjung akan merasa tergangu dengan penumpukan hal yang tidak dibuhkan sempurna di tengga postingan. Terlebih lagi anda juga menciptakan 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 menentukan memakai cara manual alasannya selain kita sanggup mengatur sendiri maka tampilannya juga sanggup kita sesuaikan. Disini akan aku buatkan tutorial bagaimana cara menciptakan Baca Juga untuk link di tenggah artikel Blog baik secara manual maupun secara Otomatis. Silahkan anda renungkan mana yang kira kira menciptakan pengunjung merasa nyaman.
Cara manual kita tidak perlu membutuhkan Kode HTML ataupun Script yang ribet. Jika anda memakai yang otomatis dan salah dalam menggunakannya maka akan menghipnotis Loading Blog. Load blog anda akan semakin lemot dan kemungkinan besar sanggup bersaing di beranda google berat. Berbeda kalau kita menciptakan secara manual alasannya Teks manapun sanggup kita berikan link.
Diatas yaitu salah satu teladan pembuatan secara manual dan sanggup ditempatkan dimana saja. Caranya cukup gampang anda cukup membuat teks menyerupai di atas. Blog Teks yang akan diberikan Link kemudian klik Link di hidangan Blogger. Selanjutnya copas Link artikelnya dan jangan lupa conteng "Open this link in a new window" dan klik OK. Link DoFollow ke tab gres ketika di klik sudah jadi.
Jika menciptakan Artikel terkait secara Otomatis maka anda wajib menciptakan 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 instruksi dibawah ini sebelum Kode </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>
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/> kemudian 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>
4. Langkah terakhir silahkan Simpan Template dan lihat Hasilnya. Pastikan di Blog teman sudah memasang Font Awesome biar icon sanggup muncul.
Itulah cara menciptakan Link Baca Juga di tenggah Postingan Blog baik secara manual maupun secara otomatis. Jika anda inggin melihat jadinya silahkan lihat gambar di atas. Tampilannya cukup menarik tetapi yang otomatis terkadang memakan daerah dan menciptakan Penuh Postingan. Gunakan dengan bijak dan jangan hingga hanya alasannya inggin menampilkan kecantikan blog tetapi mengabaikan Page Speed blog.
Inggin tau lebih banyak perihal Tutorial Blog, Informasi Bisnis, Internet dan Traveling, anda sanggup berkunjung ke situs Infoterlengkap.com. Ada banyak isu yang sanggup anda dapatkan dan sanggup menambah wawasan bagaimana cara mengetahui perkembangan Teknologi pada ketika ini. Semoga bermanfaat dan terimakasih sudah berkunjung.
Membuat Baca Juga atau Lihat juga secara otomatis itu baik alasannya kita tidak akan repot menciptakan linknya. Secara otomatis akan tampil apabila kita update artikel dan yang ada yaitu menurut Label Blog. Untuk artikel di atas 500 kata cukup baik anda buat Related Post otomatis tetapi kalau artikel anda pendek maka tampilannya akan tidak rapi.
Pengunjung akan merasa tergangu dengan penumpukan hal yang tidak dibuhkan sempurna di tengga postingan. Terlebih lagi anda juga menciptakan 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 menentukan memakai cara manual alasannya selain kita sanggup mengatur sendiri maka tampilannya juga sanggup kita sesuaikan. Disini akan aku buatkan tutorial bagaimana cara menciptakan Baca Juga untuk link di tenggah artikel Blog baik secara manual maupun secara Otomatis. Silahkan anda renungkan mana yang kira kira menciptakan pengunjung merasa nyaman.
Cara menciptakan BACA JUGA di Blog dengan cara Manual :
Cara manual kita tidak perlu membutuhkan Kode HTML ataupun Script yang ribet. Jika anda memakai yang otomatis dan salah dalam menggunakannya maka akan menghipnotis Loading Blog. Load blog anda akan semakin lemot dan kemungkinan besar sanggup bersaing di beranda google berat. Berbeda kalau kita menciptakan secara manual alasannya Teks manapun sanggup kita berikan link.
Diatas yaitu salah satu teladan pembuatan secara manual dan sanggup ditempatkan dimana saja. Caranya cukup gampang anda cukup membuat teks menyerupai di atas. Blog Teks yang akan diberikan Link kemudian klik Link di hidangan Blogger. Selanjutnya copas Link artikelnya dan jangan lupa conteng "Open this link in a new window" dan klik OK. Link DoFollow ke tab gres ketika di klik sudah jadi.
Cara menciptakan BACA JUGA di Blog secara Otomatis :
Jika menciptakan Artikel terkait secara Otomatis maka anda wajib menciptakan 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 instruksi dibawah ini sebelum Kode </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>
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/> kemudian 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>
4. Langkah terakhir silahkan Simpan Template dan lihat Hasilnya. Pastikan di Blog teman sudah memasang Font Awesome biar icon sanggup muncul.
Itulah cara menciptakan Link Baca Juga di tenggah Postingan Blog baik secara manual maupun secara otomatis. Jika anda inggin melihat jadinya silahkan lihat gambar di atas. Tampilannya cukup menarik tetapi yang otomatis terkadang memakan daerah dan menciptakan Penuh Postingan. Gunakan dengan bijak dan jangan hingga hanya alasannya inggin menampilkan kecantikan blog tetapi mengabaikan Page Speed blog.
Inggin tau lebih banyak perihal Tutorial Blog, Informasi Bisnis, Internet dan Traveling, anda sanggup berkunjung ke situs Infoterlengkap.com. Ada banyak isu yang sanggup anda dapatkan dan sanggup menambah wawasan bagaimana cara mengetahui perkembangan Teknologi pada ketika ini. Semoga bermanfaat dan terimakasih sudah berkunjung.
Advertisement