CSS Label Cloud Keren

5 Style CSS Label Cloud Keren - Pada postingan kali ini yaitu mempercantik widget label anda. Apa sih label itu ? Label untuk mengkategorikan atau mengelompokkan post yang dibuat. Biasanya pengelompokan label itu didasarkan atas kesamaan tema (bahasan). Saat menulis postingan pasti ada pilihan memberi label baru atau memakai yang sudah ada. Widget label blogspot ada 2 jenis, ada yg berupa LIST dan juga berbentuk Cloud. Perbedaan bentuk
List = label akan berderet seperti kereta :v

Cloud = label akan berbentuk barisan kode menyamping seperti awan, contoh :

Dibawah ini ada 5 Style CSS Label Cloud blogspot 

Style 1 :

CSS :

/* Label Cloud Style 1 */
.label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666}.label-size:hover{border:1px solid #B20000;text-decoration:none;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;transition:all 0.5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}
/* Credit SCH-XP |  Style 1 */

Style 2 :

CSS :

/* Label Cloud Style 2 */.label-size{font-size:14px;margin:5px 0 5px 0;float:left;border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none;padding:5px;border:1px #fff solid;background:#2493C4;color:#fff;box-shadow:1px 1px 5px rgba(1,1,1,.1)}.label-size a{color:#fff;font-weight:normal}.label-size a:hover{color:#2493C4;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out}.label-size:hover{background:#333;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg)}/* Credit SCH-XP | Style 2 */

Style 3 :

CSS :

/* Label Cloud Style 3 */
.label-size{margin:0;padding:0;position:relative}.label-size a,.label-size span{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom:9px;margin-left:20px;padding:0 10px 0 12px;background:#2493C4;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.label-size a:before,.label-size span::before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #2493C4 transparent transparent;border-style:solid;border-width:12px 12px 12px 0}.label-size a:after,.label-size span::after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #2493C4;-webkit-box-shadow:-1px -1px 2px #2493C4;box-shadow:-1px -1px 2px #2493C4}.label-size a:hover,.label-size span::hover{background:#333}.label-size a:hover:before,.label-size span::hover::before{border-color:transparent #333 transparent transparent}
/* Credit SCH-XP |  Style 3 */

Style 4 :

CSS :

/* Label Cloud Style 4 */
.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);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:progid:DXImageTransform.Microsoft.Matrix(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}
/* Credit SCH-XP | Style 4 */

Style 5 :

CSS :

.label-size {
display: block;
float: left;
background: #555 !important;
margin: 0 1px 1px 0;
color: #eee;
font-size: 100%;
}
.label-size:hover, .label-size a:hover, .label-size span:hover{background:#3384ff;}
.label-size a, .label-size span {
display: inline-block;
color: #fff;
padding: 4px 4px;
}

Cara Memasang Label Cloud :
1. Buka Blogger

2. Pilih Tata Letak

3. Klik Add Gadget -> pilih Label

4. Simpan

Cara Memasang Style CSS Label Cloud :

1. Buka Blogger

2. Klik Template -> Edit HTML

3. Copy Style CSS diatas, lalu paste diatas kode ]]></b:skin> (pake ctrl+f biar cepet :v)

4. Simpan Template

credit style css 5

credit gambar :3

Terimakasih telah membaca artikel  CSS Label Cloud Keren di blog ini, semoga bermanfaat, jgn lupa untuk meninggalkan komentar + follownya :)

sumber

CSS Label Cloud Keren

Backlinks Please Thanks ^_^

URL

Code For Forum

HTML Code <a href='http://lf-thegamer.blogspot.com/2013/08/css-label-cloud-keren.html' target='_blank'> CSS Label Cloud Keren </a>