Google Translator

English French German Spain Italian Dutch

Russian Brazil Japanese Korean Arabic Chinese Simplified
**ADJAW CORP** Translate by Google

Sabtu, 02 April 2011

EFEK KEREN PADA READ MORE

 
Efeknya Adalah Efek Animasi Pada Tombol Read More atau Baca Selengkapnya. Namun, Efek Animasinya Hanya Dapat Terlihat Google Chrome. Selengkapnya, Silahkan Klik Baca Selengkapnya
Kode CSSnya Adalah
.button{
padding:8px 10px;
background-repeat:no-repeat;
background-position:bottom left;
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
float:right;
}


.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.blue.button{
color:#0f4b6d;
border:1px solid #84acc3;
-moz-radial-gradient(center bottom, circle, rgba(177,159,217,1) 0,rgba(177,159,217,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('http://2.bp.blogspot.com/_HGekX55lw4E/TOmbRSWXr6I/AAAAAAAAAOI/nMKZ2lqcm48/s320/button_bg.png'),
-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(177,159,217,1)), to(rgba(177,159,217,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8BC2C5), to(#8CDBDF));
}


.blue.button:hover{
background-color:#63c7fe;
-moz-radial-gradient( center bottom, circle, rgba(177,159,217,1) 0,rgba(177,159,217,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('http://2.bp.blogspot.com/_HGekX55lw4E/TOmbRSWXr6I/AAAAAAAAAOI/nMKZ2lqcm48/s320/button_bg.png'), url('http://2.bp.blogspot.com/_HGekX55lw4E/TOmbRSWXr6I/AAAAAAAAAOI/nMKZ2lqcm48/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(177,159,217,1)), to(rgba(117,159,217,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D2506C), to(#DF8196));
}
CSS Tersebut Letakkan di Atas Kode ]]></b:skin>
Atau di HTML/Java Script dengan Menambahkan Kode <script>KODE CSS DI ATAS</script>
Kemudian Klik Rancangan, Edit HTML dan Klik Tanda Expand Template Widget
Cari Kode <div class='jump-link'>
dan Tambahkan Kode <div class='button blue'> di Bawahnya
Kemudian Cari Kode <data:post.jumpText/> di Sekitar Kode Tersebut, Terdapat Kode </a>
Setelah Menemukannya, Letakan Kode </div> Setelah Kode </a> Tersebut ...

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Modern Warfare 3