Cara Memasang Menu di Atas Header Blog - Topmenu plus Link Media Sosoal

Baca Juga

Cara Memasang Menu di Atas Header Blog - Topmenu plus Link Media Sosial.

Menu di atas header blog blogger/blogspot ini biasnya berisi link menu halaman statis About, Kontak, Disclaimer, dan Sitemap.

Disebut juga topbar menu atau topmenu bar karena posisinya di atas header atau bagian paling atas halaman blog.

Kode CSS
Pasang di atas kode ]]></b:if>

#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}
@media screen and (max-width:960px) {
#menutop,#menutop ul{background:#fff;height:auto}#menutop li,#menutop li:hover>ul.menux{display:block}#menutop{position:relative;border:none;border-bottom:4px solid #999;min-height:50px;margin-bottom:20px}#menutop ul{border:none;position:static;overflow:hidden;display:none;padding-top:50px}#menutop ul.menux{width:100%;position:static;border:none;padding-top:0}#menutop li{float:none;width:auto;text-align:left}#menutop a.dutt{font-weight:700}#menutop a.dutt:hover,#menutop li:hover>a.dutt{background:#b1b1b1;color:#fff}#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0}#menutop input:after,#menutop label:after{content:"\f0c9";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:none;font-size:30px;color:#666;display:inline-block;position:absolute;right:15px;top:25%;line-height:30px}#menutop input{z-index:4}#menutop input:checked+label{color:#fff;font-weight:700}#menutop input:checked~ul{display:block}
}

Kode HTML
Pasang di bawah kode <body> atau di atas kode heder blog Anda.

<nav id='menutop'>
<input type='checkbox'/>
<label></label>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='/blog/' title='Blog'>Blog</a></li>
<li><a class='dutt' href='#'>Categories</a>
<ul class='menux'>
<li><a href='/search/label/Widgets?&max-results=5'>Widgets</a></li>
<li><a href='/search/label/Mods?&max-results=5'>Mods</a></li>
<li><a href='/search/label/Tricks?&max-results=5'>Tricks</a></li>
<li><a href='/search/label/Hacks?&max-results=5'>Hacks</a></li>
</ul>
</li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'></i><span class='inv'></span></a></li>
</ul>
</nav>

Link Font Awesome
Pasang di atas kode </head>

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

Beres!

Demikian Cara Memasang Menu di Atas Header Blog - Topmenu plus Link Media Sosial.*