Skip to main content
Azid Blogger

follow us

Cara Mudah Membuat Related Post Di Sidebar Pada Blogger

Cara Mudah Membuat Related Post Di Sidebar Pada Blogger

www.azid.web.id - Cara Mudah Membuat Related Post Di Sidebar Pada Blogger. Jika sebelumnya saya sudah share membuat related post sticky melayang sebelah kanan blog maka kali ini saya akan share membuat related post tampil pada menu sidebar. Secara umum sobat pasti sudah mengetahui bahwa related post biasanya tampil dibawah postingan. Dengan penggunaan realed post setidaknya akan membantu pengunjung untuk melihat artikel terkait yang mereka baca dan tentunya akan meningkatkan jumlah visitor blog sobat tatkala pengunjung tertarik untuk mengklik artikel lainnya yang dirasa bagi mereka bermanfaat atau memiliki hubungan terhadap artikel yang mereka baca. Bagi pengunjung yang menginginkan wawasan yang lebih luas pastinya meraka akan tertarik terhadap postingan yang ditampilkan pada related post.

baca juga: optimasi image dengan lazy load agar blog fast loading

Dengan itu semua, kadang kala kita sebagai seorang blogger pasti mengingingkan hal yang berbeda dengan lainnya. Jika related post biasanya tampil dibawah postingan, bisa jadi seorang blogger memiliki ide untuk mengubah manset tersebut mungkin bisa ditampilkan secara melayang atau sticky disebelah kanan post seperti yang biasa digunakan pada website dengan self hosting wordpress bahkan bisa jadi ditampilkan pada menu sidebar seperti halnya yang akan bahas sekarang ini. Dengan membuat cita rasa yang berbeda ini bisa jadi akan menjadi pembeda atau ciri khas pada blog sobat.

Sebenarnya sudah banyak sekali tutorial membuat related post pada menu sidebar blog bahkan ada sebuah artikel tutorial terkait hal tersebut sudah dibuat sejak tahun 2011 dan nangkring pada page one google. Selain itu blog terkenal juga sudah membuatnya bahkan dengan menu widget yang ditampilkan pada menu layout dan tentunya akan memudahkan sobat mensetting style related post yang disediakan. Diantara blogger terkenal seperti bungkfrangki.com, dibalikseo.com, kompiajaib.com, dte.web.id, dan blogromeltea.com. Dari itu semua, tutorial yang menarik adalah milik bungfrangki. Pada tutorialnya tersedia 6 style atau gaya related post yang menurut saya sangat menarik dan flexible.

Baca juga: membuat daftar isi keren pada blog

Baiklah, disini saya share related post merupakan hasil eksperimen saya sendiri dan terbukti berhasil. Related post yang saya gunakan merupakan 100% sobat harus menggunakan menu edit HTML sehingga tutorial ini sangat sederhana dibanding lainnya. Dari tutorial ini memang sengaja saya tidak membuat widget pada menu layout, jadi jika sobat tertarik dengan menu layout maka sobat bisa search membuat related post di sidebar bungfrangki.

Sebelum membuat related post, saya akan membuat langkah - langkah memodifikasi related post agar tampil pada menu sidebar. Dimana tujuannya adalah agar jika sobat masih cinta dengan related post yang ada pada blog sobat, maka cara ini merupakan cara yang paling baik.

Memodifikasi related post agar tampil pada menu sidebar

Pertama, Biasanya secara umum, script related post dibungkus dengan kode <b:includable id='relatedpost' var='post'> atau <b:includable id='related-post' var='post'> dan untuk memanggil kode tersebut diperlukan kode <b:include data='post' name='relatedpost'/> atau <b:include data='post' name='related-post'/>. Jika hal tersebut ada pada blog sobat maka langkah awal adalah sobat bisa copas terlebih dahulu script yang bersangkutan ke notepad. Kurang lebih scriptnya akan seperti ini
<b:includable id='relatedpost' var='post'>
<div class='related-wrapper'>
<div class='related-post' id='related-post'/>
 <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      thumbnailSize:300,
      noImage: &quot;https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s269/no-thumbnail.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
<div class='clear'/>
</div>
</b:includable>

Jika sudah di copas, langkah selanjutnya sobat bisa menghapus kode pemanggilnya <b:include data='post' name='related-post'/> agar nantinya blog sobat tidak mengalami blank atau artikel didalam post tidak nampak akibat error kode pemanggil.

Lantas jika related post yang saya punya tidak dibungkus dengan kode <b:inludable ...> akan tetapi langsung ada di script bawah postingan bagaimana?, jika hal itu terjadi sobat bisa tidak usah mengikuti langkah diatas akan tetapi cukup copas kodenya pada notepad agar nantinya tidak bolak-balik copas script yang akan sobat butuhkan nantinya. Kurang lebih kodenya akan seperti ini

<div class='related-wrapper'>
<div class='related-post' id='related-post'/>
 <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      thumbnailSize:300,
      noImage: &quot;https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s269/no-thumbnail.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
<div class='clear'/>
</div>

Kedua, sobat ambil kode <div class='related-post' id='related-post'/> dan letakkan kode tersebut di dalam kode sidebar atau untuk mudahnya sobat bisa taruh pada widget layout dengan new widget pilih HTML. Untuk ditaruh pada sidebar kurang lebih akan seperti ini

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
.................
...............
..................
</b:section>
</div>

atau kadang juga seperti ini

<aside>
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
.................
...............
..................
</b:section>
</div>
</aside>

Dan bisa jadi seperti ini

<aside id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
.................
...............
..................
</b:section>
</aside>

Untuk peletakkan scriptnya sobat bisa taruh dibawah kode id='sidebar-wrapper' atau bisa dibawahnya. Kurang lebih akan menjadi seperti ini

Posisi Diatas


<aside>
<div id='sidebar-wrapper'>

<div class='related-post' id='related-post'/>

        <b:section class='sidebar' id='sidebar' preferred='yes'>
.................
...............
..................
</b:section>
</div>
</aside>

Posisi Dibawah



<aside>
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
.................
...............
..................
</b:section>

<div class='related-post' id='related-post'/>

</div>
</aside>

Ketiga, Tetap meletakkan script pada menu sidebar. Akan tetapi script yang akan sobat taruh berbeda dengan sebelumnya. Lihatlah pada script yang sobat copas pada notepad maka sobat akan menjumpai script dengan nama var relatedPostConfig sampai calback dan dibawahnya ada kode }; tepat diatas kode penutup </script>. Jika sudah tahu, sobat copas saja kode tersebut dan tepat dibawahnya kode <div class='related-post' id='related-post'/> yang sobat sudah ditaruh pada menu sidebar tadi. Jangan lupa gunakan kode pembuka script dan penutupnya. Untuk lebih jelasnya tampilan yang harus sobat lakukan adalah seperti dibawah ini

Sebelumnya diberi pembuka dan penutup script



  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      thumbnailSize:300,
      noImage: &quot;https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s269/no-thumbnail.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };

Setelah diberi pembuka dan penutup script


<script type='text/javascript'>
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      thumbnailSize:300,
      noImage: &quot;https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s269/no-thumbnail.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
 </script>

Peletakkan kode script tersebut tepat dibawah kode <div class='related-post' id='related-post'/>


<aside>
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
.................
...............
..................
</b:section>

<div class='related-post' id='related-post'/>

<script type='text/javascript'>
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      thumbnailSize:300,
      noImage: &quot;https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s269/no-thumbnail.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
 </script>

</div>
</aside>

Keempat, langkah ini merupakan langkah akhir untuk memodifikasi related post untuk scriptnya. Dari script pertama yang sobat copas di notepad kurang lebih akan tinggal script seperti dibawah ini

<div class='related-wrapper'>

 <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];

  </script>
<div class='clear'/>
</div>

Jika benar, maka langkah terakhir adalah carilah kode <data:post.body/> mungkin sobat akan menemukan kode tersebut bisa jadi 2 bahkan 3. Jika sobat hanya menemukan 1 saja sobat bisa copas kode diatas tersebut tepat dibawah kode <data:post.body/> kurang lebih contohnya akan seperti ini

<div id='konten'>
<data:post.body/>
</div>

<div class='related-wrapper'>
 <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  </script>
<div class='clear'/>
</div>

Akan tetapi jika sobat menemukan kode tersebut lebih dari satu, biasanya didekat kode tersebu ada tag <b:if ...... item> atau <b:if .....varpost> diatasnya. Jika sobat menemukan seperti itu sobat bisa menaruhnya kode diatas di bagian kode tersebut. Langkah ini, merupakan cara secara umum yang digunakan pada tutorial-tutorial yang ada. Namun dari eskperimen saya ternyata kode tersebut bisa diletakkan diatas kode </body>

kurang lebih peletakkan kode diatas </body> nampak seperti ini

<div class='related-wrapper'>
 <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  </script>
<div class='clear'/>
</div>

</body>


PERHATIAN:
JIKA PELETAKKAN DIATAS KODE BODY TIDAK BERHASIL MAKA SOBAT HARUS MENEMPATKAN KODE TERSEBUT DIBAWAH KODE <data:post.body/>

Kelima, jika sobat sudah memodifikasinya maka langkah terakhir adalah Save Template sobat dan lihat hasilnya. Semoga berhasil.

PENTING:
Pada kasus yang saya alami, ternyata pada menu related postnya memiliki 3 baris dan ternyata hal tersebut disebabkan pada menu css related post width-nya adalah 33,333%. Jika sobat mengalami hal yang serupa maka sobat bisa mengganti width pada menu css dengan pencarian ".related" dan cari width:33,333% kemudian ganti dengan 50% untuk 2 baris, atau 100% jika ingin hanya satu baris.

Membuat related post pada menu sidebar

Untuk langkah ini yang perlu diperhatikan pertama kali adalah pastikan sobat sudah menghapus seluruh kode css related post dan script related post pada blog sobat agar nantinya tidak berantakan.

Pertama, sobat bisa masuk blogger dan pilih menu theme atau template kemudian klik edit HTML

Kedua, cari kode </head> atau cukup ketik /head. untuk menampilkan search pada menu edit HTML cukup tekan saja CTRL + F. Jika sudah ketemu, letakkan kode css berikut ini tepat diatas kode </head>

<style>
/* Related Posts */
.related-post h4{margin:0 10px 10px 0;font-size:24px;font-weight:500;padding:0;color:#333}
.related-post{width:100%;margin:0;padding:0;font-size:16px;text-align:left;}
.related-wrapper{overflow:hidden;}
.related-post{margin:0 auto;}
.related-post-style-2{margin:0 -10px 0 0;padding:0;list-style:none}
.related-post-style-2 li{display:block;padding:0;float:left;width:50%;height:200px;overflow:hidden;margin:0 0 10px;padding:0 10px 0 0;list-style:none;position:relative}
.related-post-style-2 li:hover a{color:#555}
.related-post-style-2 .related-post-item-thumbnail{width:100%;height:120px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:none;margin:0;transition:all .4s ease-in-out;position:relative}
.related-post-style-2 .related-post-item-thumbnail amp-img{width:100%;height:100%;max-width:none;max-height:none;background-color:transparent;border:none;display:block}
.related-post-style-2 .related-post-item-title{font-size:14px;font-weight:500;display:block;display:-webkit-box;margin:0;line-height:1.1;padding:5px 0;}
.related-post-style-2 .related-post-item-more,.related-post-style-2 .related-post-item-summary,.related-post-style-2 .related-post-item-summary a{display:none}
.related-post-style-2:after{content:"";clear:both;display:block;}
@media screen and (max-width:640px){.related-post-style-2 li{height:170px;}
.related-post-style-2 .related-post-item-thumbnail{height:110px;}
}
@media screen and (max-width:414px){.related-post-style-2 li{width:50%;height:160px;}
.related-post-style-2 .related-post-item-thumbnail{height:100px;}
}
@media screen and (max-width:375px){.related-post-style-2 li{width:100%;height:210px;display:block;padding:0;float:none;overflow:hidden;margin:0 0 8px;list-style:none}
.related-post-style-2 .related-post-item-thumbnail{height:170px;}
.related-post-style-2{margin:0}
.related-post-style-2 .related-post-item-title{right:0}
}
@media screen and (max-width:320px){.related-post-style-2 li{height:200px;}
.related-post-style-2 .related-post-item-thumbnail{height:150px;}
}
</style>

Kedua, cari kode <div id='sidebar-wrapper'> atau bisa jadi <aside id='sidebar-wrapper'> untuk memudahkannya cari saja dengan tulisan 'sidebar jika sudah ketemu maka sobat bisa copas kode berikut ini dan letakkan didalam kode tersebut bisa dibawah nya pas atau bisa juga diatas penutup kode tersebut.

<div class='related-post' id='related-post'/>
 <script type='text/javascript'>
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      titleLength: &quot;auto&quot;,
      thumbnailSize:300,
      noImage: &quot;https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s269/no-thumbnail.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>

Ketiga, langkah terakhir adalah letakkan kode berikut ini tepat diatas kode </body>

<div class='related-wrapper'>
 <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  </script>
<script async='async' type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.statically.io/gh/Azidzainuri/linku/35970620/related-fast-loading.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Setelah langkah tersebut selesai, jangan lupa save template sobat dan lihat hasilnya.

Demikianlah artikel tutorial saya terkait Cara Mudah Membuat Related Post Di Sidebar Pada Blogger. Semoga bermanfaat. Amin.
PERHATIAN! File di Azid Blogger di redirect kurang lebih 5-7 kali oleh karena itu sobat harap bersabar untuk mendapatkan filenya.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar