Showing posts with label tutorial blog. Show all posts
Showing posts with label tutorial blog. Show all posts
Tuesday, October 23, 2012

Tri Angle Label Cloud Blogspot

0 comments
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
modif label cloude blogger
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
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
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
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
Read more...
Tuesday, October 16, 2012

Cara Mudah Menghilangkan Navbar Di Blogger

0 comments
Bismillah...blogger kian hari kian mudah dan gampang saja untuk di konfigursi, sesuai dengan judul postingan yaitu Cara Mudah Menghilangkan Navbar di Blogger, apa itu Navbar? navbar kepanjangan dari kata Navigasi Bar, yaitu navigasi bawaan blogger yang posisinya suka di atas. 

Kalo jaman dahulu untuk menghilangkan Navbar di Blogger tersebut, kita harus memasukan kode CSS yang kodenya seperti #navbar-iframe {height:0px;visibility:hidden;display:none}, dan lain sebagainya. nah untuk sekarang blogger mempermudah para penggunanya jadi kita tidak perlu repot repot masuk ke edit HTML dan memasukan kode seperti diatas.

Untuk menghilangkan Navbar yang sekarang, sobat tinggal ikuti langkah langkah berikut ini :
  • Login ke Blogger
  • Masuk ke area Tata Letak
  • Setelah itu lihat di pojok kanan atas tata letak, dan klik edit Navbar.
  • Langkah selanjutnya akan muncul popup konfigurasi Navbar.
Edit Navbar di Blogger
Edit Navbar di Blogger
  • Langkah selanjutnya, jika sobat ingin menghilangkan Navbar tersebut, sobat tinggal pilih Off.
cera Navbar Off di Blogger
Navbar Off di Blogger

  • Terus Save dan lihat hasilnya.

Semoga berhasil, sekian postingan pada kesempatan ini semoga bermanfaat, Good Luck Happy Blogging.       
Read more...
Thursday, October 11, 2012

BLOGROLL DENGAN MENU DROPDOWN

0 comments



















Untuk membuat blogroll dengan menu dropdown,



silahkan lihat contoh di bawah :