Rounded Corners with Animation Effect.

Rounded Corners with Animation Effect membentuk dua buah box yang memang sebagai pasangan yang tidak terpisahkan. Heading box dan post box yang dibangun secara total dengan KODE CSS. Menjadi lebih eksotis karena box ini mempunyai sisi lengkung di semua ujungnya. Penambahan background image beranimasi gif diharapkan mampu memberi efek postitif pada penampilan sehingga akan tampil lebih cantik,menarik sekaligus atraktif. Rounded Corners with Animation Effect dibuat dengan begitu lengkap sehingga dengan mudah digunakan setiap blogger,bahkan bagi pemula sekalipun.

KLIK DEMO untuk melihat bentuk jadinya :

Langkah untuk membuat Rounded Corners with Animation Effect :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka,klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari KODE ]]></b:skin> pada "box Edit HTML"
6. Copy kode css di bawah ini dan letakkan di atas ]]></b:skin>
   

   KODE CSS :

   .b1,.b2,.b3,.b4{font-size:1px;overflow:hidden;display:block;}
   .b1{height:1px;background:magenta;margin:0 5px;}
   .b2{height:1px;background:#FF0000;border-right:2px solid #FF0000;border-left:2px solid #FF0000;margin:0 3px;}
   .b3{height:1px;background:#FF00FF;border-right:2px solid #FF0000;border-left:2px solid #FF0000;margin:0 2px;}
   .b4{height:3px;background:#FF00FF url(https://lh5.googleusercontent.com/-vXpxJojg6sY/T2OEWczwUcI/AAAAAAAAAag/AM8LW_FDxR0/s128/mini-anima-1.gif);border-right:2px solid #FF0000;border-left:2px solid #FF0000;margin:0 1px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);}
   .bgjudul{background:#bb521c url(https://lh3.googleusercontent.com/-SfNm0-XTYIc/T2OC7MuXMaI/AAAAAAAAAaU/qeX58pWOY4g/s128/mini-anima.gif);border-right:1px solid #FF0000;border-left:1px solid #FF0000;opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);}
   .bgposting{background:#bb521c;border-right:1px solid #FF0000;border-left:1px solid #FF0000;}
   .bgjudul div{margin-left:5px;}
   .teksjudul{ font-family:Times New Roman;font-size:18px;font-weight:900;color:#CCFF00;padding:0 15px;}
   .bgjudul:hover{opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);background:#bb521c066;}
   .teksjudul:hover{ color:#00FF00;}
   .posting{padding:15px 8px;background:#bb521c url(https://lh6.googleusercontent.com/-I4jXT-3UIzE/T2OFEwW7CFI/AAAAAAAAAas/Ao2K4KgKrNQ/h50/pink-Vgrad-3x500.png);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;color:#00FFFF;font-weight:normal;}

7. Klik "Simpan Template (Save Template)".

Gunakan KODE HTML berikut di bagian body.

xHTML :

<div id="boxjudul" style="margin:20px 5px 10px;"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="bgjudul"><div class="teksjudul">Rounded Border Corner with Animation Effect!</div></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div><div id="boxposting" style="margin:10px 5px 20px"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="bgposting"><div class="posting">Letakkan Teks di sini !
Rounded Corners with Animation Effect is designed to fill a gap in modern browser and supported by all browsers.<br/>Currently Firefox,Safari and Internet Explorer(IE) have limited support for the proposed CSS border-corners.<p>We would love to hear your comments on Rounded Corners with Animation Effect.</p><p>Thank's for your visiting our blog!</p><br/>gubhugreyot - bloggerstars-1
</div></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>

Catatan :

Untuk memjadikan Rounded Corners secara permanen bisa langsung menjadi bagian blog secara utuh (tanpa harus selalu memasang kembali xHTML setiap kali posting) maka xHTML harus di simpan dalam ruang EDIT Template di bagian post body

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

Update » Setu   KLIWON,Maret,17,2012

» Happy Blogging - gubhugreyot «