Related Post Thumbnail and No Thumbnail

1. Seperti biasanya masuk/ login blogger anda 2. Klik tata letak 3. Tambah gadget/ widget 4. Masukan kode berikut <script src="http:...

1. Seperti biasanya masuk/ login blogger anda
2. Klik tata letak
3. Tambah gadget/ widget
4. Masukan kode berikut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

5. Klik ‘save’ atau ‘Simpan’ dan lihat hasilnya
 Related Post Thumbnail
1. Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2. Klik dan masuk ke menu Template dan pilih edit HTML
3. Centang  EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no 3 gak ada langsung no 4 aja ya)
4. Di kotak yang berisi kode-kode HTML itu klik Ctrl+f dan akan muncul kotak pencarian di pojok kanan atas itu dan cari </head> tekan enter dan lihat akan ada tanda di kata yang anda cari tadi
5. Dan selanjutnya copy kode dibawah ini tepat diatas atau sebelum kata </head> tadi

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#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:4px solid #f2f2f2;width:100px;height:100px;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;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6.       Setelah selesai, cari kode <div class='post-footer'> seperti cara tadi (jika ada dua kode yang sama pilih aja yang kedua ya)
7.       Nah kalau sudah ketemu langkah selanjutnya adalah copy script berikut diatas <div class='post-footer'> yang pertama anda temukan tadi

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYRiRfVE-2pmdl69tuyM9UgyErOUkKZhIyFafntPMIJKSmZkC6Hzhii6kcyCVpcXSKgsMpK2pcW8PJ9uzr-bTyQN712hGepxEIvBbIW6iRJVCpr6kgBzqMUoOKkwOv9zMba4cW44tOxLQ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Ket: ubah maxresult = 4 dengan jumlah artikel terkait maksimal yang ingin ditampilkan

Author box atau Kotak Pesan Admin biasanya digunakan sebagai tanda pengenal seorang penulis dari sebuah blog, atau berupa penyampaikan pesan singkat dari penulis. Kotak pesan tersebut terdapat gambar dari penulis blog serta ucapan terima kasih kepada penunjung yang telah berkunjung dan membaca artikel pada blog. Kotak Admin pada dasarnya ditempatkan dibawah postingan blog. Berikut langkah-langkah membuat Author Box pada blog sobat :
LIVE DEMO - Cara Membuat Kotak Pesan Admin (Author Box) Di Blog

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Centang Expand Template Widget.
4. Cari kode berikut kode
]]></b:skin>

5. Copy dan paste kode berikut di atas kode ]]></b:skin>

.admin-author{display:block;width:auto;background:#F5F5F5;border:1px solid #ccc;padding:0;margin:0px;font:normal 12px Arial, Sans-Serif;color:#222;}
.admin-author .kontainer{padding:5px;}
.admin-author h4{background:#C0C0C0;border:none;border-bottom:1px solid #C0C0C0;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.admin-author h4 a{color:#FEEA83;}
.admin-author img{width:80px;height:70px;margin:0 10px 0 0;float:left;border:0px;padding:2px;
background:#E6E6FA;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

6. Cari Kode berikut: <div class='post-footer'>

7. Copy dan pastekan kode berikut di atasnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='
admin-author'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ AjatShare</h4>
<div class='kontainer'>
<img height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzi11Ru8kIHSFl4EGvEalPJrKAewvCJHsoODoC9SfXlplCDy6rI_C0BN4zs0QnPGRSw1TL5AfjlzjCxj5lQOgF806NwVeZZgb-8oB5hqkI_mBZ6-Q6NAfjeWVT6XuCzIS2TvuHpImdsaW/s1600/Picture+004.jpg' width='80'/>
Anda sedang membaca sebuah artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://ajatshare.blogspot.com' target='_blank'>:: Terima Kasih ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

8. Klik Save dan lihat hasilnya... Keterangan :  Text yang berwarna merah ganti dengan url gambar sobat. Text yang berwarna orange adalah pesan