Cara Membuat Artikel Terkait Bergambar Berjalan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya :
<!--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: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://galang.googlecode.com/files/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
7. Lalu cari kode di bawah ini :
<div class='post-footer-line post-footer-line-1'>
-Atau jika tidak menemukannya cari kode berikut ini
<p class='post-footer-line post-footer-line-1'>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)
<!-- Marquee Serbablog 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=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</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=10;
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'>
<a href='http://celoteh-galang.blogspot.com/2011/04/membuat-artikel-terkait-thumbnails.html' style='display:none;'>Thumbnail Related Post</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->
Keterangan
Kita juga dapat menganti beberapa kode css, seperti berikut ini:
var maxresults=10; --> Berarti artikel terkait yang akan kita tampilkan adalah 10
Related Posts bisa anda rubah menjadi Artikel Terkait atau kata-kata yang anda inginkan
Sekian Terima Kasih
Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya
<!--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: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://galang.googlecode.com/files/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
7. Lalu cari kode di bawah ini
<div class='post-footer-line post-footer-line-1'>
Atau jika tidak menemukannya cari kode berikut ini
<p class='post-footer-line post-footer-line-1'>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu 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><a href='http://celoteh-galang.blogspot.com/2011/04/cara-membuat-artikel-terkait-dengan.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://celoteh-galang.blogspot.com/' style='display:none;'>Celoteh Galang</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
10. Simpan Template jika sudah selesai.
Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=5; --> Berarti artikel terkait yang akan kita tampilkan adalah 5
var relatedpoststitle="Related Posts"; --> Judulnya adalah Related Posts
Jika anda ingin mengcopy atau menyimpan atau memindahkan seluruh isi blog anda berikut adalah cara yang sangat mudah dan cepat untuk melakukannya
pertama yang anda lakukan adalah :
1. login ke blogger
2. Pilih pengaturan
3. Pilih Expor blog
4. Selanjutnya klik tombol Unduh Blog, kemudian akan muncul kotak konfirmasi Download selanjutnya OK.
Sampai disini proses penyimpanan file sudah selesai
kemudian langkah selanjutnya adalah cara mengcopy atau memindahkan file isi blog yang telah kita simpan tadi ke blog baru kita atau ke blog yang sama ( apabila anda ingin meng upload lagi ke blog semula )
berikut caranya :
1. Setelah login masuk ke pengaturan
2. Selanjutnya klik Impor Blog.
3. Dan akemudian penguploadan file posting yang kita backup tadi.
4. Pilih file posting backup yang telah kita simpan di komputer kita (Sebelum proses pengimporan blog, jangan lupa centang kotak "Terbitkan semua entri yang diimpor secara otomatis").
5. Klik tombol Impor Blog
6. Selesai.
Anda sudah berhasil melakukan pemindahan seluruh postingan dari blog satu ke lainnya
Jika anda tidak ingin menampilkan keseluruhan maka jangan centang pada tulisan "Terbitkan semua entri yang diimpor secara otomatis" jangan khawatir seluruh postingan tetap berhasil dicopy tapi masuk dalam kondisi Draft atau disimpan saja, kemudian kalau anda ingin memilih postingan tinggal centang pada halaman edit entri kemudian publikasikan
semoga berhasil
- Seperti biasa, masuk ke akun blogger anda
- Setelah Log In, masuk ke Rancangan
- Kemudian Tambah Gadget
- Selanjutnya pilih HTML/Javascript
- Tidak perlu diberi judul, langsung saja copy kode di bawah ini dan letakkan pada kotak kontent
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
left:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red"><right>Close [X]</right></b></a></div>
<!-- KODE BUKU TAMU -->
</td></tr></table>
</div>
<script src="http://dl.dropbox.com/u/24368183/buku%20tamu%20fade%20out.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://dl.dropbox.com/u/24368183/CHATBOX.png" />
</a>
</div>
- Klik Simpan
Anda bisa mengganti gambar dengan sesuka hati anda
http://i278.photobucket.com/albums/kk82/yudispa/buku-tamu.png
http://i890.photobucket.com/albums/ac103/triwardhana/buku.png
http://i890.photobucket.com/albums/ac110/arary/buku-tamu_03-1.gif
http://i387.photobucket.com/albums/oo318/cem_ply/tabs2.gif
http://i761.photobucket.com/albums/xx253/edoute/Bukutamufedoce.png
http://i581.photobucket.com/albums/ss252/muhibfaisal/tabs.gif

















