√ Cara Menciptakan Artikel Terkait Dengan Thumbnail (Gambar)

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

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

Nah, untuk memaksimalkan SEO pada faktor internal link, ada beberapa cara yang sanggup anda lakukan, menyerupai contohnya masukkan anchor teks yang ditautkan kepada artikel lawas di dalam artikel terbaru, menyertakan artikel-artikel rekomendasi/referensi, dan yang terakhir yakni menciptakan widget related posts atau yang lebih sering dikenal dengan artikel terkait. Kaprikornus nantinya widget artikel terkait ini akan menampilkan aneka macam 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 instruksi </head> (gunakan CTRL+F), letakkan instruksi berikut ini sempurna 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/j4vascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sAYlGETCgvqs79M9GrXEic0tf6u6VaY9n9_mmFuDUo4kna-AKxXzBmDPr2SJKADEmeG2EkanHXTS5F9k8C8glw1u3wFz34ATQr-ztG6Zo1U0gHhW5jwPGccFnWIMGuGoKdQoMd3oDwkS/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/j4vascript'/></b:if>

Keterangan:

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

5. Cari instruksi <data:post.body/>, kemudian letakkan instruksi dibawah ini sempurna 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/j4vascript'/></b:loop> <script type='text/j4vascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script><div id='attb' align='bottom-right'><a href=" ">Get This!</a></div></div></b:if>

6. Klik "Save/Simpan" Template.

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

Sumber Referensi : Making Different
Sumber http://farespo.blogspot.com