Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2

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

Caranya :

1. Login Ke Akun Blogger Sobat

2. Masuk Ke Bagian Edit HTML

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

span[class*="l-"] {height: 4px; width: 4px;background: #fff;display: inline-block;margin: 2px 2px;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-webkit-animation: loader 4s infinite;-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);-webkit-animation-fill-mode: both;-moz-animation: loader 4s infinite;-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);-moz-animation-fill-mode: both;animation: loader 4s infinite;animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);animation-fill-mode: both;}span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}@-webkit-keyframes loader {0% {-webkit-transform: translateX(-30px); opacity: 0;}25% {opacity: 1;}50% {-webkit-transform: translateX(30px); opacity: 0;}100% {opacity: 0;}}@-moz-keyframes loader {0% {-moz-transform: translateX(-30px); opacity: 0;}25% {opacity: 1;}50% {-moz-transform: translateX(30px); opacity: 0;}100% {opacity: 0;}}@-keyframes loader {0% {-transform: translateX(-30px); opacity: 0;}25% {opacity: 1;}50% {-transform: translateX(30px); opacity: 0;}100% {opacity: 0;}.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;border-right: 1px solid #333;border-top: 1px solid black;background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(
51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

 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='loading'><p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p><span class='l-1'/><span class='l-2'/><span class='l-3'/><span class='l-4'/><span class='l-5'/><span class='l-6'/></div>

6. Jika Sudah Save Template Dan Liat Readmorenya :D 

Selamat Mencoba ^_^