Cara Membuat CSS Navigation Blogger V2

Tuesday, May 15, 2012 CSS Tuts+ | Posted by : | 3 comments
Home » CSS » CSS Navigation » Menu Navigation » Cara Membuat CSS Navigation Blogger V2
Cara Membuat CSS Menu Navigation Blogger V2
CSS3 Navigation V2 | Blogger Template
Assalamuallaikum Wr.Wb
Under88 - Navigation Menu ini terinspirasi dari css3menu[dot]com yang saya buat secara gratis. Sekarang menu navigation lebih bervariasa terutama bagi pengguna blogger.. mungkin menu navigation sudah tidak asing lagi. tapi bagaimana dengan tampilannya. banyak blog tutorial yang membahas tentang cara membuat menu navigation untuk blogger. namun kebanyakan hanya tampilan sederhana. namun pada blog saya akan selalu menampilkan style menu yang lebih menarik agar blog kita menjadi indah dan menarik untuk di lihat.
Lihat Demo :

Cara Menerapkan Mega Menus Navigation to Blogger Template

silahkan ikuti langkah sebagai berikut :
  1. Langkah 1 : Back Up template Anda. Sebelum melakukan pengeditan template. untuk berjaga-jaga bila terjadi kesalahan.
  2. Langkah 2 : Login Blogger -> Template -> Edit HTML: atau lihat pada gambar di bawah ini :
    edit template blogger
    edit template HTML
    edit template lanjutkan
    edit template Expand

    "Tanpa expand juga masih bisa di lakukan."

  3. Langkah 3 : Copy kode CSS di bawah ini di atas kode ]]></b:skin> atau tekan CTRL+F untuk mempercepat pencarian.
    /* universal rules for content inside topnav*/
.topnav{width:100%;float:left;margin:2em auto;}
ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;}
ul#css3menu1,ul#css3menu1 .submenu{ background-color:#444;border-width:1px;border-style:solid;border-color:#454545;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;}
ul#css3menu1 .submenu{ display:none;position:absolute;left:0;top:100%;float:left;background-color:#fff;border-width:4px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border-color:#cecece;padding:0 6px 6px;}
ul#css3menu1 li:hover>*{display:block;}
ul#css3menu1 li:hover{position:relative;}
ul#css3menu1 ul .submenu{position:absolute;left:100%;top:0;}
ul#css3menu1{padding:5px 5px 5px 0;display:block;font-size:0;float:left;}
ul#css3menu1 ul{padding:0 5px 5px;}
ul#css3menu1 .column{float:left;}
ul#css3menu1 li{display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{margin:0 0 0 5px;}
ul#css3menu1 ul>li{margin:5px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Trebuchet MS,sans-serif;color:#181818;text-shadow:#FFF 0 1px 1px;cursor:pointer;padding:8px 18px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{float:none;margin:6px 0 0;}
ul#css3menu1 ul a{text-align:left;padding:4px;background-color:#fff;background-image:none;border-width:0 0 1px 0;border-style:solid;border-color:#EFEFEF;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:11px Trebuchet MS,sans-serif;color:#000;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a{border-style:none;font:bold 13px Trebuchet MS,sans-serif;color:#FFF;text-decoration:none;text-shadow:#181818 0 1px 1px;}
ul#css3menu1 img{border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{display:none;}
ul#css3menu1 li:hover > a img.def{display:none;}
ul#css3menu1 li:hover > a img.over{display:inline;}
ul#css3menu1 span{display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{background-image:url(http://css3menu.com/images/modern_files/css3menu1/arrowsub.png);padding-right:20px;}
ul#css3menu1 ul li:hover>a{background-color:#fff;background-image:none;border-style:solid;border-color:#EFEFEF;font:11px Trebuchet MS,sans-serif;color:#444;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1.topmenu{background-image:url(http://css3menu.com/images/modern_files/css3menu1/mainbk.png);}
ul#css3menu1 li.topmenu>a{height:25px;line-height:25px;background-color:transpa;border-radius:11px;-moz-border-radius:11px;-webkit-border-radius:11px;}
ul#css3menu1 li.topmenu:hover>a{line-height:25px;background-color:#313638;}
 /* ======================end topnav =============================   */
  4. Langkah 4 : Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :
    <div class="topnav"><!--menu navigation-->
      <div class="menu_templ" style="width: 612px;background-color:#5797BB;margin:0 auto;">       
<ul id="css3menu1" class="topmenu" style="position: relative;top: -30px">
 <li class="topmenu"><a href="#" title="HOME"><img src="http://css3menu.com/images/modern_files/css3menu1/1031.png" alt="HOME"/>HOME</a></li>
 <li class="topmenu"><a href="#" title="PRODUCT INFO"><span><img src="http://css3menu.com/images/modern_files/css3menu1/005.png" alt="PRODUCT INFO"/>PRODUCT INFO</span></a>
 <div class="submenu" style="width:420px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="2.1 Features"><img src="http://css3menu.com/images/modern_files/css3menu1/138.png" alt="2.1 Features"/>2.1 Features</a></li>
  <li><a href="#" title="2.2 Installation"><span><img src="http://css3menu.com/images/modern_files/css3menu1/076.png" alt="2.2 Installation"/>2.2 Installation</span></a>
  <div class="submenu">
  <div class="column"><ul>
   <li><a href="/rq/" title="2.2.1 FAQ">2.2.1 FAQ</a></li>
   <li><a href="#" title="2.2How to Setup">2.2How to Setup</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="2.3 Parameters Info"><img src="http://css3menu.com/images/modern_files/css3menu1/120.png" alt="2.3 Parameters Info"/>2.3 Parameters Info</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="2.4 Dynamic Functions"><img src="http://css3menu.com/images/modern_files/css3menu1/157.png" alt="2.4 Dynamic Functions"/>2.4 Dynamic Functions</a></li>
  <li><a href="#" title="2.5 Supported Browsers"><span><img src="http://css3menu.com/images/modern_files/css3menu1/102.png" alt="2.5 Supported Browsers"/>2.5 Supported Browsers</span></a>
  <div class="submenu" style="width:332px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Firefox"><img src="http://css3menu.com/images/modern_files/css3menu1/125.png" alt="Firefox"/>Firefox</a></li>
   <li><a href="#" title="Internet Explorer"><img src="http://css3menu.com/images/modern_files/css3menu1/122.png" alt="Internet Explorer"/>Internet Explorer</a></li>
   <li><a href="#" title="Opera"><img src="http://css3menu.com/images/modern_files/css3menu1/124.png" alt="Opera"/>Opera</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Safari"><img src="http://css3menu.com/images/modern_files/css3menu1/1221.png" alt="Safari"/>Safari</a></li>
   <li><a href="#" title="Google Chrome"><img src="http://css3menu.com/images/modern_files/css3menu1/123.png" alt="Google Chrome"/>Google Chrome</a></li>
   <li><a href="#" title="Konqueror"><img src="http://css3menu.com/images/modern_files/css3menu1/1241.png" alt="Konqueror"/>Konqueror</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="CSS3 Info"><img src="http://css3menu.com/images/modern_files/css3menu1/044.png" alt="CSS3 Info"/>CSS3 Info</a></li>
 </ul></div></div>
 </li>
 <li class="topmenu"><a href="#" title="SAMPLES"><span><img src="http://css3menu.com/images/modern_files/css3menu1/133.png" alt="SAMPLES"/>SAMPLES</span></a>
 <div class="submenu" style="width:344px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="Android Template"><img src="http://css3menu.com/images/modern_files/css3menu1/047.png" alt="Android Template"/>Android Template</a></li>
  <li><a href="#" title="Blocks Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/045.png" alt="Blocks Template"/>Blocks Template</span></a>
  <div class="submenu" style="width:374px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Blue Theme">Blue Theme</a></li>
   <li><a href="#" title="Green Fodder Theme">Green Fodder Theme</a></li>
   <li><a href="#" title="Grey Theme">Grey Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Light Theme">Light Theme</a></li>
   <li><a href="#" title="Orange Theme">Orange Theme</a></li>
   <li><a href="#" title="Purple Theme">Purple Theme</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="Elegant Template"><img src="http://css3menu.com/images/modern_files/css3menu1/043.png" alt="Elegant Template"/>Elegant Template</a></li>
  <li><a href="#" title="Frame  Template"><img src="http://css3menu.com/images/modern_files/css3menu1/046.png" alt="Frame  Template"/>Frame  Template</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="Fresh Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0471.png" alt="Fresh Template"/>Fresh Template</a></li>
  <li><a href="#" title="Mac Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0451.png" alt="Mac Template"/>Mac Template</a></li>
  <li><a href="#" title="Neon Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/0461.png" alt="Neon Template"/>Neon Template</span></a>
  <div class="submenu" style="width:290px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Green Theme">Green Theme</a></li>
   <li><a href="#" title="Liliac Theme">Liliac Theme</a></li>
   <li><a href="#" title="Blue Theme">Blue Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Neon Theme">Neon Theme</a></li>
   <li><a href="#" title="Orange Theme">Orange Theme</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="New Templates"><img src="http://css3menu.com/images/modern_files/css3menu1/0441.png" alt="New Templates"/>New Templates</a></li>
 </ul></div></div>
 </li>
 <li class="topmenu"><a href="#" title="DOWNLOAD"><img src="http://css3menu.com/images/modern_files/css3menu1/017.png" alt="DOWNLOAD"/>DOWNLOAD</a></li>
</ul>
       </div>
     </div>
 <!--end of menu navigation-->
  5. Langkah 5 : simpan template dan lihat hasilnya.
Keterangan :
Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.Tapi tergantung selera anda.silahkan simpan di mana saja sesuai yang anda inginkan.
"untuk selanjutnya anda bisa rubah ukuran,position,dan tampilan sesuai keinginan anda." semoga berhasil ya..

Terima kasih sudah berkunjung semoga artikel Cara Membuat CSS Navigation Blogger V2 ini bisa bermanfaat.
Wassalamullaikum Wr.Wb
Sumber
DMCA.com

3 comments:

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

Subscribe to: Post Comments (RSS)
 
loading...
Top