Cara Membuat Menu Dropdown Dengan Social Icons
Kali ini kita akan diskusi tentang Cara Membuat Menu Dropdown Dengan Social Icons di blog. Tampilannya lebih kurang seperti gambar di bawah ini :
2. Klik "template"
3. Klik "Edit Html"
4. Cari kode <head> Letakan kode dibawah ini tepat di bawah kode <head>
<style>Keterangan :Silahkan ganti kode # dengan URL postingan/label blog sobat
#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>
Silahkan ganti kode berwarna merah dengan URL postingan/label blog sobat
Silahkan kreasikan background warna sesuai keinginan sobat #f84242
Klik simpan dan selesai.
Join the conversation