h
Powered by Blogger.

Teknologi

Comment

Test Footer

Popular Posts

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

Cara Membuat Daftar Artikel Terkait Langsung Dengan Gambar


Cara Membuat Daftar Artikel Terkait Langsung Dengan Gambar. Assalamualaikum wr.wb, sobat blogger pada postingan kali ini Saya berkesempatan untuk memberikan tutorial blogger blogspot mengenai Cara Membuat Daftar Artikel Terkait Langsung Dengan Gambar. Menurut pakar SEO dengan membuat artikel terkait dengan gambar atau tanpa gambar hanya berbentuk tulisan saja akan meningkatkan jumlah pengunjung atau dalam bahasa blogger disebut Pageviews. Artikel terkait ini umumnya diletakan di akhir pembahasan atau di bawah postingan, karena letaknya efektif dan mudah dilihat oleh pembaca / pengunjung.

artikel terkait bergambar

Artikel terkait ini 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 terpukau, Lebay :D

Penerapan CSS & JavaScript Artikel Terkait Bergambar
  • Masuk / Login ke www.blogger.com 
  • Pada Dashboard pilih Template → Edit HTML → Ceklis Expand Template Widget 
  • Letakan CSS & JavaScript berikut ini di bawah 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

Penerapan Kode HTML Artikel Terkait Bergambar
Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna, caranya
  • Silahkan Anda cari kode <data:post.body/>
  • Kemudian letakan kode di bawah ini setelah 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>
  • Simpan Template (Save Template) 

Keterangan Terkait Kode Artikel Terkait Bergambar
1. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.

2. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.

3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya,

4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.

5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikianlah tutorial blogger mengenai cara membuat artikel terkait dengan gambar / thumbnail. Semoga postingan yang berjudul Cara Membuat Daftar Artikel Terkait Langsung Dengan Gambar ini bermanfaat dan mudah dipahami dan dimengerti.

Terima kasih.

Anda baru saja membaca artikel yang berkategori Teknologi / Trik Blogging / Widget dengan judul Cara Membuat Daftar Artikel Terkait Langsung Dengan Gambar. Anda bisa bookmark halaman ini dengan URL http://belajar-database.blogspot.com/2013/01/cara-membuat-daftar-artikel-terkait.html. Terima kasih!
Ditulis oleh: Abdul Kholik Loebiez - Wednesday, January 9, 2013
Comments
0 Comments

Belum ada komentar untuk "Cara Membuat Daftar Artikel Terkait Langsung Dengan Gambar"

Post a Comment