Cara Membuat BACA JUGA secara Otomatis di Blog

Konten [Tampil]

Cara membuat baca juga secara otomatis di blog

Ketika anda menulis di wordpress atau di blogger anda akan membutuhkan sebuah artikel yang menarik agar mendatangkan para pembaca setiap harinya. Tujuan utama dari menulis artikel adalah agar mendapatkan halaman utama di google, ketika mendapatkan page one maka secara otomatis akan mendapatkan pengunjung yang banyak. Akan tetapi ketika ada pengunjung maka secara otomatis akan membutuhkan related posts atau sering disebut BACA JuGa secara otomatis di blog.

Ketika anda mempunyai artikel yang bagus akan membuat para pengunjung semakin lama di website anda. Ada beberapa cara untuk membuat link baca juga secara otomatis atau bisa disebut dengan istilah related posts. Apabila anda tidak membuatnya maka anda akan menggangu para pengunjung karena hanya mengajukan 1 artikel saja yang ingin dibaca.

Membuat baca juga secara otomatis yang banyak akan merepotkan anda yakni dengan membuat link. Cara ini cukup efektif bagi artikel yang mempunyai 500 kata lebih. Related posts otomatis membuat artikel secara otomatis dan juga membuat tampilannya tidak rapi.

Cara membuat baca juga akan membaur pengunjung akan merasa terganggu apabila artikel yang terkaitnya juga tidak sesuai dengan artikel yang ingin dibaca juga. Terlebih lagi ketika anda menggunakan iklan adsense yang berada di tengah postingan. Tidak akan menuruti kemungkinan artikel terkait tersebut akan berdampingan dengan iklan adsense yang anda pasang tersebut.

Walaupun begitu saya lebih memilih menggunakan cara manual sebab kita dapat mengatur tampilan dari website sesuai dengan keinginan kita. Nah saya akan memberikan tutorial bagaimana cara membuat BACA JUGA untuk link yang berada di tengah artikel blog baik secara otomatis atau manual. Silahkan anda pilih mana yang akan membuat pengunjung anda merasa nyaman.

Cara membuat baca juga manual di blog.

Cara membuat BAca juga manual tidaklah sulit. Anda tidak perlu kode html atau script yang terlalu ribet. Jika anda menggunakan otomatis maka akan menyebabkan loading website anda menjadi lama atau lemot yang akan membuat anda sulit bersaing di pencarian google. Lain halnya dengan membuat Baca Juga secara manual sehingga anda bisa mengaturnya sendiri.

Baca juga: Cara Memasang Ada Txt di Blog.

Diatas merupakan salah satu contoh cara membuat baca juga manual dan bisa ditempatkan di mana saja. Caranya anda bisa membuat text, dan anda berikan link di menu blogger. Kemudian anda copas link artikelnya dan jangan lupa anda centang saja OPEN THIS link on new windows dan klik OK.

Cara membuat Baca Juga secara otomatis Di Blog.

Cara membuat baca juga secara otomatis di blog seharusnya anda mempunyai artikel yang lebih dari 500 kata, karena tidak mungkin pengunjung baru masuk ke website lalu anda sediakan artikel related posts sehingga akan mengganggu pembaca artikel anda. Nah pertama anda perlu menambahkan HTML dan Kode CSS.

• Pertama anda masuk ke blogger > Template > Edit HTML. Kemudian anda masukkan kode berikut 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>

• Selanjutnya anda pasang kode CSS berikut ini sebelum kode </style> atau ]]></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)}}

• Kemudian anda masukkan kode ini dibawah kode <data:post.body> dan gantilah dengan kode berikut 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>

• Kemudian anda simpan hasilnya ya. Pastikan anda memasang font awesome agar tampilannya diikuti dengan icon ya.

Nah cara membuat link baca juga di tengah postingan secara Otomasi dan manual telah saya berikan ya. Anda jika anda ingin mengetahui hasilnya dapat mengklik contoh diatas ya. Walaupun yang otomatis mudah dilakukan akan tetapi akan memakan banyak ruang ya.

Share this post