Kali ini kita akan diskusi tentang Cara Membuat Menu Dropdown Dengan Social Icons di blog. Tampilannya lebih kurang seperti gambar di bawah ...
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.
COMMENTS