Jump to Indonesia - Unforgettable Tourism Experiences in Indonesia!
Ilmu Sesuatu - Berbagi Ilmu.
Cara membuat Baca Juga pada blogger dapat dilakukan dengan cara seperti di bawah ini.
 |
| Begini Cara Membuat 'Baca Juga' Secara Otomatis di Blogger (ss ta) |
Menulis artikel di Blogger atau Wordpress membutuhkan informasi yang cukup untuk membuat artikel yang menarik.Tujuan dari artikel ini adalah untuk mendapatkan banyak pengunjung. Tidak hanya dengan membagikan link di jejaring sosial, namun tujuan utamanya adalah mendapatkan tempat di halaman pertama Google.
"Baca Juga" adalah trik untuk mengelabui pengunjung agar membuka tautan ke artikel lain. Ketika pengunjung tetap tinggal, kinerja situs web meningkat.
Ada dua cara untuk
membuat link "Baca Juga" atau yang disebut artikel terkait.
Kita juga bisa
menyebutnya dengan istilah “Related Post”.
Jika Anda tidak
melakukannya dengan benar, tampilan blog Anda akan menjadi tidak menarik dan
tentu saja mengganggu pengunjung Anda.
Otomatis "Baca
Juga" bagus karena kami tidak repot membuat tautan.
Muncul secara otomatis
saat kita mengupdate artikel dan apa yang ada berdasarkan tag blog.
Untuk artikel yang lebih
panjang dari 500 kata, Anda dapat membuat postingan terkait secara otomatis.
Namun, jika artikel Anda
pendek, mereka akan terlihat ceroboh.
Pengunjung terganggu
dengan penumpukan hal-hal yang tidak perlu di tengah pesan.
Selain itu, buat atau
pasang iklan Adsense secara otomatis di tengah pesan.
Kemungkinan artikel
terkait akan muncul di sebelah iklan Adsense yang terpasang.
Saya lebih suka cara
manual karena tidak hanya kita bisa mengkustomisasinya sendiri, tapi kita juga
bisa mengkustomisasi tampilannya.
Disini Luc Tekno membuat
panduan cara menyisipkan link "Baca Juga" secara manual dan otomatis
di tengah artikel blog.
Pikirkan tentang apa
yang membuat pengunjung Anda nyaman.
Untuk mengaktifkan Baca
Juga di Blogger secara manual:
Metode manual tidak
memerlukan kode atau skrip HTML yang rumit.
Jika Anda menggunakan
yang otomatis dan menyalahgunakannya, itu akan memengaruhi pemuatan blog.
Blog Anda akan dimuat
lebih lambat dan kemungkinan besar akan bersaing dengan beranda Google yang
besar.
Berbeda jika kita melakukannya
secara manual karena kita bisa memberikan link teks apapun.
Baca Juga : Trik: 9 Cara Live di TikTok tanpa Harus Punya Seribu Followers
Diatas adalah salah satu contoh pembuatan secara manual dan bisa
ditempatkan dimana saja.
Metodenya cukup sederhana. Yang harus Anda
lakukan adalah membuat teks seperti di atas.
Blok teks untuk ditautkan. Kemudian klik
"Tautan" di menu Blogger.
Selanjutnya, salin dan tempel tautan
artikel. Ingatlah untuk memilih "Buka tautan ini di jendela baru" dan
klik OK.
Tautan DoFollow ketika Anda mengklik tab
baru selesai. Untuk secara otomatis membaca juga di Blogger:
Saat Anda membuat artikel terkait secara
otomatis, Anda harus membuat artikel yang lebih panjang dari 500 kata agar
tidak mengganggu pengunjung.
Saya belum membacanya, sudah ada tautan
bacaan dengan banyak tautan.
Jika Anda tertarik, ikuti tutorial di bawah
ini.
Anda harus beralih ke HTML untuk
menambahkan kode dan CSS.
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.
<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 sobat sudah memasang Font Awesome agar icon
bisa muncul.
Itulah cara membuat Link Baca Juga di tenggah
Postingan Blog baik secara manual maupun secara otomatis.
Jika anda ingin melihat hasilnya silahkan lihat
gambar di atas.
Tampilannya cukup menarik tetapi yang otomatis
terkadang memakan tempat dan membuat Penuh Postingan.
Gunakan dengan bijak dan jangan sampai hanya karena
ingin menampilkan kecantikan blog tetapi mengabaikan Page Speed blog.
Semoga bermanfaat dan terimakasih sudah berkunjung.***
Penutup
Sekian penjelasan singkat mengenai Begini Cara Membuat 'Baca Juga' Secara Otomatis di Blogger. Semoga bisa menambah pengetahuan kita semua.