Cara Membuat Artikel Terkait dengan gambar (Tutorial Blog)

Cara Membuat Artikel Terkait dengan gambar (Tutorial Blog) -  Ok dalam artikel kli ini saya akan share bagaimana "cara membuat artikel terkait dengan gambar" sudah banyak mungkin blog-blog yang menyediakan cara tutorial ini, tapi aapa salahnya saya share ke shobat semua.

Fungsi Artikel terkait  beserta gambar, dengan menyertakan gambar dalam setiap artikel terkait pengunjung lebih leluasa dan lebih di perjelas bila penggunjung melihat artikel tersebut, pastinya terlihat kan sudah terdaftar di blog.

Realeted Post dengan Gambar

Artikel terkait ini juga dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan menjadi antusias meneliti lebih lanjut setiap halaman yang berkaitan di dalam posting artikel shobat.

Berikut Tutorial Cara Membuat Artikel Terkait Dengan Gambar :

• Masuk ke blogger shobat
• Pilih Template ==>> Edtit HTML
• Cari kode ]]></b:skin> dan copy script di bawah tepat di atas kode ]]></b:skin>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmByEqm9zs8SkRRClZVUjX1pLftlbegb7XRPY-Sg8WqoHIe5_S_u_a0_A9HrpoVzlwJm_64J2Cd1kQBDk5jQL2Ws2iOfVkxasJaXy1MMtbvT3f5vRJBDc-5md8uKKJWDgHVlN7K-1TiKE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

• Tahapan berikutnya shobat hanya perlu mencari kode  <data:post:body/>
• Setelah ketemu copy kembali script dibawah tepat dibawah kode <data:post:body/>

<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>
<div style='clear:both'/>
</b:if>

Keterangan :

1. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.
2. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Shobat tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.
3. Untuk merubah tampilan artikel terkait dengan gambar, Shobat bisa merubah CSS sesuai keinginan jika Shobat paham untuk mengeditnya.
4. Script yang bercetak merah var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan Shobat.
5. Script yang bercetak Bitu var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikian saya share Cara Membuat Artikel Terkait dengan gambar (Tutorial Blog), Semoga bermanfaat. Tag Tutorial Blog.