iyan-blog.com | Membuat Menu Navigasi dan Tombol Sosial Media Responsive - Menu navigasi merupakan hal yang paling kita temui dalam suatu blog/website. Menu navigasi kali ini dilengkapi dengan fitur tombol sosial media youtube, facebook, twitter, google plus, dan linkedin.
Selain dilengkapi fitur sosial media, menu navigasi ini juga responsive. Untuk demonya kamu bisa lihat ditemplate
Suvart Blogger Template yang saya bagikan gratis atau bisa melihat di blog demonya di
Aindedeng Blog. Kurang lebih menunya seperti yang tampak pada gambar dibawah ini:
Membuat Menu Navigasi dan Tombol Sosial Media
1. Log in ke akun blogger
2. masuk ke halaman template >> Edit HTML
3. Cari kode </style> atau ]]></b:skin>, lalu letakkan kode dibawah ini diatasnya
/* CSS Top Menu */
.main-nav {display:block;margin:0 auto;float:left;padding:0;width: 100%;background:#222;border-bottom:4px solid #FF3300;}
.main-nav ul {width:100%;padding:0;margin:0;text-align:left;}
.main-nav li {list-style-type:none;float:left;padding:0;}
.main-nav li a {position:relative;font-family:'oswald';font-size:14px;font-weight:400;background:#222;color:#f5f5f5;display:block;margin:0;padding:18px;line-height:100%;text-transform: uppercase;
}
.main-nav ul > li > a:after {content:"";position:absolute;width:0;left:0;right:0;margin:auto;
bottom:-1px;height:3px;background:#222;opacity:0;visibility:hidden;transition:all 0.2s ease-out;}
.main-nav ul > li > a:hover:after {opacity:1;visibility:visible;width:90%;}
.main-nav ul li a:active, .main-nav ul li.highlight a {line-height:100%;text-decoration:none;}
.main-nav ul li a:hover {background:#fdfdfd;color:#222;text-decoration:none;}
.main-nav a#pull {display:none;}
.main-nav li.facebook,.main-nav li.twitter,.main-nav li.youtube,.main-nav li.googleplus,.main-nav li.linkedin{background:#fff;text-align:center;color:#838888;float:right;transition:all 0.2s ease-out;}
.main-nav li a.facebook:hover,.main-nav li a.twitter:hover,.main-nav li a.youtube:hover,.main-nav li a.googleplus:hover,.main-nav li a.linkedin:hover{color:#7076c5;}
.main-nav li.facebook .fa.fa-facebook,.main-nav li.twitter .fa.fa-twitter,.main-nav li.youtube .fa.fa-youtube,.main-nav li.googleplus .fa.fa-google-plus,.main-nav li.linkedin .fa.fa-linkedin{color:#838888;transition:all 0.2s ease-out;}
.main-nav ul li.facebook:hover .fa.fa-facebook,.main-nav li.twitter:hover .fa.fa-twitter,
.main-nav li.youtube:hover .fa.fa-youtube,.main-nav li.googleplus:hover .fa.fa-google-plus,
.main-nav li.linkedin:hover .fa.fa-linkedin{background:#fdfdfd;color:#222;}
.main-nav li.buttonalert {cursor:pointer;font-size:13px;color:#fff;padding:2px 10px;background:#f56954;border-radius:3px;margin:15px 0;opacity:0.8;margin-left:10px;transition:all 0.2s ease-out;}
.main-nav li.buttonalert:hover{opacity:1;}
@media only screen and (max-width:640px){
.main-nav {display:block;width:100%;padding:0}
.main-nav ul {text-align:center;}
.main-nav ul {display:none;height:auto;}
.main-nav a#pull {background-color:#222;color:#fff;border:none;display:inline-block;font-family:'oswald';font-size:12px;font-weight:bold;padding:10px 3%;height:30px;line-height:30px;position:relative;text-align:right;width:94%;}
.main-nav a#pull:after {content:'\f0c9';font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;display:inline-block;position:absolute;left:15px;top:20%;line-height:30px;}
.main-nav li {display:block;width:100%;text-align:left;border-bottom:none;}
.main-nav li a {background:#222;color:#fff;padding:15px 20px;display:block;}
.main-nav li a:hover, nav a:active {background:#222;border:none;color:#fff;}
.main-nav ul li a:hover {background:#222;color:#fff;}
.main-nav .home1 a {box-shadow:none;background:#222;color:#fff;}
.main-nav .home1 a:hover {background:#222;color:#fff;}
.main-nav li.facebook,.main-nav li.twitter,.main-nav li.youtube,.main-nav li.googleplus,.main-nav li.linkedin{background:#222;text-align:left;margin:0 auto;color:#fff;transition:all 0.2s ease-out;}
.main-nav li a.facebook:hover,.main-nav li a.twitter:hover,.main-nav li a.youtube:hover,.main-nav li a.googleplus:hover,.main-nav li a.linkedin:hover{color:#222;}
.main-nav li.facebook .fa.fa-facebook,.main-nav li.twitter .fa.fa-twitter,.main-nav li.youtube .fa.fa-youtube,.main-nav li.googleplus .fa.fa-google-plus,.main-nav li.linkedin .fa.fa-linkedin{color:#fff;transition:all 0.2s ease-out;}
.main-nav ul li.facebook:hover .fa.fa-facebook,.main-nav li.twitter:hover .fa.fa-twitter,
.main-nav li.youtube:hover .fa.fa-youtube,.main-nav li.googleplus:hover .fa.fa-google-plus,
.main-nav li.linkedin:hover .fa.fa-linkedin{background:#222;color:#fff;}
.main-nav li.buttonalert {display:none;}}
4. lalu letakkan kode dibawah ini diatas atau dibawah header
<nav class='main-nav'>
<ul>
<li class='home1'><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
<li><a href='/p/static-page.html'>Forum</a></li>
<li><a href='/p/display-none.html'>Fixed</a></li>
<li class='sorting-01 youtube' title='Follow us on Youtube'><a href='#'><i class='fa fa-youtube'/><span class='inv'/></a></li>
<li class='sorting-02 linkedin' title='Follow us on LinkedIn'><a href='#'><i class='fa fa-linkedin'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus' title='Follow us on Google+'><a href='#'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-04 twitter' title='Follow us on Twitter'><a href='#'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='sorting-05 facebook' title='Follow us on Facebook'><a href='#'><i class='fa fa-facebook'/><span class='inv'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav>
5. Jangan lupa letakkan kode dibawah ini, dibawah kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
6. Selesai.
Jika masih ada masalah atau kebingungan bisa tanyakan lewat kotak komentar. Sekian postingan kali, selamat mencoba dan terima kasih.
