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 :
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
Update » Setu KLIWON,Maret,17,2012
KLIK DEMO untuk melihat bentuk jadinya :
Langkah untuk membuat Rounded Corners with Animation Effect :
- Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
- Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)". - Kembali halaman baru akan terbuka,klik "Edit HTML".
- 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.
- Cari KODE ]]></b:skin> pada "box Edit HTML"
- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_QigBuYSF4ypCGMYu1Di3IaVM1GSNcTBJiKd00888NMCoAQ74P92NdQjPpy5YgYh8wGyoTo5E_vTKIE8YOKSO6GjBhtSroauvzdDoEbLAAeWH7OKVnvX0u4zF5Gv5UJWh1y6TuYcPcy2/s128/mitrabaraya_animasicilik-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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_GKqh2ZR2wD9ValM8yVEwlnf7XKw2HLuEMs6y_8m7kmRpAbIHfO5JE6wu1ZVOCXQyDLD1XfvPIYfhcRjNReBhAec_P3QfhWlhdJZpof_u5syGA7Etm8PQhxSjQgvaA72_Q2NUONXoAknH/s128/mitrabaraya_animasicilik.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTAh75PZr0uraedxPKhhjIQjZz9rpHbOztV_had0XoDlw0qLW-uKGWVrVhXKgSHPLFxU4cxYAUGIuFpWOOpUguSWJ9XyfbEDuaH0fVdiFL6OMHwRU6kWiPCRNQKeg_E5TI5QgyKmyBpb-/h50/mitrabaraya_ping-3x500.png);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;color:#00FFFF;font-weight:normal;} - Klik "Simpan Template (Save Template)".
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 Pojok dengan Animasi Efek!</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 bulat dengan Animasi Effect dirancang untuk mengisi kesenjangan di browser modern dan didukung oleh semua browser.<br/>Dukungan Saat ini Firefox, Safari dan Internet Explorer (IE) telah membatasi untuk usulan CSS border-sudut.<p>Kami akan senang mendengar komentar Anda di Rounded Corners dengan Animasi Efek.</p><p>Terima untuk Anda mengunjungi blog kami!</p><br/>mitrabaraya - online
</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 - mitrabaraya «
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan.
