Cara Membuat Tampilan Label Cloud Berwarna di Blog

Cara Membuat Tampilan Label Cloud Berwarna di Blog - Kali ini kang zain akan share Cara Membuat Tampilan Label Cloud Berwarna di Blog, Label cloud ternyata bisa dimodif sesuai keinginan kita, contohnya pada postingan kali ini, label atau kategori blog dibuat berwarna. tentunya akan menambah cantik blog kita. kurang lebihnya seperti gambar dibawah ini:

Jika sobat tertarik dengan Cara Membuat Tampilan Label Cloud Berwarna di Blog. langsung saja ikuti tutorial dibawah ini:

Cara 1 Cara Membuat Tampilan Label Cloud Berwarna di Blog

Login ke akun blogger
Pilih "Template"
Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
Cari kode ]]></b:skin> atau cukup ]]> , gunakan Ctrl F biar gampang
Copy kode berikut dan pastekan SEBELUM kode ]]></b:skin>

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ display: inline-block; padding: 0px 10px; height: 29px; line-height:29px; border-radius: 5px; font-weight:bold; font-size:12px; text-decoration:none; } .label-size{ border: 1px solid #769e42; box-shadow: inset 0 1px 0 #c5e59c ; background-color: #9ed35a; text-shadow: 0px 1px 1px #6ea23b; color: #fff; background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size:hover{ background-color: #b7fa66; background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%); background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%); } .label-size:active{ background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size{ display:inline-block; border-radius: 5px 0 0 5px; border-right-width:0; position:relative; z-index:5; margin-right: 20px; margin-bottom: 10px; } .label-size:after{ content: " "; width: 22px; height: 22px; line-height: 18px; font-size:25px; border-top: 1px solid #769e42; border-right: 1px solid #769e42; box-shadow: inset 0 1px 0 #c5e59c ; background-color: #9ed35a; text-shadow: 0px 1px 1px #7eac46; border-radius: 3px 7px 3px 0; color: #fff; background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); position:absolute; top: 3px; right: -12px; z-index:-3; -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(45deg); /* FF3.5+ */ -ms-transform: rotate(45deg); /* IE9 */ -o-transform: rotate(45deg); /* Opera 10.5 */ transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); zoom: 1; } .label-size:hover:after{ background-color: #b7fa66; background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); } .label-size:active:after{ background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); } .label-size:before{ content: " "; height:5px; width:5px; display:block; position:absolute; right:-3px; top:11px; background-color: #fcfdf5; border: 1px solid #83ab52; border-radius:5px; box-shadow: 0 1px 0 #b2ddd83; } .label-size span{ padding:2px 5px; border: 1px solid #9e5c26; border-radius: 5px; box-shadow: inset 0 1px 0 #f5bf8c; background-color: #ed943f; text-shadow: 0px 1px 1px #000; margin-left: 10px; background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); } #Label1 {height:210px !important;}

6. Jangan lupa sobat Save. Ok

Penting !!!!

Sebelum melakukan langkah diatas tambahkan/aktifkan dulu widget label standar di menu "tata letak" dan buatlah menjadi cloud. Karena berdasarkan pengalaman kode diatas tidak akan bekerja sesuai yg diinginkan sebelum mengaktifkan widget label standarnya blogspot.

Cara 2 Cara Membuat Tampilan Label Cloud Berwarna di Blog

Login ke akun blogger
Pilih "Template"
Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
Cari kode ]]></b:skin> atau cukup ]]> , gunakan Ctrl F biar gampang
Copy kode berikut dan pastekan SEBELUM kode ]]></b:skin>

#Label1 a{float: left;
    font-size: 11px!important;
    line-height: 1em!important;
    display: block;
    margin-right: 7px;
    margin-bottom: 7px;
    padding: 7px;
    background: #ffd964 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZb5cu0frlVL03i5yLiuQliraZaZa1G8j3bZRTsw0h05Z4WO8vMH5B-l8KTuxwW0_KFgmguKhJL3Oi3OtNgvNUdRUcTX5-dkCTXC7hC42L1SgdRvNyuRj-1EzX5PEe4UqtZUSRC6Sc68/s1600/yellow-btrix.png);
    border: 1px solid #F9B653;
    color: #9C6533!important;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
    webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#Label1 a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq8s9k1bG6p4ueY26zbzfCVSov4xfveG7FfBWdF-9b_tNtvdCX53erSvss7hDpoTpv8j6g7M4Vwni_sXJqMfm8P5oNWHWbU-aWe-PWOM-CpMn6jWcNgo2TlLHb7KJbrMylM3hqoThRj50/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2NbKApHLj8bkZJFfeKT69DKwa6V1CGWw7QeHUR9cI4X_teX59yDEBkLtXBiUV90MtbrtxiT0w4pJGzC8lr4A1jJWzPNJIjB-8x5LO5GP9iyhyHoSFGN42AwD6R08NS4KhEr75KmR5c0/s1600/yellow-btrix-active.png); }

6. Jangan lupa sobat Save. Ok

Sekian dulu penjelasannya, semoga bermanfaat tutorial Cara Membuat Tampilan Label Cloud Berwarna di Blog. Good Luck

Tutorial Komputer

Friday, 12 July 2013