How To Create A Sticky Header In Blogger
Team TeachWiki
Today in this post we will see how we can add sticky header to our website. And at the same time we will try to figure out how we can benefit from it. As we point out in all our posts, the blogger doesn't give us much widgets, Using which we can make our blog more modern and better than other blogs.And because of that we have to work very hard and search on Google a lot and search on YouTube to see how we can moderate our blog site. that's why this blog post has been written that you can easily add header in your blog and make your blogger site as modern as any other websites.
So let's learn more
What is a website header?
Header is the toppest part of your website where you can share some specific links to your visitors. And by clicking on these links, your visitor can easily go to the page of your choice. In this way Header plays a very important role in conveying your important message to your visitors.
Is sticky header better than fixed header?
Yes, Friends, if you look, there is a very normal difference between sticky Header and fixed header. But the difference in performance between the sticky header and fixed header is like the difference between sky and earth.Because sticky header helps visitors to go to another page even while scrolling While Static header does not provide this assistance.
Attention! Before doing any kind of changes in your site's template take a backup first. This will helps you to restore your theme later.
Create a sticky header?
- Open your blog or - Create account
- Go to Theme > edit html
- Paste given css code before closing head tag.
<style id='page-skin-1' type='text/css'>body:not(.darkmode){--color-black-trans-12:rgba(0,0,0,.12);--color-preloader:#1a73e8;--color-scroll-indicator:#1a73e8;--color-key:#1a73e8;--color-background:#ffffff;--color-text:#202124;--color-meta:#5f6368;--color-border:#dadce4;--color-button:#1a73e8;--color-button-hover:#1a73e81F;--color-button-active:#1a73e82E;--color-button-icon:#5f6368;--color-button-icon-hover:#2021241F;--color-button-icon-active:#2021242E;--color-dropdown-background:#ffffff;--color-dropdown-text:#5f6368;--color-dropdown-hover:#2021241F;--color-dropdown-active:#2021242E;--color-dialog-background:#ffffff;--color-dialog-title:#202124;--color-dialog-content:#5f6368;--color-dialog-border:#dadce4;--color-ripple:#2021242E;--color-input-text:#202124;--color-input-border:#dadce4;--color-input-border-focus:#1a73e8;--color-gadget-title:#202124;--color-gadget-indicator:#1a73e8;--color-gadget-border:#dadce4;--color-gadget-post-title:#202124;--color-gadget-post-title-hover:#1a73e8;--color-gadget-post-meta:#5f6368;--color-header-background:#ffffff;--color-header-border:#dadce4;--color-header-text:#5f6368;--color-header-text-trans-12:#5f63681F;--color-header-text-trans-18:#5f63682E;--color-header-button:#5f6368;--color-header-button-hover:#2021241F;--color-header-button-active:#2021242E;--color-navigation-drawer-background:#ffffff;--color-navigation-drawer-text:#5f6368;--color-navigation-drawer-hover:#2021241F;--color-navigation-drawer-active:#2021242E;--color-navigation-drawer-selected:#1a73e8;--color-navigation-drawer-focus:#1a73e81F;--color-navigation-drawer-border:#dadce4;--color-navigation-overflow-background:#ffffff;--color-navigation-overflow-text:#5f6368;--color-navigation-overflow-hover:#2021241F;--color-navigation-overflow-active:#2021242E;--color-index-background:#ffffff;--color-index-border:#dadce4;--color-index-label:#5f6368;--color-index-label-hover:#1a73e8;--color-index-title:#202124;--color-index-title-hover:#1a73e8;--color-index-meta:#5f6368;--color-index-snippet:#5f6368;--color-index-jumplink:#1a73e8;--color-index-comment-link:#1a73e8;--color-index-pager:#1a73e8;--color-index-pager-hover:#1a73e81F;--color-index-pager-active:#1a73e82E;--color-item-breadcrumb:#5f6368;--color-item-title:#202124;--color-item-snippet:#5f6368;--color-item-meta:#5f6368;--color-item-border:#dadce4;--color-item-text:#202124;--color-item-link:#1a73e8;--color-item-link-hover:#1a73e81F;--color-item-inline-code:#20212410;--color-item-code-block-background:#202124;--color-item-code-block:#ffffff}
</style>
<style>.visibility_hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:0;overflow:hidden;position:absolute;padding:0;width:0}hr{color:var(--color-border);border:none;height:1px;background-color:var(--color-border);margin:8px 0}.fab_container{-webkit-box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);bottom:24px;border-radius:100px;cursor:pointer;color:var(--color-button-icon);background-color:var(--color-background);overflow:hidden;position:fixed;-webkit-transition:opacity .28s ease-in-out,-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);transition:opacity .28s ease-in-out,-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);-o-transition:box-shadow .28s cubic-bezier(.4,0,.2,1),opacity .28s ease-in-out;transition:box-shadow .28s cubic-bezier(.4,0,.2,1),opacity .28s ease-in-out;transition:box-shadow .28s cubic-bezier(.4,0,.2,1),opacity .28s ease-in-out,-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);z-index:997;right:24px}.button_icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background-color:transparent;border-radius:100px;cursor:pointer;color:var(--color-button-icon);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:0;outline:none;overflow:hidden;padding:8px;position:relative}.button_icon.button_small{padding:8px}.button_icon:hover,.button_icon:focus{background-color:var(--color-button-icon-hover)}.button_icon:active{background-color:var(--color-button-icon-active)}.button_icon svg{fill:currentColor;height:inherit;width:inherit}.dropdown_container{position:relative}.dropdown_container .dropdown{top:0}.dropdown{background-color:var(--color-dropdown-background);border-radius:8px;-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);-webkit-box-sizing:border-box;box-sizing:border-box;max-height:60vh;max-width:320px;min-width:124px;overflow:hidden;overflow-y:auto;opacity:0;position:absolute;padding:8px 0;scrollbar-width:thin;-webkit-transition:opacity .4s cubic-bezier(.25,.8,.25,1),visibility .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:opacity .4s cubic-bezier(.25,.8,.25,1),visibility .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);-o-transition:transform .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1),visibility .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1),visibility .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1),visibility .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);visibility:hidden;z-index:998;transform-origin:left top}.dropdown.active{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);visibility:visible}.dropdown ul,.dropdown li{list-style:none;margin:0;padding:0}.dropdown .dropdown_item{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;border:none;color:var(--color-dropdown-text);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;outline:none;padding:8px 16px;position:relative;text-decoration:none;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.dropdown .dropdown_item:hover,.dropdown .dropdown_item:focus,.dropdown .selected .dropdown_item{background-color:var(--color-dropdown-hover)}.dropdown .dropdown_item:active{background-color:var(--color-dropdown-active)}.nav ul .drawer_menu_link~ul.drawer_sub li{overflow:hidden;-webkit-transition:max-height .9s cubic-bezier(.24,1,.32,1);-o-transition:max-height .9s cubic-bezier(.24,1,.32,1);transition:max-height .9s cubic-bezier(.24,1,.32,1)}.nav ul .drawer_menu_link:not(.visible)~ul.drawer_sub li{max-height:0}.nav ul .drawer_menu_link.visible~ul.drawer_sub li{max-height:60px}.nav ul .toggle>.drawer_menu_link::after{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPScjOWFhMGE2Jz48cGF0aCBkPSJNNywxMEwxMiwxNUwxNywxMEg3WiIgLz48L3N2Zz4=);-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:24px;margin:0 8px;-webkit-transition:-webkit-transform .2s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .2s cubic-bezier(.25,.8,.25,1);-o-transition:transform .2s cubic-bezier(.25,.8,.25,1);transition:transform .2s cubic-bezier(.25,.8,.25,1);transition:transform .2s cubic-bezier(.25,.8,.25,1),-webkit-transform .2s cubic-bezier(.25,.8,.25,1);width:24px}.nav .nav_drawer_menu .drawer_menu_link.visible::after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.nav .nav_drawer_menu ul ul .drawer_menu_link{padding:10px 0 10px 52px}.header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-header-background);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:64px;position:fixed;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:998;box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)}.header .button_icon{color:var(--color-header-button)}.header .button_icon:hover,.header .button_icon:focus{background-color:var(--color-header-button-hover)}.header .button_icon:active{background-color:var(--color-header-button-active)}.header .header_primary,.header .header_secondary{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%}.header .header_primary{padding:8px 8px 0 8px}.header .header_secondary{padding:0 8px 8px 8px}.header .header_section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.header .header_section.header_start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:0 8px 0 0}.header .header_section.header_center{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.header .header_section.header_end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:0 0 0 8px}.header .header_section.header_start,.header .header_section.header_end{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;width:100%}.header .header_primary .header_section.header_start,.header .header_primary .header_section.header_end{min-width:200px}.header .header_section.header_start .Header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.header .Header .button_icon{margin:0 4px 0 0}.header .Header a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-header-text);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:18px;font-weight:500;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none}.header .Header h1{color:inherit;display:-webkit-box;font-size:inherit;font-weight:inherit;line-height:1.5;margin:0;overflow:hidden;position:relative;-o-text-overflow:ellipsis;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:1}.header .Header img{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:26px;overflow:hidden;text-indent:-999px;width:auto;margin:0 8px 0 0}.header .header_center form{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;background-color:var(--color-header-text-trans-12);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:780px;width:100%;-webkit-transition:-webkit-box-shadow 280ms ease-in-out;transition:-webkit-box-shadow 280ms ease-in-out;-o-transition:box-shadow 280ms ease-in-out;transition:box-shadow 280ms ease-in-out;transition:box-shadow 280ms ease-in-out,-webkit-box-shadow 280ms ease-in-out}.header .header_center form:focus-within{background-color:var(--color-header-text-trans-18);-webkit-box-shadow:0 1px 1px 0 rgba(65,69,73,.3),0 1px 3px 1px rgba(65,69,73,.15);box-shadow:0 1px 1px 0 rgba(65,69,73,.3),0 1px 3px 1px rgba(65,69,73,.15)}.header .header_center input{background-color:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:var(--color-header-text);font-family:inherit;font-size:14px;line-height:48px;margin:0 4px;outline:none;padding:0;width:100%}.header .header_center .button_icon{margin:0 4px}.header .header_end .button_icon:not(:last-child){margin:0 2px}.header .header_center .button_close_search,.header .header_end .button_toggle_search{display:none}body.drawer_menu_active:not(.error_page) .nav .nav_drawer_menu,body.error_page:not(.drawer_menu_active) .nav .nav_drawer_menu{transform:translateX(-300px);border:none;box-shadow:none}.nav .nav_drawer_menu{-webkit-box-sizing:border-box;box-sizing:border-box;bottom:0;background-color:var(--color-navigation-drawer-background);height:calc(100vh - 64px);max-width:300px;overflow:hidden;position:fixed;padding:14px 0;scrollbar-width:thin;-webkit-transition:border-width .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);transition:border-width .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);-o-transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),border-width .28s cubic-bezier(.4,0,.2,1);transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),border-width .28s cubic-bezier(.4,0,.2,1);transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),border-width .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);top:64px;width:100%;z-index:997;left:0;border-right:1px solid var(--color-navigation-drawer-border);}.nav .nav_drawer_menu:hover{overflow-y:auto}.nav .nav_drawer_menu ul{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0}.nav .nav_drawer_menu>ul>li::after{background-color:var(--color-navigation-drawer-border);display:inherit;height:1px;margin:6px 0;width:100%}.nav .nav_drawer_menu .drawer_menu_link{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;background-color:transparent;color:var(--color-navigation-drawer-text);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:44px;max-width:285px;overflow:hidden;outline:none;position:relative;text-decoration:none;-webkit-transition:background-color .4s;-o-transition:background-color .4s;transition:background-color .4s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;border-radius:0 25px 25px 0;padding:10px 0 10px 16px}.nav .nav_drawer_menu .drawer_menu_link:hover,.nav .nav_drawer_menu .drawer_menu_link:focus{background-color:var(--color-navigation-drawer-hover)}
.nav .nav_drawer_menu .drawer_menu_link:active{background-color:var(--color-navigation-drawer-active)}.nav .nav_drawer_menu .selected .drawer_menu_link{background-color:var(--color-navigation-drawer-focus);color:var(--color-navigation-drawer-selected);font-weight:500}.nav .nav_drawer_menu .selected .drawer_menu_link::before{background-color:var(--color-navigation-drawer-selected);content:'';height:100%;position:absolute;width:4px;left:0}.nav .drawer_menu_link .drawer_menu_item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.nav .drawer_menu_item svg{fill:currentColor;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:24px;width:24px;margin:0 12px 0 0}body.error_page.drawer_menu_active .backdrop{visibility:visible}.nav .overflow_menu{background-color:var(--color-navigation-overflow-background);margin:8px;position:fixed;top:0;right:0;transform-origin:right top}.nav .overflow_menu .dropdown_item{color:var(--color-navigation-overflow-text)}.nav .overflow_menu .dropdown_item svg{fill:currentColor;width:18px;height:18px;margin:0 8px 0 0}.nav .overflow_menu .dropdown_item:hover,.nav .overflow_menu .dropdown_item:focus,.nav .overflow_menu .selected .dropdown_item{background-color:var(--color-navigation-overflow-hover)}.nav .overflow_menu .dropdown_item:active{background-color:var(--color-navigation-overflow-active)} .backdrop{bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:rgba(255,255,255,.7);display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;left:0;opacity:0;padding:14px;position:fixed;right:0;top:0;-webkit-transition:opacity .25s ease-in-out,visibility .25s ease-in-out;-o-transition:opacity .25s ease-in-out,visibility .25s ease-in-out;transition:opacity .25s ease-in-out,visibility .25s ease-in-out;visibility:hidden;z-index:996}@media screen and (max-width:1366px){body.drawer_menu_active .backdrop,body.search_active .backdrop{opacity:1;visibility:visible}} @media screen and (max-width: 1200px) {body.search_active .header_section:not(.header_center),body:not(.search_active) .header .header_center{display:none}.header .header_end .button_toggle_search,.header .header_center .button_close_search{display:inherit}body:not(.drawer_menu_active) .nav .nav_drawer_menu{border:none;-webkit-box-shadow:none;box-shadow:none;transform:translateX(-300px)}body.drawer_menu_active:not(.error_page) .nav .nav_drawer_menu{transform:translateX(0);box-shadow:0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);border:none}}@media screen and (max-width: 980px) {.button_icon{padding:8px}.header{min-height:56px}.header .header_primary .header_section.header_start,.header .header_primary .header_section.header_end{min-width:0;width:auto}.header .header_center form{background-color:transparent} body.drawer_menu_active .backdrop,body.search_active .backdrop{opacity:1;visibility:visible}.header .header_center form:focus-within,body.darkmode .header .header_center form:focus-within{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.header .header_center input{line-height:40px}.header .header_center .button_icon{margin:0}.nav .nav_drawer_menu{height:calc(100vh - 56px);overflow-y:auto;top:56px}.nav .nav_drawer_menu ul ul .drawer_menu_link{padding:10px 0 10px 52px}.nav .nav_drawer_menu .drawer_menu_link{padding:10px 0 10px 16px}.nav .drawer_menu_item svg{margin:0 12px 0 0}}
</style>
- Paste given html file after body tag
<header class='header' id='header'>
<div class='header_primary'>
<div class='header_section header_start'>
<b:section class='header_widget_logo_title_section' id='header_widget_logo_title_section' name='Header Logo and Title'>
<b:widget id='Header1' locked='false' title='InThisPost (Header)' type='Header' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://nationaltools.github.io/apps/be-text.png</b:widget-setting>
<b:widget-setting name='displayHeight'>98</b:widget-setting>
<b:widget-setting name='sectionWidth'>725</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>429</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title'/>
<b:include cond='data:imagePlacement != "REPLACE"' name='description'/>
<b:include cond='data:imagePlacement == "BEHIND"' name='behindImageStyle'/>
</b:includable>
<b:includable id='behindImageStyle'>
<b:if cond='data:sourceUrl'>
<b:include cond='data:this.image' data='{image: data:this.image, selector: "header .Header"}' name='responsiveImageStyle'/>
</b:if>
</b:includable>
<b:includable id='description'>
<b:if cond='data:this.description'>
<div class='headerDesc hidden'><data:this.description/></div>
</b:if>
</b:includable>
<b:includable id='image'>
<!--[ Header image ]-->
<button aria-label='Menu' class='button_icon button_menu' id='button_menu' type='button'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/></svg></button>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><img expr:alt='data:title' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title' height='400' width='1200'/><b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/></a>
</b:includable>
<b:includable id='title'><h1 class='visibility_hidden'><b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'><data:title/></b:tag></h1>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='header_section header_center'>
<form action='/search' target='_top'>
<button aria-label='Search this blog' class='button_icon button_small button_search' type='submit'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/></svg></button>
<input aria-label='Cari blog ini' autocomplete='off' class='search_input' id='search_input' name='q' oninput='this.setCustomValidity('')' placeholder='Cari blog ini' required='' value=''/>
<button aria-label='Cari blog ini' class='button_icon button_small button_close_search' id='button_close_search' type='button'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/></svg></button>
</form>
</div>
<div class='header_section header_end'>
<button aria-label='Cari blog ini' class='button_icon button_toggle_search' id='button_toggle_search' type='button'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/></svg></button>
<button aria-controls='PageList999' aria-expanded='false' aria-haspopup='listbox' aria-label='More Menu' class='button_icon button_overflow_menu' data-toggle-class-on-target='active' data-toggle-escape='' data-toggle-outside='' data-toggle-target='#PageList999' id='button_overflow_menu' type='button'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12 16C13.1 16 14 16.9 14 18S13.1 20 12 20 10 19.1 10 18 10.9 16 12 16M12 10C13.1 10 14 10.9 14 12S13.1 14 12 14 10 13.1 10 12 10.9 10 12 10M12 4C13.1 4 14 4.9 14 6S13.1 8 12 8 10 7.1 10 6 10.9 4 12 4M6 16C7.1 16 8 16.9 8 18S7.1 20 6 20 4 19.1 4 18 4.9 16 6 16M6 10C7.1 10 8 10.9 8 12S7.1 14 6 14 4 13.1 4 12 4.9 10 6 10M6 4C7.1 4 8 4.9 8 6S7.1 8 6 8 4 7.1 4 6 4.9 4 6 4M18 16C19.1 16 20 16.9 20 18S19.1 20 18 20 16 19.1 16 18 16.9 16 18 16M18 10C19.1 10 20 10.9 20 12S19.1 14 18 14 16 13.1 16 12 16.9 10 18 10M18 4C19.1 4 20 4.9 20 6S19.1 8 18 8 16 7.1 16 6 16.9 4 18 4Z'/></svg></button></div></div>
<div class='header_secondary'/>
<div class='scroll_indicator'/>
</header>
<nav class='nav' id='nav'>
<b:section class='nav_widget_section' id='nav_widget_section' name='Nav Drawer and More Menu'>
<b:widget id='LinkList999' locked='false' title='' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='text-10'>_Left to Right</b:widget-setting>
<b:widget-setting name='link-17'>/search/label/apps</b:widget-setting>
<b:widget-setting name='link-16'>/search?q=.</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>javascript:;</b:widget-setting>
<b:widget-setting name='link-13'>/search?q=.</b:widget-setting>
<b:widget-setting name='link-2'>m/2021/</b:widget-setting>
<b:widget-setting name='link-12'>/search?q=.</b:widget-setting>
<b:widget-setting name='link-15'>/search?q=.</b:widget-setting>
<b:widget-setting name='link-0'>https://inthispost.blogspot.com/</b:widget-setting>
<b:widget-setting name='link-14'>/search?q=.</b:widget-setting>
<b:widget-setting name='link-11'>javascript:;</b:widget-setting>
<b:widget-setting name='link-10'>/?hl=ar</b:widget-setting>
<b:widget-setting name='text-9'>_Right to Left</b:widget-setting>
<b:widget-setting name='link-9'>/</b:widget-setting>
<b:widget-setting name='text-8'>Site Direction</b:widget-setting>
<b:widget-setting name='link-7'>/p/request-feedback.html</b:widget-setting>
<b:widget-setting name='link-8'>javascript:;</b:widget-setting>
<b:widget-setting name='link-5'>/2021/05/-informations.html</b:widget-setting>
<b:widget-setting name='link-6'>/search?q=.</b:widget-setting>
<b:widget-setting name='link-3'>/404</b:widget-setting>
<b:widget-setting name='link-4'>/search/label/Dokumentasi</b:widget-setting>
<b:widget-setting name='text-1'>Pages</b:widget-setting>
<b:widget-setting name='text-0'>Home</b:widget-setting>
<b:widget-setting name='text-3'>_Error Page</b:widget-setting>
<b:widget-setting name='text-2'>_Archive Page</b:widget-setting>
<b:widget-setting name='text-5'>_Item Page</b:widget-setting>
<b:widget-setting name='text-4'>_Label Page</b:widget-setting>
<b:widget-setting name='text-7'>_Static Page</b:widget-setting>
<b:widget-setting name='text-6'>_Search Page</b:widget-setting>
<b:widget-setting name='text-15'>_Contact Form</b:widget-setting>
<b:widget-setting name='text-16'>_YouTube</b:widget-setting>
<b:widget-setting name='text-17'><![CDATA[<svg width="24" height="24" viewBox="0 0 24 24"><path d="M2,3H8V5H4V19H8V21H2V3M7,17V15H9V17H7M11,17V15H13V17H11M15,17V15H17V17H15M22,3V21H16V19H20V5H16V3H22Z" /></svg>Shortcode PlayG]]></b:widget-setting>
<b:widget-setting name='text-11'>Shortcodes</b:widget-setting>
<b:widget-setting name='text-12'>_Alerts</b:widget-setting>
<b:widget-setting name='text-13'>_Accordion</b:widget-setting>
<b:widget-setting name='text-14'>_Button</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<b:class name='nav_drawer_menu'/>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<ul class='visibility_hidden'>
<b:loop values='data:links' var='link'><li><a class='drawer_menu_link' expr:href='data:link.target'><span class='drawer_menu_item'><data:link.name/></span></a></li></b:loop>
</ul>
</b:includable>
</b:widget>
<b:widget id='PageList999' locked='false' title='Pages' type='PageList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='pageListJson'><![CDATA[{"0":{"href":"https://inthispost.blogspot.com/","position":0,"title":"Home"}}]]></b:widget-setting>
<b:widget-setting name='homeTitle'>Home</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + "_select"'>
<b:loop values='data:links' var='link'>
<option expr:value='data:link.href'>
<b:attr cond='data:link.isCurrentPage' name='selected' value='selected'/>
<b:class cond='data:blog.url == data:link.target' name='selected'/>
<data:link.title/>
</option>
</b:loop>
</select>
<span class='pagelist-arrow'>&#9660;</span>
<b:else/>
<b:class name='overflow_menu dropdown'/>
<ul>
<b:loop values='data:links' var='link'><li><a class='overflow_menu_link dropdown_item' expr:href='data:link.href'><data:link.title/></a></li>
</b:loop>
</ul>
</b:if>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:include name='pageList'/>
</div>
</b:includable>
<b:includable id='overflowButton'>
<b:include name='verticalMoreIcon'/>
</b:includable>
<b:includable id='overflowablePageList'>
<div class='overflowable-container'>
<div class='overflowable-contents'>
<div class='container'>
<b:with value='true' var='overflow'>
<b:with value='"tabs"' var='pageListClass'>
<b:include name='pageList'/>
</b:with>
</b:with>
</div>
</div>
<div class='overflow-button hidden'>
<b:include name='overflowButton'/>
</div>
</div>
</b:includable>
<b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/>
<a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:includable>
<b:includable id='pageList'>
<ul>
<b:class cond='data:pageListClass'/>
<b:loop values='data:links' var='link'>
<b:include name='pageLink'/>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</nav>
- Paste given js file before closing body tag
<script>var Typo={elements:{elementHead:document.getElementsByTagName("head")[0],elementScript:document.getElementsByTagName("script")[0],elementButtonMenu:"#button_menu",elementButtonSearch:".button_toggle_search",elementButtonSearchClose:".button_close_search",elementSearchInput:".search_input",elementBackdrop:".backdrop",elementDrawerMenu:".nav .nav_drawer_menu"}};if(function(){"use strict";const e=document.documentElement.getAttribute("data-easy-toggle-state-custom-prefix")||"toggle",t=(t,r=(()=>e)())=>["data",r,t].filter(Boolean).join("-"),r=t("arrows"),n=t("class"),i=t("class-on-target"),o=t("class-on-trigger"),s="is-active",a=t("escape"),c=t("event"),l=t("group"),u=t("is-active"),d=t("modal"),g=t("outside"),m=t("outside-event"),h=t("radio-group"),b=t("target"),A=t("target-all"),f=t("target-next"),v=t("target-parent"),y=t("target-previous"),p=t("target-self"),w=t("state"),$=t("trigger-off"),S=new Event("toggleAfter"),E=new Event("toggleBefore"),L=(e,t)=>{const r=e?`[${e}]`:"";if(t)return[...t.querySelectorAll(r)];const s=[`[${n}]${r}`,`[${o}]${r}`,`[${i}][${b}]${r}`,`[${i}][${A}]${r}`,`[${i}][${f}]${r}`,`[${i}][${y}]${r}`,`[${i}][${v}]${r}`,`[${i}][${p}]${r}`].join().trim();return[...document.querySelectorAll(s)]},T=(e,t)=>e.dispatchEvent(t),q=e=>"easyToggleState_"+e,k=(e,t={"aria-checked":e[q("isActive")],"aria-expanded":e[q("isActive")],"aria-hidden":!e[q("isActive")],"aria-pressed":e[q("isActive")],"aria-selected":e[q("isActive")]})=>Object.keys(t).forEach(r=>e.hasAttribute(r)&&e.setAttribute(r,t[r])),B=(e,t,r=!1)=>`This trigger has the class name '${e}' filled in both attributes '${n}' and '${t}'. As a result, this class will be toggled ${r&&"on its target(s)"} twice at the same time.`,_=(e,t)=>(e.getAttribute(t)||"").split(" ").filter(Boolean),x=e=>{const t=e.hasAttribute(l)?l:h;return L(`${t}="${e.getAttribute(t)}"`).filter(e=>e[q("isActive")])},D=(e,t)=>{e||console.warn(`You should fill the attribute '${t}' with a selector`)},I=(e,t)=>{if(0===t.length)return console.warn(`There's no match with the selector '${e}' for this trigger`),[];const r=e.match(/#\w+/gi);return r&&r.forEach(e=>{const r=[...t].filter(t=>t.id===e.slice(1));r.length>1&&console.warn(`There's ${r.length} matches with the selector '${e}' for this trigger`)}),[...t]},O=(e,t)=>t.forEach(t=>{e.classList.toggle(t)}),M={},z=e=>document.addEventListener(e.getAttribute(m)||e.getAttribute(c)||"click",j,!1),j=e=>{const t=e.target,r=e.type;let s=!1;L(g).filter(e=>e.getAttribute(m)===r||e.getAttribute(c)===r&&!e.hasAttribute(m)||"click"===r&&!e.hasAttribute(c)&&!e.hasAttribute(m)).forEach(e=>{const r=t.closest(`[${w}="true"]`);r&&r[q("trigger")]===e&&(s=!0),s||e===t||e.contains(t)||!e[q("isActive")]||(e.hasAttribute(l)||e.hasAttribute(h)?C:K)(e)}),s||document.removeEventListener(r,j,!1);const a=t.closest(`[${n}][${g}],[${o}][${g}],[${i}][${g}]`);a&&a[q("isActive")]&&z(t)},H=e=>K(e.currentTarget[q("target")]),K=e=>{T(e,E);const t=(e=>{if(e.hasAttribute(n)&&e.getAttribute(n)&&(e.hasAttribute(o)||e.hasAttribute(i))){const t=_(e,o),r=_(e,i);_(e,n).forEach(n=>{t.includes(n)&&console.warn(B(n,o),e),r.includes(n)&&console.warn(B(n,i,!0),e)})}const t=[n,o,i].reduce((t,r)=>{const s=_(e,r);return(r===n||r===o)&&t.trigger.push(...s),(r===n||r===i)&&t.target.push(...s),t},{trigger:[],target:[]});return!t.trigger.length&&(e.hasAttribute(n)||e.hasAttribute(o))&&t.trigger.push(s),!t.target.length&&(e.hasAttribute(n)||e.hasAttribute(i))&&t.target.push(s),t})(e);return O(e,t.trigger),e[q("isActive")]=!e[q("isActive")],k(e),T(e,S),((e,t,r)=>(e=>{if(e.hasAttribute(b)||e.hasAttribute(A)){const t=e.getAttribute(b)||e.getAttribute(A);return D(t,e.hasAttribute(b)?b:A),I(t,document.querySelectorAll(t))}if(e.hasAttribute(v)){const t=e.getAttribute(v);return D(t,v),I(t,e.parentElement.querySelectorAll(t))}if(e.hasAttribute(p)){const t=e.getAttribute(p);return D(t,p),I(t,e.querySelectorAll(t))}return e.hasAttribute(y)?I("previous",[e.previousElementSibling].filter(Boolean)):e.hasAttribute(f)?I("next",[e.nextElementSibling].filter(Boolean)):[]})(e).forEach(n=>{T(n,E),n[q("isActive")]=!n[q("isActive")],k(n),r?n.classList.add(...t):O(n,t),e.hasAttribute(g)&&(n.setAttribute(w,e[q("isActive")]),n[q("trigger")]=e),e.hasAttribute(d)&&(n[q("isActive")]?(M[n]=(e=>t=>{const r=[...e.querySelectorAll("a[href], area[href], input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]")];if(!r.length||"Tab"!==t.key)return;const n=t.target,i=r[0],o=r[r.length-1];return-1===r.indexOf(n)?(t.preventDefault(),i.focus()):t.shiftKey&&n===i?(t.preventDefault(),o.focus()):t.shiftKey||n!==o?void 0:(t.preventDefault(),i.focus())})(n),document.addEventListener("keydown",M[n],!1)):(document.removeEventListener("keydown",M[n],!1),delete M[n])),T(n,S),((e,t)=>{const r=L($,e).filter(t=>!t.getAttribute($)||e.matches(t.getAttribute($)));0!==r.length&&(t[q("isActive")]?r.forEach(e=>{e[q("target")]||(e[q("target")]=t,e.addEventListener("click",H,!1))}):(r.forEach(e=>{e[q("target")]===t&&(e[q("target")]=null,e.removeEventListener("click",H,!1))}),t.focus()))})(n,e)}))(e,t.target,!1),(e=>{if(e.hasAttribute(g))return e.hasAttribute(h)?console.warn(`You can't use '${g}' on a radio grouped trigger`):e[q("isActive")]?z(e):void 0})(e)},C=e=>{const t=x(e);return 0===t.length?K(e):-1===t.indexOf(e)?(t.forEach(K),K(e)):-1===t.indexOf(e)||e.hasAttribute(h)?void 0:K(e)},Y=e=>((e[Symbol.iterator]?[...e]:[e]).forEach(e=>{e[q("unbind")]&&e[q("unbind")]()}),e),F=()=>{[...document.querySelectorAll(`[${i}]:not([${b}]):not([${A}]):not([${f}]):not([${y}]):not([${v}]):not([${p}])`)].forEach(e=>{console.warn(`This trigger has the attribute '${i}', but no specified target\n`,e)}),L(u).filter(e=>!e[q("isDefaultInitialized")]).forEach(e=>{if((e.hasAttribute(l)||e.hasAttribute(h))&&x(e).length>0)return console.warn(`Toggle group '${e.getAttribute(l)||e.getAttribute(h)}' must not have more than one trigger with '${u}'`);K(e),e[q("isDefaultInitialized")]=!0});const e=L().filter(e=>!e[q("isInitialized")]);return e.forEach(e=>{const t=t=>{t.preventDefault(),(e.hasAttribute(l)||e.hasAttribute(h)?C:K)(e)},r=e.getAttribute(c)||"click";e.addEventListener(r,t,!1),e[q("unbind")]=(()=>{e.removeEventListener(r,t,!1),e[q("isInitialized")]=!1}),e[q("isInitialized")]=!0}),L(a).length>0&&!document[q("isEscapeKeyInitialized")]&&(document.addEventListener("keydown",e=>{"Escape"!==e.key&&"Esc"!==e.key||L(a).forEach(e=>{if(e[q("isActive")])return e.hasAttribute(h)?console.warn(`You can't use '${a}' on a radio grouped trigger`):(e.hasAttribute(l)?C:K)(e)})},!1),document[q("isEscapeKeyInitialized")]=!0),L(r).length>0&&!document[q("isArrowKeysInitialized")]&&(document.addEventListener("keydown",e=>{const t=document.activeElement;if(-1===["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].indexOf(e.key)||!t.hasAttribute(n)&&!t.hasAttribute(o)&&!t.hasAttribute(i)||!t.hasAttribute(r))return;if(!t.hasAttribute(l)&&!t.hasAttribute(h))return console.warn(`You can't use '${r}' on a trigger without '${l}' or '${h}'`);e.preventDefault();const s=t.hasAttribute(l)?L(`${l}='${t.getAttribute(l)}'`):L(`${h}='${t.getAttribute(h)}'`);let a=t;switch(e.key){case"ArrowUp":case"ArrowLeft":a=s.indexOf(t)>0?s[s.indexOf(t)-1]:s[s.length-1];break;case"ArrowDown":case"ArrowRight":a=s.indexOf(t)<s.length-1?s[s.indexOf(t)+1]:s[0];break;case"Home":a=s[0];break;case"End":a=s[s.length-1]}return a.focus(),a.dispatchEvent(new Event(a.getAttribute(c)||"click"))},!1),document[q("isArrowKeysInitialized")]=!0),e},N=()=>{F(),document.removeEventListener("DOMContentLoaded",N)};document.addEventListener("DOMContentLoaded",N),window.easyToggleState=Object.assign(F,{isActive:e=>!!e[q("isActive")],unbind:Y,unbindAll:()=>Y(L().filter(e=>e[q("isInitialized")]))})}(),document.querySelector(Typo.elements.elementButtonMenu)){function functionDrawerSubmenu(e){var t="";drawerBoolean=!1,document.querySelector(e).querySelectorAll("li").forEach(function(r,n){var i=r.innerText;drawerBoolean=i.startsWith("_")?(r=r.outerHTML.replace(">_",">"),i="",drawerBoolean||(t=t.replace(/<\/li>$/,""),i='<ul class="drawer_sub">'),t+=i+r,!0):(drawerBoolean&&(t+="</ul>"),t+=r.outerHTML,!1),drawerBoolean&n==document.querySelector(e).querySelectorAll("li").length-1&&(t+="</ul></li>")}),document.querySelector(e).querySelectorAll("ul")[0].innerHTML=t,document.querySelector(e).querySelector("ul").classList.remove("visibility_hidden"),document.querySelector(e).querySelectorAll(".drawer_sub").forEach(e=>{e.parentNode.classList.add("toggle")}),document.querySelector(e).querySelectorAll(".toggle > a").forEach(e=>{e.setAttribute("href","javascript:"),e.addEventListener("click",()=>{e.classList.toggle("visible")})})}document.querySelector(Typo.elements.elementButtonMenu).addEventListener("click",function(){document.body.classList.toggle("drawer_menu_active"),document.body.classList.remove("search_active")}),document.querySelector(Typo.elements.elementDrawerMenu)&&functionDrawerSubmenu(Typo.elements.elementDrawerMenu)}window.addEventListener("scroll",function(){document.querySelector(Typo.elements.elementFAB)&&window.pageYOffset>=150?document.querySelector(Typo.elements.elementFAB).classList.add("visible"):document.querySelector(Typo.elements.elementFAB).classList.remove("visible")}),document.querySelector(Typo.elements.elementButtonSearch)&&document.querySelector(Typo.elements.elementButtonSearch).addEventListener("click",function(){document.body.classList.toggle("search_active"),document.body.classList.remove("drawer_menu_active"),document.querySelector(Typo.elements.elementSearchInput).focus()}),document.querySelector(Typo.elements.elementButtonSearchClose)&&document.querySelector(Typo.elements.elementButtonSearchClose).addEventListener("click",function(){document.body.classList.remove("search_active"),document.querySelector(Typo.elements.elementSearchInput).blur()}),document.querySelector(Typo.elements.elementBackdrop)&&document.querySelector(Typo.elements.elementBackdrop).addEventListener("click",function(){document.body.classList.remove("search_active","drawer_menu_active"),document.querySelector(Typo.elements.elementSearchInput).blur()}),document.querySelector(Typo.elements.elementScrollTop)&&document.querySelector(Typo.elements.elementScrollTop).addEventListener("click",function(){document.documentElement.scrollTop=0});
</script> Now save your theme.You can watch this video tutorial if you are facing any problem in installing sticky header in your blogger site.
If you are new and do not know even the abc about blogging you can join our full blogging course.
Comments