Tri Angle Label Cloud Blogspot

Bismillah... pada kesempatan ini saya akan sedikit share tentang cara membuat label cloud dengan CSS Tri Angle.

Untuk membuat label cloud dengan sedikit gaya triangle ini pun cukup mudah dan gampang, sobat tinggal ikuti saja caranya di bawah ini..

Langkah pertama untuk membuat label cloud triangle yaitu :
Login Ke Blogger
Terus Soabat masuk ke Template Blogger
Teus klik Edit HTML
Setelah itu sobat cari kode ]]></b:skin>
Jika sudah ketemu terus sobat copi kode di bawah ini dan letakan di atas kode ]]></b:skin>.

Kode CSS Label Cloud Triangle

.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%);
}

Setelah itu Save template sobat, langkah selanjutnya sobat tambahkan gadget label dengan type cloud
Label Cloud

Oke setelah itu klik simpan dan lihat hasilnya...
Jika sobat ingin merubah warnanya silahkan sobat ganti warna backgrundnya atau sobat bisa menggunakan kode kode warna di bawah ini.
Red Triangle
Red Triangle Label Cloud   

background: #e25b53;
background: -moz-linear-gradient(top,  #e25b53 0%, #dd2011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e25b53), color-stop(100%,#dd2011));
background: -webkit-linear-gradient(top,  #e25b53 0%,#dd2011 100%);
background: -o-linear-gradient(top,  #e25b53 0%,#dd2011 100%);
background: -ms-linear-gradient(top,  #e25b53 0%,#dd2011 100%);
background: linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );

Black Label Triangle

Black Triangle Label Cloud

background: #444444;
background: -moz-linear-gradient(top,  #444444 0%, #1c1c1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#1c1c1c));
background: -webkit-linear-gradient(top,  #444444 0%,#1c1c1c 100%);
background: -o-linear-gradient(top,  #444444 0%,#1c1c1c 100%);
background: -ms-linear-gradient(top,  #444444 0%,#1c1c1c 100%);
background: linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );

Cyan Label Triangle

Cyan Label Triangle Cloud

background: rgb(130,207,241);
background: -moz-linear-gradient(top,  rgba(130,207,241,1) 0%, rgba(56,174,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,207,241,1)), color-stop(100%,rgba(56,174,234,1)));
background: -webkit-linear-gradient(top,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -o-linear-gradient(top,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -ms-linear-gradient(top,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );

Oke Sobat... Sampai di sini dulu postingan pada kesempatan ini semoga berhasil Good Luck Happy Blogging