Cara Menghilangkan Sidebar Pada Halaman Statis

Menghilangkan Sidebar pada halaman tertentu merupakan hal yang sah-sah saja untuk dilakukan, bahkan menurut saya justru akan membuat tampilan halaman statis menjadi lebih menarik karena akan membuat halaman tersebut menjadi full page. Cara penerapannya pun sangat mudah dan tidak perlu edit HTML blog, cukup menambahkan beberapa javascript dan sedikit kode untuk menghilangkannya.

Dalam tulisan kali ini saya akan berbagi cara untuk menghilangkan atau menyembunyikan sidebar pada halaman statis seperti About Us, Contact us, Daftar Isi, TOS, Disclaimer, Privacy Policy, dan yang lainnya.

Baca : Cara Membuat Halaman Statis Blog

contoh halaman statis bocahsihir.info

Langkah pertama buatlah halaman baru atau edit halaman lama anda yang akan dihilangkan tampilan sidebarnya.

Kedua pilih mode HTML

Katiga salin kode dibawah ini dan letakan dibagian paling bawah dari isi halaman statis yang di edit tadi.

<script>

//<![CDATA[

function loadCSS(e,t,n){"use strict";var i = window.document.createElement("link");var o = t || window.document.getElementsByTagName("script")[0];i.rel = "stylesheet";i.href = e;i.media = "only x";o.parentNode.insertBefore(i,o);setTimeout(function (){i.media = n || "all"}

)}

loadCSS("https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.css");//]]>

</script>

<script src="https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.js" type="text/javascript"></script>  

<style>

/*=Remove Item=*/

#sidebar-wrapper{display:none}

h1.post-title.entry-title{display:none}

/*=ADD Item=*/

#post-wrapper{background:transparent;float:left;width:100%;max-width:1020px;margin:0 0 10px}

.C-Pelajar-author-box{padding:57px 50px 15px 50px;box-sizing:border-box;overflow:hidden}

.C-Pelajar-author-box-image{width:40%;float:left;margin-right:5%;margin-bottom:10px}

C-Pelajar-author-box-image img{height:385px;object-fit:cover}

img{max-width:100%;vertical-align:middle;border:0}

.C-Pelajar-author-box-text{padding:0;overflow:hidden;text-align:left}

.C-Pelajar-author-box-text-head{color:#3d4451;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid #dedede}

.C-Pelajar-author-box-text .hello-txt{background-color:#1976D2;color:#fff;font-size:14px;font-weight:700;line-height:1.1;display:inline-block;padding:7px 12px;text-transform:uppercase;position:relative;margin-bottom:28px}

.C-Pelajar-author-box-text .hello-txt:before{border-left-color:#1976D2;content:'';width:0;height:0;top:100%;left:5px;display:block;position:absolute;border-style:solid;border-width:0 0 8px 8px}

.C-Pelajar-author-box-text .profile-title{font-size:36px;line-height:1.1;font-weight:700;margin-bottom:5px;color:#3d4451}

.C-Pelajar-author-box-text .profile-title span{font-weight:300}

.C-Pelajar-author-box-text .profile-position{font-size:18px;font-weight:400;line-height:1.1;margin-bottom:0}

.C-Pelajar-author-box-text-details ul{margin:0;padding:0;list-style:none}

.C-Pelajar-author-box-text-details .profile-list li{margin-bottom:13px;list-style:none;padding:0}

.C-Pelajar-author-box-text-details .profile-list li .list-title{display:block;width:120px;float:left;color:#333333;font-size:12px;font-weight:700;line-height:20px;text-transform:uppercase}

.C-Pelajar-author-box-text-details .profile-list li .cont{display:block;margin-left:125px;font-size:15px;font-weight:400;line-height:20px;color:#9da0a7}

.C-Pelajar-author-box-text-details .profile-list li .list-button{color:#fff;font-size:12px;font-weight:700;line-height:1;text-transform:none;padding:5px 8px;display:inline-block;position:relative;top:-2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#1976D2}

.C-Pelajar-author-box-text-details .profile-list li .fa{margin-right:10px;vertical-align:baseline}

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.fenix-sub-head .social-head{padding:15px 0;background:#1976D2;box-sizing:border-box}

.top-bar-social{padding:0}

.section:last-child .widget:last-child{margin-bottom:0}

.section:first-child .widget:first-child{margin-top:0}

.top-bar-social .LinkList ul{text-align:center;margin:0 0 0 0}

.top-bar-social .widget ul{padding:0}

.top-bar-social li{display:inline-block;float:none;padding:0;margin-right:5px}

.top-bar-social #social a{display:block;width:40px;height:40px;line-height:40px;font-size:18px;color:#1976D2;background:#fff;border:1px solid #e4e4e4;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear}

/*=Responsive*/

@media (max-width:640px){.C-Pelajar-author-box{padding:10px}.C-Pelajar-author-box-text-head{margin-bottom:14px;padding-bottom:14px}}

@media (max-width:480px){.C-Pelajar-author-box-image{width:100%;float:left;margin-right:0}.C-Pelajar-author-box-image img{width:100%}.C-Pelajar-author-box-text{width:100%;float:left;margin-top:14px}}

.ArticleTeaser-date{padding:10px;box-sizing:border-box;border:3px solid #2c3e50;border-radius:10px;color:#2c3e50}

.ArticleTeaser a{color:#2c3e50;font-size:18px;font-weight:600}

.BlogList:after{background:#2c3e50}

.ArticleTeaser:last-child:after,.BlogList:before{background:#2c3e50}

.ArticleTeaser-bubble{border:2px solid #2c3e50}

h2.exp-title{text-align:center;font-weight:bold;color:#2c3e50}

.Buka{padding:0}

.ArticleTeaser:hover .ArticleTeaser-bubble:before{background:#2c3e50}

.ArticleTeaser-bubble:after{display:none;}

@media (max-width:768px){.ArticleTeaser-date{border:none}.ArticleTeaser{border:2px solid #2c3e50;border-radius:10px}}

</style>

<b><span style="font-size: large;"><br /></span></b>

<b><span style="font-size: large;"><br /></span></b>

Terakhir save, dan lihat hasilanya. Selamat mencoba Sumber : DirgaID

Berbagi :