Cara Membuat Auto Readmore Dengan Style CSS Animasi

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Auto Readmore Dengan Style CSS Animasi,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Auto Readmore Dengan Style CSS Animasi.

Caranya :

1. Login Ke Akun Blogger Sobat

2. Masuk Ke Bagian Edit HTML

3. Lalu Pastekan Kode Dibawah ini Diatas kode ]]></b:skin>

.lingkaranwrapper {
padding-right: 30px;
padding-top: 10px;
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}
.lingkaran {
background-color: #ECEBFA;
border:5px solid #746EBB;
opacity:.9;
border-right:5px solid #ffffff;
border-left:5px solid #ffffff;
border-radius:50px;
box-shadow: 0 0 35px #000000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.lingkaran1 {
background-color: #ecebfa;
border:5px solid #746EBB;
opacity:.9;
border-left:5px solid #2E2A69;
border-right:5px solid #2E2A69;
border-radius:50px;
box-shadow: 0 0 15px #000000; 
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}


.lingkaran2 {
background-color: transparent;
border: 5px solid #453D9B;
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #000000;
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 #2E2A69;}
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 #746EBB;}
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);}
}

4. Jika Sudah Lalu Cari Script Dibawah (yang mirip/sama) :

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

5. Lalu Ganti Semua Script Diatas Dengan Script Pemanggil Dibawah Ini :

<div class='lingkaranwrapper'>
<div class='lingkaran'/>
<div class='lingkaran1'/>
<div class='lingkaran2'>
<a expr:href='data:post.url'>Read More</a>
</div></div>

6. Jika Sudah Save Template Dan Liat Readmorenya :D 

Selamat Mencoba ^_^

Jika Ada Yang Tidak Di Mengerti Sama Sobat Monggo Silahkan Comment Di Bawah Dan Kami Akan Membantu Sobat-Sobat Sekalian !^_^ dan Selamat Mencoba !