Hello sahabat harian Batam kembali lagi nie dengan saya Syahputra saya ingin memberikan sedikit tips dan tutorial bagaimana cara membuat baca juga di tengah postingan.
Sebelum kita lanjut ke tutorail yang i gin kita bahas ada baik kita mempelajari dulu tentang cara meletak kan baca juga di tengah postingan.
Selain harus mengshare ke public ataupun ke media sosial, kita haruslah membuat sebuah trik agar mereka datang berkunjung dan juga betah berlama-lama membaca di artikel yang telah dibuat.
Cara ini sudah banyak di ketahui oleh para penulis, khususnya penulis di platform blogger ataupun wordpress.
Dengan membuat sebuah artikel agar pengunjung bisa berlama-lama di website kalian, maka situs itu akan menjadi baik dipandang oleh google. Saya menerapkan cara ini di blog saya sendiri dengan membuat BACA JUGA atau Link Yang Terkait/Artikel Yang Terkait ( Related Post ).
Kumpulan Tips dan Trik, Tutorial Blogging, Media Sharing dan Informasi, Materi Menempuh Pendidikan Cara membuat BACA JUGA di tengah artikel blog
Sudah menjadi kebiasaan kita menulis di platform blogspot atau di wordpress, Untuk membuat sebuah artikel yang menarik dan membuat minat para pembaca, diperlukannya sebuah pengetahuan dan juga informasi yang jelas.
Tujuan dari tulisan ini adalah agar membuat para pengunjung ataupun pembaca betah untuk berlama-lama mengunjungi situs ini, dan para pembaca puas akan banyaknya informasi yang di tampilkan sebuah website.
Pada umum nya postingan yang anda tampil kan di blog atau website anda sudah memiliki data post yaitu di sebut data post Body.
Namun jika anda ingin membuat berbagai tulisan otamatis dengan sendri nya di dalam postingan anda maka anda harus mempersiap kan langkah langkah nya.
pasti diantara kita yang hobi membuat suatu postingan kadang merasa bingun atau mencari cari tau.
Bagaimana agar postingan lain bisa di lihat di tengah tengah postingan yang di tampil kan atau kadang kita ingin postingan atau artikel lain bisa di baca oleh oleh lain dalam 1 artikel yaitu artikel terkait lain nya.
Saya sendiri juga dulu mencari cara tentang membuat postingan lain muncul secara otomatis di artikel yang 1 nya.
Nah kali ini saya akan memberikan solusi itu pada anda semua agar anda bisa membuat artikel lain muncul di tengah postingan supaya pembaca juga bisa membaca artikel lain nya secara otamatis.
Sangat banyak gunanya tukisan baca juga di tengah postingan blog atau web kita, kita demikian ya sudah pasti tulis baca juga yang kita buat secara otomatis akan menaik kan pengunjung blog dari satu postingan ke postingan lain nya.
Tulisan baca juga mempunyai efek yang aabgat bagus untuk blog atau website anda.
Namun apakah anda ingin buat langsung label atau hanya beberapa postingan yang di kaitkan di tengah postinga tersebut itu tergantung anda sendiri.
Tapi dalam postingan ini saya akan menjelas kan hanya untuk postingan otomatis baca juga yang mengarah kan ke postingan postinganvterbaru di blog atau website anda.
Baik tampa panjang levar simak saja tutorial saya buat di bawah ini di jamin anda pasti mendapatkan solusi yang ada cari selama ini perhatikan baik baik ya sobat.
1. Langkah pertama silahkan masuk ke Blogger >> Template >> Edit HTML. Letakkan kode 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/> lalu ganti dengan Kode dibawah ini.
<!-- beritaharianbatam.com -->
<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><!-- beritaharianbatam.com -->
4. Langkah terakhir silahkan Simpan Template dan lihat Hasilnya. Pastikan di Blog sobat sudah memasang Font Awesome agar icon bisa muncul.
.
Tampilan nya nanti seperti gambar di atas sabot perhatikan ka nya mohon di pasang script nya dengan baik jangan ada yang salah jika salah maka semua nya akan sia sia saja.
Saya hangan senang jika anda sering sering berkunjung di blog saya ini dan saya lebih senang lagi jika anda bisa membenar kelasahan yang saya buat tutorial di atas.
Saya juga akan lebih lagi jika anda memberikan komentar pada halaman komentar di bawah postingan Harian Batam.
Baik sampai sini dulu tutorial cara buat baca juga di tengah pistungan secara otamatis.