Cara membuat dan Memasang Read More Animasi

Cara membuat read more, cara memasang read more, panduan membuat read more menjadi bentuk tutorial di BlogSpot yang paling variatif bila di bandingkan di WordPress atau misalnya membuat Panduan BlogDETIK (maksudnya, panduan di BlogDETIK tentang read more. Salah, he ... Malas saja ngapusnya!). ]
Cara membuat read more dan cara memasang read more di Blogger atau BlogSpot masih mengacu pada kode html pembuatan read more sebelumnya, hanya link yang sebelumnya berupa teks (Read More ...) kita rubah menjadi .. sebuah gambar animasi atau gambar statis. Untuk membuat gambarnya, sampeyan bisa membuat sendiri atau bisa juga memanfaatkan layanan gratis pembuatan button, teks animasi atau gambar teks biasa yang bertebaran di jagad internet ini. Link-link di bawah ini bisa kalian kunjungi untuk membuat gambar-gambar, baik animasi atau teks biasa, baik berbentuk button atau yang lain.

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 sampeyan 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 :
   <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 Tinngi dan lebar gambar :Sampeyan 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 sampeyan sudah paham cara memasang read more, mengamankan template dan cara mencari kode html di template. Bila template belum terpasang read more, sampeyan 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 sampeyan pingin lebih cepat, silahkan KLIK link di bawah ini :
   
   • Panduan Cara Mengamankan Template Sebelum Merubah Desain Blog
   • Cara cepat mencari kode HTML
   • "Beberapa Tips untuk Pertimbangan Pasang Read More"
   • Langkah dan Cara Membuat Read More

Tiga buah kode html yang sudah dilengkapi URL image Read More di bawah ini bisa langsung sampeyan pakai:

Kode html image-1

<img style="float:right;height:20px;width:83px;margin:15px 50px;" src="http://i964.photobucket.com/albums/ae124/gubhugreyot/button/ReadMOREAnimaBlack.gif"/>

Kode html image-2

<img style="float:right;height:49px;width:103px;margin:15px 50px;border:1px solid #555;padding:2px;" src="http://i964.photobucket.com/albums/ae124/gubhugreyot/button/ReadMoreAnima1.gif"/>

Kode html image-2

<img style="float:right;height:21px;width:120px;padding:2px;border:2px solid grey;background:#333;margin:15px 50px;" src="http://i964.photobucket.com/albums/ae124/gubhugreyot/button/ReadMoreAnima2.gif"/>

Udah dulu, ya?! Punggung pegal banget, nih! Mau e'ok, lagi !!!! He ...he ....

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «