/* CSS Main Navigation */
#menuheadseo{text-align:left;padding:0;background:#fff;background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));background-position:top left;background-repeat:no-repeat;background-size:100% auto;width:100%;margin:auto;position:fixed;width:100%;margin:auto;top:0;right:0;left:0;z-index:99;-webkit-transform:translateZ(0);transform:translateZ(0);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
nav{position:relative;width:100%;max-width:990px;margin:0 auto}
#inseomenu,#inseomenu ul,#inseomenu ul li,#inseomenu ul li a,#inseomenu #head-mobile{border:0;list-style:none;line-height:1;margin:0 auto;display:block;position:relative}
#inseomenu{width:100%;max-width:990px}
#inseomenu:after,#inseomenu >ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#inseomenu #head-mobile{display:none}
#inseomenu >ul >li{float:left}
#inseomenu >ul >li >a{padding:24px 12px;font-size:13px;letter-spacing:.2px;text-decoration:none;color:#222;font-weight:600}
#inseomenu >ul >li:hover >a,#inseomenu ul li.active a{color:#e74c3c}
#inseomenu >ul >li:hover,#inseomenu ul li.active:hover,#inseomenu ul li.active,#inseomenu ul li.has-sub.active:hover{transition:background .3s ease}
#inseomenu ul ul{position:absolute;left:-9999px;z-index:99;box-shadow:0 2px 2rem -1rem rgba(0,0,0,0.5)}
#inseomenu ul ul li{height:0;background:#fff}
#inseomenu ul ul li:hover{background:#e74c3c;box-shadow:inset 3px 0 0 #f39c12}
#inseomenu li:hover >ul{left:auto}
#inseomenu li:hover >ul >li{height:35px}
#inseomenu ul ul ul{margin-left:100%;top:0}
#inseomenu ul ul li a{border-bottom:1px solid rgba(255,255,255,0.1);padding:11px 15px;min-width:170px;font-size:13px;text-decoration:none;color:#222;font-weight:400;transition:initial}
#inseomenu ul ul li:last-child >a,#inseomenu ul ul li.last-item >a{border-bottom:0}
#inseomenu ul ul li:hover >a,#inseomenu ul ul li a:hover{color:#fff}
#inseomenu ul ul li.has-sub:hover,#inseomenu ul li.has-sub ul li.has-sub ul li:hover{background:#e74c3c}
#inseomenu ul ul ul li.active a{border-left:1px solid #333}
#inseomenu >ul >li.has-sub >ul >li.active >a,#inseomenu >ul ul >li.has-sub >ul >li.active >a{border-top:1px solid rgba(0,0,0,0.03)}
#inseomenu >ul >li.has-sub >a i {margin:0 0 0 5px}
#inseomenu > ul ul > li.has-sub > a i{margin:0 0 0 5px;float:right;transform:rotate(-90deg)}
@media screen and (max-width:768px){
.logo{position:absolute;top:0;left:0;width:100%;height:46px;text-align:center;padding:0;float:none}
.logo2{display:none}nav{width:100%}
#header h1 a,#header h2 a{color:#fff;}
#header h1 a:hover,#header h2 a:hover{color:#eee;text-decoration:underline}
#inseomenu{background:#e74c3c;background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));background-position:top left;background-repeat:no-repeat;background-size:100% auto;width:100%;position:fixed;z-index:9999;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 2px 10px rgba(0,0,0,0.1)}#inseomenu ul{width:100%;display:none}#inseomenu ul li{width:100%;border-top:1px solid rgba(0,0,0,0.03)}#inseomenu ul li:hover{background:#363636}#inseomenu ul ul li,#inseomenu li:hover > ul > li{height:auto}#inseomenu ul li a,#inseomenu ul ul li a{padding:15px;color:#000;width:100%;border-bottom:0}#inseomenu > ul > li{float:none;background:#fff}#inseomenu ul ul li a{color:#000}#inseomenu ul ul li{background:#333;border-top:1px solid rgba(255,255,255,0.05)}#inseomenu ul ul li:hover{background:#2d2d2d}#inseomenu ul ul ul li a{padding-left:15px}#inseomenu ul ul li a{color:#fff;background:none;font-size:14px}#inseomenu ul ul li:hover > a,#inseomenu ul ul li.active > a{color:#000}#inseomenu ul ul,#inseomenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left;box-shadow:none;border:0}#inseomenu #head-mobile{display:block;padding:25px;color:#000;font-size:12px;font-weight:600}.buttonx{width:55px;height:46px;position:absolute;left:0;top:0;cursor:pointer;z-index:12399994}.buttonx:after{content:'';position:absolute;top:23px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #fff;border-bottom:2px solid #fff;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}.buttonx:before{content:'';transition:all .3s ease;position:absolute;top:17px;right:20px;display:block;height:2px;width:20px;background:#fff}.buttonx.menu-opened:after{transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.buttonx.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}#inseomenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid rgba(0,0,0,0.03);height:45px;width:50px;cursor:pointer}#inseomenu ul ul .submenu-button{height:45px;border-left:1px solid rgba(255,255,255,0.05)}#inseomenu ul ul ul li.active a{border-left:none}#inseomenu > ul > li.has-sub > ul > li.active > a,#inseomenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}#inseomenu > ul > li:hover,#inseomenu ul li.active:hover,#inseomenu ul li.active,#inseomenu ul li.has-sub.active:hover{background:#fff;transition:background .3s ease}#inseomenu > ul > li:hover > a,#inseomenu ul li.active a{color:#000}#inseomenu > ul > li{float:none;background:#fff}#inseomenu ul ul li:hover > a,#inseomenu ul ul li a:hover{color:#fff}#inseomenu ul ul li.has-sub:hover,#inseomenu ul li.has-sub ul li.has-sub ul li:hover{background:#2d2d2d}#inseomenu >ul >li.has-sub >a i{margin:auto;position:absolute;right:0;text-align:center;width:48px;font-size:20px;line-height:20px}#searchca.open{position:fixed;top:46px;left:0;right:0;z-index:999}#inseomenu > ul ul > li.has-sub > a i{transform:none}}
/* Search Form */
.search-icon a{background:#fd6458;background:linear-gradient(124deg,#2ecc71,#e67e22,#3498db,#e3e81d,#e74c3c,#f1c40f,#1abc9c,#f39c12);background-size:1000% 1000%;-webkit-animation:rainbow 28s ease infinite;-z-animation:rainbow 28s ease infinite;-o-animation:rainbow 28s ease infinite;animation:rainbow 28s ease infinite;color:#fff;font-size:16px;padding:0;position:absolute;right:15px;top:13px;width:75px;height:35px;line-height:35px;text-align:center;border-radius:30px;transition:all .3s}
.search-icon a:hover{background:rgba(0,0,0,.2);color:#fff}
#searchca{color:#7f8c8d;margin:auto;transition:all 0.1s ease-in-out;display:none}
#searchca.open{background-color:#fff;background-size:400% 400%;animation:Gradient 15s ease infinite;display:block;position:relative;border-top:1px solid rgba(0,0,0,0.05);box-shadow:0 3px 3px rgba(0,0,0,0.05)}
#searchca input[type="search"]{position:relative;background:transparent;color:#222;border:0;width:100%;font-size:16px;outline:none;padding:18px 20px;margin:auto}
#searchca .close{position:absolute;top:15px;right:20px;color:#222;background-color:transparent;opacity:1;font-size:28px;border:none;outline:none;padding:0;z-index:9;transition:all .3s}
#searchca .close:hover{cursor:pointer;opacity:0.8}
#searchca form{margin:auto;max-width:990px;position:relative}
#searchca input[type="search"]::placeholder{color:#ccc;opacity:1}
#searchca input[type="search"]:-ms-input-placeholder{color:#ccc}
#searchca input[type="search"]::-ms-input-placeholder{color:#ccc}Letakkan kode CSS berikut diatas kode </style>
/* Media Queries */
@media screen and (min-width:1200px){
.site-brandingindz a + .site-title{margin-top:17px}}
@media screen and (max-width:1024px){#inseopages{padding:0 20px}
.site-brandingindz,.sites-navigation{padding-left:2.98245614%;padding-right:2.98245614%}
#realme-wrapper{width:67%}}
@media screen and (max-width:768px){
#Header1 h1.title,#Header1 h2.title{margin:5px auto 0 auto}
.header-logo{float:none}
.site-descriptionindz{display:block;color:#fff;font-size:14px}
.site-infoku{padding:20px}
#realme-wrapper,#sidebar-wrapper {width:100%;}
#header-top{float:none;max-width:100%;width:100%;text-align:center}
.search-icon a{background:transparent;color:#fff;padding:14px 18px;z-index:99999;top:0;right:0;width:auto;height:auto;line-height:initial}
.search-icon a:hover{background:transparent;color:#fff}
#header img{display:block;height:auto;float:none;margin:auto}
#searchform{margin:0 10px}
#menu{display:block}}
@media screen and (max-width:640px){
.site-brandingindz{text-align:center}
.site-logoindz{margin:0 auto 12px}
#searchform,.search-button{line-height:34px}
#slidetop{right:43px}
.recent-block .recent-thumb,#HTML52 .recent-thumb,#HTML53 .recent-thumb,.recent-block2 .recent-thumb2,.recent-block2 .recent-thumb{width:100%;height:200px;display:block}
.recentbylabel ul li{width:100%}
.recentbylabel ul li:nth-child(n+3){display:none}}
@media screen and (max-width:362px){
.site-logoindz{max-width:100%}}Tambahkan Markup kode HTML
<header id='menuheadseo'>
<nav id='inseomenu' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div class='logo'>
<div class='header-logo'>
<b:section class='header' id='header' maxwidgets='1' name='Logo & Title' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Zona KBM (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>790</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<h1><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</h1>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'>
<span>
<data:description/>
</span>
</p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'>
<data:title/>
</span>
</a>
</h1>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'>
<data:title/>
</span>
</a>
</h2>
</b:if>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'>
<data:title/>
</span>
</a>
</h2>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div id='head-mobile'/>
<div class='buttonx'/>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Tutorial<i aria-hidden='true' class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='/search/label/Word?&max-results=10' itemprop='url'><span itemprop='name'>Word</span></a></li>
<li><a href='/search/label/Excel?&max-results=10' itemprop='url'><span itemprop='name'>Excel</span></a></li>
<li><a href='/search/label/Powerpoint?&max-results=10' itemprop='url'><span itemprop='name'>Powerpoint</span></a></li>
</ul>
</li>
<li><a href='/search/label/Branding?&max-results=10' itemprop='url'><span itemprop='name'>Branding</span></a></li>
<li><a href='/search/label/Desain?&max-results=10' itemprop='url'><span itemprop='name'>Desain</span></a></li>
<li><a href='/search/label/Komputer?&max-results=10' itemprop='url'><span itemprop='name'>Komputer</span></a></li>
<li><a href='/search/label/Internet?&max-results=10' itemprop='url'><span itemprop='name'>Internet</span></a></li>
<li><a href='/search/label/Mockup?&max-results=10' itemprop='url'><span itemprop='name'>Mockup</span></a></li>
<li><a href='/search/label/Vector?&max-results=10' itemprop='url'><span itemprop='name'>Vector</span></a></li>
</ul>
<div><a class='shownotif' href='javascript:;' title='Show Notification'><i aria-hidden='true' class='fa fa-bell'/></a></div>
<div class='search-icon'>
<a href='#searchca'><i class='fa fa-search'/></a>
</div>
</nav>
<div id='searchca'>
<form action='/search' id='search-form' method='get'>
<input name='q' placeholder='Search here and hit enter...' type='search' value=''/>
<input name='max-results' type='hidden' value='8'/>
<button class='close' type='button'>×</button>
</form>
</div>
</header>
<div class='clear'/>
Tidak ada komentar