Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.

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.
  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 :
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 «

7 komentar:

  1. wah keren nih,,blog mas mari kita tukaran banner dan saling follow ya mas,,,
    visit me at http://pariwisatadanteknologi.blogspot.com/

    BalasHapus
  2. agak pusing mas.....
    say gak ngerti2

    BalasHapus
  3. Blognya mantap, Sy sudah coba belajar Read More. lihat aja di http:/fisio-usman.net. Terima kasih

    BalasHapus

 
GR | Edited by | gubhug reyot