Cara Membuat Artikel Terkait di Tengah Postingan

Hello sahabat blogger, kali ini Monsuka akan berbagi tips cara membuat artikel terkait (related post) di tengah postingan. Memasang related post atau artikel terkait di tengah artikel merupakan salah satu cara untuk menarik pengunjung supaya membaca artikel lainnya. Cara ini juga digunakan untuk menggantikan artikel terkait atau related post dari iklan adsense. Karena tidak semua blog langsung mendapatkan format jenis iklan 'Matched Content'.

Cara Membuat Artikel Terkait di Tengah Postingan

Related post adalah salah satu fitur yang sangat menarik pada blogger untuk menampilkan daftar link artikel terkait dengan isi artikel yang sedang dibaca sesuai dengan labelnya. Langsung saja cara membuat artikel terkait atau related post di tengah artikel blog.

Cara Membuat Artikel Terkait di Tengah Postingan Blog


Pertama buka dashboard Blogger anda - Lalu pilih menu Tema dan klik Edit HTML - kemudian tambahkan kode dibawah ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;position:relative;padding:0;border-radius:20px;margin:40px auto 30px auto;width:100%;box-shadow:0 0 8px -5px rgba(0,0,0,0.4)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:6.8%;border-radius:99em;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 .1s}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .1s}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 20px auto;}.related-simplify ul li:first-child a{margin:25px 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:35px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if>

Baca juga :
Kemudian cari kode ini <data:post.body/> dalam template dan ganti dengan kode dibawah ini

<div expr:id='&quot;post1&quot; + 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 == &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=5&quot;' type='text/javascript'/>
               </b:if>
               </b:loop>
               </b:if>
               <h4>Also Read</h4>
               <script type='text/javascript'>
               removeRelatedDuplicates();
               printRelatedLabels();
            </script>
      </div>
      <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
      <script type='text/javascript'>
         var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
         var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
         var s=obj1.innerHTML;
         var t=s.substr(0,s.length/2);
         var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
         if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Jika dalam template anda terdapat beberapa kode <data:post.body/> , maka gantilah kode yang terbungkus dengan tag kondisional halaman artikel.
Terakhir klik Simpan Tema dan lihatlah hasilnya di blog anda.

Jika anda ingin membuat posisi daftar link artikel terkait sejajar dengan isi tulisan, maka gunakan kode CSS ini

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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 10px -5px rgba(0,0,0,0.6);border-radius:0}.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%;border-radius:0;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>

Nah, cukup mudah bukan sobat blogger? Sekian tips dari Monsuka yaitu cara membuat related post di tengah postingan. Terima kasih sudah membaca sampai akhir dan jangan lupa kembali lagi yaa.

Sumber kode : blog Naminakiky

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Membuat Artikel Terkait di Tengah Postingan"

Posting Komentar

Iklan Tengah Artikel 1