EFEK KEREN PADA READ MORE
Efeknya Adalah Efek Animasi Pada Tombol Read More atau Baca Selengkapnya. Namun, Efek Animasinya Hanya Dapat Terlihat Google Chrome. Selengk...
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 AdalahCSS Tersebut Letakkan di Atas Kode ]]></b:skin>.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODjxSQ2Iee9_hyql_sRe0wYT_pgZJ7xSgGOw0QupTpv-4njk5z9gIVylUs4e4tUnoKG9nL8QzDPpcSuURvaCwrG6mL6gWi8fSCuvSmijKFAwEyqQ-Tph0lGw39FB9i0NVDX7Z2UtGblo/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODjxSQ2Iee9_hyql_sRe0wYT_pgZJ7xSgGOw0QupTpv-4njk5z9gIVylUs4e4tUnoKG9nL8QzDPpcSuURvaCwrG6mL6gWi8fSCuvSmijKFAwEyqQ-Tph0lGw39FB9i0NVDX7Z2UtGblo/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODjxSQ2Iee9_hyql_sRe0wYT_pgZJ7xSgGOw0QupTpv-4njk5z9gIVylUs4e4tUnoKG9nL8QzDPpcSuURvaCwrG6mL6gWi8fSCuvSmijKFAwEyqQ-Tph0lGw39FB9i0NVDX7Z2UtGblo/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));
}
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>dan Selesai
Setelah Menemukannya, Letakan Kode </div> Setelah Kode </a> Tersebut
6 komentar
Kenapa efek read more pada blog ini tidak terlihat pada peramban FF?
Replykalau fireFox hanya dapat di lihat di FF v. 4 beta...
ReplySaya pernah membuat tombol seperti ini yang saya gunakan untuk submit komentar di thema saya sebelumnya yang V-1 tetap terlihat di FF v3.5 keatas Mas.
Replywah..
Replysaya periksa dari Awal dulu nich CSS3nya..
ohya, saya hanya seorang pelajar smp...
kuq di panggil "Mas??" sich..
slmt ulang taun hehehhe 2011 neh
Replyyupz..
Reply