Cara Membuat Label Cloud Warna Keren Di Blog
Membuat Label Blog Menjadi Cerah Agar Pengunjung Menjadi Betah & Ingin Datang & Datang lagi ke Blog kita , tetapi ada berbagi macam cara membuat Label Cloud di blog tetapi mungkin tidak sekeren yang saya ingin share kali ini , Label Cloud Berwarna keren.
Kreasilah Kode CSS dengan Kreasi Mu Hehehe
Semoga Bermanfaat Bagi Kalian Semua
Cara Membuat Label Cloud Warna Keren Di Blog
- Sekarang masuk menu Template --> Pilih edit HTML
- Klik Ctrl+F dan cari kode ]]></b:skin>
- Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>
/*-----Label Cloud Disko by http://pintuseo.blogspot.com/----*/
.Label a{ margin:0 11px 6px 0; padding:5px 5px 0 5px; background:#222; -moz-box-shadow: 0 0 5px #000; -webkit-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000;opacity: .5; text-transform: uppercase; border-radius: 5px; float:left; text-decoration:none; height:24px; line-height:24px; color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); font: 14px 'Arial black'; letter-spacing:3px; /* Firefox: */ -moz-animation-name:seociyusdisko; -moz-animation-duration:2s; -moz-animation-timing-function:linear; -moz-animation-delay:0.5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:seociyusdisko; -webkit-animation-duration:2s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0.5s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:seociyusdisko; -o-animation-duration:2s; -o-animation-timing-function:linear; -o-animation-delay:0.5s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @keyframes seociyusdisko { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-moz-keyframes seociyusdisko /* Firefox */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } .Label a:hover{ position:relative; animation:seociyushover 0.5s infinite; -moz-animation:seociyushover 0.5s infinite; /*Firefox*/ -webkit-animation:seociyushover 0.5s infinite; /*Safari and Chrome*/ -o-animation:seociyushover 0.5s infinite; /*Opera*/ } @keyframes seociyushover { from {left:0px;} to {left:10px;} } @-moz-keyframes seociyushover /*Firefox*/ { from {left:0px;} to {left:10px;} } @-webkit-keyframes seociyushover /*Safari and Chrome*/ { from {left:0px;} to {left:10px;} } @-o-keyframes seociyushover /*Opera*/ { from {left:0px;} to {left:10px;} }
Semoga Bermanfaat Bagi Kalian Semua
No comments