GeT Free MuSiC-DyOsa
Free Music Code

BuaT ReaD MoRe Animasi

Setelah beberapa bulan ini vakum ngeblog,blog-triks akhirnya bisa kembali menghirup segarnya udara dunia blog.Dan kali ini,sesuai dengan judulnya, blog-triks akan membahas tentang Bagaimana caranya membuat readmore animasi (kaya punyaku ini,hehe ).Aku tulis trik ini cos banyak temen-temen blogger yang menanyakannya lewat komentar dan shoutbox.Tak ingin mengecewakan sobat-sobat blogger aku,akhirnya lounching juga nih tutorial.
Mau tau caranya?Ini dia caranya

Caranya gampang kok 
1.Bagi teman-teman yang blognya belum pake readmore
Buat Read More Dulu Liat Di Bawah Ini
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (gunakan CTRL+F untuk mencari kodenya) :
<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

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

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">


</span>


8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>


10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

Kalo Sudah Selesai Lihat Di Bawah Ini

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


TERIMAKASIH
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati
  • TwitThis

0 ƘǿmєиtąЯ:

Tempel Komentar