Cara membuat menu dropdown di bawah header blogspot

Cara membuat menu dropdown di bawah header blogspot

Cara membuat menu dropdown di bawah header blogspot - Rasanya kurang indah jika blog kita tidak memiliki menu dropdown di bawah header oleh karena itu ane akan memberikan tips cara membuat menu dropdown di bawah header blogspot yang mana sebelum ane memposting artikel ini ane juga sudah berbagi dengan sobat blogger semua tentang cara membuat header logo blog. 

Cara membuat menu dropdown di bawah header blogspot bisa dikatakan sebagai salah satu usaha cara kita untuk mempercantik sebuah blog dan dengan adanya tab menu pada blog kita, maka akan lebih memudahkan pengunjung dalam mencari topik pembahasan yang ada pada blog kita. Mmmmmp..sampai disini tentunya agan penasaran bukan, bagaimana sih penampakan dari menu dropdown di bawah header blogspot itu? Dibawah ini adalah gambarnya. 

Cara membuat menu di blog

Bagaimana..tertarik bukan? Untuk cara membuat menu dropdown di bawah header blogspot silahkan ikuti langkah-langkah dibawah ini. 

Cara membuat menu dropdown di bawah header blogspot 

Sebelum kita memulai membuat menu dropdown di bawah header blogspot alangkah baiknya backup dulu template agan karena ditakutkan terjadi hal-hal yang tidak di inginkan.

1. Masuk ke akun blogger agan -> klik Template -> Edit HTML

2. Centang “Expand Widget Templates ”

3. Lalu agan cari kode ]]></b:skin> ( gunakan Ctrl + F untuk memudahkan proses pencarian ) 

4. Terus taruh script di bawah ini tepat diatas kode ]]></b:skin>

#catmenucontainer{

height:33px;

width:1000px;

margin:0 auto;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjR2Xm-flU01rbcKVl2n5DretGRp7RTD1nA-scNi1Lq4_vr4515-RiMTULVI9hpyysXUv2osa9ZezAv_x2c05QI2yRZFTVcwQNwFpIMTdI3N4smpeO9K-_jK4tmgV5VQjSXQ3LWujifMD/s1600/2.gif) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:12px;

font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;

font-weight:normal;

border-top:1px solid #252424;

}

#catmenu{

margin: 0px;

padding: 0px;

width:1000px;

background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiQcExECPxn6T957am0f0bYIJAo59I-Um8HRGRoeq5lLJG66uu3uac5aj2qv42ZJtiSsLSCLBBJweLwpHMTBO-GNVs-azSUv2cqLQphsUEzLcBpVNnPEWRuBb-2tCnbfWOaz0SmnhGxBm/) repeat-x;

height:33px;

}

#catmenu ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;

display: block;

margin: 0px;

padding: 9px 10px 10px 10px;

}

#catmenu li a:hover, #catmenu li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRoKPzVlzutnzVOv3ylrO5o3Els69zsvKo3FkvhmR1sEUhy6Qsrjw9cuBlvGROqapQhF6rb85N80pZ1erUTIO3NdHpVhCe5B1eiLqQ52DBi4PtuCuSLE_HUSjDUdALnX_zbSLaThcVSrAb/) repeat-x;

color: #fff;

margin: 0px;

padding: 9px 10px 10px 10px;

text-decoration: none;

}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;

width: 150px;

color: #fae7df;

font-family:Tahoma,century gothic,Georgia, sans-serif;

font-weight: normal;

float: none;

margin: 0px;

padding: 9px 10px 10px 10px;

border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRoKPzVlzutnzVOv3ylrO5o3Els69zsvKo3FkvhmR1sEUhy6Qsrjw9cuBlvGROqapQhF6rb85N80pZ1erUTIO3NdHpVhCe5B1eiLqQ52DBi4PtuCuSLE_HUSjDUdALnX_zbSLaThcVSrAb/) repeat-x;

color: #fff;

padding: 9px 10px 10px 10px;

}

#catmenu li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0px;

padding: 0px;

}

#catmenu li li {

}

#catmenu li ul a {

width: 140px;

}

#catmenu li ul a:hover, #catmenu li ul a:active {

}

#catmenu li ul ul {

margin: -34px 0 0 170px;

}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {

left: -999em;

}

#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,

#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {

left: auto;

}

#catmenu li:hover, #catmenu li.sfhover {

position: static;

}

5. Kemudian agan cari kode  <div id='content-wrapper'> 

6. Copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>

<ul class='children'>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>

</ul>

</li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>

</ul>

</div>

</div>

<div class='clear'/>

7. Klik Pratinjau/Preview terlebih dulu sebelum di SAVE template nya, jika sudah berhasil maka klik Save/Simpan. 

Note:

- Edit Your-Link-Here,Link-Title, dan Link-Name. Ganti dengan link dan title link yang agan inginkan.

- Jika kode <div id='content-wrapper'> tidak ada dalam template agan, itu berarti cara ini tidak sesuai dengan template yang sedang agan gunakan. Tetapi agan masih bisa memasangnya dengan cara :

Masuk -> Elemen Laman -> Tambah Gadget -> pilih HTML/JavaScript >> taruh kode script yang ke-2 di dalam nya. Klik Simpan dan lihat hasilnya. 

Itulah tutorial dari ane tentang cara membuat menu dropdown di bawah header blogspot semoga postingan ini bermanfaat khusunya bagi agan-agan yang ingin mempercantik blognya dengan cara membuat menu dropdown. Terimakasih dan semoga berhasil 

Terima kasih atas kunjungan anda dan kesediaan anda untuk membaca artikel tentang Cara membuat menu dropdown di bawah header blogspot. Jika anda menyukai artikel blog ini, silahkan untuk berlangganan gratis via email, dengan begitu anda akan mendapat kiriman artikel setiap ada artikel baru yang terbit di Langkah-Langkah Membuat Blog Keren.

MENU YANG KE 2

Cara membuat menu bar di blogspot dengan mudah adalah sebuah cara jitu jika agan menginginkan tampilan semua halaman blog di lihat dengan mudah oleh pengunjung dan salah satu cara dari kian banyak cara jika agan ingin blog agan tampil lebih cantik yang mana sebelumnya juga ane sempet sharing tentang cara membuat background blog agar tampilannya lebih menarik nan cantik. 

Kali ini ane akan mencoba berbagi tips tentang cara membuat menu bar di blogspot dengan mudah yang hanya di butuhkan sedikit keahlian dalam mengedit HTML. Sebelum kita melanjutkan tutorial tentang cara membuat menu bar di blogspot, terlebih dahulu silahkan lihatlah gambar di bawah ini yang menampilkan hasil akhir dari menu bar di blogspot.

Nah bagaimana tertarik bukan? Baiklah bagi agan-agan yang sudah tidak sabar lagi ingin membuat menu bar di blogspot silahkan perhatikan langkah-langkah dari tutorial cara membuat menu bar di blogspot dengan mudah dibawah ini.

Cara membuat menu bar di blogspot dengan mudah

1. Silahkan masuk ke akun Blogger agan.

2. Klik halaman "Template" download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.

3. Centang "Expand Template Widget". 

4. Terus silahkan cari kode ]]></b:skin> denan menggunakan Ctrl + F.

5. Simpan kode script di bawah ini tepat di atas kode ]]></b:skin>

#menubar{

border-bottom:4px solid #ff0000;

width:1025px;

height:32px;

background:#000000;

float:center;

margin-bottom:3px;

}

#menubar ul{

float:left;

margin:0;

padding:0;

}

#menubar li{

float:left;

list-style:none;

margin:0;

padding:0;

}

#menubar li a, #menubar li a:link{

float:left;

padding:8px 12px;

color:#fff;

text-decoration:none;

font-size:13px;

font-weight:bold;

}

#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {

background: #ff0000;

color: #fff;

text-decoration:none;

}

#menubar li li a, #menubar li li a:link, #menubar li li a:visited{

font-size: 12px;

background: #ff0000;

color: #fff;

text-decoration:none;

width: 150px;

padding: 0px 10px;

line-height:30px;

}

#menubar li li a:hover, #menubar li li a:active {

background: #000000;

color: #ffffff;

}

#menubar li ul{

z-index:9999;

position:absolute;

left:-999em;

height:auto;

width:170px;

margin-top:32px;

border:1px solid ##ff0000;

}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{

left:auto

}

#menubar li:hover, #menubar li.sfhover{

position:static

}       

6. Untuk seterusnya silahkan cari kode <div id="content-wrapper"> 

7. Simpan kode script di bawah ini tepat di atas kode <div id="content-wrapper">

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://langkah2membuatblog.blogspot.com/p/abaut.html'>About Me</a></li>

<li><a href='http://langkah2membuatblog.blogspot.com/p/email.html'>Contact Me</a>

<ul>

<li><a href='https://plus.google.com/b/107404934236027850004/107404934236027850004/posts'>Google +</a></li>

<li><a href='http://www.facebook.com/pages/Langkah-Langkah-Membuat-Blog/474992502544254'>Facebook</a></li>

<li><a href='https://twitter.com/Langkah2_Blog'>Twitter</a></li>

</ul></li>

</ul>

</div>

8. Simpan Template.

Note: 

• Sesuaikan kode #ff0000 (border bawah menubar), 1025px (lebar menubar), #000000 (background menubar).
• Silahkan nama menubar yang berwarna biru Home sesuai dengan keinginan agan.
• Ganti link yang berwarna merah http://langkah2membuatblog.blogspot.com/p/abaut.html dengan link agan.

Itulah pembahasan mengenai tutorial tentang cara membuat menu bar di blogspot dengan mudah semoga dengan adanya pembahasan ini dapat membantu sobat blogger yang ingin membuat menu bar di blogspot, silahkan tinggalkan komentar jika mendapatkan kesulitan agar ane dapat segera membantu

- See more at: http://langkah2membuatblog.blogspot.com/2012/12/cara-membuat-menu-bar-di-blogspot.html#sthash.ZOUVBx1u.dpuf