Home »
Tutorial
,
Tutorial Blog
»
Membuat Related Post Dengan Gambar Berjalan
Membuat Related Post Dengan Gambar Berjalan
Di pagi yang cerah ini, saya akan membahas bagaimana cara membuat Related Post atau bisa disebut Artikel Terkait. Related Post sangat berfungsi untuk sebuah website atau blog (Agar pengunjung bisa melihat dan membaca artikel terkait lainnya). Berikut Screenshot nya.!
Langsung saja simak baik" cara nya.!
8. Selanjutnya cari kode yang mirip dengan kode dibawah ini.
Keterangan: Tulisan yang berwarna merah bisa di ganti dengan sesuka kalian.
Langsung saja simak baik" cara nya.!
1. Login ke Blogger
2. Lalu masuk ke Rancangan
3. Lalu Edit HTML
4. Centang Expand Template Widget
5. Jika takut gagal mencoba, lebih baik download dulu template nya
6. Kemudian cari kode </head> (untuk mempermudah pencarian klik F3 atau CTRL + F pada keyboard)
7. Copy kode dibawah ini dan letakan tepat diatas kode </head>
Keterangan: Kode yang berwarna Biru adalah kode warna, bisa kalian ganti dengan sesuka kalian.<!--Related Post Dengan Gambar Scripts and Styles Start-->
<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: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FF0000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://v-script.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Post Dengan Gambar Scripts and Styles End-->
8. Selanjutnya cari kode yang mirip dengan kode dibawah ini.
<div class='post-footer-line post-footer-line-1'>9. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas.
<!-- Marquee Vion Related Posts with Thumbnails Code Start-->10. Simpan template dan lihat hasil akhirnya.!
<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=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Post:</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=9;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Vion Related Posts with Thumbnails Code End-->
Keterangan: Tulisan yang berwarna merah bisa di ganti dengan sesuka kalian.
- Tulisan Related Post: (Bisa kalian ganti dengan tulisan apa aja.)
- Angka 2 (Kecepatan bergerak, semakin besar angkanya semakin cepat.)
- Angka 9 (Jumlah Artikel yang di tampilkan.)
^__^
( Happy Blogging )
Vion-Decoder™: Jika menurut anda posting di atas ini berguna, bisa kalian COPAS (asal di sertakan link sumbernya). Dan jika ada yang tidak jelas silahkan bertanya pada saya, Pepatah mengatakan malu bertanya tersesat di Jojoran. Wkwkwkwk... :D (Itu kan rumah saya di Jojoran). Follow @Virus_vDecoder
Tweet
Postingan
1 komentar:
Bagus tutorialnya sob..kapan-kapan bakal saya coba nih di blog saya! Nice blog.. thanks :)
Posting Komentar
~( eNjOY )~
๑ JANGAN LUPA KASIH JEMPOLNYA BUAT POSTINGAN ๑
๑ JANGAN MALU BERTANYA, JIKA TIDAK JELAS ๑
๑ JANGAN SPAM SEMBARANGAN DISINI ๑