Footer Widget #2
Widget
Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog
04.16 // 0 komentar // Update // Category: Tutorial Blogspot //Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog - Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari oleh para blogger karena dapat menghemat tempat dengan mengelompokan beberapa kategri dalam satu wadah. Tutorial sejenis juga pernah Master Chef bahas sebelumnya didalam postingan Master Chef berjudul Cara Membuat Menu Horizontal di Blog, dan Cara Membuat Navigasi Dropdown Menu Unik Style Kompas, dan Tehnik Membuat Menu Dropdown Horizontal Plus Search Enggine Blog M.1.
Dropdown menu yang akan kita buat berbeda dengan menu dropdown pendahulunya. kali ini dropdown menu tampil keren dan menarik. posisi ploating sehingga akan selalu terlihat dan mudah diases pengunjung blog. Contoh Menu Navigasi yang akan kita buat bisa sobat Dapur Tutorial Blogspot dan Seo Lihat dibawah ini. jika ingin melihat Demonya Klik saja pada Teks Link Demo dibawah gambar
Nah gimana keren kan ?. Bagai mana caranya, langsung saja ikuti resep dari Master Chef berikut ini :
- Pastikan kamu sudah login ke Dashbord Blog kamu
- Dari Dashbord blog kamu Pilih Templete untuk mengakses halaman Edit HTML ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
- Jangan lupa untuk Download Lengkap Template terlebih dahulu ( Baca : Cara Back-Up dan Upload Template Blogger)
- Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode
- Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin>
- Kode Warna Kuning diatas adalah ukuran panjang menu
- Kalau sudah, langkah selanjutnya cari salah satu kode berikut :
- Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas
- Sehingga susunannya menjadi seperti ini
- Sekarang Klik Simpan Template
- Selesai dan Lihat hasilnya
/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1u2zljgFOo4DrodbPou1QXb1uFtFyniDbMNiYA4aaano7fthis7udeg1cDzmD98XGMZ9Vn0YWAHVsELJzP-Vqj-dBOKxRMUipO3X3wckWpymCaFPiQ6G7APERpHlyUTYpJzahTW7CCWqL/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrhTdPDT-jdP70i8d5DWdICN9QNutlwUifI1dhofmk1Sp3wurZx_MY2BDEK9LinA1hk8U5hAPF7C2RF3K8gTAI7fvzu7OoMrYcbWahAQqZlNs4pAGfE_nyAOCh0sJ5OueNNdSg9dzaUIE/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
<div id='header-wrapper'>
(disini nanti letak kode menu dropdown)
</b:section>
</div>
Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini
<div class='header-outer'>
(disini nanti posisi kode menu dropdown)
</b:section>
</div>
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>
<div class='header-outer'>
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>
</b:section>
</div>
Related posts :
Blogger news
Followers
Berbagi Pembelajaran Berbagai Tips dan Trick penggunaan blogger.
Popular Posts
-
Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog - Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari o...
-
Cara Memasang Meta Tag Otomatis di Setiap Postingan Blog - Sudah lama banget Master Chef tidak Update Tutorial Seo Blogspot . Kali ini Mate...
-
Topik-Topik Yang Blog Ramai Dengan Pengunjung - Siapa yang tidak ingin blog ramai pengunjung ?, tentunya semua blogger menginginkannya. Sel...
-
Cara Memasang Search Engine Di Blog Dengan Mudah - Search Engine atau Mesin Pencari, pastinya sobat blogger Dapur Tutorial Blogspot dan Seo...
-
Membuat Reply Komentar Di Blog - R eply komen pada blog sangat bermanfaat, adapun salah satu manfaat dengan adanya reply komen pada koment...
-
Cara Mendaftar Atau Membuat Akun Squidoo - Setelah kemaren didalam positingan Master Chef berudul Pengenalan Squidoo untuk Memperoleh Bany...
-
Cara Posting Artikel Beserta Gambar Dan Video - Tutorial Blog Master Chef kali ini berhubungan dengan sobat blogger Dapur Tutorial Blogspot...
-
Cara Memasang Tanda Tangan Di Blog - Setelah tadi siang Master Chef Share tetang Cara Menyembunyikan Judul atau Title Blog, Master Chef dat...
-
Istilah-Istilah Yang Digunakan Dalam Squidoo - Sebelum memulai aktifitas dengan Squidoo hal terpenting yang harus diketahui adalah memahami...
-
Belajar Squidoo Untuk Memperoleh Trafik Di Blog - Selamat malam sobat blogger Dapur Tutorial Blogspot dan Seo. Senang sekali malam ini blog...
About Me
Blog Archive
-
▼
2012
(25)
-
▼
Desember
(11)
- Info Komputer Terlengkap didunia
- Membuat Reply Comment Di Blog
- Topik-Topik Blog Yang Menarik Banyak Pengunjung
- Cara Membuat Lens Pertama Squidoo
- Istilah-Istilah Yang Digunakan Dalam Squidoo
- Cara Mendaftar Atau Membuat Akun Squidoo
- Pengenalan Squidoo Untuk Memperoleh Banyak Trafik ...
- Cara Membuat Menu Dropdown Horizontal Floating Ker...
- Cara Memasang Search Engine Di Blog Dengan Mudah
- Tanya Jawab Cara Membuat Blank Page Di Blogspot
- Cara Memasang Tanda Tangan Di Blog Step 2
-
▼
Desember
(11)
- 2008 - 2009 SimplexDesign. Content in my blog is licensed under a Creative Commons License.
- SimplexPro template designed by Simplex Design.
- Powered by Blogger.com.