Cara Membuat Realated Post di Tengah Artikel

Membuat Realated Post di Tengah Artikel

Lapaklama.com » Cara Membuat Realated Post di Tengah Artikel

Didalam mengelola sebuah blog kita tidak hanya dituntut untuk selalu membuat artikel saja. dan jika kamu ingin blog yang kamu kelola bisa berkembang ke hal yang lebih baik. maka kamu juga harus bisa menarik hati seseorang untuk membaca artikel yang sudah kamu buat.

Jika kamu memiliki 1 atau lebih artikel yang sudah cukup popular / yang berada dihalaman pertama mesin pencari, kamu bisa memanfaatkan artikel tersebut untuk Membuat Realated Post di Tengah Artikel. karena dengan begitu kemungkinan artikel baru yang kita buat akan dibaca orang lain sangatlah besar.

Bang kan biasanya template sudah dilengkapi dengan fitur realated post disetelah artikel?

Memang benar hampir semua template memiliki fitur realated post, namun penempatannya tidaklah di tengah artikel melainkan dibawah artikel. namun ada juga template yang sudah dibekali dengan fitur realated post di tengah artikel seperti template VioMagz buatan mas sugeng itu.

Bang Realated Post itu apa?

Realated post adalah fitur yang sangat menarik yang ada pada blog/blogger untuk menampilkan daftar artikel terkait dengan artikel yang sedang dibaca. sebagai contoh artikel terkait itu seperti dibawah ini.

Baca Juga:

Namun tentunya realated post yang akan kita buat ini tampilanya jauh lebih keren dari contoh realated post diatas. Oke langsung saja ikuti tutorial dibawah ini.

Cara Membuat Realated Post di Tengah Artikel

  1. Silahkan masuk kehalaman dasboard blogger kamu.
  2. Kemudian pilih menu Tema lalu klik tombol Edit HTML
  3. di Halaman edit HTML silahkan cari kode </head> (Gunakan kombinasi tombol CTRL + F untuk mempermudah menemukan kode tersebut).
  4. Jika kode tadi sudah kamu temukan. copy kode dibawah ini dan letakan di bawah kode </head>.
    <b:if cond='data:blog.pageType != "index"'>
    <style type='text/css'>
    /* Related Post Inline */
    .related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
    </style>
    </b:if>
    <b:if cond='data:blog.pageType != "index"'>
    <script type='text/javascript'>
    //<![CDATA[
    // Related Post Inline
    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>
  5. Kemudian cari lagi kode <data:post.body/> dan ganti kode tersebut dengan kode berikut 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=5"' type='text/javascript'/>
                   </b:if>
                   </b:loop>
                   </b:if>
                   <h4>Also Read</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>
    Jika kamu menemukan lebih dari 1 kode <data:post.body/> silahkan ganti kode yang terbungkus dengan tag kondisional halaman artikel.
  6. Sampai langkah ini sebenarnya kamu tinggal klik simpan template untuk menyimpan perubahan tersebut. dan realated post ada di tengah artikel kamu.
  7. Namun jika kamu ingin membuat posisi realated post sejajar dengan isi artikel. maka tambahkan kode CSS dibawah ini.
    <b:if cond='data:blog.pageType != "index"'>
    <style type='text/css'>
    /* Related Post Inline */
    .related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:32px 20px 20px auto;width:50%;float:left;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
    @media screen and (max-width:768px){.related-simplify{margin:36px auto 26px auto;width:100%}}
    </style>
    </b:if>

Sekian artikel kali ini ilahkan ikuti panduan diatas jika kamu berminat membuat realated post di tengah artikel blog. terimakasih semoga bermanfaat untuk kita semua.

Nilai Kualitas Konten

2 thoughts on “Cara Membuat Realated Post di Tengah Artikel

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *