Tutorial :Memasang Read More Animasi

Sebenarnya Read more Atau baca selengkapnya bukan Barang baru bagi para blogger Mania.Tetapi 'read more' tetap bagus untuk dibahas dan di share agar para blogger lainnya terutama para pengembang blog.Apa sih keuntungan dari read more? baca disini,Sebenarnya banyak terutama untuk membuat para pembaca penasaran tentang isi postingan kita yang sengaja dibuat setengah pada beranda blog,atau memang karena beranda blognya sudah "rame".Sebenarnya untuk memasang Read more seperti sebelumnya 
(baca artikel cara memasang Read more).
Tetapi kali ini yang akan di share adalah mengubah read more sebelumnya yang hanya berupa teks menjadi animasi dengan gambar taktis yang bisa kita buat dengan memanfaatkan link-link layanan dibawah ini.

Silahkan langsung KLIK saja alamat-alamat di bawah ini :
• CoolText :
  http://cooltext.com
• Flamingtext :
  http://www.flamingtext.com
• GRsites :
  http://www.grsites.com

Cara membuat dan memasang read more animasi :

1. Gambar/animasi Read more : Buat gambar atau gambar animasi yang bertuliskan read more dan sejenisnya menggunakan software atau memanfaatkan layanan gratis di atas.
2. Upload : Upload Gambar read more ke file hosting, untuk di ambil URL gambarnya.
   
   
   • http://tinypic.com
   • http://photobucket.com
   • http://img192.imageshack.us
   • http://picasaweb.google.co.id
     
     
3. KODE Read more : Cari Kode yang sudah anda gunakan sebagai Read More. Kodenya seperti contoh di bawah ini :
   
   <a expr:href='data:post.url'>Read More......</a>
4. Ganti Read more ... : Ganti kata Read More ... dengan kode html sbb :
   
   
   
   <img style="float:right;height:40px;width:150px;padding:2px; border:2px solid grey;background:#333;margin:15px 50px;" src="http://..../..../images/readmore.jpg"/>
   

   atau bila ingin tampil polos tanpa border kodenya:

   <img style="float:right;height:40px;width:150px;margin:15px 50px;" src="http://..../..../images/readmore.jpg"/>
   Bentuk gabungan kode html hasil perubahan sbb:
   
   <a expr:href='data:post.url'><img style="float:right;height:40px;width:150px;padding:2px;border:2px solid grey;background:#333;margin:15px 50px;" src="http://..../..../images/readmore.jpg"/></a>
   Apabila kita lihat secara keseluruhan dengan melibatkan kode html read more secara utuh, maka bentuknya menjadi :
   
   <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'><img style="float:right;height:40px;width:150px;padding:2px;border:2px solid grey;background:#333;margin:15px 50px;" src="http://..../..../images/readmore.jpg"/></a></b:if>
5. Kode gambar tanpa border dan background : Jika memilih gambar yang tanpa border dan background, maka kode html gambar bisa diganti dengan kode yang ke-2., sehingga bentuknya menjadi : 
   <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'><img style="float:right;height:40px;width:150px;margin:15px 50px;" src="http://..../..../images/readmore.jpg"/></a></b:if>
6. Rubah Tinggi dan lebar gambar :anda bisa merubah nilai margin dan tinggi (height) serta lebar (width) sesuai gambar read more yang di buat.
7. Harus Sudah Bisa Memasang Read more :Panduan ini hanya bisa diikuti bila anda sudah paham cara memasang read more, mengamankan template dan cara mencari kode html di template. Bila template belum terpasang read more, anda harus membuatnya dulu. Ikuti panduan tentang read more yang ada di blog ini dengan mecari lewat judul tutorial dan panduan serta tips dan triks yang berkaitan dengan read more. Atau mungkin anda pingin lebih cepat, silahkan KLIK link di bawah ini :(Sumber)