Cara Membuat Tampilan Label Cloud Berwarna di Blog - Hello friend Download Games And Software, In the article that you read this time with the title Cara Membuat Tampilan Label Cloud Berwarna di Blog, we have prepared this article well for you to read and take information in it. hopefully the post content Article Modifikasi Blog, what we write can you understand. alright, happy reading.

Judul : Cara Membuat Tampilan Label Cloud Berwarna di Blog
link : Cara Membuat Tampilan Label Cloud Berwarna di Blog

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

1. Login ke akun blogger
2. Pilih "Template"
3. Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
4. Cari kode ]]></b:skin>  atau cukup  ]]> , gunakan Ctrl F biar gampang
5. 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

1. Login ke akun blogger
2. Pilih "Template"
3. Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
4. Cari kode ]]></b:skin>  atau cukup  ]]> , gunakan Ctrl F biar gampang
5. 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/AVvXsEjtFH_iH0nWsLtgfluBH7WWU1vJS8W4yF3VPZS3aNuh4e4EJq9Ndsc7Wsj8P9l8E7MlGWhHt67oar4QBerU2g4WuDZUBuiLl4UOR_s2gX_hC3pOwgfWuCEih1U_OKTBH-V7NE7IhZ2ns8U/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/AVvXsEg5QxgivDl5UWIUHUmG02tyPs8PFG14NW1OQOt-Km9fzttG6trbvm24qijGvIDa6Dr1TArm4tq-_iIWGhjH3RqFaQEPirCX52VPp9KRXe2ULwJpCWOpJqHlulBdkYh73TGGdaPBzo2BIfg/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifAGvU5RZBjxCcPJhbXW_bl-5svCMpk6yWrxVXapBoMkCpRCW30Tz_ipwvkSEuMTxFJtgwNf-Lj49aT5065NzIQAf_inow4SoyQRWuOPI9uSJ7tW-HYIeFLWc57IB60jzN24HVlwvBlmc/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

Such article Cara Membuat Tampilan Label Cloud Berwarna di Blog

So this article Cara Membuat Tampilan Label Cloud Berwarna di Blog this time, hopefully it can benefit you all. alright, see you in another article post.

You are now reading the article Cara Membuat Tampilan Label Cloud Berwarna di Blog with the link address https://moresofgame.blogspot.com/2013/04/cara-membuat-tampilan-label-cloud.html