Membuat Menu Navigasi dan Tombol Sosial Media Responsive

Admin at 10.04

Bingung.net | Bagi sebuah website/blog menu navigasi merupakan satu hal penting untuk memperindah sebuah tampilan. Dengan menambah menu navigasi tentunya sebuah web/blog akan terlihat lebih lengkap dan enak dipandang.

Menu navigasi biasanya terdapat sebuah laman yang memberikan informasi tentang website/blog tersebut.Contohnya Daftar isi, Tentang, kontak, dan lain sebagainya. Kali ini saya akan memberikan sebuah menu navigasi lebih lengkap dari yang saya jelaskan tadi. terdapat berbagai logo yang bisa anda hubungkan ke sosial media anda. Selain lengkap, menu navigasi ini juga responsive tentunya sangat mobile friendly.

1. Langkah Pertama
Pastikan kamu sudah login ke akun bloggermu

2. Langkah Kedua
Masuk ke halaman "Template" lalu klik "Edit HTML"

3. Langkah Ketiga
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. Langkah Keempat
Cari kode </header> letakkan kode dibawah ini setelahnya

<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. Langkah Kelima
Jangan lupa letakkan kode dibawah ini diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

*abaikan jika sudah terdapat kode ini di blogmu

6. Langkah Keenam
Simpan Template

BOOM! Menu navigasi keren sudah terpasang di blogmu, itu akan menjadikan blogmu lebih enak dipandang. Sekian dan terima kasih.

Share : Membuat Menu Navigasi dan Tombol Sosial Media Responsive

• Facebook
• Twitter
• Stumble
• Pinterest
• Google+

About Admin

Hanya blogger biasa yang suka berkelana di dunia maya mencari seonggok informasi yang kiranya dapat berguna untuk dirinya. Terimakasih telah membacanya.