MEMASANG CSS MENU DROP DOWN DI BLOG

Cara membuat drop down menu di blog sebenarnya sangat mudah. Saat ini semakin banyak blogger pemula yang tertarik untuk belajar dasar-dasar kode untuk mengatur tampilan blognya. Jadi kali ini saya hendak berbagi cara membuat drop down menu yang horizontal. Menu ini bisa ditaruh di bawah header, di atas footer, atau di mana saja dalam posisi horizontal.

Lalu bagaimana cara membuat menu drop down horizontal ini? Sebenarnya anda bisa menggunakan CSS yang sangat sederhana Untuk memasang Drop down menu horizontal yaitu : 

• Login Ke ddalam akun Blogger Saudara

• Pilih menu template 

• Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN

• Carilah kode ]]></b:skin>  

• (Untuk memudahkan pencariaannya Tekan Ctrl + F)

• Mampir dulu ke sini  pilih ja kesukaanmu

•  Trus Copy kode CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi 

@charset 'UTF-8'; /* Starter CSS for Flyout Menu */ #cssmenu { padding: 0; margin: 0; border: 0; width: auto; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 1px; left: 99%; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { top: 1px; left: 99%; } #cssmenu ul li { float: none; } #cssmenu ul ul { margin-top: 1px; } #cssmenu ul ul li { font-weight: normal; } /* Custom CSS Styles */ #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu a { color: #333333; display: inline-block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; padding: 0 20px; text-align: center; text-decoration: none; } #cssmenu a:hover { background: #f6f6f6; border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); position: relative; top: 0; } #cssmenu ul { background: #e5e5e5; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; list-style: none; } #cssmenu > ul { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%; background: -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(100%, #dddddd)); background: -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 100%); background: -o-linear-gradient(top, #e5e5e5 0%, #dddddd 100%); background: -ms-linear-gradient(top, #e5e5e5 0%, #dddddd 100%); background: linear-gradient(#e5e5e5 0%, #dddddd 100%); box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3); padding-top: 5px; width: 100%; } #cssmenu > ul > li { float: left; padding: 0 10px; position: relative; } #cssmenu > ul > li:hover > a { background: #f6f6f6; border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); position: relative; } #cssmenu > ul > li a { line-height: 35px; } #cssmenu > ul > li a:hover { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #cssmenu .has-sub:hover ul { display: block; } #cssmenu .has-sub a { display: block; position: relative; } #cssmenu .has-sub > a:after { content: ''; display: block; width: 10px; height: 9px; position: absolute; right: 5px; top: 50%; margin-top: -5px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==); -webkit-transform: rotate(360deg); } #cssmenu .has-sub ul { background: #f6f6f6; border: 1px solid #dddddd; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; display: none; padding: 10px 0; position: absolute; left: 50%; top: 34px; margin-left: -70px; width: 140px; z-index: 1; } #cssmenu .has-sub ul li:hover > a { background: #dddddd; color: #ae0001; border-color: #e5e5e5 transparent transparent transparent; } #cssmenu .has-sub ul a { line-height: 160%; padding: 8px 0; } #cssmenu .has-sub .has-sub a:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==); -webkit-transform: rotate(360deg); } #cssmenu .has-sub .has-sub ul { background: #dddddd; left: 100%; top: 0; margin-left: 0; } #cssmenu .has-sub .has-sub ul a { background: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } #cssmenu .has-sub .has-sub ul a:after { background-image: none; } #cssmenu .has-sub .has-sub ul a:hover { background: #bfbfbf; }

• Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE..

• Sekarang saatnya masuk ke Menu TATA LETAK atau LAYOUT

• Klik  ADD A GADGET atau TAMBAH GADGET

• Pilih HTML/JAVASCRIPT. 

• Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia

<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 class='last'><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 class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div>

• Edit semua nama menu sesuai keinginan saudara. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan

• Klik SIMPAN

•  Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN .

Ok, silahkan divariasikan sendiri cara untuk menambah dan mengurangi item pada drop down menu horizontal di atas pada blog saudara. Jika anda tertarik untuk menggunakan dropdown menu yang dibuat dengan basis CSS3.

 

Mudah-mudahan bisa membantu mempercantik blog saudara...

Related Post: