Menulis artikel yang menarik di Blogger atau Wordpress membutuhkan pengetahuan yang cukup. Tujuan dari menulis artikel ini adalah untuk menarik banyak pengunjung.
Tidak hanya dengan membagikan link di media sosial, tujuan utamanya adalah agar bisa menempati di halaman pertama Google. Membuat BACA JUGA atau lihat juga/artikel terkait/link terkait/related post ini merupakan cara sederhana agar pengunjung mau mengklik dan membaca artikel lain pada blog kita, dengan begitu bounce rate di blog kita akan berkurang
Cara ini termasuk kedalam teknik SEO on Page Blog lo. Penempatan nya pun bermacam-macam, ada yang di bawah artikel, ditengah artikel, atau bisa juga di sesuaikan sendiri. Nah kali ini mimin akan bahas yang ditengah dan bebas dimana aja wkwk. Untuk cara pasangnya juga ngga ribet ribet amat kok, bisa dibilang mudah lahh, dan ada dua cara yaitu cara manual dan otomatis.
Baca Juga:
Membuat Baca Juga atau Lihat juga secara otomatis akan lebih praktis dan efesien karena kita tidak perlu menulis linknya satu per satu. Dengan cara ini, maka artikel yang muncul akan sesuai dengan label postingan sehingga pengunjung akan lebih tertarik untuk ngeklik postingan nya karena masih mirip mirip dengan postingan yang sedang dibaca
Untuk artikel yang jumlah kata nya lebih dari 500 sangat disarankan untuk menggunakan cara ini, tetapi apabila artikel nya pendek saya tidak menyarankan karena tampilan nya akan tidak rapi dan akan membuat pengunjung tidak nyaman.
Mimin sendiri lebih memilih untuk cara yang manual ya, karena selain bisa di customize sendiri, tampilannya juga akan lebih rapih dan bisa di sesuaikan seenak jidat.
Disini mimin akan buatin tutorial bagaimana Cara Membuat Baca Juga di tengah dan dibawah artikel Blog Secara Manual dan Otomatis. Silahkan di pikir-pikir mau pakai yang mana, dan jangan lupa untuk tetap mengutamakan kenyamanan pengunjung.
Cara membuat Baca Juga / Related Post di Postingan Blog
Cara Bikin Artikel Terkait Secara Manual
Dengan cara manual kita tidak perlu edit-edit Kode HTML ataupun Script yang bikin pusing. Jika kamu menggunakan cara otomatis maka akan banyak kode script yang akan diubah dan ditambahkan sehingga jika ada kode yang salah, maka akan error dan akan berpengaruh terhadap loading Blog.
Blog yang mempunyai loading lemot tidak disukai google maupun pengunjung. Jika sudah tidak disukai google maka akan sulit untuk dapat bersaing di halaman pertama SERP.
Baca Juga: Cara Berubah Menjadi Titan, No ROOT
Diatas adalah contoh cara membuat Baca Juga / Related Post secara manual dan bisa ditempatkan dimana saja sesuka hati. Cara bikin nya pun cukup mudah, cukup tulis begini "Baca Juga: isi sesuai dengan judul artikel"
Jika sudah dibuat maka step selanjutnya adalah mengblok atau memilih tulisan yang ingin diberi link, terus pilih gambar link yang ada di menu blogger. Selanjutnya copy link yang ingin dijadikan artikel terkait lalu pastekan link artikelnya dan jangan lupa conteng "Open this link in a new window" dan klik OK.
Udah gitu aja. Mudah kan wkwk.
Cara Bikin Artikel Terkait Secara Otomatis
Jika kamu males dan capek nulisin manual, kamu bisa pakai cara membuat baca juga otomatis di tengah postingan yang mimin bagikan ini.
Bagi yang artikel blognya lebih dari 500 dan udah dikasih label maka script ini nantinya akan otomatis menampilkan artikel yang terkait / related di tengah postingan secara otomatis. Bagi yang mau dan penasaran silahkan ikuti step by step nya dibawah
Ikuti dan jangan di skip langkah langkah nya agar dapat menampilkan Baca Juga / Related Post di tengah artikel tanpa adanya error
1. Langkah pertama silahkan masuk ke Blogger → Tema → Edit HTML. Letakkan kode dibawah ini sebelum Kode </head> atau </head><!--<head/>-->
<b:if cond ='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var dewaBacajuga=new Array,dewaBacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];dewaBacajuga[dewaBacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[dewaBacajugaNum]=r.link[t].href,dewaBacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=dewaBacajuga[r]);dewaBacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((dewaBacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<dewaBacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+dewaBacajuga[e]+"</a></li>"),e<dewaBacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>2. Langkah selanjutnya memasang kode CSS dibawah ini sebelum Kode ]]></b:skin> atau </style>
/* dp baca juga 1 */
.dewa-bacajuga{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:84%;border:6px double #fff;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px 8px 30px;margin:0;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga h4:before{content:'\f05a';font-family:fontawesome;position:absolute;font-weight:400;margin:0 5px 0 2px;color:#fff;overflow:hidden;left:10px;transition:all .3s}
.dewa-bacajuga ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f087';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f058';font-family:fontawesome;color:#f1c40f;}
.dewa-bacajuga a{color:#fff;font-size:15px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#fff;text-decoration:underline}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}
Related Post Baca Juga
Baca Juga Style Pertama
/* dp baca juga 2 */
.dewa-3. Langkah ketiga silahkan kamu cari Kode <data:post.body/> lalu ganti dengan Kode dibawah ini. *kemungkinan ada beberapa kode <data:post.body/> di dalam tema blog kamu, jadi silahkan dicoba satu - satu ya sampai Related Post nya muncul
<div expr:id='"post1" + data:post.id'/>
<div class='dewa-bacajuga'>
<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>Untuk menambah jumlah artikel terkait yang muncul, silakan ubah nilai max-results=3" sesuai keinginanmu. Tapi saran mimin 3 aja cukup, karena script ini akan mempengaruhi kecepatan blog kamu.
4.Langkah terakhir silahkan Simpan Template dan lihat hasilnya.
Jika script nya tidak work atau malah error silahkan komen dibawah atau langsung Whatsapp aja biar mimin bantu, okay.
Untuk hasilnya kira-kira seperti ini:
Jika kalian ingin mencoba style yang lain kalian bisa ganti kode CSS diatas dengan kode CSS dibawah ini
Kode CSS Related Post / Baca Juga Style 1
/* dp baca juga 2 */
.dewa-bacajuga{position:relative;padding:0;margin:15px auto;width:100%;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga 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}
.dewa-bacajuga ul li:nth-child(odd){background:#fefefe}
.dewa-bacajuga ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.dewa-bacajuga ul li:before{content:'\f026';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#a158e4;overflow:hidden;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f026';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.dewa-bacajuga a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;text-decoration:underline}
.dewa-bacajuga 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)}}Hasilnya
Kode CSS Related Post / Baca Juga Style 2
/* dp baca juga 3 */
.dewa-bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:87%;background:#e2e2e2;border:4px double rgba(0,0,0,0.2)}
.dewa-bacajuga h4{background:#ca4444;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#fff;border-radius:20px;top:-21px;left:2.5%}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f02b';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f02b';font-family:fontawesome;color:#0383d9;}
.dewa-bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}
Hasilnya
Kesimpulan
Itulah tadi Cara Membuat Baca Juga / Related Post / Artikel Terkait / Lihat Juga di Blogger secara manual dan otomatis. Selain untuk menambah ke estetik an blog kamu, dengan memasang related post di tengah artikel ini secara tidak langsung kamu sudah melakukan praktek SEO onpage di blog kamu.
Dibaca dan dipahami dengan benar step by step Tutorial nya, agar berhasil dan bisa menampilkan Baca Juga di tengah artikel dengan baik, karena jika salah menaruh kode nya, maka script Related Post nya tidak akan tampil.
Sekian tutorial dari mimin, semoga bermanfaat. Jangan lupa untuk komentar dibawah ya, terimakasih.
sumber: dewaplokis.com
Tags:
related post igniel
cara membuat baca juga di blog
cara membuat baca juga di tengah postingan wordpress
cara membuat baca juga di blogger
cara membuat kotak baca juga di blog
cara membuat baca juga di tengah postingan blogspot
Posting Komentar