Cara Membuat Shout Box di Blogger

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" :D lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Atur lebar dan tinggi shoutbox di kolom widht dan hight
7. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements8. Tambahkan element HTML/Javascript.
9. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu Save 

Cara Membuat 'Read More' Animasi

1.Bagi teman-teman yang blognya belum pake readmore,buat readmore dulu disini

2.Dihalaman Edit HTML, ganti tulisan read more ato lainya yang sobat pake buat link baca selanjutnya dengan kode berikut <img src="link gambar kamu"/>
Yang sudah pake read more langsung langkah 2 aja ya.
3.Langkah terakhir dan terpenting adalah Save Template

Kalo sobat belum punya gambar ini aku sediakan:

http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif


http://i496.photobucket.com/albums/rr329/grandisyf/th_arrow-readmore.gif


http://i496.photobucket.com/albums/rr329/grandisyf/th_more.gif


http://i496.photobucket.com/albums/rr329/grandisyf/Read-more-3_grandis.gif


http://i496.photobucket.com/albums/rr329/grandisyf/th_Readmore3.gif

Membuat Auto Read More di Blogger

Caranya gampang kok,, ikutin instruksi ini ya,,
1. Login ke Blogger
2. Klik "Rancangan" di dasbor
4. Klik "Edit HTML"
5. Pake tobol F3 atau ctrl + F dan search script : </head>
6. Lalu letakkan script berikut tepat di bawah kode di atas (yang udah di search)

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/> 


7. Setelah itu search lagi kode <data:post.body/> atau <p><data:post.body/></p> dan ganti dengan script di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READ MORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 

 

Keterangan : Tulisan yang berwarna pink adalah yang bisa diganti.  
---> Summary noimg 430 = tinggi artikel yang terpenggal tanpa image

---> Summar img 430       = tinggi artikel yang terpenggal dengan image

---> Tulisan " READ MORE"  bisa diganti sesuai keingginan

 

OK... Good Luck ^_^