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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFuc0eWzK1aASdgsU6vv3_eQfAZy-lwBlBTgcWQtWr_pT2-mBa0U-9OvKoZTlgCrlIu4E7WwYJiJrlSnuRjef1go9D0b-74hnWxqfbUbIKNrb8NfFyVrqypiPpmH4cKlW84s8SZkEfzw/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/AVvXsEhoFuc0eWzK1aASdgsU6vv3_eQfAZy-lwBlBTgcWQtWr_pT2-mBa0U-9OvKoZTlgCrlIu4E7WwYJiJrlSnuRjef1go9D0b-74hnWxqfbUbIKNrb8NfFyVrqypiPpmH4cKlW84s8SZkEfzw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFuc0eWzK1aASdgsU6vv3_eQfAZy-lwBlBTgcWQtWr_pT2-mBa0U-9OvKoZTlgCrlIu4E7WwYJiJrlSnuRjef1go9D0b-74hnWxqfbUbIKNrb8NfFyVrqypiPpmH4cKlW84s8SZkEfzw/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 ...

Posted in: Tips Mempercantik Blogmu