Cara Membuat Header Keren Blogger Dua Kolom Responsive
22 November 2019
Baik sobat yang masih setia dengan blog saya Ferlyando Sandala.
Kali ini saya akan membuat postingan Cara Membuat Header Blog Dua Kolom Responsive
Tutorial Membuat Header Blog Dua Kolom Responsive ini khususnya untuk template blog bawaan blogger versi Simple.
Cara Membuat Header Keren Blogger Dua Kolom Responsivehttps://t.co/R5Xzw4iIWa— Nando Sandala (@NandoSandala) November 22, 2019
Aslinya, header blog tema default blogger itu cuma satu kolom.
Berikut ini cara menggantinya dan membuat header baru dua kolom responsive.
Langsung saja di cara membuatnya.
1. Klik Tema > Klik Edit HTML
2. Copas kode CSS Header Blog Dua Kolom Responsive berikut ini di atas kode ]]></b:skin>
.
#header-wrapper{height:70px;margin:0 auto;padding:5px 20px 14px 30px;overflow:hidden;background:#fff} #header1{float:left;max-width:350px;margin:0 auto;padding:10px 0;} #header1 img,#header-inner img{width:auto;max-width:100%} #header-inner h1,#header-inner img, #header1 h1,#header-inner h2,#header1 h2, #header-inner .title{font:bold 32px 'Roboto Condensed',Arial,Sans-Serif;margin:0;padding:0;color:#222;text-transform:uppercase} #header-inner h1 a,#header-inner .title a{color:#222} #header2{float:right;width:468px;margin:5px;padding:0;} .Header .description {margin: 0 auto;padding: 0;font-size: 95%;overflow: hidden;height: 20px;} @media screen and (max-width:980px){ #header-wrapper{height:auto} #header{margin:0;padding:15px;overflow:hidden} #header1{float:none;width:100%;margin:0 0 15px;padding:0;text-align:center} #header2,#header2 img{float:none;width:100%;margin:0;padding:0;text-align:center} #header-inner img{max-width:100%;width:auto;margin:0 auto;padding:0;text-align:center} } @media screen and (max-width:384px){ #header-wrapper{margin:0;padding:10px 10px 5px;overflow:hidden} } body#layout #header-wrapper {height: auto;} body#layout #header1{float:left;width:30%;} body#layout #header2{float:right;width:50%;}1. 2. 3. 4. 5. 6.
3. Temukan dan HAPUS kode <header> ... </header> atau <header .... ada kode lain> ... </header>
4. Replace atau ganti kode di atas dengan kode HTML Header Blog Dua Kolom Responsive berikut ini:
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'> <b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'> <b:widget id='Header1' locked='true' title='Blog Romeltea (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'>300</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"'> <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:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' 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' itemprop='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <span itemprop='name'><data:title/></span> <b:else/> <a expr:href='data:blog.homepageUrl' itemprop='url'> <span itemprop='name'><data:title/></span></a> </b:if> </b:includable> </b:widget> </b:section> <b:section class='header2' id='header2' preferred='yes'/> </header> <div class='clear'/>1. 2. 3. 4. 5. 6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
5. Save!
Simpan template.
Itu dia cara membuat Header Blog Dua Kolom Responsive.
Kalau belum paham komentar saja dibawa. Terima kasih sudah kunjungi blog saya, semoga bermanfaat buat sobat semua.
Ikuti Postingan saya sebelumnya Cara Membuat Menu Navigasi Blog Horizontal Sederhana Blogger.