Cara Membuat Artikel Terkait dengan Thumbnail (Gambar)

Cara Membuat Artikel Terkait dengan Thumbnail (Gambar) - Di dalam sebuah blog, artikel atau konten adalah hal yang berperan paling penting dalam mendulang kesuksesan sebuah blog, karena tanpa adanya konten, mana mungkin bisa blog yang kita miliki mempunyai banyak pengunjung, jadi bisa disimpulkan bahwa konten is the king, atau konten adalah yang nomor satu, baru setelahnya anda bisa memperhatikan dari segi tampilan yang bagus untuk blog.

Dalam usaha-usaha menjalani teknik search engine optimization, ada berbagai macam cara atau langkah yang disukai oleh para mesin pencari seperti Google, salah satu teknik yang dianjurkan adalah internal link (link antar halaman di dalam suatu blog), kenapa Google menyukai internal link? karena mereka (Google) ingin memberikan informasi yang selengkap-lengkapnya kepada para pencari informasi, jadi Google lebih suka kepada blog yang memberikan informasi lebih kepada pengunjungnya, tentu dengan mereferensikan halaman-halaman yang topiknya terkait.

Nah, untuk memaksimalkan SEO pada faktor internal link, ada beberapa cara yang dapat anda lakukan, seperti misalnya masukkan anchor teks yang ditautkan kepada artikel lawas di dalam artikel terbaru, menyertakan artikel-artikel rekomendasi/referensi, dan yang terakhir adalah membuat widget related posts atau yang lebih sering dikenal dengan artikel terkait. Jadi nantinya widget artikel terkait ini akan menampilkan berbagai artikel yang topiknya sama dengan postingan yang sedang dibaca oleh pengunjung.

Cara Membuat Artikel Terkait dengan Thumbnail (Gambar)

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Cari kode </head> (gunakan CTRL+F), letakkan kode berikut ini tepat diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { margin: 1px 0px !important; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); height: 300px; width:540px!important; padding: 0px !important; box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important; border-radius: 5px 5px 5px 5px; } #related-posts h2{ margin: 0px !important; padding: 10px !important; color: rgb(255, 255, 255); font-weight: normal; text-transform: capitalize; background-color: rgb(18, 18, 18); border-bottom: 1px solid rgb(0, 0, 0); border-top-right-radius: 5px; border-top-left-radius: 5px; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); text-decoration:none!important; } #related-posts a{ font-weight:bold!important; color: white; font-family: arial!important; border-right:0px!important; margin: 10px 0px 10px 10px !important; } #related-posts a:hover{ border-right:0px!important; margin: 10px 0px 10px 10px !important; background:none!important; text-decoration:underline!important; } #related-posts img{ border: 1px solid #666 !important; padding: 1px !important; width: 100px !important; height: 90px !important; margin-right: 15px !important; overflow: hidden; background:#444!important; } #related-posts img:hover{ opacity:0.5; } #attb{ font-size:5px!important; padding-top:200px; padding-bottom:5px; padding-left:560px; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17sIgyjT9W1XGQHkfy5-EVkud9YJursVf0PksDa8-NkqjTcxP7GY23qnBYb-kVQuGYrJSIY6UR6sSXPbct44naWvcg2qi5mGFc_Rz072Us9dGYuqGoRhrOnVXjpkBa5up32TYCjmmin40/s1600/no_image.jpg&quot;; var maxresults=4; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Artikel Terkait:&quot;; </script> <script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/></b:if>

Keterangan:

• Ganti kode yang berwarna biru dengan lebar elemen konten anda (pixel)
• Ganti kode yang berwarna merah dengan jumlah artikel terkait yang ingin ditampilkan 

5. Cari kode <data:post.body/>, lalu letakkan kode dibawah ini tepat diatasnya.

<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> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script><div id='attb' align='bottom-right'><a href="http://farespo.blogspot.com/2013/06/cara-membuat-artikel-terkait-related-post-dengan-thumbnail-gambar.html">Get This!</a></div></div></b:if>

6. Klik "Save/Simpan" Template.

Demikian informasi terbaru tentang Cara Membuat Artikel Terkait Thumbnail (Gambar), simak juga artikel menarik lainya seputar tutorial blog tentang Cara Membuat Iklan Melayang di Sisi Kanan dan Kiri Blog, semoga bermanfaat, dan selamat mencoba.

Sumber Referensi : Making Different

Tweet