Memasang Drop Down Menu Plus Tombol Socmed

Selamat siang sidang pembaca sekalian, masih semangat ngikutin kelas belajar ngeblog bareng kelincex.com kan. Mestinya masih dong, kalau ngga ngapain Anda repot-repot  mengunjungi blog sederhana ini hehe. Pada posting yang lalu saya membahas tentang memasang navigasi menu plus search box, tapi diluar dugaan malah banyak yang nge-inbox minta di share cara memasang navigasi menu tapi bukan plus search box melainkan plus socmed button *oke masalah yang banyak nge-inbox memang cerita fiktif karangan saya :p tapi ga apa dong berbagi ilmu*

Step by Step

1. Sign in ke Blogger.
2. Pada Dashboard pilih blog yang akan di oprek.
3. Pilih Opsi Template » Edit HTML
4. Cari kode </header>
5. Paste kode berikut di bawah kode </header>. Kemudian jangan lupa diSave.
<style> #wc-soc-nav{
width:100%;
height:50px;
display:block;
padding:0;
margin:0 0 22px 0;
background:#f84242;
border-bottom:4px solid rgba(197,52,52,1);
box-shadow:1px 1px 4px #dcdcdc;
-moz-box-shadow:1px 1px 4px #dcdcdc;
-web-kit-box-shadow:1px 1px 4px #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px #dcdcdc;
}

#wc-soc-menu{
margin:0 auto;
display:block;
padding:0;
font-family: 'georgia', sans-serif;
}

#wc-soc-menu ul{
float:left;
margin:0;
padding:0;
}

#wc-soc-menu li{
float:left;
list-style:none;
line-height:50px;
margin:0;
padding:0
}

#wc-soc-menu li a, #wc-soc-menu li a:link{
color:#f0f0f0;
display:block;
margin:0;
padding:0 10px;
font-size:16px;
text-decoration:none;
}

#wc-soc-menu li a:hover, #wc-soc-menu li a:active, #wc-soc-menu .current_page_item a {
color:#fff;
padding:0 10px;
}

#wc-soc-menu li li a, #wc-soc-menu li li a:link, #wc-soc-menu li li a:visited{
font-size: 16px;
background:#f84242;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
}

#wc-soc-menu li li a:hover, #wc-soc-menu li li a:active {
background:rgba(197,52,52,1);
color: #fff;
}

#wc-soc-menu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:168px;
margin:0px;
padding:0px
}

#wc-soc-menu li:hover ul, #wc-soc-menu li li:hover ul, #wc-soc-menu li li li:hover ul, #wc-soc-menu li.sfhover ul, #topwc-soc-menu li li.sfhover ul, #topwc-soc-menu li li li.sfhover ul{
left:auto
}

#wc-soc-menu li:hover, #wc-soc-menu li.sfhover{
position:static
}

#wc-soc-ico img
{
margin-left:-6px;
height:35px;
margin-top:9px;
}
</style>

<div id='wc-soc-nav'>
<div id='wc-soc-menu'>
 <ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Projects</a> </li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Hire us</a></li>
<li><a href='#'>Dropdown 2 »</a>
<ul>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>Plugins</a></li>
<li><a href='#'>Wordpress </a></li>
<li><a href='#'>Themes</a></li>
<li><a href='#'>Blogging tips</a></li>
</ul>
</li>
<li><a href='#'>Contact us</a> </li>
<li id='wc-soc-ico'> <a href='Your facebook page url' target='_blank'> <img style='margin-left:50px;' src='http://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48x48-Circle-49-FB.png' alt='Facebook' title='Like us on Facebook'/> </a> </li>
<li id='wc-soc-ico'> <a href='Your twitter account url' target='_blank'> <img src='http://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48x48-Circle-49-TW.png' alt='Twitter' title='Follow us on twitter'/> </a>
</li>
<li id='wc-soc-ico'> <a href='Your Google Plus url' target='_blank'> <img src='http://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48x48-Circle-49-GP.png' alt='Google Plus' title='Follow us on Google plus'/> </a> </li>
<li id='wc-soc-ico'> <a href='Your RSS feed address' target='_blank'> <img src='http://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48x48-Circle-49-RSS.png' alt='RSS' title='Subscribe to our RSS feeds'/> </a></li>
</ul>
</div>
</div>
6. Lakukan kostumasi jika Anda tidak puas dengan tampilan yang ada
   • Pada kode diatas editlah tanda pagar merah (#) dengan link yang Anda kehendaki dan edit pula kode berwarna hijau dengan URL sosial network Anda.
   • Anda bisa mengubah kode warna background #f84242 dengan warna yang Anda kehendaki.
   • Untuk mengubah warna hover Anda bisa mengedit kode rgba(197,52,52,1);.

Tips & Warnings

Pemasangan widget di bawah kode </head> mungkin tidak berjalan lancar pada semua template, oleh karena itu untuk posisi pemasangan bisa disesuaikan menurut selera masing-masing, gunakan insting liar Anda :D