Dalam launching template terbaru Mas Sugeng yang memiliki kriteria template responsive dan fast loading membuat banyak blogger yang tertarik menggunakan template ini. VioMagz begitu sebutannya, banyak sekali keunggulan template ini membuat para blogger semakin percaya akan situs yang dibuat makin sukses dan banyak pengunjungnya.
Template ini memiliki tampilan yang simple dan saat dipasang terlihat sangat clean serta tidak terlalu banyak akan widget yang terpasang. Lebih utamanya lagi memudahkan bagi para Adsense Pemula yang dimudahkan dalam pemasangan kode iklan dilaman postingan situs mereka.
Kali ini bagi kalian yang ingin merubah Header blog ingin seperti template VioMagz agar menjadikan blog kalian semakin baik penampilannya. Sebelumnya karena template yang di luncurkan ini untuk premium maka bagi para blogger yang ingin bisa membuat header mirip template VioMagz ini bisa mengikuti langkah-langkah berikut.
Cara Membuat Header Blog Mirip VioMagz
Header yang akan terpasang ini sudah terdapat beberapa pilihan menu yang dapat kalian rubah sesuai dengan keinginan. Dengan begitu pengunjung dapat mengakses blog kalian dengan mudah. Langsung saja ikuti langkah membuat header blog mirip dengan VioMagz dibawah ini.
1. Login ke akun Blogger kalian terlebih dahulu. Lalu pilih menu Theme atau Tema.
2. Setelah kalian pilih maka akan muncul laman tersebut. Selanjutnya pilih menu Edit HTML yang berfungsi untuk melakukan setting atau pengaturan pada tampilan blog kalian.
3. Salin kode dibawah dan letakkan tepat diatas menu ]]></b:skin> atau </style>.
/* Menu Navigasi VioMagz BISA OI */4. Setelah itu lanjut kelangkah berikutnya yakni, salin kode dibawah dan letakkan tepat di bawah kode <body> atau <body.... .
/* Header */
#header-container {
background:#00acff;
color: #fff;
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
#header-wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.header {
max-width: 400px;
float: left;
margin-right: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header h1.title, .header p.title {
font: roboto;
color:#fff;
margin: 0;
text-transform: uppercase;
padding: 9px 0;
}
.header .description {
color: #fff;
margin: -10px 0 4px 0;
padding: 0;
font-size: 0.7em;
display: none;
}
.header a, .header a:hover {
color: #fff;
}
.header img {
display:block;
width: auto;
margin: 11px 0;
max-height: 24px;
}
/* SEARCH FORM */
.search-icon {
position: absolute;
top: 11px;
right: 0px;
font-size: 19px;
}
.search-icon a {
color: #fff;
}
#searchfs {
position: fixed;
z-index:9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
#searchfs.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 9999;
}
#searchfs input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 70%;
margin-left: 15%;
color: rgb(255, 255, 255);
background: transparent;
border-top: 1px solid rgba(255, 255, 255, .8);
border-bottom: 2px solid rgba(255, 255, 255, .5);
border-left: 0px solid transparent;
border-right: 0px solid transparent;
font-size: 40px;
text-align: center;
outline: none;
padding: 10px;
}
#searchfs .close {
position: fixed;
top: 20px;
right: 30px;
color: #fff;
background-color: transparent;
opacity: 0.8;
font-size: 40px;
border: none;
outline: none;
}
#searchfs .close:hover {
cursor: pointer;
}
/* NAV MENU */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
float: left;
}
#cssmenu ul {
margin: 0;
display: block;
}
#cssmenu:after,#cssmenu > ul:after {
content: "+";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu > ul > li {
float: left;
margin: 0;
}
#cssmenu > ul > li > a {
padding: 17px;
font:roboto;
letter-spacing: 0.8px;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: #fff;
}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
background: rgba(64,64,64,0.05);
-webkit-transition: background .2s ease;
-ms-transition: background .2s ease;
transition: background .2s ease;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content:''
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content:'';
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 1;
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
}
#cssmenu ul ul li {
height: 0;
background :#f8f8f8;
margin: 0;
}
#cssmenu ul ul li:hover {
background: #efefef;
}
#cssmenu li:hover > ul {
left: auto
}
#cssmenu li:hover > ul > li {
height: 33px
}
#cssmenu ul ul ul{
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150,150,150,0.15);
padding: 10px 25px 10px 15px;
max-width: 100%;
min-width: 150px;
font-size: 12px;
text-decoration: none;
color: #888;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #888;
content:''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #888;
content:'';
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #efefef;
}
#cssmenu ul ul ul li.active a {
border-left:1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
border-top: 1px solid #333
}
@media screen and (min-width:800px){
#cssmenu ul {
display: block !important;
}
}
@media screen and (max-width:800px){
#cssmenu {
float: none;
}
#cssmenu ul {
background: #f8f8f8;
width: 100%;
display: none
}
#cssmenu ul ul {
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #efefef;
background: #f8f8f8;
}
#cssmenu ul ul li, #cssmenu li:hover > ul > li {
height: auto
}
#cssmenu ul li a, #cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
color: #888 !important;
}
#cssmenu > ul > li {
float: none
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul, #cssmenu ul ul ul{
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before{
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 23px;
color: #fff;
font-size: 12px;
font-weight: 500
}
.button {
width: 20px;
height: 46px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 2;
}
.button:after {
position: absolute;
top: 21px;
right: 0px;
display: block;
height: 4px;
width: 20px;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
content:''
}
.button:before {
position: absolute;
top: 14px;
right: 0px;
display: block;
height: 3px;
width: 20px;
background: #fff;
content:''
}
.button.menu-opened:after {
top: 21px;
border: 0;
height: 3px;
width: 20px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.button.menu-opened:before {
top: 21px;
background: #fff;
width: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #efefef;
height: 38px;
width: 38px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: rgba(64,64,64,0.05);
}
#cssmenu ul ul .submenu-button {
height: 32px;
width: 32px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 19px;
right: 16px;
width: 8px;
height: 2px;
display: block;
background: #888;
content:''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #888
}
#cssmenu .submenu-button:before {
position: absolute;
top: 16px;
right: 19px;
display: block;
width: 2px;
height: 8px;
background: #888;
content:''
}
#cssmenu ul ul .submenu-button:before{
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before{
display: none
}
#cssmenu ul ul ul li.active a{
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
border-top: none
}
}
@media screen and (max-width:1000px) {
#header-wrapper{
padding-left: 30px;
padding-right: 30px;
}
}
@media only screen and (max-width:800px){
#header-wrapper {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
#cssmenu > ul > li > a {
padding: 12px 20px;
}
.button {
margin-right: 20px;
}
.header {
max-width: 100%;
position: absolute;
top: 0;
left: 20px;
z-index: 1;
}
.search-icon {
right: 55px;
}
}
@media only screen and (max-width:640px){
#cssmenu > ul > li > a {
padding: 12px 15px;
}
.button {
margin-right: 15px;
}
.header {
left: 15px;
}
.search-icon {
right: 50px;
}
}
@media only screen and (max-width:480px){
#cssmenu > ul > li > a {
padding: 12px 12px;
}
.button {
margin-right: 12px;
}
.header {
left: 12px;
max-width: 70%;
}
#searchfs input[type="search"] {
font-size: 26px;
}
.search-icon {
right: 47px;
}
}
@media screen and (max-width:320px){
#cssmenu > ul > li > a {
padding: 12px 10px;
}
.button {
margin-right: 10px;
}
.header {
left: 10px;
}
.search-icon {
right: 45px;
}
}
<div id='header-container'>5. Setelah kalian meletakkan kode tersebut, kemudian salin kode script dibawah ini dan letakkan diatas kode </body> yang biasa terletak paling bawah sebelum kode </HTML>.
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Zergu (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'>-1</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'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<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 cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</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.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'/>
<!-- menu navigasi header start -->
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
<li><a href='#'>SubMenu4</a></li>
</ul>
</li>
</ul>
<!-- menu navigasi header end -->
</nav>
<div class='search-icon'>
<a href='#searchfs'><i class='fa fa-search'/></a>
</div>
<div id='searchfs'>
<button class='close' type='button'>×</button>
<form action='/search' id='search-form' method='get'>
<input name='q' placeholder='type to search' type='search' value=''/>
<input name='max-results' type='hidden' value='7'/>
</form>
</div>
<div class='clear'/>
</header>
</div>
<script>6. Terakhir save atau simpan template kalian dan lihat hasilnya.
//<![CDATA[
/*
Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);
// search form
$(function(){$('a[href="#searchfs"]').on("click",function(e){e.preventDefault(),$("#searchfs").addClass("open"),$('#searchfs > form > input[type="search"]').focus()}),$("#searchfs, #searchfs button.close").on("click keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$(this).removeClass("open")})});
// nav menu
!function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>
Dengan terpasangnya header ini memungkinkan tampilan blog kalian akan semakin simple dan mempermudah pengunjung untuk menjelajah lebih luas setiap artikel yang tersedia. Demikian cara membuat header blog mirip dengan template VioMagz. Semoga tutorial ini bermanfaat bagi kalian semua.
0 Comments