Oktober 2012 | ProBlogiz

Home » Archives for Oktober 2012

10 Menu Drop Down Keren Pure CSS

31.10.12

proBlogiz

Jika Anda sedang mencari Menu Drop Down pure CSS maka disini akan dapat temukan 10 koleksi menu drop down keren dan simple. Semua drop down menu ini hanya menggunakan 100% kode CSS ( tanpa image ) dan kompatibel semua browser utama, Chrome, Mozilla Firefox, IE8,, IE9 IE10, Opera, dan Safari . Pada Desain Blog kali ini Anda bisa memilih salah satu menu navigasi dropdown keren dibawah dan serta juga source kode CSS-nya. Juga dipandu cara menambahkan dan edit menu dropdown di Blogger.

Note : untuk Anda yang menggunakan Browser IE tambahkan kode berikut diatas tag <style>

<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->

Sebelum Anda memilihnya, coba gunakan Desain Preview kami untuk melihat tampilan Live Demo-nya/Preview dari masing-masing menu dropdown tersebut.

Caranya :

Klik tombol Clear selanjutnya Anda copy ( control + c ) kode CSS serta kode HTML dibawah ini (source code dropdown menu) dan pastekan ( control + v ) di dalam area Desain Preview.

Kemudian klik tombol Preview

Coba sekarang >>> Desain Preview

Cara Pasang Menu Drop Down pada Blogger

Setelah Anda menentukan pilihan menu navigasi yang paling disukai, ikuti langkah berikut :

Masuk Blogger > pilih Tata Letak

Klik Add a Gadget atau Add a Page element

Pilih HTML/JavaScript widget

Paste semua kode Menu Drop Down tersebut dalam HTML/JavaScript widget

Klik Save

Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawah header / judul Blog. lihat gambar dibawah :

Anda bisa mengubah link-link item menu dropdown nantinya sesuai keperluan, dengan cara mengubah / edit bagian kode HTML dibawah ini :

<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>

Ganti tanda "#" dengan Link Halaman / URL halaman dan ganti juga menu item Products , Product 2, About, Contact, Sub Item dst. dengan nama atau judul halaman Anda.

Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delete / hapus line html tersebut :

<li><a href="#" ><span>Nama Item</span></a></li>

10 Drop Down Menu Keren Pure CSS

1. Red Opera Drop Down Menu

source code :


<style>

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #e00f16;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}


</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

2. Blue Opera Drop Down Menu

source code :


<style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

3. Grass Pillbox Drop Down Menu

source code :


<style>
#cssmenu ul, #cssmenu li,
#cssmenu span, #cssmenu a { margin: 0; padding: 0; }

#cssmenu {
 background: #F6F8EE;
 border-bottom: 1px solid #95AA61;
 box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
 -moz-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
 -webkit-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
}

#cssmenu:after { content:''; display: block; clear: both; }

#cssmenu a { 
 display: inline-block;
 font-family: Calibri, Arial, sans-serif;
 color: #333; text-decoration: none; 
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -o-transition: all 0.2s;
 -ms-transition: all 0.2s;
 transition: all 0.2s;
}
#cssmenu a:hover { background: #95AA61; }

#cssmenu ul { 
 list-style: none; 
 height: 34px;
 padding: 10px 0; 
}
#cssmenu > ul > li {
 float: left; 
 height: 34px;
 margin: 0 5px;
 position: relative;
}
#cssmenu > ul > li > a {
 background: #899752;
 box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
 -moz-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
 -webkit-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 line-height: 24px;
 padding: 5px 10px;
}
 #cssmenu > ul > li.active a {
  background: #121310;
  color: #F6F8EE;
 }

#cssmenu .has-sub ul {
 background: #F6F8EE;
 border: 1px solid #95AA61;
 border-top: 0 none;
 height: 0; overflow: hidden;
 padding: 0; position: absolute;
 opacity: 0; top: 44px; left: 0;
 width: 200%; 

 -webkit-transition: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 transition: opacity 0.2s;
}
#cssmenu .has-sub:after {
 content: '';
 display: block;
 padding: 0 10px;
 position: absolute;
 bottom: -10px; left: 0;
 height: 10px; width: 200%;
}

#cssmenu .has-sub:hover ul {
 border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 webkit-border-radius: 0 0 5px 5px;
 height: auto;
 opacity: 1;
 padding: 10px;
}

#cssmenu .has-sub li, 
#cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
#cssmenu .has-sub li { margin: 8px 0; }
#cssmenu .has-sub li a { 
 border-radius: 5px 0 0 5px; 
 -moz-border-radius: 5px 0 0 5px;
 -webkit-border-radius: 5px 0 0 5px;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

4. Dirt Pillbox Drop Down Menu

source code :


<style>
#cssmenu ul, #cssmenu li,
#cssmenu span, #cssmenu a { margin: 0; padding: 0; }

#cssmenu {
 background: #f8f5ee;
 border-bottom: 1px solid #aa9961;
 box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
 -moz-box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
 -webkit-box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
}

#cssmenu:after { content:''; display: block; clear: both; }

#cssmenu a { 
 display: inline-block;
 font-family: Calibri, Arial, sans-serif;
 color: #131210; text-decoration: none; 
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -o-transition: all 0.2s;
 -ms-transition: all 0.2s;
 transition: all 0.2s;
}
 #cssmenu a:hover { background: #aa9961; }

#cssmenu ul { 
 list-style: none; 
 height: 34px;
 padding: 10px 0; 
}
#cssmenu > ul > li {
 float: left; 
 height: 34px;
 margin: 0 5px;
 position: relative;
}
#cssmenu > ul > li > a {
 background: #978152;
 box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
 -moz-box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
 -webkit-box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 line-height: 24px;
 padding: 5px 10px;
}
 #cssmenu > ul > li.active a {
  background: #131210;
  color: #f8f5ee;
 }

#cssmenu .has-sub ul {
 background: #f8f5ee;
 border: 1px solid #aa9961;
 border-top: 0 none;
 height: 0; overflow: hidden;
 padding: 0; position: absolute;
 opacity: 0; top: 44px; left: 0;
 width: 160px; 

 -webkit-transition: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 transition: opacity 0.2s;
}
#cssmenu .has-sub:after {
 content: '';
 display: block;
 padding: 0 10px;
 position: absolute;
 bottom: -10px; left: 0;
 height: 10px; width: 200%;
}

#cssmenu .has-sub:hover ul {
 border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 -webkit-border-radius: 0 0 5px 5px;
 height: auto;
 opacity: 1;
 padding: 10px;
}

#cssmenu .has-sub li, 
#cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
#cssmenu .has-sub li { margin: 8px 0; }
#cssmenu .has-sub li a { 
 border-radius: 5px 0 0 5px;
 -moz-border-radius: 5px 0 0 5px;
 -webkit-border-radius: 5px 0 0 5px;
 line-height: 120%; 
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

5. Simple Red

source code :


<style>
#cssmenu {
 border:1px solid #b9121b;
 background:#b9121b;
 }
#cssmenu > ul {
 padding:1px 0;
 margin:0px;
 list-style:none;
 width:100%;
 height:21px;
 border-top:1px solid #FFFFFF;
 border-bottom:1px solid #FFFFFF;
 font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
 margin:0;
 padding:0;
 display:block;
 float:left;
 position:relative;
 width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#b9121b;
 color:#ffffff;
 width:148px;
 height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#ec454e;
 color:#ffffff;
 width:146px;
 height:13px;
 border-left:1px solid #ffffff;
 border-right:1px solid #ffffff;
}
#cssmenu > ul li ul {
 margin:0;
 padding:1px 1px 0;
 list-style:none;
 display:none;
 background:#ffffff;
 width:146px;
 position:absolute;
 top:21px;
 left:-1px;
 border:1px solid #b9121b;
 border-top:none;
}
#cssmenu > ul li:hover ul {
 display:block;
}
#cssmenu > ul li ul li {
 width:146px;
 clear:left;
 width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
 clear:left;
 background:#b9121b;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
 clear:left;
 background:#ec454e;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
 display:none;
 margin:0;
 padding:0;
 list-style:none;
 position:absolute;
 left:145px;
 top:-2px;
 padding:1px 1px 0 1px;
 border:1px solid #b9121b;
 border-left:1px solid #b9121b;
 background:#ffffff;
 z-index:900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
 display:block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
 background:#b9121b;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
 background:#ec454e;
}

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

6. Simple Blue

source code :


<style>
#cssmenu {
 border:1px solid #000099;
 background:#000099;
 }
#cssmenu > ul {
 padding:1px 0;
 margin:0px;
 list-style:none;
 width:100%;
 height:21px;
 border-top:1px solid #FFFFFF;
 border-bottom:1px solid #FFFFFF;
 font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
 margin:0;
 padding:0;
 display:block;
 float:left;
 position:relative;
 width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#000099;
 color:#ffffff;
 width:148px;
 height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#0066FF;
 color:#ffffff;
 width:146px;
 height:13px;
 border-left:1px solid #ffffff;
 border-right:1px solid #ffffff;
}
#cssmenu > ul li ul {
 margin:0;
 padding:1px 1px 0;
 list-style:none;
 display:none;
 background:#ffffff;
 width:146px;
 position:absolute;
 top:21px;
 left:-1px;
 border:1px solid #000099;
 border-top:none;
}
#cssmenu > ul li:hover ul {
 display:block;
}
#cssmenu > ul li ul li {
 width:146px;
 clear:left;
 width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
 clear:left;
 background:#000099;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
 clear:left;
 background:#0066FF;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
 display:none;
 margin:0;
 padding:0;
 list-style:none;
 position:absolute;
 left:145px;
 top:-2px;
 padding:1px 1px 0 1px;
 border:1px solid #000099;
 border-left:1px solid #000099;
 background:#ffffff;
 z-index:900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
 display:block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
 background:#000099;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
 background:#0066FF;
}


</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

7. Black CSS3 Drop Down Menu

source code :


<style>
#cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 


#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
#cssmenu{border-color:#000;} 
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#444;} 
#cssmenu > ul > li > a:hover{background:#111;}



</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

8. Light Blue CSS3 Drop Down Menu

source code :


<style>
#cssmenu{ height:37px; display:block; padding:0; margin:0;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#4fbdf0; background:-moz-linear-gradient(top, #4fbdf0 0%, #45b2d2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbdf0), color-stop(100%,#45b2d2)); background:-webkit-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:-o-linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); background:-ms-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fbdf0', endColorstr='#45b2d2',GradientType=0); } 
#cssmenu{border-color:#3589a1;} 
#cssmenu > ul > li > a{border-right:1px solid #3589a1; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#6ed1ff;} 
#cssmenu > ul > li > a:hover{background:#36acd2;} 

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

9. Grey CSS3 Drop Down Menu

source code :


<style>
/* Main navigation block element */
#cssmenu{
height:37px;
display:block;
padding:0;
margin:20px auto; 
border:1px solid;
border-radius:5px;
}

#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}

/* Styling navigation links */
#cssmenu > ul > li > a{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}

#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}


/* Extra border for navigation links */
#cssmenu > ul > li > a:after{
content:'';
position:absolute;
border-right:1px solid;
top:-1px; bottom:-1px; right:-2px;
z-index:99;
}
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}

/* Bullet for dropdowns */
#cssmenu > ul > li.has-sub > a:before{
content:'';
position:absolute; top:18px; right:6px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}

/* Hover state styles for drop menu link */
#cssmenu ul li.has-sub:hover > a{
background:#3f3f3f;
border-color:#3f3f3f;
padding-bottom:13px; padding-top:13px;
top:-1px;
z-index:999;
}

/* Show dropdown when hover */
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}

/* Dropdown styles */
#cssmenu ul li > ul, #cssmenu ul li > div{
display:none; width:auto;
position:absolute; top:38px;
padding:10px 0;
background:#3f3f3f;
border-radius:0 0 5px 5px;
z-index:999;
}

/* Dropdown list style */
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{
outline:none; display:block;
position:relative;
margin:0; padding:8px 20px;
font:10pt Arial, Helvetica, sans-serif; color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}

/* Dropdown box styles */
#cssmenu ul li > div{width:auto; padding:20px;}
#cssmenu ul li > div p{
font:9pt/150% Arial, Helvetica, sans-serif; color:#fff;
text-align:justify;
text-shadow:1px 1px 0 rgba(0,0,0,0.5);
margin:0;
}

#cssmenu ul li > div h1{
position:relative;
margin:0 0 12px 0;
padding-bottom:10px;
border-bottom:1px solid #222;
font:bold 13pt Arial, Helvetica, sans-serif; color:#bbb;
text-shadow:1px 1px 0 rgba(0,0,0,0.5);
}
#cssmenu ul li > div h1:after{
content:'';
height:0; padding:0;
position:absolute; bottom:-2px; left:0; right:0;
border-bottom:1px solid #555;
}

/* ---------------- Styles ----------------- */


/* Gray */
#cssmenu, 
#cssmenu > ul > li > ul > li a:hover{
background:#d5d5d5;
background:-moz-linear-gradient(top, #d5d5d5 0%, #c5c5c5 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5d5d5), color-stop(100%,#c5c5c5));
background:-webkit-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:-o-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:-ms-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#c5c5c5',GradientType=0);
}
#cssmenu {border-color:#888;}
#cssmenu > ul > li > a{border-right:1px solid #888; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#e5e5e5;}
#cssmenu > ul > li > a:hover{background:#bbb;}

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

10. Orange CSS3 Drop Down Menu

source code :

<style>
#cssmenu {
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }
#cssmenu  ul{
 background:#F93;
 height:50px;
 list-style:none;
 margin:0;
 padding:0;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 }
 #cssmenu  li{
  float:left;
  padding:0px 0px 0px 15px; 
  }
 #cssmenu  li a{
  color:#000;
  display:block;
  font-weight:normal;
  line-height:50px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
 #cssmenu  li a:hover{
  background:#C60;
  color:#FFFFFF;
  text-decoration:none;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  }
 #cssmenu  ul li:hover a{
  background:#C60;
  color:#FFFFFF;
  text-decoration:none;
  }
 #cssmenu  li ul{
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  z-index:200;
  }
 #cssmenu  li:hover ul{
  display:block;  
  }
 #cssmenu  li li {
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;
  background:#F93;
  /*this is where the rounded corners for the dropdown disappears*/
  }
 #cssmenu  li:hover li a{
  background:none;
  }
 #cssmenu  li ul a{
  display:block;
  height:50px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
 #cssmenu  li ul a:hover, #cssmenu  li ul li:hover a{
  border:0px;
  color:#ffffff;
  text-decoration:none;
  background:#C60;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); 
  } 

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Silahkan Anda pilih salah satu Menu Drop Down Keren diatas dan pasangkan di situs Anda. Dengan penambahan menu navigasi dropdown pada blog akan mempermudah pengunjung blog dalam menjelajah konten blog/web. Selain itu juga mempercantik dan memberi kesan lebih profesional sebuah blog.

Tentu ada yang paling Anda sukai dengan koleksi 10 Menu Drop Down Keren Pure CSS diatas, menu navigasi yang saya sharing ini merupakan desain style CSS3 yang diedit disebuah site Menu Maker-cssmenumaker.com dengan sebagain telah saya modifikasi agar lebih simple dan praktis untuk digunakan di Blogger.com.

Semoga membantu Anda, kawan

Kalau Anda suka dengan postingan ini, sangat dihargai jika Anda berkenan memberi tanda suka dengan Klik Like di Facebook Fan site ini.

Terima Kasih....

Cari Uang Dengan Google Adsense di Blogger.com

Unknown

28.10.12

18 komentar

adsense

proBlogiz

Tutorial Google Adsense beseri Cari Uang Dengan Google Adsense Pada Blogger.com adalah lanjutan atikel yang lalu dari Apa Google AdSense Itu? dimana tujuan diterbitkannya tulisan ini agar dapat menambah pengetahuan tentang program Adsense dan ikut partisipasi dalam hal memperoleh penghasilan dari blog, khususnya Blogger.com.

Menghasilkan uang di Internet kedengarannya terlalu bagus untuk menjadi kenyataan bagi sebagain orang, namun jika Anda orang yang mempunyai komitmen dan motivasi yang kuat, tidak ada yang bisa membatasi penghasilan Anda dari internet online earning ini. Ada banyak cara untuk menghasilkan uang secara online, salah satunya cara yang terbaik adalah melalui Google Adsense. Blogger.com sebagai bagian layanan hosting blog gratis dari Google sendiri menawarkan hosting gratis dan template yang mudah digunakan untuk membuat sebuah situs, dengan fungsi built-in Adsense didalamnya.

Adsense (Google Adsense) adalah iklan "pay per klik" dimana Pengiklan (advertisers) membayar Google untuk menjalankan dan mengelola iklan atas nama mereka, sementara penerbit web/blog dibayar sejumlah kecil setiap kali pengunjung mengklik iklan yang ditempatkan pada website/blog mereka. Oleh karena mari kawan bangun Blog-mu dan buatlah "Adsense-enabled blog" sendiri dan bekerjalah untuk mendapatkan penghasilan darinya.

Apa Saja Yang Perlu Dilakukan

Langkah untuk Menghasilkan Uang Dengan Google Adsense di Blogger.com ini, saya rangkum menjadi beberapa instruksi dibawah ini, agar mudah dipahami dan di-implemantasikan dalam kegiatan nyata.

Tentukan konsep blog Anda

Pilih topik/tema blog dimana Anda memiliki pengetahuan/pemahaman yang cukup dan minat padanya. Seberapa besar blog/web menghasilkan uang bagi Anda, tentu tidak lepas dari lalu lintas/trafik blog. Dan ingatlah bahwa konten yang otentik,unik dan berkualitas akan membawa banyak pengunjung. Konten akan lebih baik jika Anda menguasai topik dan mempunyai minat pada apa yang Anda tulis. Sebagai contoh jika Anda seorang marketing, maka cobalah buat blog tentang cara menjual yang sukses.

Yang perlu Anda perhatikan ketika menentukan sebuah konsep tersebut, yaitu :

Berapa banyak blog yang menggunakan topik yang sama
Berapa banyak iklan Adsense yang tersedia untuk topik tersebut
Seberapa besar konsisten Anda untuk tetap menulis pada topik itu

Buatlah nama domain / branding blog Anda

Pilih nama yang berbeda, unik dan mudah diingat. Periksalah apakah nama yang Anda pilih tersedia pada Blogger.com, serta pada email dan Twitter. Jika tersedia, secepatnya Anda buat akunnya untuk mengamankan nama itu sebelum orang lain memakainya. Di Blogger.com, alamat URL Anda akan menyertakan kata "blogspot" (subdomain), tetapi Blogger juga menawarkan pilihan untuk penerbitan domain selain menggunakan blogspot ( hosting gratis). Jika nama yang Anda pilih tersedia sebagai sebuah domain dan Anda mampu untuk membayar biaya webhosting bulanan atau satu tahun, belilah domain itu. Buatlah avatar atau logo, dan gunakanlah logo itu sebagai jatidiri blog.

Bangunlah blog Anda

Luangkan waktu dan lakukan riset untuk meneliti dan melihat blog yang sukses dan pelajari lay-out blog mereka. Blogger.com memiliki template user-friendly yang mudah ditambahkan dengan gadget . Gunakan fitur seperti "Follower" widget yang memungkinkan orang untuk mengikuti blog Anda dan sharing setiap posting konten baru. Untuk perlindungan para pengiklan (advertisers), Adsense mensyaratkan bahwa blog Anda harus memiliki konten yang sah, jadi jangan monetize blog Anda dulu pada tahap awal membangun blog.

Buat konten berkualitas yang informatik

Menulislah dengan tata bahasa dan ejaan yang benar. Buatlah konten tulisan yang singkat, ringkas, bernilai yang membuat pembaca ingin untuk bookmark situs Anda dan kembali mengunjungi. Gunakanlah humor, tapi tetap yang profesional. Jangan gunakan kata-kata yang mengandung SARA, provokasi, atau kesan negatif, karena konten Anda setelah diterbitkan dapat dicopy dan disebarkan sebelum Anda memiliki kesempatan untuk mengedit atau menghapus. Pelajari dan lakukan SEO optimasi, yang merupakan seni merancang dan menulis konten web sehingga mesin pencari dapat menemukannya lebih mudah, dan tanamkan tulisan Anda dengan beberapa frase dan keyword yang relevan dengan topik Anda.

Perkaya blog Anda dengan citra

Buatlah citra di blog dengan memberi gambar atau foto. Anda bisa membeli stock foto, atau mengambil foto sendiri. Tapi ingatlah bahwa ketika Anda "klik kanan, save-as" foto apapun dari web adalah tindakan mencuri, kecuali yang secara khusus ditandai gratis/free untuk digunakan. Browsing dengan menggunakan kata "free" dan cari apakah gambar-gambar gartis tersebut sesuai dengan kebutuhan Anda.

Uangkan blog Anda

Masuk ke Blogger Dashboard Anda, klik pada tab "Earning", dan isilah informasi yang diperlukan. Adsense akan meninjau situs Anda untuk legitimasi dan konten yang layak. Setelah blog Anda telah disetujui, maka isilah blog dengan ads/iklan adsense.

Pahami kebijakan Adsense

Pelajari kebijakan Adsense dengan hati-hati, dan ikuti aturanya. Adsense menon-aktifkan akun tanpa pemberitahuan jika melanggar aturan dan kebijakan. Walaupun Anda bisa melakukan proses banding, tetapi tidak ada jaminan akun Anda akan dikembalikan. Sekali Anda kehilangan akun Adsense Anda, Anda tidak dapat membuatnya lagi.

Tempatkan iklan dengan tepat

Penempatan posisi iklan di blog sangat berpengaruh terhadap pengahasilan Anda. Tempatkan setidaknya satu iklan di posisi paling atas blog, sehingga pembaca Anda akan melihatnya tanpa harus ber-gulir ke bawah. Hindari memasukkan iklan terlalu banyak, karena hal ini akan membuat blog Anda tampak seperti spam.

Promosikan blog Anda

Promiskan di network on line, seperti situs media sosial Facebook dan Twitter atau lainnya. Tinggalkan komentar pada blog lain, jika komentar berkaitan tentang konten mereka --- jangan hanya komentar meminta mereka untuk mengunjungi situs Anda. Tambahkan alamat url blog ke email signature Anda, dan meminta teman-teman Anda untuk bergabung bersama.

Bekerjalah di blog Anda setiap hari

Menambahkan konten berkualitas secara teratur. Tiga tulisan berkualitas tinggi per minggu lebih baik daripada tiga tulisan cepat dan ala-kadarnya per hari. Pada hari-hari Anda tidak membuat postingan, cobalah untuk melakukan evaluasi dan riset untuk kebaikan blog Anda.

Tips :

Hindari terlalu banyak menerima informasi-informasi yang ada tentang "blogging for money" dengan tetap menjaga fokus pada topik dan rencana yang telah Anda buat. Dengan begitu Anda tidak akan merasa tertekan untuk belajar semuanya sekaligus.

Bersabarlah, dan ingat bahwa Anda tidak akan melihat pendapatan sebanyak yang Anda bayangkan pada awal -awal mengikuti program Adsense ini.

Jangan pernah mengklik iklan Anda sendiri atau memberitahu teman-teman dan keluarga untuk mengklik iklan Anda. Ini disebut klik tidak sah dan akan mengakibatkan penghapusan permanen akun Adsense Anda.

Itulah beberapa tip dari proBlogiz, dalam kaitan cara membuat blog Anda menghasilkan uang dengan program Google Adsense, tentunya ada banyak yang mungkin saya lewatkan atau kekurangan dari panduan diatas. Dengan senang hati saya menerima saran atau ide yang lebih baik lagi.

Salaam

Apa Google AdSense Itu?

Unknown

27.10.12

3 komentar

adsense

proBlogiz

Dalam perjalanan Blog ini yang tak terasa sudah memasuki bulan ke-4, mencari kesempurnan dan menuju perbaikan yang terus diupayakan baik dalam hal memberi informasi bermanfaat dan membangun sebuah blog yang lebih profesional untuk mencapai goal " blog sukses " yang diimpikan oleh hampir semua blogger, oleh karena itu proBlogiz akan memberi tutorial berseri tentang semua yang berhubungan dengan Google AdSense.

Siapa yang tidak mengenalnya? Adsense yang satu ini bak harta karun yang selalu menunggu untuk didapatkan semua orang, namun banyak juga yang kandas dan menderita dibuatnya.

Seri tutorial kal ini saya fokuskan pada Apa Google AdSense Itu?-pengertian dan program AdSense, cara menghitung uang Anda di program layanan iklan ini, serta berapa uang yang akan Anda dapat dari Google AdSense. Baiklah untuk selengkapnya ikuti terus tutornya.........

Ada banyak cara untuk menghasilkan uang secara online, salah satunya cara yang terbaik adalah melalui Google Adsense. Dengan menggunakan sistem iklan target , memudahkan Anda untuk menghasilkan lebih banyak lagi pendapatan dari blog/web Anda, tentu jika Anda memiliki situs yang baik dengan lalu lintas yang besar.

Jadi Apakah Google Adsense Itu ?

AdSense (Google AdSense) adalah layanan penempatan iklan oleh Google. Program ini dirancang untuk website publiser (para pembuat blog) yang ingin menampilkan iklan yang berupa tekstual, video atau gambar pada halaman websitenya dan akan mendapatkan uang (earning) ketika pengunjung situs melihat atau mengklik iklan.

Google Adsense adalah program periklanan kontekstual dengan berbagai program Adsense. Anda hanya perlu sebuah website atau blog gratis dan Google melakukan sisanya.

Iklan ini dikendalikan dan dikelola oleh Google dan penerbit Web/blog hanya perlu membuat akun AdSense gratis dan copy dan paste kode iklan yang diberikan untuk menampilkan iklan. Pendapatan/penghasilan sebuah blog/web menggunakan Google AdSense bersumber pada basis per-klik (per-click basis) atau per tayang (per-impression basis).

Google saat ini menawarkan sejumlah program AdSense yang berbeda, tergantung pada jenis konten blog/web Anda yang akan dipasang iklan (misalnya halaman web atau RSS feed).

Contoh program Google AdSense yang umum antara lain:

AdSense untuk konten: menampilkan iklan di situs web/blog
AdSense untuk pencarian: menampilkan iklan di hasil pencarian di situs web/blog
AdSense untuk seluler: menampilkan iklan di situs mobile
AdSense untuk feed: menampilkan iklan di RSS feed
AdSense untuk domain: menampilkan iklan di domain yang tidak terpakai

Program AdSense juga tersedia untuk penayang/publiser dan pengembang berkualitas, dengan program AdSense untuk menghasilkan penghasilan dari aplikasi iPhone, video atau game web browser. Google saat ini menawarkan program AdSense berikut untuk penerbit yang memenuhi syarat:

AdSense untuk aplikasi mobile: monetize Android dan aplikasi iPhone
AdSense untuk TV: monetize inventori TV
AdSense untuk video: monetize konten video online
AdSense untuk permainan/game: monetize berbasis browser game

Penayang/publiser yang menyetujui program Google AdSense harus mematuhi beberapa aturan dasar dari Kebijakan Program AdSense dan harus pula memahami AdSense Terms and Conditions, dimana pihak Google sangat tegas dan bersifat sepihak dalam memberikan tindakan jika publiser melanggar aturan tersebut. Penindakan tersebut dapat berupa penon-aktifkan penayangan iklan ke situs blog Anda atau menonaktifkan akun AdSense Anda setiap saat.

Berapa Uang Yang Anda Dapatkan Dengan AdSense ?

Tidak ada batas dalam hal ini (the sky is the limit).Yang harus Anda lakukan adalah membuat orang datang ke situs Anda dengan konten yang tepat dan berkualitas, tulisan yang atraktif dan unik.

Komisi yang Anda terima per klik dari iklan di web/blog Anda tergantung pada berapa besar Pengiklan membayar Google untuk iklan tersebut. Dari situ Anda mendapatkan bagian, mulai dari 2 sen sampai 15 US $ per klik. Pengiklan biasanya membayar lebih untuk istilah-istilah populer karena istilah tersebut lebih banyak dicari orang.

Seberapa besar Anda akan memeperoleh uang dari Google Adsense tergantung pada antara lain :

1. Trafik / jumlah lalu lintas bertarget yang datang ke blog/web Anda

2. Jumlah iklan yang sesuai dengan minat pengunjung blog/web Anda

3. Penempatan iklan yang baik pada halaman blog/web Anda

4. Dan yang terakhir tentu saja jumlah per klik yang Anda dapatkan

Bagaimana Menghitung Penghasilan Anda?

Jika diasumsikan bahwa Anda memiliki 10000 pengunjung (Unique Visitors) per hari, maka dapat dihitung sebagai berikut :

10000 pengunjung unik = page impressions/tayangan halaman 20000 per hari.
Tayangan halaman 20000 dikalikan dengan 2,5% Page CTR = 500 klik per hari untuk Iklan Google
500 klik dikalikan dengan $ 0,20 = $ 100.00 per hari.
$ 100.00 per hari = $ 3,000.00 per bulan. (30 hari)
$ 100,00 per hari = $ 36,500.00 per tahun. (365 hari)

Jika kurs dollar terhadap rupiah sebesar : Rp. 9,000.00

Maka penghasilan Anda sebulan : 3,000 x 9,000 = Rp 27.000.000,00

Dan dalam setahun ?........bayangin aja kawan berapa banyak angka nol yang harus saya ketik :)

This is a Power of Traffic !!!

Perhitungan diatas memang didasarkan pada asumsi, tapi bukan berarti hal yang mustahil untuk diraih. Kenyataanya banyak web/blog profesional yang mempunyai trafik bahkan melebihi 10000 pengunjung perhari, dan berpenghasilan lebih banyak lagi dari situs-situs mereka.

Penjelasan Google membayar Anda :

Jika diasumsikan vistor web/blog Anda melihat 2 halaman yang berisi iklan google kemudian anggaplah 2 tayangan (impressions) per pengunjung.

Page CTR 2,5% maksudnya dalam 100 halaman yang dilihat pengunjung dari web/blog Anda, sekitar 2,5 iklan akan diklik.

Kebanyakan iklan dibayar antara $ 0,01 dan $ 0,25 per klik, dan beberapa yang lain mungkin dibayar lebih banyak.

Google akan membayar kedua program AdSense yang ada diblog/web, baik itu AdSense untuk Konten dan juga AdSense untuk Pencarian.

Blogger.com adalah salah satu layanan hosting web gratis yang dimiliki oleh Google, maka sebenarnya jika memnggunakan blog yang berbasis Blogspot ini lebih mudah dalam hal pemasangan ads/iklan.

This is a Power of Traffic !!!

Untuk mendapatkan lalu lintas/trafik yang merupakan kunci untuk membuat uang dari blog, Anda harus menemukan niche/topik yang baik, dengan "kata kunci" yang jitu pula. Anda dapat memanfaatkan Google keywords tools, untuk mendapatkan ide tentang niche/topik yang Anda pilih dan seberapa baik niche yang cocok untuk blog Anda.

Baiklah sobat, semoga tutorial pendahuluan mengenai makna Google AdSense bisa menambah pengetahuan AdSense kita semua. Dan jangan lewatkan pula tutorial Adsense ini yang saya buat menjadi beberapa seri di postingan selanjutnya.

Terima Kasih

Cara Mengatasi Error Sitemap Feed di Blogger

Unknown

25.10.12

18 komentar

tutorial webmaster

proBlogiz

Anda semua tentu tahu bagaimana mengirimkan/submit sitemap blog di Google Webmaster-Cara Daftar Blog di Google Webmaster (sekaligus post ini sebagai Update Artikelnya)-, dan banyak juga tutorial Blogger yang sudah membahasnya tentang topik Google Sitemap Error. Kali ini pun proBlogiz akan memberi solusi tentang Mengatasi Error Sitemap Feed Proxy Blogger. Mengapa begitu banyak kesalahan/error ketika Anda telah melakukan segalanya dengan cara yang benar? Jawabannya sederhana, ikuti tutorial selengkapnya.......

Pada kenyataannya, banyak, blogger yang mengarahkan (redirect) sitemap/feed mereka di Feedburner, meskipun Blogger telah menyediakan feed defaultnya, yaitu Atom Feed System. Jadi kebanyakan blogger telah mengarahkan default feed ke feedburner seperti yang ditunjukkan gambar di bawah ini :

Ketika kita submit RSS atau Atom feeds di Google Webmaster Tools Site sebenarnya kita telah submit dengan mengarahkan sitemap ke host Feedburner. Kerugian jika kita melakkukan hal ini, yaitu ketika Robot Google merayap (crawl) blog Anda yang secara normal atau basic mengindeks semua data blog melalui default BlogSpot feed system, nah...tapi karena telah diarahkan feed default ke Feedburner, maka Robot Google harus menghubungi / contact melalui 2 sistem feed dalam waktu bersamaan. Yang pertama melalui BlogSpot feed system dan kedua melalui Feedburner system, tentu ini membingungkan dalam proses peng-indeks-an data yang akhirnya menghasilkan banyak kesalahan / error feed proxy (Feed Proxy Errors).

Tentu ini bisa bikin kepala pusing, karena kita telah merasa melakukan submitting sitemap dengan benar. Namun jangan galau dulu kawan, sebab saya akan memberi solusi untuk mengatasi Error Sitemap Feed Proxy ini.

Kesalahan yang dibuat banyak blogger adalah penambahan data sitemap sebagai berikut di Google Webmaster Tool :

http://NAMABLOG.blogspot.com/rss.xml

ATAU

http://NAMABLOG.blogspot.com/atom.xml

Penambahan sistem feed diatas akan menghasilkan puluhan kesalahan error proxy di webmaster tool, solusinya adalah dengan menambahkan atau submit data sitemap berikut :

http://NAMABLOG.blogspot.com/feeds/posts/default?redirect=false

Catatan :

Anda hanya perlu menambahkan feeds/posts/default?redirect=false sehingga URL blog Anda akan ditambahkan secara default.
Dimana, feeds/posts/default?redirect=false adalah kode yang mengarahkan Google hanya untuk sistem default Blogspot Atom Feed system.

Setelah Anda menerapkan cara diatas, maka saya yakin tidak lagi menemukan error crawl , 404 page not found error feed proxy lainnya di Google Webmaster Tools Site. Kurang lebih Anda akan melihat hasilnya seperti ini :

Status Error / health di blog proBlogiz

Gimana sobat? Tidak ada salahnya Anda mencobanya metode ini, jika Anda mempunyai masalah Error Crawl seperti "general HTTP error: 404 page not found". Semoga dengan menerapkan Cara Mengatasi Error Sitemap Feed ini, tidak ada lagi error-error yang mengganggu blogger sekalian.

Jangan sungkan gunakan form komentar dibawah untuk bertanya terkait topik diatas.

Salaam

3 Style Label Cloud untuk Blogger

Unknown

24.10.12

11 komentar

css tutorial

proBlogiz

Label widget pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan jadi bahasan Desain Blog kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya di blog. Ada pilihan 3 Style Label Cloud Blogger, Anda bisa memberi sentuhan baru dan cantik pada blog Anda. Tertarik ???........Ikuti tutorialnya dibawah ini.

Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Anda. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memberikan navigasi yang mudah bagi pembaca blog. Pada Blogger sejak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya adalah Page List and Label Cloud List dengan enable deisgner untuk membuat dynamic menus.

Ini berarti Anda semua mempunyai kesempatan untuk bermain dengan widget dan mengubah/memodifikasinya tampilan widget dengan leluasa, mengingat sekarang stylesheet dapat diakses dengan bebas. Oleh karena itu Desain Blog proBlogiz kali ini akan berbagi stylesheet sederhana yang akan merubah tampilan Label Cloud Blogger menjadi lebih menarik dan keren, seperti 3 Style Label Cloud Blogger dibawah ini.

Untuk membuat dan memodifikasi tampilan Label Cloud Blogger seperti contoh dibawah Anda hanya perlu menambah kode CSS pada template. Dibawah ini saya bagikan juga kode CSS berikut tutorial cara pemasanganya pada template blogger, kode terebut dapat disesuaikan dengan beberapa kiat untuk membuat desain label lebih menarik. Seperti dengan menambahkan gambar latar belakang ( image background) sendiri pada setiap label.

Note:

Style label cloud ini menggunakan CSS3 gradient dan CSS3 transform,-webkit dan border radius. Tampilan bagus di browser Chrome, dan Firefox 3.5+ , Opera 10.5+, sedangkan di IE belum support (harus pake hack !!)

Pilihan 3 Style Label Cloud Blogger

Labels Cloud Blogger style # 01

DEMO

CSS Code :

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/
.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; 
}

Labels Cloud Blogger style # 02

DEMO

CSS Code:


/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/
.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:#0089e0; 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 #0089e0 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 #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; }  .label-size a:hover ,  .label-size span::hover { background:#555;} .label-size a:hover:before ,  .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

Labels Cloud Blogger style # 03

DEMO

CSS Code:


/*-----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;}

Cara Pasang Style Label Cloud pada Blogger

Langkah Pertama

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan

2. Backup template

3. Tekan Control + F > cari kode ]]></b:skin>
4. Copy salah satu kode CSS diatas ( yang Anda pilih )
5. Pastekan / letakkan kodenya tepat DIATAS tag ]]></b:skin>
6. Save Template

Langkah Kedua

1. Masuk Blogger Dasboard > Tata Letak > Klik Tambah Gadget > pilih Label
2. Setting widget Blogger Label > pilih Tampilkan Cloud
3. Untuk pilihan "Sortir" dan "tampilkan semua" atau label yang dipilih terserah Anda
Lihat gambar dibawah untuk lebih jelasnya

4. Setelah selesai konfigurasikan label, klik Simpan

Refresing homepage/blog dan lihatlah hasil tampilan label cloud blogger dengan new style di Blog Anda. Cool right.....?

Anda juga bisa memodif atau mengedit kode CSS diatas, terutama kode-kode warna/color background, color font, size, hover color dan lainnya yang bisa diganti dengan selera Anda.

Unutk referensi warna-warna Hex gunakanlah >>> kode Warna Hex generator

Selamat Mencobanya....

Keep your Blog beauty !!!...

ProBlogiz

Home

Tutorial

SEO

Basic

Template

10 Menu Drop Down Keren Pure CSS

Cara Pasang Menu Drop Down pada Blogger

10 Drop Down Menu Keren Pure CSS

1. Red Opera Drop Down Menu

2. Blue Opera Drop Down Menu

3. Grass Pillbox Drop Down Menu

4. Dirt Pillbox Drop Down Menu

5. Simple Red

6. Simple Blue

7. Black CSS3 Drop Down Menu

8. Light Blue CSS3 Drop Down Menu

9. Grey CSS3 Drop Down Menu

10. Orange CSS3 Drop Down Menu

Cari Uang Dengan Google Adsense di Blogger.com

Apa Saja Yang Perlu Dilakukan

Tentukan konsep blog Anda

Buatlah nama domain / branding blog Anda

Bangunlah blog Anda

Buat konten berkualitas yang informatik

Perkaya blog Anda dengan citra

Uangkan blog Anda

Pahami kebijakan Adsense

Tempatkan iklan dengan tepat

Promosikan blog Anda

Bekerjalah di blog Anda setiap hari

Tips :

Apa Google AdSense Itu?

Jadi Apakah Google Adsense Itu ?

Berapa Uang Yang Anda Dapatkan Dengan AdSense ?

Bagaimana Menghitung Penghasilan Anda?

Penjelasan Google membayar Anda :

Cara Mengatasi Error Sitemap Feed di Blogger

3 Style Label Cloud untuk Blogger

Pilihan 3 Style Label Cloud Blogger

Labels Cloud Blogger style # 01

Labels Cloud Blogger style # 02

Labels Cloud Blogger style # 03

Cara Pasang Style Label Cloud pada Blogger

Langkah Pertama

Langkah Kedua

Google+ Followers

Like Me

artikel popular

kategori

artikel terbaru