Tips Membuat Artikel Terkait (Related Post) Dengan Gambar / thumbnail

Hello sobat Turtorial , kali ini akan menjadi sekitar Cara Membuat Share Artikel terkait ( Related Post) Dengan Gambar / thumbnail , yang pertama telah berbagi juga tentang artikel terkait atau kirim auto posting terkait di bawah ini .

Artikel ini memiliki gambar yang terkait dengan ukuran medium dan judul posting terletak tepat di bawah gambar . Survei juga membuktikan bahwa artikel membuat dihubungkan / terkait posting yang dilengkapi dengan gambar ini akan terlihat lebih luas dan diklik oleh pengunjung / pembaca artikel , karena terlihat keren dan membuat pengunjung penasaran dan terpesona
Penerapan CSS & JavaScript Artikel Terkait Gambar

    Masuk / Login ke www.blogger.com
     Pada Dashboard pilih Template → Edit HTML → Klik kotak EDIT dan tekan CTRL + F dan cari kode ] ] > < / b: skin >
     Copas maka kode berikut di atas kode ] ] > < / b: skin >

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
# terkait - posting { float: center; text -transform : none ; height: 100 % ; min -height : 100 % ; padding-top : 5px ; padding-left : 5px }
# terkait - posting h2 { font-size : 1.6em ; font-weight : bold; warna: hitam; font-family : Georgia , Times New Roman , Times serif ; margin-bottom : 0.75em ; margin-top : 0EM ; padding-top : 0EM }
# - posting yang berkaitan dengan {color: black }
- posting yang berkaitan # a: hover {color: black }
- posting yang berkaitan # a: hover { background-color : # d4eaf2 }
< / style >
<script type='text/javascript'>
var
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 >

Penerapan Kode HTML Artikel Terkait Gambar
Tahap ini adalah tahap akhir dalam tutorial create artikel yang berhubungan dengan gambar / thumbnail akan memunculkan artikel yang berhubungan dengan jumlah yang ditentukan atau sesuai dengan user , bagaimana

     Silakan menemukan kode yang Anda <data:post.body/>
     Kemudian pasang kode berikut setelah kode <data:post:body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if != cond='data:label.isLast "true"'>
< / b: if >
< Script expr : src = ' " / feeds/posts/default/- / " + Data : label.name + " ? alt = json -in -script & callback = related_results_labels_thumbs & max-results = 6 " ' tipe = 'text / javascript ' / > < / b : lingkaran >
<script type='text/javascript'>
removeRelatedDuplicates_thumbs ( ) ;
printRelatedLabels_thumbs ( " <data:post.url/> " ) ;
< / script>
< / div >
<div style='clear:both'/>
< / b: if >

Simpan Template ( Simpan Template )

Informasi terkait Gambar Kode Artikel Terkait
1 . Artikel yang berhubungan dengan gambar ini bekerja secara otomatis sehingga Anda tidak perlu mengubah atau menambah alamat dari feed yang ada .

2 . Artikel yang berhubungan dengan gambar ini bekerja pada halaman posting dan kode di atas tidak berlaku di halaman / Home utama PT .

3 . Untuk mengubah tampilan artikel terkait dengan gambar , Anda dapat mengubah CSS yang Anda inginkan jika Anda tahu untuk mengeditnya

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

5 . var relatedpoststitle = " Related Posts "; judul artikel terkait dan muncul di bawah posting .