Cara Menciptakan Artikel Terkait /Related Post Tampilan Gambar Degan Gampang Pada Blog
Cara gampang menciptakan artikel terkait /related post dengan tampilan gambar pada blog, artikel terkait atau releted post memang sangat diharapkan dalam meningkatkan rating sebuah blog, alasannya yakni dengan adanya artikel terkait sanggup mengarahkan pengunjung blog membaca artikel artikel yang terkait dalam blog sehingga pembaca akan lebih usang 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 galau alasannya yakni disini saya akan memberitahu cara gampang menciptakan artikel terkait / related post dengan tampilan gambar pada blog.
Caranya sangat gampang yaitu dengan mengikuti setiap instruksi yang saya buat.
Caranya sangat gampang yaitu dengan mengikuti setiap instruksi yang saya buat.
- Log in ke akun blog anda
- Masuk kedasbor lalu 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 gampang menemukan kode tersebut gunakan Ctrl + F pada kotak template anda.
- setelah itu copy kode dibawah ini dan pastekan code dibawah ini sempurna di atas kode </head>
<!--Related Posts with thumbnails Start--> <b:if cond='data:blog.pageType == "item"'> <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 sanggup anda ubah sesuai dengan cita-cita anda. contohnya 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 )
kode dibawah ini lalu paste kan sempurna di atas kode <div class='post-footer'>
<!-- Related Posts with Thumbnails Code Start--> <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><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle="<b>Related Posts:</b>"; 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 sanggup anda ubah sesuai cita-cita anda.
Selanjutnya klik save template dan lihat lah hasilnya.
Sekian tutorial dari saya mengenai cara membuat artikel terkait / related post tampilan gambar gambar degan gampang pada blog. Selamat mencoba ,semoga bermanfaat.
