Cara Memasang Sajian Di Atas Header Blog - Topmenu Plus Link Media Sosoal

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

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

Disebut juga topbar hidangan atau topmenu kafetaria alasannya posisinya di atas header atau bab paling atas halaman blog.

blogspot ini biasnya berisi link hidangan halaman statis About Cara Memasang Menu di Atas Header Blog - Topmenu plus Link Media Sosoal

Kode CSS
Pasang di atas arahan ]]></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 arahan <body> atau di atas arahan heder blog Anda.

Baca Juga

<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='#'></a></li>
<li class='sorting-02 twitter'><a href='#'></a></li>
<li class='sorting-03 googleplus'><a href='#'></a></li>
<li class='sorting-06 linkedin'><a href='#'></a></li>
<li class='sorting-04 youtube'><a href='#'></a></li>
</ul>
</nav>

Link Font Awesome
Pasang di atas arahan </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.*

Sumber https://testemplatecb.blogspot.com/

Marwan

Cara Memasang Sajian Di Atas Header Blog - Topmenu Plus Link Media Sosoal

Menu Halaman Statis