<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7313997120021490224&zx=1b318343-de9c-4432-976e-1ee922307c69' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7313997120021490224&zx=1b318343-de9c-4432-976e-1ee922307c69' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8821697018751146&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-8821697018751146 -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?display=swap&family=Poppins"></head><body>*/</style>

Cara Membuat Header Sticky di Blog

Rendi Riansyah

2 Dec, 2022

Cara Membuat Header Sticky di Blog

Tampilan header sticky Kumparan

Cara Membuat Header Sticky di Blog - Banyak situs populer akhir-akhir ini mulai menambahkan atau membuat header blog menjadi sticky, hal tersebut bertujuan untuk membantu pengunjung blog agar dapat mudah menjangkau menu. Artinya, pembaca tidak perlu menggulir kembali ke bagian atas halaman untuk memilih halaman lain.

Menu navigasi akan tetap ditempatkan di bagian paling atas halaman dan tetap terlihat saat menggulir ke bawah.

Untuk pengguna Blogspot, jika Kamu menginginkan tampilan header blog menjadi sticky (menempel di atas), Kamu bisa ikuti cara di bawah ini.

Membuat Header Sticky di Blog

1. Masuk akun Blogger terlebih dahulu.

2. Silakan untuk klik menu “tema” lalu edit HTML.

3. Cari kode </body> bisa dengan menekan tombol CTRL+F dan ketik “</body>” (tanpa tanda petik), selanjutnya salin dan tempelkan kode dibawah ini, tepat sebelum kode </body>.

Berikut kodenya:

<script>

//<![CDATA[

bs_makeSticky("header");

function bs_makeSticky(elem) {

var bs_sticky = document.getElementById(elem);

var scrollee = document.createElement("div");

bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);

var width = bs_sticky.offsetWidth;

var iniClass = bs_sticky.className + ' bs_sticky';

window.addEventListener('scroll', bs_sticking, false);

function bs_sticking() {

var rect = scrollee.getBoundingClientRect();

if (rect.top < 0) {

bs_sticky.className = iniClass + ' bs_sticking';

bs_sticky.style.width = width + "px";

} else {

bs_sticky.className = iniClass;

}

}

}

//]]>

</script>

<style>

.bs_sticking {position:fixed; top:0; z-index:9999;}

</style>

Keterangan:

Selanjutnya, Kamu ubah tulisan header yang sudah Admin tandai (warna ungu) dengan id header blog atau nama header blog Kamu. Misalnya header-inner atau header-wrapper, dan lain sebagainya.

4. Simpan template dan klik lihat blog untuk mengetahui hasilnya.

Demikian artikel mengenai cara membuat header sticky di blog. Terimakasih untuk yang sudah berkenan membaca artikel sederhana ini, semoga bermanfaat.

Rendi Riansyah

Digital Marketing | Blogger | Penikmat Musik

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/848617736-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6cQKi065Udp1Jbgd_WzB2do9S-zA:1713875892089';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7313997120021490224','//www.rendiriansyah.com/2022/12/cara-membuat-header-sticky-di-blog.html','7313997120021490224');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7313997120021490224', 'title': 'Rendi Riansyah', 'url': 'https://www.rendiriansyah.com/2022/12/cara-membuat-header-sticky-di-blog.html', 'canonicalUrl': 'https://www.rendiriansyah.com/2022/12/cara-membuat-header-sticky-di-blog.html', 'homepageUrl': 'https://www.rendiriansyah.com/', 'searchUrl': 'https://www.rendiriansyah.com/search', 'canonicalHomepageUrl': 'https://www.rendiriansyah.com/', 'blogspotFaviconUrl': 'https://www.rendiriansyah.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-158686844-2', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Rendi Riansyah - Atom\x22 href\x3d\x22https://www.rendiriansyah.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Rendi Riansyah - RSS\x22 href\x3d\x22https://www.rendiriansyah.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Rendi Riansyah - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7313997120021490224/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Rendi Riansyah - Atom\x22 href\x3d\x22https://www.rendiriansyah.com/feeds/5458591151075296639/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-8821697018751146', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/32178a08698b1e6b', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '5458591151075296639', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3h77qzKeX0PbjqrU_JTd_PZaoB3ynLWaUgDA0n_xojywM1YvUk8bCRCDZKxV7_pk7-PC3INd4muN_C9xGjBlWzuSF4NIKy52sFVFxo3bzTBfQCwVp4dF4rmKcLZhZ6Mw6GmrkLsGRYhtbSY2Ec_zmfjhXf4hm8cwbfSyBeKyNM2VrE-UjAuvKrJ7UKQ/s72-c/Cara%20membuat%20header%20sticky%20di%20blog.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3h77qzKeX0PbjqrU_JTd_PZaoB3ynLWaUgDA0n_xojywM1YvUk8bCRCDZKxV7_pk7-PC3INd4muN_C9xGjBlWzuSF4NIKy52sFVFxo3bzTBfQCwVp4dF4rmKcLZhZ6Mw6GmrkLsGRYhtbSY2Ec_zmfjhXf4hm8cwbfSyBeKyNM2VrE-UjAuvKrJ7UKQ/s16000/Cara%20membuat%20header%20sticky%20di%20blog.jpg', 'pageName': 'Cara Membuat Header Sticky di Blog', 'pageTitle': 'Rendi Riansyah: Cara Membuat Header Sticky di Blog', 'metaDescription': 'Cara Membuat Header Sticky di Blog - Banyak situs populer akhir-akhir ini mulai menambahkan atau membuat header blog menjadi sticky, hal tersebut bert'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Cara Membuat Header Sticky di Blog', 'description': 'Cara Membuat Header Sticky di Blog - Banyak situs populer akhir-akhir ini mulai menambahkan atau membuat header blog menjadi sticky, hal tersebut bert', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3h77qzKeX0PbjqrU_JTd_PZaoB3ynLWaUgDA0n_xojywM1YvUk8bCRCDZKxV7_pk7-PC3INd4muN_C9xGjBlWzuSF4NIKy52sFVFxo3bzTBfQCwVp4dF4rmKcLZhZ6Mw6GmrkLsGRYhtbSY2Ec_zmfjhXf4hm8cwbfSyBeKyNM2VrE-UjAuvKrJ7UKQ/s16000/Cara%20membuat%20header%20sticky%20di%20blog.jpg', 'url': 'https://www.rendiriansyah.com/2022/12/cara-membuat-header-sticky-di-blog.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5458591151075296639}}, {'name': 'widgets', 'data': [{'title': 'Upload Image', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image10'}, {'title': 'Logo', 'type': 'HTML', 'sectionId': 'header-main', 'id': 'HTML10'}, {'title': 'Icons, Dark, Search', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList10'}, {'title': 'Menu', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList11'}, {'title': '', 'type': 'HTML', 'sectionId': 'before-blog', 'id': 'HTML2'}, {'title': 'Featured Post', 'type': 'FeaturedPost', 'sectionId': 'before-blog', 'id': 'FeaturedPost1', 'postId': '7358946579876319634'}, {'type': 'AdSense', 'sectionId': 'before-post', 'id': 'AdSense1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '5458591151075296639', 'title': 'Cara Membuat Header Sticky di Blog', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3h77qzKeX0PbjqrU_JTd_PZaoB3ynLWaUgDA0n_xojywM1YvUk8bCRCDZKxV7_pk7-PC3INd4muN_C9xGjBlWzuSF4NIKy52sFVFxo3bzTBfQCwVp4dF4rmKcLZhZ6Mw6GmrkLsGRYhtbSY2Ec_zmfjhXf4hm8cwbfSyBeKyNM2VrE-UjAuvKrJ7UKQ/s16000/Cara%20membuat%20header%20sticky%20di%20blog.jpg', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}]}, {'type': 'AdSense', 'sectionId': 'ads-post', 'id': 'AdSense2'}, {'title': '#MGID', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML1'}, {'type': 'AdSense', 'sectionId': 'ads-post', 'id': 'AdSense5'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML16'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML17'}, {'title': '#Ads', 'type': 'HTML', 'sectionId': 'after-blog', 'id': 'HTML3'}, {'type': 'AdSense', 'sectionId': 'after-blog', 'id': 'AdSense3'}, {'type': 'AdSense', 'sectionId': 'sidebar-static', 'id': 'AdSense6'}, {'title': 'Artikel Terpopuler', 'type': 'PopularPosts', 'sectionId': 'sidebar-static', 'id': 'PopularPosts10', 'posts': [{'title': 'Lirik Lagu Teh Kantong Bundar Sari Murni - Kumpulan Jingle Iklan', 'id': 5840112899819201593}, {'title': 'Cara Buat Twibbon Online', 'id': 7880605480574345329}, {'title': 'Cara Buat Iklan Penelusuran Bersponsor Google Adsense di Blogger', 'id': 8037502663525158253}, {'title': 'Cara Mengukur dan Menghitung Delay, Jitter, Throughput dan Packet Loss', 'id': 2726148467512183518}, {'title': 'Chord Kunci Gitar Imagine Dragons - Bad Liar Versi Mudah ', 'id': 8606669376093258280}]}, {'title': 'BAGIAN DARI:', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML5'}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML4'}, {'type': 'AdSense', 'sectionId': 'sidebar-sticky', 'id': 'AdSense4'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML20'}, {'title': 'About me', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML21'}, {'title': 'Learn More', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList13'}, {'title': 'Follow me', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList14'}, {'title': 'Newsletter', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML22'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML23'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML24'}]}]);
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image10', 'upload-image', document.getElementById('Image10'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'header-main', document.getElementById('HTML10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList10', 'header-main', document.getElementById('LinkList10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList11', 'header-main', document.getElementById('LinkList11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'before-blog', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'before-blog', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'before-post', document.getElementById('AdSense1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/103930930-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'ads-post', document.getElementById('AdSense2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'ads-post', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense5', 'ads-post', document.getElementById('AdSense5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML16', 'ads-post', document.getElementById('HTML16'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML17', 'ads-post', document.getElementById('HTML17'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'after-blog', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense3', 'after-blog', document.getElementById('AdSense3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense6', 'sidebar-static', document.getElementById('AdSense6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts10', 'sidebar-static', document.getElementById('PopularPosts10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidebar-static', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar-sticky', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense4', 'sidebar-sticky', document.getElementById('AdSense4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML20', 'sidebar-sticky', document.getElementById('HTML20'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'footer-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList13', 'footer-widget', document.getElementById('LinkList13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList14', 'footer-widget', document.getElementById('LinkList14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML22', 'footer-widget', document.getElementById('HTML22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML23', 'copyright', document.getElementById('HTML23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML24', 'jet-options', document.getElementById('HTML24'), {}, 'displayModeFull'));
</script>
</body>*/</style>