Cara membuat related post ringan model editblogtema

Related Post itu penting karena:



  • Memberikan kesan profesional pada halaman blog
  • Memberikan informasi konten tambahan (terkait konten sebelumnya) yang lebih lengkap kepada pengunjung blog
  • Nilai Persentase Bounce rate Naik, Bounce rate adalah persentase pengunjung yang langsung meninggalkan website setelah membuka halaman tunggal (Menurut statistik Google Analytics).
  • Mempromosikan konten lainnya yang serupa terkait topik sehingga traffic blog akan meningkat dan merata.
  • Mengoptimasi Iklan terutama Google Adsense karena PV akan naik karenanya persentase CTR juga naik.
Dari sisi SEO Google konten organik related post ini dapat menjadi backlink Internal yang relevan sehingga PA (Page Authority) juga akan ikut naik.


Jika alasan diatas demikian bagus mengapa tidak memasangnya?

Baiklah saya menawarkan pemasangan Related Post yang kami buat sendiri dan telah kami pergunakan selama hampir setengah tahun ini, hasilnya memanglah lumayan membantu seperti yang telah kami singgung pada poin poin diatas tadi.

1. CSSMasuk kepengaturan Dasbor Blogger.

Pilih Tema
Pilih Edit HTML
Pada halaman editor HTML Blogger cari kode </head> dan letakan kode berikut tepat di atasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
/* Related Post Sederhana */
#related-posts{
display:block;
margin:10px 0px;
line-height:1.0em;
}
#related-posts h3.title{
font-size:10px;
font-family:Dancing Script;Homemade apple;
font-weight:200;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#related-posts h3.title span{
background-color:#fff;
padding:0px 10px;
position:relative;
z-index:1;
}
#related-posts ul{
margin:10px 0px 0px;
padding:0px;
display:flex;
display:-webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
}
#related-posts ul li{
list-style:none;
width:calc((100% / 3) - 25px);
text-align:left;
margin-right:10px;
margin-bottom:10px;
padding:0px;
-webkit-margin-start:0px !important;
}
#related-posts ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:1px;
}
#related-posts ul li:nth-of-type(3n){
margin-right:0px;
}
#related-posts ul li a{
display:block;
}
#related-posts-title ul li a.judul{
color:#000; /* Warna Huruf */
font-weight:200;
margin-top:3px;
}
#related-posts ul li a.judul:hover, #related-posts ul li:hover a.judul{
color:#CC0099; /* Warna Huruf Ketika Disorot */
}
#related-posts .norelated{
text-align:left;
font-weight:600;
}
@media screen and (max-width:480px){
#related-posts ul li{
width: calc((100% / 2) - 9.5px);
margin-right:15px;
margin-bottom:15px;
}
#related-posts ul li:nth-of-type(3n){
margin-right:15px;
}
#related-posts ul li:nth-of-type(2n){
margin-right:0px;
}
}
#related-posts {
margin: 5px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #33FF33;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 15px;
color: #333;
text-transform: capitalize;
border-bottom:1px solid #33FF33;
display:block;
padding:1px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #f0f0f0;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #F8F8FF;
border-left: 0px solid #33FF33;
}
#related-posts li {
padding: 10px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Baca juga:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i]}}relatedTitles=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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>


2. HTML

Masih di dalam halaman editor HTML Blogger, cari kode berikut <data:post.body/> yang kedua atau yang ketiga (pada setiap template jumlahnya berbeda beda), namun posisi yang benar biasanya adalah yang berada di bawah kode:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Jadi letakan kode berikut tepat di bawah kode <data:post.body/> tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href='https://www.editblogtema.com/2020/12/cara-membuat-related-post-ringan-model.html' rel='nofollow' style='font-size: 9px; color: #CECECE; float: right;'>Artikel terkait simpel</a></div></b:if>

Save template.

3. Mengapa tanpa Thumbnail?

Alasannya tentu saja:

Sederhana itu ringan dan alami
Sederhana itu di cintai google
Sederhana itu mudah fahami

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

16 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. memang benar saya dah merasakannya jika tanpa thumbnail lebih ceoet, sedang pas pake thumbnail biar ada kotakan ilustrasi awal foto artikelnya yang sebenernya bikin menarik untuk diklik tapi terkadang bikin loading

    terima kasih untuk ilmunya :D

    BalasHapus
  2. Yang sederhan yang memesona. Eh? hihihi ....

    BalasHapus
  3. Terima kasih tutorialnya..

    Saya mau nanya, kalo cara buat blog pager/next page di template Contempo gimana ya?
    Soalnya di template baru, cuma ada tombol lebih lama, tombol lebih barunya engga ada.
    Terima kasih.. :)

    BalasHapus
    Balasan
    1. Tutorialnya ada di CB:

      https://www.contohblog.com/2016/01/cara-membuat-blog-pager-next-prev-judul-posting.html

      Hapus
    2. Untuk merombak itu ikuti tutorial yang ini karena memang cocok untuk contempo:

      https://www.editblogtema.com/2021/02/cara-membuat-blog-pager-nextprev.html

      Hapus
  4. Cara menenghapus Showing posts with the label bawaan Blog cotempo, emporio, soho dan notable gimana ya…???supaya blog bisa keren gitu lo!, sebab blog SUARA HARIAN OTO BEMO BERODA TIGA sudah berumur 14 tahun, tapi tidak pernah seo, tak punya keyword yang baik dan tidak punya backling yang memadai, lagi pula tak terdeksi BERT cerdas. Cukup menderita sebagai blogger Tua tak pernah naik kelas, malah tambah puyeng palak gue mas bro !!!

    BalasHapus
  5. masuk ke pengaturan blog>Tema>Edit HTML:

    Cari kode:

    <div class='post-filter-message'>

    akan muncul kode lengkapnya sbb:

    <div class='post-filter-message'>
    <div>
    <b:if cond='data:view.isArchive'>
    <data:view.archive.rangeMessage/>
    <b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/>
    <data:view.search.resultsMessageHtml/>
    </b:if>
    </div>
    <div>
    <a class='flat-button ripple' expr:href='data:blog.homepageUrl'>
    <data:messages.showAll/>
    </a>
    </div>
    </div>

    Hapus saja seluruh kode di atas dan ganti dengan:

    <!--<div class='post-filter-message'>
    <div>
    <b:if cond='data:view.isArchive'>
    <data:view.archive.rangeMessage/>
    <b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/>
    <data:view.search.resultsMessageHtml/>
    </b:if>
    </div>
    <div>
    <a class='flat-button ripple' expr:href='data:blog.homepageUrl'>
    <data:messages.showAll/>
    </a>
    </div>
    </div>-->

    Save template.

    Saran untuk suara harian OTO:

    Rombak tampilan personal halaman dari personal menjadi publik. Tampilan dengan tema tertentu akan membuat halaman tamak tidak umum dan personal. Jadikan halaman tampak terbuka dan lebih ramah.

    Halaman dengan warna hitam legam juga tampak monoton, kaku dan muram. Buatlah halaman tampak sederhana. Jika perlu undang penulis untuk menulis di halaman tersebut.

    Semoga Suara harian bemo beroda tiga akan segera lebih hidup dan lebih lincah

    BalasHapus
  6. COPAS RELATED POST www.editblogtema.com TIDAK MUNCUL DAN POPULAR POST BAWAAN JUGA TIDAK HILANG PADA LAYOUT KEDUA BLOG NOTABLE MILIK SAYA, SOLUSINYA ???

    BalasHapus
    Balasan
    1. masak? coba periksa kode : <data:post.body/>

      mungkin ada beberapa buah di dalam template karena editing template terdahulu...meletakannya memang harus di bawah kode yasng tepat

      Hapus
  7. sip, tapi saya masuk teme notable yang lain, hasil mantap

    BalasHapus
  8. Mendapatkan ranking No.1 dstnya di Google dengan total hasil pencarian mencapai ribuan atau pun jutaan dimesin pencari cukup berkomrntar tanya jawab sam sofyan Y-an admin editblogtema.com

    BalasHapus
  9. trimaksih om sofyan....blog saya ada dimesin pencari, tak perlu beli backlink, omong itu semua!!!
    cukup komentar diblog om aja udah 100 prosen dimesin pencari, hmm

    BalasHapus
  10. paling jitu tiap hari nulis konten artikel

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak