Blog Anak Madura

Mencari sesuatu yang baru memang sulit.dibutuhkan kerja keras untuk mendapatkan sesuatu yang baru.inspirasipun tidak akan datang jika kita hanya berdiam diri,dan akhirinya setelah keliling" dunia browsing browsing dan browsing.akhirnya,kepala gw pusing @___@"

wakakaka,memang bikin galau trik yang satu ini.sebelum'a saya cuma iseng" dengan CSS3 keyframe yang saya buat n modif sendiri di header blog saya,tapi karena kepikiran yang lain juga,banyak messages gajelas di fb yang minta share" cara'a,yweslah saya share deh.tapi trik ini agak beda dengan yang ada di header saya,beda'a CSS ini saya terapkan untuk tombol readmore.tapi sebenarnya bisa juga untuk tombol menu sendiri.karena kalau saya nyebarin masang animasi sebesar itu yang seperti blog saya,yang ada saya malah nyebarin dosa memberatkan blog kamu deh.wakwkawkawk.tapi untuk trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan untuk upgrade browser kamu ke versi yang terbaru,dan jangan sekali" menggunakan Internet Explore,karena IE tidak 100% mendukung CSS3 animasi.ok lansung saja~

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

#note.ada kemungkinan saat kamu mencari kode html dibawah ini,kamu akan menemukan 2 kode yang sama persis.
#solusi:dicopas dua"a

<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More....</a>
</span>

lalu hapus semua kode diatas,kemudian diganti Dengan kode html dibawah ini

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Setelah Itu simpan dan lihat hasilnya~

DEMO :