membuat menu dropdown dengan sosial icon-pada kesempatan ini saya akan membahas tentang cara membuat menu tapi menu yang kita buat kali ini di sertai dengan sosial icon yang tentunya bisa mempermudah para pengunjung untuk menuju link abaout kita di sosial media yaitu facebook,twitter,google plus dll.
untuk cara seperti ini memang sudah banyak di bahas di tutorial blog di luaran sana tapi kali ini tak ada salahnya jika saya membahasnya.oh ya hampir lupa jika semalam saya posting artikel tentang cara memperbaiki template jka sobat blogger belum membaca silahkan klik di sini atau di sini, jika sobat sudah membacanya langsung saja kita menuju pokok pembahasan yaitu:
membuat menu dropdwon dengan social icon.
1.login ke blogger anda dulu
2. klik template
3.klik edit html
4.kemudian cari kode <head> (gunakan ctrl +f agar lebih mudah)
letakakan kode di bawah ini tepat di bawah kode <head>
<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>
untuk keteranganya:
silahkan anda ganti kode # dengan url yang anda inginkan
silahkan ganti kode yang berwarna merah dengan url postingan /label blog sobat
monggo ganti warnanya dengan warna yang anda inginkan.
cukup mudah bukan membuat menu dropdown dengan sosial icon.mudah-mudahan bermanfaat untuk refrensi tutorial blog anda,semoga sukses.
0 Response to "membuat menu dropdown dengan social icon"
Posting Komentar