Membuat Fixed CSS3 dengan Posisi Vertikal

Begitu banyak blog yang kita kunjungi sekarang memiliki menu navigasi yang tetap ke sisi halaman untuk memudahkan akses, dengan Menu seperti itu tampilan Blog kita akan terlihat Profesional dan tentunya pengunjung Blog akan berlama lama mengunjungi Blog kita..

Tanpa banyak basah-basah (ups... salah) Basa-Basi mari ikuti langkahnya sebagai berikut:

• Masuk ke Blogger dengan akun sobat
• Masuk ke bagian Rancangan Edit HTML
  
• Centang kotak kecil di
• Masukkan kode berikut sebelum kode </b:skin>

  /* CSS Style for Horizontal Menu - info @ http://hakimramadhan.blogspot.com*/
  #hor {
  list-style:none;
  padding:0;
  margin:0;
  }
  
  #hor li {
  float:left;
  padding:5px;
  }
  
  #hor a {
  display:block;
  height: 12px;
  text-indent:-999em;
  }
  
  #hor a.home {
  width:46px;
  background:url(vHome.gif) no-repeat 0 0;
  }
  
  #hor a.download {
  width:94px;
  background:url(vDownload.gif) no-repeat 0 0;
  }
  
  #hor a.contact {
  width:74px;
  background:url(vContact.gif) no-repeat 0 0;
  }
  
  
  /* CSS Style for Vertical Menu */
  
  #ver {
  list-style:none;
  padding:0;
  margin:0;
  }
  
  #ver li {
  padding:2px;
  }
  
  #ver li a {
  display:block;
  height:12px;
  text-indent:-999em;
  }
  
  #ver a.home {
  width:47px;
  background:url(hHome.gif) no-repeat 0 0;
  }
  
  #ver a.download {
  width:95px;
  background:url(hDownload.gif) no-repeat 0 0;
  }
  
  #ver a.contact {
  width:74px;
  background:url(hContact.gif) no-repeat 0 0;
  }
  
  
  .clear {
  clear:both;
  }
  
  
  *{
  /* A universal CSS reset */
  margin:0;
  padding:0;
  }
  
  
  #navigationMenu body{
  font-size:14px;
  color:#666;
  background:#111 no-repeat;
  
  
  /* CSS3 Radial Gradients */
  background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
  background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
  
  font-family:Arial, Helvetica, sans-serif;
  }
  
  #navigationMenu li{
  list-style:none;
  height:39px;
  padding:2px;
  width:40px;
  }
  
  #navigationMenu span{
  /* Container properties */
  width:0;
  left:38px;
  padding:0;
  position:absolute;
  overflow:hidden;
  
  /* Text properties */
  font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:bold;
  letter-spacing:0.6px;
  white-space:nowrap;
  line-height:39px;
  
  /* CSS3 Transition: */
  -webkit-transition: 0.25s;
  
  /* Future proofing (these do not work yet): */
  -moz-transition: 0.25s;
  transition: 0.25s;
  }
  
  #navigationMenu a{
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDUnC-7dwt9Z9Hz78Tl7z7gESqUwKCmR0lVTc4cAZTGFgqNSNCKGrQBJSkMQzovf0Nj_oF3BPig6OwncZRE5qQjRqUeGtvGJiqmH_FMJH1Q7Tav2SDtRKMSGMaJxg0B473Hufc8qOV2M/s1600/navigation.jpg') no-repeat;
  
  height:39px;
  width:38px;
  display:block;
  position:relative;
  }
  
  /* General hover styles */
  
  #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  #navigationMenu a:hover{
  text-decoration:none;
  
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow:0 0 5px #9ddff5;
  -webkit-box-shadow:0 0 5px #9ddff5;
  box-shadow:0 0 5px #9ddff5;
  }
  
  /* Green Button */
  
  #navigationMenu .home { background-position:0 0;}
  #navigationMenu .home:hover { background-position:0 -39px;}
  #navigationMenu .home span{
  background-color:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
  }
  
  /* Blue Button */
  
  #navigationMenu .about { background-position:-38px 0;}
  #navigationMenu .about:hover { background-position:-38px -39px;}
  #navigationMenu .about span{
  background-color:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
  }
  
  /* Orange Button */
  
  #navigationMenu .services { background-position:-76px 0;}
  #navigationMenu .services:hover { background-position:-76px -39px;}
  #navigationMenu .services span{
  background-color:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
  }
  
  /* Yellow Button */
  
  #navigationMenu .portfolio { background-position:-114px 0;}
  #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  #navigationMenu .portfolio span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
  }
  
  /* Purple Button */
  
  #navigationMenu .contact { background-position:-152px 0;}
  #navigationMenu .contact:hover { background-position:-152px -39px;}
  #navigationMenu .contact span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
  }
  
  /*End menu css - info @ http://hakimramadhan.blogspot.com */

• Langkah selanjutnya Simpan pekerjaan anda

Sampai disini Belum selesai, sekarang memasukkan script ke bagian gadget

• Masuk ke Page Elemen atau Elemen Laman
  
• Klik Add Gatget / Tambah Gadget
  
• Klik yang bagian HTML/Javascript
  
• Masukkan kode berikut kedalam Gadget tadi
  

  <div style='position: fixed; top: 40%; left: 0%;'/>
  <ul id="navigationMenu">
  <li>
  <a class="Home" href="http://hakimramadhan.blogspot.com">
  <span>Home</span>
  </a>
  </li>
  
  <li>
  
  <a class="about" href="http://hakimramadhan.blogspot.com/p/about.html">
  <span>About</span>
  </a>
  </li>
  
  <li>
  <a class="services" href="http://hakimramadhan.blogspot.com/p/hire-us_08.html">
  <span>Services</span>
  </a>
  
  </li>
  
  <li>
  <a class="portfolio" href="http://hakimramadhan.blogspot.com/">
  <span>Portfolio</span>
  </a>
  </li>
  
  <li>
  <a class="contact" href="http://hakimramadhan.blogspot.com/2009/09/contact-us.html">
  
  <span>Contact us</span>
  </a>
  </li>
  </ul>
  </div><a href="http://hakimramadhan.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

• Sampai disini kita sudah selesai
• Simpan Pekerjaan anda dan lihat hasilnya

NB : Silahkan ganti http://hakimramadhan.blogspot.com dengan Alamat Blogger Sobat
Kalau penempatan kodenya benar dan mengikuti langkah dengan benar pasti akan terlihat hasilnya, Jika masih mengalami kendala silahkan tinggalkan komentar,

Selengkapnya » Membuat Fixed CSS3 dengan Posisi Vertikal

Pesan Di Bawah Poskan Komentar

Membuat Pesan dibawah Poskan Komentar sebenarnya trik yang mudah tapi terkadang kita tak mau melakukannya jadi terkesan sulit hehehehe.... Trik ini sebenarnya sudah lama diaplikasi oleh Master Blogger, tapi ada baiknya saya menyampaikan kembali, supaya tetap ingat...

Cara pembuatannya gampang tinggal sobat ikutin langkah-langkah sebagai berikut :

• Masuk ke account Blogger anda sendiri sehinggan masuk ke Dasbor.
• 
  Pilih Tata Letak/Edit HTML.
• Jangan lupa beri tanda centang pada kotak kecil
• Cari kode dibawah ini :
  

  <p><data:blogCommentMessage/></p>

• Kemudian taruh pesan anda di bawah kode diatas
• Simpan Template
• Dan lihat hasilnya

Kalau mengikuti langkahnya dengan benar pasti akan tampil Pesan dibawah Poskan Komentar, Jika masih mengalami kendala silahkan tinggalkan Komentar... Selamat mencoba semoga berhasil dan dapat bermanfaat.

Selengkapnya » Pesan Di Bawah Poskan Komentar

Multi Level Drop Down JQuery

Bagaimana caranya membuat Blog semakin Dinamis dan enak Di pandang mata? Tentu saja dengan menggunakan Script yang berasal dari JQuery, dengan memakai script ini blog yang tadinya Standard jadi lebih Fresh.

Untuk bahasan kali ini masih ada hubungannya dengan Script JQuery, yaitu membuat Multi Level Drop Down, dari nama judulnya saja sudah pasti ditebak kita akan membahas Link menu yang bila mana di Klik akan bergerak kebawah (...kurang lebih seperti itu... :D).

Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.

1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
   


2. Tambahkan script JQuery berikut sebelum tag </head>
   

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   

   catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi
   

   <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
   
   <!--[if lte IE 7]>
   <style type="text/css">
   html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
   </style>
   <![endif]-->
   
   <script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>
   

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:
   

   .jqueryslidemenu{
   font: bold 12px Verdana;
   background: #414141;
   width: 100%;
   }
   
   .jqueryslidemenu ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   }
   
   /*Top level list items*/
   .jqueryslidemenu ul li{
   position: relative;
   display: inline;
   float: left;
   }
   
   /*Top level menu link items style*/
   .jqueryslidemenu ul li a{
   display: block;
   background: #414141; /*background of tabs (default state)*/
   color: white;
   padding: 8px 10px;
   border-right: 1px solid #778;
   color: #2d2b2b;
   text-decoration: none;
   }
   
   * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
   display: inline-block;
   }
   
   .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
   color: white;
   }
   
   .jqueryslidemenu ul li a:hover{
   background: black; /*tab link background during hover state*/
   color: white;
   }
   
   /*1st sub level menu*/
   .jqueryslidemenu ul li ul{
   position: absolute;
   left: 0;
   display: block;
   visibility: hidden;
   }
   
   /*Sub level menu list items (undo style from Top level List Items)*/
   .jqueryslidemenu ul li ul li{
   display: list-item;
   float: none;
   }
   
   /*All subsequent sub menu levels vertical offset after 1st level sub menu */
   .jqueryslidemenu ul li ul li ul{
   top: 0;
   }
   
   /* Sub level menu links style */
   .jqueryslidemenu ul li ul li a{
   font: normal 13px Verdana;
   width: 160px; /*width of sub menus*/
   padding: 5px;
   margin: 0;
   border-top-width: 0;
   border-bottom: 1px solid gray;
   }
   
   .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
   background: #eff9ff;
   color: black;
   }
   
   /* ######### CSS classes applied to down and right arrow images ######### */
   
   .downarrowclass{
   position: absolute;
   top: 12px;
   right: 7px;
   }
   
   .rightarrowclass{
   position: absolute;
   top: 6px;
   right: 5px;
   }
   

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
   

   <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
   <li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Folder 1</a>
   <ul>
   <li><a href="#">Sub Item 1.1</a></li>
   <li><a href="#">Sub Item 1.2</a></li>
   <li><a href="#">Sub Item 1.3</a></li>
   <li><a href="#">Sub Item 1.4</a></li>
   </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Folder 2</a>
   <ul>
   <li><a href="#">Sub Item 2.1</a></li>
   <li><a href="#">Folder 2.1</a>
   <ul>
   <li><a href="#">Sub Item 2.1.1</a></li>
   <li><a href="#">Sub Item 2.1.2</a></li>
   <li><a href="#">Folder 3.1.1</a>
   <ul>
   <li><a href="#">Sub Item 3.1.1.1</a></li>
   <li><a href="#">Sub Item 3.1.1.2</a></li>
   <li><a href="#">Sub Item 3.1.1.3</a></li>
   <li><a href="#">Sub Item 3.1.1.4</a></li>
   <li><a href="#">Sub Item 3.1.1.5</a></li>
   </ul>
   </li>
   <li><a href="#">Sub Item 2.1.4</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
   </ul>
   <br style="clear: left" />
   </div>
   

6. Simpan template dan lihat hasilnya

Bagi yang paham dengan kode CSS silahkan ganti sesuai selera,
Semoga tutorial ini bermanfaat bagi sobat, bila masih bingung silahkan tinggalkan komentar.

Selengkapnya » Multi Level Drop Down JQuery