Desktop
Mobile
LAYOUT:
body#layout .headerpic-wrapper{width:300px;float:left;padding: 0;margin: 15px;}
body#layout .header-wrapper {width: 100%;margin: 0 15px;overflow: visible;margin: 0 auto;}
CSS:
#head-sticky{padding:0;margin:0 auto;position:sticky;top:0;z-index:999999;}
.headerpic-wrapper {background: #fff;width: 100%;padding: 0 0 5px;margin: 0 auto;max-width: 980px;height: auto;margin-top: 5px;}
.header-wrapper{max-width:980px;color:#222;overflow:hidden;position:relative;margin:0 auto;padding-top: 5px;}
#header{float:left;width:auto;margin:0;padding:0}
#header-inner{margin:10px 0;padding:0}
#header h1,#header h2,#header p{font-size:27px;text-transform:uppercase;line-height:normal;color:#222;margin:0;font-weight:700}
#header h1 a,#header h1.title a:hover{color:#222;text-decoration:none}
#header .description{color:#bbb;font-size:9.7px;padding-top:3px;font-weight:500;display:none}
#header img{border:0;background:none;width:auto;height:auto;margin:-13px auto;max-width:100%;width:auto;border:0}
.logo-wrapper{position:absolute;left:0;margin-top:4px;width:180px;height:45px}
.logo-wrapper img{width:100%;height:100%}
.floatingNav {box-shadow: 0px 1px 10px #ddd;}
.showhide {float:right;padding:5px;margin:5px 0 5px 15px;}
.boxsearch{width:35%;float:none;margin:0 auto;padding:10px 2px 0 0}
.searchform{display:inline-block;padding:0;width:100%;height:33px;overflow:hidden;border-radius:20px;border: 1px solid #e2e2e2;}
.searchform input{font-size:12px;color:#555;line-height:33px;height:33px;padding:0;margin:0}
.searchform .searchfield{background:#fbfbfb;padding:0 0 0 16px;margin:0;width:100%;height:33px;border:0;outline:0;line-height:30px}
@media screen and (max-width: 1024px) {
.header-wrapper{width:100%}
}
@media screen and (max-width: 800px) {
#head-sticky{position:relative}
.header-wrapper{width:100%}
#header{float:left;width:40%;margin:5px 0 0 10px;padding:0;height:0}
.boxsearch{width:50%}
}
@media screen and (max-width: 603px) {
.boxsearch{width:95%;clear:both;}
#header h1, #header h2, #header p {line-height: normal;width: 260px;text-align: center;margin: 0 auto;}
#header {float: none;width: 100%;margin: 0;padding: 0;height: auto;}
#header-inner {margin: 0;padding: 0;width:100%}
.showhide {float: none;padding: 5px;margin: 30px 0 0 0;width: 100%;text-align: center;display: block;}
.boxsearch {width: 90%;clear: both;padding: 0;}
}
@media screen and (max-width: 480px) {
.boxsearch{width:28%}
}
@media screen and (max-width: 414px) {
.boxsearch{width:98%;padding-bottom:10px;padding-top:8px}
}
@media screen and (max-width: 320px) {
.boxsearch{width:98%;padding-bottom:10px;padding-top:25px}
.showhide{margin:3px 0 0 10px}
}
@media screen and (max-width: 275px) {
.boxsearch{width:70%}
}
@media screen and (max-width: 240px) {
.boxsearch{width:70%}
#header h1,#header p{font-size:20px}
#header .description{font-size:8.6px;line-height:12px}
}
@media screen and (max-width: 176px) {;
.boxsearch{width:60%}
}
HTML:
<div id='head-sticky'>
<div class='headerpic-wrapper'>
<div class='header-wrapper'>
<b:section class='logo-wrapper' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Starter Template (Header)' type='Header'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>464</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'>
<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>
<!--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:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>
<div class='showhide'>
<div id='fawesomeicons'>
<a href='URL-HERE' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a>
<a href='URL-HERE' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>
<a href='URL-HERE' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest'/></a>
<a href='URL-HERE' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/></a>
<a href='URL-HERE' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></a>
<a href='URL-HERE' rel='nofollow' target='_blank' title='RSS'><i class='fa fa-rss'/></a>
</div>
</div>
<div class='boxsearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search...'/>
</form>
</div>
</div>
</div>
<!-- /header-wrapper -->
</div>
<div class='clear'/>
JS:
<script type='text/javascript'>
$(window).scroll(function() {if ($(window).scrollTop() > 10) {$('#head-sticky').addClass('floatingNav');} else {$('#head-sticky').removeClass('floatingNav');}});</script>
========================
MENU
CSS:
.topnav{overflow:hidden;background-color:#333;max-width: 980px;margin: 0 auto;margin-bottom:20px;}
.topnav a{float:left;display:block;color:#f2f2f2;text-align:center;padding:10px 15px;text-decoration:none;font-size:17px}
.active{background-color:#4CAF50;color:#fff}
.topnav .icon{display:none}
.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{font-size:17px;border:none;outline:none;color:#fff;padding:10px 15px;background-color:inherit;font-family:inherit;margin:0}
.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}
.dropdown-content a{float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left}
.topnav a:hover,.dropdown:hover .dropbtn{background-color:#555;color:#fff}
.dropdown-content a:hover{background-color:#ddd;color:#000}
.dropdown:hover .dropdown-content{display:block}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child),.dropdown .dropbtn{display:none}
.topnav a.icon{float:right;display:block}
.topnav.responsive{position:relative}
.topnav.responsive .icon{position:absolute;right:0;top:0}
.topnav.responsive a{float:none;display:block;text-align:left}
.topnav.responsive .dropdown{float:none}
.topnav.responsive .dropdown-content{position:relative}
.topnav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}
}
HTML:
<div class='topnav' id='myTopnav'>
<a class='active' expr:href='data:blog.homepageUrl'>Home</a>
<a href='/p/about.html'>About</a>
<a href='/p/kontak.html'>Kontak</a>
<a href='/search/label/News'>News</a>
<div class='dropdown'>
<button class='dropbtn'>Dropdown
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
<a href='#'>Link 4</a>
<a href='#'>Link 5</a>
</div>
</div>
<a href='#about'>Menu</a>
<a href='#news'>Menu Deui</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'>☰</a>
</div>
<div class='clear'/>
JS:
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
===============
Featured Post: Gambar, Judul, Summary/Snippet
-------------------------
<b:if cond='data:view.isHomepage'>
<style>
.FeaturedPost h2 {display:none}
.FeaturedPost h3 {color: #333;font-size: 1.6em;line-height: normal;}
.post-summary {border-bottom: 1px solid #eee;padding-bottom: 5px;}
.post-summary p {margin: 10px 0;font-size: 95%;}
.post-summary .image {width: 100%;height: 330px;margin: 5px 0;object-fit:cover;}
@media screen and (max-width:800px) {
.post-summary {margin: 0 auto;padding: 0 10px;}
.post-summary .image {width: 100%;height: 250px;margin: 0 auto;padding:0;}
.post-summary p {line-height:normal;font-size:95%}
}
@media screen and (max-width:600px) {
.post-summary .image {height: 200px;}
.post-summary h3 {font-size:17px}
.post-summary {margin-bottom: 20px;}
}
@media screen and (max-width:480px) {
.post-summary .image {height: 170px;}
}
@media screen and (max-width:360px) {}
</style>
</b:if>
0 Comments