Membuat Label Cloud Warna Keren Di Blog

Label cloud widget pada blogger pasti loe tau kan gan. Itu yang dipasang di sidebar atau footer buat nampilin semua label postingan kalian jadi pengunjung gampang buat nyari postingan sesuai dengan label yang loe buat.

Label ini penting juga buat ningkatin page views blog kita gan. Kalo label bawaannya Blogger kan standar banget cuma teks biasa doank. Gimana cara membuat label cloud biar tampilannya tambah keren dan menarik perhatian pengunjung?

Pada kesempatan kali ini gw bakal share cara membuat label cloud warna yang bisa berubah sendiri secara otomatis gan. Jadi ntar tampilannya kayak lampu disko dan juga label cloud warna keren ini bakal menarik perhatian pengunjung gan. Gw juga tambahin efek hovernya bergerak ke kanan gan.

Selama ini kan kebanyakan tutorial cara membuat label cloud warna cuma ngerubah warna teksnya doank ya gak. Sekarang kita buat yang beda dan ini cuma pake css jadi gak ngeberatin blog gan aman buat SEO. Langsung aja gan disimak cara buat label cloud warna keren di blognya.

Note : Iget selalu backup atau download template blognya untuk menghindari hal-hal yang tidak di inginkan.

[ DEMO ]

Membuat Label Cloud Warna-Warni Berubah Secara Otomatis

• Pertama loe masuk ke Blogger terus pilih Template dan kilik Edit HTML. Lalu teken Ctrl+F di keyboard dan cari kode ]]></b:skin> gan. Kalo udah ketemu loe pastein kode di bawah ini tepat di atasnya.

/*-----Label Cloud Disko by http://seociyus.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;}
}

• Kalo udah dipastein coba di preview dulu kalo berhasil baru di Save gan. Nah sekarang blog loe udah ada label cloud warna-warni yang bisa berubah secara otomatis gan.

• Gak usah di edit-edit gan ntar tampilannya malah jadi jelek ok. Tapi kalo loe mau silahkan aja misal mau ganti warna background tinggal diganti aja kode warna HTMLnya gan. Kalo buat setting label widgetnya bebas yang penting displaynya cloud gan.

Sekian dulu yang bisa gw share kali ini tentang cara membuat label cloud warna keren di blog gan. Dilaen kesempatan gw bakal share cara membuat label cloud model yang laen. Jangan lupa ninggalin komentar ya gan.