Desain unik Dengan CSS3

Contoh gambar di samping adalah contoh box yang sudut-sudutnya,dibuat

bulat dengan CSS 3.bagaimana cara menerapkanya di blog kita???

okeh,langsung aja saya kasih tw caranya…

but,saya selalu mengingatkan anda,selalu backup template anda

sebelum mencoba ^^

1.Copy paste css dibawah ini..

#rounded-box {

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

2.bila template anda,berdesain dengan border/kotak,maka akan lebih mudah membuatnya,tekan Ctrl+f…lalu cari kata moz
Contoh:

.post {

-moz-border-radius:6px;

-webkit-border-radius:6px;

background:$postbgcolor;

border:1px solid #C0C0C0;

margin:0 0 10px;

padding:10px;}

3.lalu ganti moz,dan webkit menjadi seperti ini:

.post {

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

background:$postbgcolor;

border:1px solid #C0C0C0;

margin:0 0 10px;

padding:10px;}

nah…yang templatenya ingin menggunakan border,dapat ditambahkan juga,di tiap posting,header,footer,sidebar,tabbar

contoh:

#main-wrapper {

    width:470px;

    background:#ffffff none repeat scroll 0 0;

    border:1px solid #000000;

    color:#000000;

    display:inline;

    float:right;

    min-height:500px;

    overflow:visible;

    padding:5px 15px 15px;

    position:relative;

    min-height:500px; }

menjadi seperti ini

#main-wrapper {

width:470px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

    background:#ffffff none repeat scroll 0 0;

    border:1px solid #000000;

    color:#000000;

    display:inline;

    float:right;

    min-height:500px;

    overflow:visible;

    padding:5px 15px 15px;

    position:relative;

    min-height:500px; }

note:besar kecilnya border/sudut bulat,dapat anda atur ,sesuai denga keinginan anda!!

Selamat mencoba!!!!

Contoh blog yang menggunakan css3

Http://www.akbhome.co.cc

Read More

Back to top dengan sentuhan jquery

Back to Top dengan jQuery ini adalah versi lain dari 'Back to Top dengan Smoothscroll'. Versi Back to Top dengan jQuery
ini akan berfungsi untuk naik keatas secara halus dan ketika mencapai keatas kecepatannya akan berkurang yang mirip dengan Lift.bagaimana cara memasang tombol ini?

ikuti langkah2 berikut ini:

1. Masukan script jQuery berikut diatas </body>
(jika telah ada script ini tidak perlu diperlukan lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. Masukan pula script 'back to top' ini dibawah script jQuery diatas:

<script src='http://choenblogspot.googlecode.com/files/backtotop.js' type='text/javascript'/>

3.Kemudian letakan kode html dibawah ini di elemen halaman atau di letakan sebelum </body> atau dibagian footer, dan benahi posisinya dengan CSS sesuai keinginan anda.

<a href='#' onclick='MGJS.goTop();return false;'>Top</a>

Selamat mencoba ^^

Read More