Cara Membuat Artikel Terkait Dengan Gambar di blog
Cara Membuat Artikel Terkait Dengan Gambar Thumbail ini cukuplah mudah dan simple namun jika anda belum menguasai mengenai kode script dan juga cara pemasangannya mungkin akan mengalami sedikit kendala, namun jangan khawatir teman jika kamu belum paham silahkan anda belajar karena dengan belajar semuannya akan terasa mudah.
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
Dan letakkan kode di bawah ini di atas kode di atas
Oke daripada saya kebanyakan omong silahkan di ikuti langkah langkahnya ya teman, silahkan di ikuti langkah di bawah ini.
1. Masuk ke akun blogger sobat
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>
<!--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:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.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:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Kalau sudah, cari kode berikut
<div class='post-footer'>
Dan letakkan kode di bawah ini di atas kode di atas
<!-- 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-->
Nb_ Var maxresults=8 adalah jumlah artikel terkait yang muncul, silahkan di sesuaikan _ Anda bisa mengganti warna tulisan sesuka anda ( background-color:#d4eaf2;) background anda.
Simpan dan lihat hasilnya.
Cara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blogCara Membuat Artikel Terkait Dengan Gambar di blog
Categories:
Tutorial blog
0 komentar:
Posting Komentar