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~
Sebelumya saya ingatkan dahulu untuk,BACKUP TEMPLATE ANDA sebelum menggunakan trik ini ==v#kerusakan template bukan tanggung jawab saya.
Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD
Trik dibawah ini,adalah trik untuk tombol Readmore kamu.
saya akan jelaskan untuk Contoh Style 1 *contoh'a ada dibawah*
Trik 1
Pertama buka blogger=>rancangan=>Edit HTML,copy paste CSS dibawah ini diatas kode [
]]></b:skin>
.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);}
}
Setelah itu simpan,dan centang expand widget templates,lalu cari kode html yang seperti ini/ yang mirip" seperti dibawah ini(kode HTML dibawah ini berasal dari template guilty crown)
#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 iniSetelah Itu simpan dan lihat hasilnya~
<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>
-Contoh uji coba di template guilty crown-
Trik 2
CSS'a sama dengan cara diatas,beda'a cara yang dibawah ini kita tinggal mengganti hanya mengganti kode html
<a expr:href='data:post.url'>Read More...</a>dengan
<a href="http://alamatlink">namalink</a>Tujuanya agar Url linknya bisa kita sesuaikan dengan alamat link yang kita inginkan.ganti http://alamatlink dengan url link kamu.
(berlaku untuk semua style)
<div class="circlewrapper">kamu tinggal ganti alamat dan nama linknya.bisa di letakan dimana saja(kode HTTML ada tempatnya)
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a href="http://alamatlink">namalink</a></div></div>
diantara kode body
#buat yang ga ngerti (<body> isi html </body>)
atau bisa juga diletakan di (rancangan=> add a gadget=>HTML/JavaScript=> copy paste lalu simpan.
Tambahan: Untuk mengganti warna,kamu tinggal ganti kode warna hexa dan rgbanya.
misal
Warna merah:
Hexa :#ff0000
Rgba color: rgba(255,0,0,0.9);
Info lanjut'a ada dipostingan saya
-Tips design menggunakan CSS3
-Tips memilih warna design blog
Style1
DEMO
CSS
.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);}
}
HTML
<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>
Style 2
CSS
.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}
.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}
.circlewrapper3 {float:right;}
.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}
.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}
.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}
.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}
.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}
@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}
HTML
<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='data:post.url'>Read More</a>
</div>
Style3
CSS
span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
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;}/*Blog Johanes-Djogzs.blogspot.com*/
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;}/*Blog Johanes-Djogzs.blogspot.com*/
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;}}/*Blog Johanes-Djogzs.blogspot.com*/
.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;/*Blog Johanes-Djogzs.blogspot.com*/
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%);/*Blog Johanes-Djogzs.blogspot.com*/
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;}
HTML
<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>
Style4
CSS
.menureadmore1 {
clear: both;
margin:auto;
background: black;
font-size: 15px;
color: #32BDE8;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px solid
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;}
.menureadmore1::before {
content: "";
position: absolute;
width: 125px;
margin: auto;
height: 125px;
border: 8px solid
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -30px;
margin-left: -30px;
}
.animasimenureadmore1 {
position: absolute;
width: 105px;
margin: auto;
height: 105px;
border: 8px dotted rgba(50, 189, 232, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -100px;
margin-left: -20px;
-moz-animation:spin5Pulse 2s infinite linear;
-webkit-animation:spin5Pulse 2s infinite linear;
}
@-moz-keyframes spin5Pulse {
0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -moz-transform:rotate(-360deg); opacity:0;}
}
@-webkit-keyframes spin5Pulse {
0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -webkit-transform:rotate(-360deg); opacity:0;}
}
HTML
<div class='menureadmore1'>
<a expr:href='data:post.url'>Readmore</a>
<div class='animasimenureadmore1'/>
</div>
sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Tombol Menu Unik dengan CSS3 Animasi http://djogzs.blogspot.com/#ixzz2NqlwCaEk
Under Creative Commons License: Attribution
Backlinks Please Thanks
| URL |
| Code For Forum |
| HTML Code |
Anda Sekarang Sedang Baca Artikel Tentang Tombol Menu Unik dengan CSS3 Animasi , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Tombol Menu Unik dengan CSS3 Animasi ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Tombol Menu Unik dengan CSS3 Animasi Sumbernya. Thank's
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Posting Komentar - Back to Content
[D-S] COMMENTS RULE :
-DONT SPAM
-DONT FLOOD
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!