Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog - Hallo sahabat lowongancpns, Pada Artikel yang anda baca kali ini dengan judul Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel seputar blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog
link : Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog

Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog

Cara mudah membuat artikel terkait /related post  dengan tampilan gambar  pada blog, artikel terkait atau releted post memang sangat diperlukan dalam meningkatkan rating sebuah blog, sebab dengan adanya artikel terkait dapat mengarahkan pengunjung blog membaca artikel artikel yang terkait dalam blog sehingga pembaca akan lebih lama lagi berada dalam blog kita.  Biasanya para newbi / pemula sangat ingin tahu bagaimana cara memasang artikel terkait / related post dengan gambar atau pun tanpa tampilan gambar. Namun tidak perlu bingung sebab disini saya akan memberitahu cara mudah membuat artikel terkait / related post dengan tampilan gambar  pada blog.
Caranya sangat mudah yaitu dengan mengikuti setiap arahan yang saya buat.

• Log in ke akun blog  anda 
• Masuk kedasbor kemudian pilih Template
• Kemudian Pilih Edit HTML
• Sebaiknya sebelum anda mengutak atik template anda ada baiknya anda memback up terlebih dahulu template anda.
• cari dan temukan code </head> , untuk lebih mudah menemukan kode tersebut gunakan Ctrl + F pada kotak template anda.

• setelah itu  copy kode dibawah ini dan pastekan code dibawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:90px;height:75px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /> </b:if> <!--Related Posts with thumbnails End-->

kode yang berwarna biru merupakan ukuran dari gambar yang akan ditampilkan dalam artikel terkait / related post ,ukuran tersebut bisa anda ubah sesuai dengan keinginan anda. misalnya Width (panjang gambar) 100 px , dan height(tinggi gambar ) 80 px.

• Langkah berikutnya yaitu cari kode <div class='post-footer'> pada template anda. (untuk memudahkan gunakan CTRL + F )

Biasanya akan ada lebih dari satu kode <div class='post-footer'> pilihlah yang terakhir. Lalu copy 

kode dibawah ini kemudian paste kan tepat di atas kode <div class='post-footer'>

<!-- Related Posts with Thumbnails Code Start--> <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><b:if cond='data:blog.pageType == &quot;item&quot;'> <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=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=10; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

Kode yang berwarna merah merupakan jumlah dari artikle terkait/related post yang ingin anda tampilkan, jumlah tersebut bisa anda ubah sesuai keinginan anda.

Selanjutnya klik save template dan lihat lah hasilnya.

Sekian tutorial dari saya mengenai cara  membuat artikel terkait / related post tampilan gambar  gambar degan mudah pada blog. Selamat mencoba ,semoga bermanfaat.

Demikianlah Artikel Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog

Sekianlah artikel Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog dengan alamat link https://lowongancpnsterbaruku.blogspot.com/2014/11/cara-membuat-artikel-terkait-related.html

Tweet