Membuat Menu Navigasi Dropdown Classic Di Blog

Membuat Menu Navigasi Dropdown Classic Di Blog | Ghiyats Blogs - Salam Sobat Semua... Hai, Pada Artikel kali ini kita akan membahas tentang Menu Navigasi Dropdown, Menu Ini mengunakan CSS3 Yang pastinya tampilan sangat menarik dan pastinya elegan, menu ini mempunyai Warna dasar berwarna hitam, untuk cara membuatnya tutorialnya seperti dibawah ini :

Demo

Membuat Menu Navigasi Dropdown Classic Di Blog
----------------------------------------------------------------------------------------------

• Login Ke Blogger.com, Dengan Akun Anda
• Klik Menu ''Template''
• Klik ''Edit HTML''
• Setalah itu, Cari kode ]]></b:skin Setelah Ketemu kode tersebut, Taruhlah kode dibawah ini di atas/sebelum kode tersebut

/* The CSS Code */

#blogs_classic-menu{width:900px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJs3Di50mCwgB3WmUl8vr2cwrEOjOS3C_ge1BqcNuWz0swL4wDWP19vKLy7m06-d1eDQGRrdg8K2xPqPNnR2PTT0FQJ6iq-b183uvGI0BvwhEAnw9U9Zxa891uJie2FanOnnyYcfsWy-M/s1600/btrixfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;

border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

#blogs_classic-menu ul,#blogs_classic-menu li{margin:0 auto;padding:0 0;list-style:none}

#blogs_classic-menu ul{height:35px;width:980px}

#blogs_classic-menu li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}

#blogs_classic-menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}

#blogs_classic-menu li a:hover{color:#fff}

#blogs_classic-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}

#blogs_classic-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#blogs_classic-menu label span{font-size:12px;position:absolute;left:35px}

#blogs_classic-menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}

#blogs_classic-menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}

#blogs_classic-menu ul.menus a{color:#333}

#blog_classic-menu li:hover ul.menus{display:block}

#blogs_classic-menu a.prett{padding:0 27px 0 14px}

#blogs_classic-menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}

#blogs_classic-menu ul.menus a:hover{background:#ddd;color:#333}

.page-blogs_classic-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}

.page-blogs_classic-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}

.page-blogs_classic-menu ul li{list-style:none;line-height:32px;display:inline-block}

.page-blogs_classic-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}

.page-blogs_classic-menu li a:hover,.page-blogs_classic-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}

• Setelah Selesai, Sekarang Simpan Template

CARA PEMASANGANYA :

• Pergi ke ''Tata Letak''
• Klik ''Tambah Gadget''
• Pilih Gadget ''HTML/JavaScript''
• Taruhlah kode dibawah ini di dalam widget tersebut

<div id="blogs_classic-menu">

<ul>

<li><a href="http://gias-alauddin.blogspot.com">Home</a></li>

<li><a href="#">Menu 1</a></li>

<li><a class="prett" href="#">Drop list</a>

<ul class="menus">

<li><a href="#">Drop list 1</a></li>

<li><a href="#">Drop list 2</a></li>

<li><a href="#">Drop list 3</a></li>

</ul>

</li>

<li><a href="#">Menu 2</a></li>

<li><a class="prett" href="#">Drop list 1</a>

<ul class="menus">

<li><a href="#">Drop list 1</a></li>

<li><a href="#">Drop list 2</a></li>

<li><a href="#">Drop list 3</a></li>

</ul>

</li>

</ul>

</div>

• Ubah http://gias-alauddin.blogspot.com dengan url blog sobat
• Ganti # dengan url yang ingin di tuju
• Setelah semua selesai di ubah sesuai keinginan sobat, sekarang klik Simpan

Dan Demikianlah artikel ini yang berjudul ''Membuat Menu Navigasi Dropdown Classic Di Blog'' Semoga artikel ini bermanfaat dan mudah dipratekan sobat, Kalau ada masalah dalam membuat menu navigasi ini, silakan berkomentar di kolom komentar di bawah ini !!! Terima Kasih...

Via : Blogger Trix