Widget Label - pada tutorial bagian ke dua ini, saya akan berbai script css lagi, untuk memodifikasi widget label jadi lebih reponsive. Pada dasarnya hal ini dilakukan agar sipengunjung tetap nyaman berada di blog anda.
Langkah1 - Copy paste Script berikut di atas code
]]></b:skin>
/*-----Label Cloud by http://j4soft.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:seoTutorial seodisko;
-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:seoTutorial seodisko;
-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:seoTutorial seodisko;
-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 seoTutorial seodisko
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes seoTutorial seodisko /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
.Label a:hover{
position:relative;
animation:seoTutorial seohover 0.5s infinite;
-moz-animation:seoTutorial seohover 0.5s infinite; /*Firefox*/
-webkit-animation:seoTutorial seohover 0.5s infinite; /*Safari and Chrome*/
-o-animation:seoTutorial seohover 0.5s infinite; /*Opera*/
}
@keyframes seoTutorial seohover
{
from {left:0px;}
to {left:10px;}
}
@-moz-keyframes seoTutorial seohover /*Firefox*/
{
from {left:0px;}
to {left:10px;}
}
@-webkit-keyframes seoTutorial seohover /*Safari and Chrome*/
{
from {left:0px;}
to {left:10px;}
}
@-o-keyframes seoTutorial seohover /*Opera*/
{
from {left:0px;}
to {left:10px;}
}
Langkah2 - Klik simpan, buka tab tata letak, dan setting widget label anda seperti gambar
Langkah3 - Klik simpan, dan lihat hasilnya.
