Cara Membuat Artikel Terkait Dengan Thumbnail / Gambar
Terinspirasi oleh bawaan template ini sudah ada fiturArtikel Terkait
dengan Thumbnail atau gambar saya coba otak atik untuk mencari script
fitur artikel Terkait dengan Thumbnail , dan akhirnya setelah ngoprek
beberapa jam di temukan juga script tersebut , saya coba pisahkan script
JS dan di simpen di google code , maksudnya biar loading blog ga
terlalu berat...heheh betul atau tidak saya jg blom terlalu
tahu...soalnya yng saya tahu biar kode HTML pada halaman beranda ga
terlalu banyak..
1. Masuk Blogger.com
2. Pilih icon "Go to post list" ->> Template
3. Back up template
4. Pilih Edit HTML ->> Proceed ->> Centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode </head>
6. Letakkan kode berikut tepat di atas kode tersebut
7. Untuk kode yang di kasih blok coklat silahkan ganti sesuai selera sobat ,Lalu cari kode <div class="post-footer-line post-footer-line-1"> Kalo ga ada bisa cari kode <data:post.body/> letakkan kode berikut ini tepat di bawah kode tersebut, atau sesuaikan dengan template blog Anda
8. Pratinjau, jika tidak ada error lanjutkan
9. Simpan template
Cara Buat Artikel Terkait Dengan Image / Thumbnail
Berikut langkah-langkahnya yang saya lakukan dan di implementasikan jika Anda tertarik lanjutkan!1. Masuk Blogger.com
2. Pilih icon "Go to post list" ->> Template
3. Back up template
4. Pilih Edit HTML ->> Proceed ->> Centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode </head>
6. Letakkan kode berikut tepat di atas kode tersebut
<!--Related Posts with thumbnails 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:#3f3f08;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://herlanlesmana.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<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:#3f3f08;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://herlanlesmana.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
7. Untuk kode yang di kasih blok coklat silahkan ganti sesuai selera sobat ,Lalu cari kode <div class="post-footer-line post-footer-line-1"> Kalo ga ada bisa cari kode <data:post.body/> letakkan kode berikut ini tepat di bawah kode tersebut, atau sesuaikan dengan template blog Anda
<!-- 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=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<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=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
8. Pratinjau, jika tidak ada error lanjutkan
9. Simpan template
Oke selamat mencoba semoga berhasil-->
Categories:
dik'z blog
0 Comments
Postingan
