Cara Membuat Header Blog Mirip dengan Template VioMagz Lengkap

Bisa Oi - Kalian tahu apa itu Header ? Dalam dunia blogger pastinya kalian pernah melihat saat di blog sendiri atau orang lain pada bagian atas situs tersebut. Nah bisanya header ini memiliki beberapa bagian seperti adanya beberapa pilihan menu navigasi yang tersedia dan logo atau gambar yang terpasang sesuai dengan nama tema situs tersebut. Jadi, Header merupakan area atas dari sebuah situs blog yang berisikan logo atau gambar dan beberapa pilihan menu yang memungkinkan kalian bisa mengakses situs tersebut dengan mudah.

Cara Membuat Header Blog Mirip dengan Template VioMagz Lengkap

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 */
/* 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=&quot;search&quot;] {
 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: &quot;+&quot;;
 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:&#39;&#39;
}
#cssmenu > ul > li.has-sub > a:before {
 position: absolute;
 top: 19px;
 right: 14px;
 display: block;
 width: 2px;
 height: 8px;
 background: #fff;
 content:&#39;&#39;;
}
#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:&#39;&#39;
}
#cssmenu ul ul li.has-sub > a:before {
 position: absolute;
 top: 13px;
 right: 14px;
 display: block;
 width: 2px;
 height: 8px;
 background: #888;
 content:&#39;&#39;;
}
#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:&#39;&#39;
 }
 .button:before {
  position: absolute;
  top: 14px;
  right: 0px;
  display: block;
  height: 3px;
  width: 20px;
  background: #fff;
  content:&#39;&#39;
 }
 .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:&#39;&#39;
 }
 #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:&#39;&#39;
 }
 #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=&quot;search&quot;] {
  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;
 }
}
4. Setelah itu lanjut kelangkah berikutnya yakni, salin kode dibawah dan letakkan tepat di bawah kode <body> atau <body.... .
<div id='header-container'> 
  <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 == &quot;BEHIND&quot;'>
      <!--
      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='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' 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 != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <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 != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <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'>&#215;</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>
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>.
<script>
//<![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>
6. Terakhir save atau simpan template kalian dan lihat hasilnya.

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.

Post a Comment

0 Comments