Cara Membuat Baca Juga di Tengah Postingan Blog
Arsipbiru.com - Menulis sebuah artikel yang menarik di Blogger maupun di WordPress memerlukan pengetahuan yang cukup. Tujuannya tidak lain adalah agar banyak pengunjung yang datang ke blog kita. Sehingga meningkatkan popularitas blog kita di mesin pencari. Salah satu teknik yang biasa digunakan oleh para blogger adalah dengan menyematkan link "Baca Juga" di dalam postingan.
Baca Juga sendiri biasa dikenal dengan Artikel Terkait atau Related Post. Umumnya ditempatkan di bagian bawah postingan. Namun, seiring berjalannya waktu, Related Post dimodifikasi ditempatkan di dalam postingan. Hal ini bertujuan agar pengunjung dapat membaca artikel lain yang terkait dengan artikel yang sedang ia baca.
Dengan begitu pengunjung akan lebih berlama-lama di blog kita, yang tentunya akan berdampak baik terhadap performa sebuah blog. Terlepas dari itu semua, pemilik blog juga perlu memperhatikan tampilan blognya. Agar tampilan terlihat menarik, harap diperhatikan dalam pembuatan dan penempatannya. Jika Anda tidak membuatnya dengan benar maka tampilan blog Anda akan tidak menarik dan justru malah mengganggu pengunjung.
Membuat Baca Juga dapat dilakukan dengan dua cara, yaitu manual dan otomatis. Secara manual, kita menuliskan satu per satu linknya di dalam postingan. Secara otomatis, link akan tampil apabila kita update artikel dan biasanya berdasarkan Label Blog. Untuk artikel di atas 500 kata, alangkah baiknya membuat Baca Juga atau Related Post secara otomatis. Namun, hal ini justru akan membuat tampilan kurang menarik, apabila artikel Anda pendek.
Pengunjung akan merasa terganggu dengan penumpukan hal yang tidak dibutuhkan tepat di tengah postingan. Terlebih lagi, jika Anda juga membuat atau memasang iklan AdSense secara otomatis di tengah postingan. Tidak menutup kemungkinan Baca Juga tersebut akan berdampingan dengan iklan AdSense yang Anda pasang.
Dengan menggunakan cara manual, selain dapat mengatur sendiri linknya, maka tampilannya juga bisa disesuaikan. Disini saya akan membagikan tutorial bagaimana cara membuat Baca Juga di tengah postingan blog, baik secara manual maupun secara otomatis. Silahkan Anda pilih sesuai dengan keinginan.
Cara Membuat Baca Juga di Tengah Postingan Blog
Membuat Baca Juga dengan Cara Manual
Dengan cara manual, kita tidak perlu membutuhkan barisan kode HTML ataupun script yang cukup ribet. Jika Anda menggunakan yang otomatis dan salah dalam menggunakannya, maka akan mempengaruhi performa blog. Performa blog Anda akan semakin lambat dan kemungkinan besar untuk dapat bersaing di mesin pencari sangat berat. Beda halnya jika membuatnya secara manual sebab kita dapat menentukan link mana yang akan ditampilkan di postingan blog.
Membuat dengan cara manual terbilang sangat mudah. Hanya dengan membuat teks dan memberikan link. Penempatannya juga bisa Anda atur sedemikian rupa agar tidak terlalu mengganggu pengunjung. Misalnya seperti berikut ini.
Baca Juga: Cara Memasang Tombol Back to Top dengan Progress di Blogger
Di atas adalah salah satu contoh pembuatan secara manual dan bisa ditempatkan dimana saja. Caranya cukup mudah anda cukup membuat teks seperti di atas. Blok teks yang akan diberikan link, lalu klik Link (tanda Rantai) di menu Blogger. Selanjutnya masukkan link artikelnya dan centang "Open this link in a new window" dan klik OK. Link DoFollow ke tab baru saat di klik sudah jadi.
Membuat Baca Juga secara Otomatis
Jika Anda membuat Baca Juga secara otomatis, maka wajib membuat artikel di atas 500 kata agar pengunjung tidak merasa terganggu. Berikut ini langkah-langkah dalam membuat link Baca Juga di tengah postingan secara otomatis.
Baca Juga versi 1
1. Pertama, silahkan masuk ke Blogger > pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.
2. Cari kode </head> dan masukkan kode JavaScript berikut ini di atas 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>/* Baca Juga by arsipbiru.com */
.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)}}<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>
Baca Juga versi 2
/* Related Posts Random */
.ignielMultiRelated {background-color:#C0392B; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.ignielMultiRelated:hover {background-color:#252525;}
.ignielMultiRelated .content {padding:10px 15px;}
.ignielMultiRelated .content .text {margin-right:10px; text-decoration:underline;}
.ignielMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.ignielMultiRelated .icon{height:auto; min-width:50px; background:#E74C3C url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat; transition:all .3s ease;}
.ignielMultiRelated:hover .icon {background-color:#000;}<b:if cond='data:view.isPost'>
<script> //<![CDATA[
// Multiple Related Posts by igniel.com
(function() {
var jumlah = 4;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('Z i=["\J\v\l\s\j\E\t\l\q\x\w\t\n\14\w\J\v\l\s\j\E\t\l\q\x\w\v","\X\F\h\n\x\D\h\k\h\A\j\l\n\T\k\k","\k\h\m\B\j\U","\G\n\l\u","\q\o\L","\A\n\h\r\j\h\K\k\h\u\h\m\j","\A\k\r\s\s\z\r\u\h","\o\B\m\o\h\k\M\F\k\j\o\O\h\k\r\j\h\q","\m\l\q\h\z\r\u\h","\P","\o\m\s\h\n\j\R\h\G\l\n\h","\v\r\n\h\m\j\z\l\q\h","\m\h\N\j\D\o\t\k\o\m\B"];y p=I[i[1]](i[0]),a=C+1,b=p[i[2]]/a;c=V[i[3]]({W:C},(15,H)=>H+1);Y(y d=0;d<c[i[2]];d++){y e=c[d],f=13((b*e)),g=I[i[5]](i[4]);g[i[6]]=i[7];S(p[f][i[8]]==i[9]){p[f][i[11]][i[10]](g,p[f])}Q{p[f][i[11]][i[10]](g,p[f][i[12]])}}',62,68,'|||||||||||||||||x65|_0xe7e5|x74|x6C|x6F|x6E|x72|x69|post|x64|x61|x73|x62|x6D|x70|x20|x79|let|x4E|x63|x67|jumlah|x53|x2D|x75|x66|_0x67aex5|document|x2E|x45|x76|x4D|x78|x52|x50|else|x42|if|x41|x68|Array|length|x71|for|var||||parseInt|x2C|_0x67aex4'.split('|'),0,{}));
})();
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('a 9=["\i\c\l\L\d\C","\c\l\d\k\H","\x\c\c\K","\F\d","\d\w\d\i\c","\i\w\l\M","\k\c\i","\z\i\d\c\k\l\z\d\c","\C\k\c\x"];a n=o p();a m=0;a f=o p();t E(u){r(a b=0;b<u[9[2]][9[1]][9[0]];b++){a j=u[9[2]][9[1]][b];n[m]=j[9[4]][9[3]];r(a h=0;h<j[9[5]][9[0]];h++){s(j[9[5]][h][9[6]]==9[7]){f[m]=j[9[5]][h][9[8]];m++;I}}}}t G(){a e=o p(0);a g=o p(0);r(a b=0;b<f[9[0]];b++){s(!B(e,f[b])){e[9[0]]+=1;e[e[9[0]]-1]=f[b];g[9[0]]+=1;g[g[9[0]]-1]=n[b]}};n=g;f=e}t B(v,y){r(a q=0;q<v[9[0]];q++){s(v[q]==y){A D}};A J}',49,49,'|||||||||_0x6cd8|var|_0x941ax6|x65|x74|_0x941axa|relatedUrls|_0x941axb|_0x941ax8|x6C|_0x941ax7|x72|x6E|relatedTitlesNum|relatedTitles|new|Array|_0x941axf|for|if|function|_0x941ax5|_0x941axd|x69|x66|_0x941axe|x61|return|contains|x68|true|related_results_labels|x24|removeRelatedDuplicates|x79|break|false|x64|x67|x6B'.split('|'),0,{}));
//]]> </script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
</b:if>
<script> //<![CDATA[
// Multiple Related Posts by igniel.com
(function ignielMultiRelated() {
var text = 'BACA JUGA:';
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('P b=["\e\f\c\B\h\E","\o\d\c\z\q\N","\A\e\q\q\o","\S\n\B\c\n\f\e\C\y\e\h\n\T\f\e\d\h\f\z","\M\y\f\o\G\H\f\e\f\p\h\q\o\L\e\e","\n\c\c\f\o\F\V\C\I","\k\g\m\d\c\s\p\e\d\g\g\u\j\p\q\c\h\f\c\h\j\l\k\g\m\d\c\s\p\e\d\g\g\u\j\h\f\K\h\j\l","\k\w\g\m\d\c\l\k\d\s\E\o\f\A\u\j","\j\s\h\n\h\e\f\u\j","\j\l","\k\w\d\l\k\w\g\m\d\c\l\k\g\m\d\c\s\p\e\d\g\g\u\j\n\p\q\c\j\l\k\w\g\m\d\c\l"];v r=D[b[2]]((t[b[0]]-1)*D[b[1]]());v i=0;v x=O[b[4]](b[3]);Q(i<t[b[0]]&&i<x[b[0]]){R(v a=0;a<x[b[0]];a++){x[a][b[5]]=b[6]+W+b[7]+Y[r]+b[8]+t[r]+b[9]+t[r]+b[U];J(r<t[b[0]]-1){r++}X{r=0};i++}}',61,61,'|||||||||||_0x2867|x6E|x61|x6C|x65|x73|x74||x22|x3C|x3E|x70|x69|x72|x63|x6F||x20|relatedTitles|x3D|let|x2F|jumlah|x75|x64|x66|x67|x4D|Math|x68|x48|x79|x53|x4C|if|x78|x41|x71|x6D|document|var|while|for|x2E|x52|10|x54|text|else|relatedUrls'.split('|'),0,{}));
})();
//]]> </script>
</b:if>
Posting Komentar