Pesan kepada Pembaca

Ma'af kalau terdapat kekurangan atau kesalahan pada saat teman-teman berkujung ke Blogger saya, karena Blogger ini masi dalam tahap Dsaind "Belum Sempurna" ^_^, Dan maka dari pada itu Bagi teman-teman yang merasa bertemu kesalahan harap lapor dengan ADMIN. Lihat Kontak Admin

Kamis, 28 Juni 2012

Cara membuat Read more Animasi pada Blogger


Pada kesempatan ini saya akan membahas cara membuat readmore animasi, yang mana ini merupakan jawaban atas pertanyaan teman blogger kita yang menanyakan kepada saya cara membuat readmore animasi, baiklah untuk mempersingkat penjelasan mari kita simak penjelasan berikut ini :

1. Silahkan anda Login ID Blogger anda

2. Silahkan Klik Rancangan --> Klik Edit HTML, centang pada kotak Expand Widget Template. 

3. Silahkan anda cari kode seperti ini </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.



<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://deddycamp.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan : Tulisan yang berwarna merah adalah yang bisa anda ganti.
  • Summary noimg 430 = tinggi artikel terpenggal tanpa image
  • Summar img 430 = tinggi artikel terpenggal dengan image

4. Cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

Ganti kode tersebut dengan kode 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'><img alt='read more' src='
http://lh5.ggpht.com/_7Y9pl24WpQY/SuM7b-deOLI/AAAAAAAAB_4/PKYOsvyuCdc/readmore_thumb%5B2%5D.png?imgmax=800'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Kalo pengen gambar yang lain klik   http://photobucket.com/images/readmore/
Jika Anda telah memilih gambarnya, lalu copy Direct link Nya

Keterangan : Tulisan yang berwarna merah adalah link gambar, anda bisa ganti dengan link gambar sesuka anda, untuk mendapatkan gambar animasi Readmore anda bisa lihat Downloand


Jika sudah semua silahkan Klik Simpan Template, selesai

Demikianlah Tutorial Blogger kali ini, semoga bermanfaat ya

Tidak ada komentar:

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Posting Komentar