Sekarang saya akan berbagi dengan kawan hasil Kreasi alias
Percobaan saya yang berhasil dengan sukses untuk kawan Blogger yang setia
mengunjungi BlogBego Creation ini yaitu "Cara Mengganti Header dengan Animasi"
.
Langsung ke caranya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
- Cari #header-wrapper { yang biasanya terletak dibawah sekitar body {
Contoh pada Template saya sebagai berikut :
#header-wrapper
{width: 100%;margin: 0 auto 0;background:
#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0audtTPWcn0e5pU6SzfFhskA5SaDDpneHSfby334Bia-fkiSwFrtUc53xVZHBVggl9q2NYHEPj17E7VyDXiCRSdRiW7_5wxGk8MJ1q2eoagbT6OnoH94U5lmKJjAx2_ljpHDNhO-dddY/s1600/headerbg.jpg)
no-repeat center center;padding: 5px 0 10px 10px; height: 90px;border-bottom:
0px solid rgb(10, 115, 154);}
#head-inner {width:400px;background-position: left; margin: 15px auto 0; padding: 5px; float:$startSide;}
#header {margin: 0; text-align: left; color: $pagetitlecolor;}
#header h1 {color: $pagetitlecolor; margin: 0; padding: 10px 0 0 20px; text-decoration: none; font: $pagetitlefont;}
#header h1 a, #header h1 a:visited {color: $pagetitlecolor; margin: 0; padding: 0;text-decoration: none; }
#header h1 a:hover {color: $pagetitlecolor;}
#header .description {color: $descriptioncolor;margin-left: 12px;padding: 10px 0 0 10px;font: $descriptionfont;}
#header img {margin-left:auto;margin-right: auto;}
#headerright{width: 500px;float: right;padding: 10px 20px 0 10px;margin: 0 auto 0;text-align:center;font-size:12px;}
#headerright h2{display:none}
#headerright a, #headerright a:hover, #headerright a:visited{color:$linkcolor;}
#head-inner {width:400px;background-position: left; margin: 15px auto 0; padding: 5px; float:$startSide;}
#header {margin: 0; text-align: left; color: $pagetitlecolor;}
#header h1 {color: $pagetitlecolor; margin: 0; padding: 10px 0 0 20px; text-decoration: none; font: $pagetitlefont;}
#header h1 a, #header h1 a:visited {color: $pagetitlecolor; margin: 0; padding: 0;text-decoration: none; }
#header h1 a:hover {color: $pagetitlecolor;}
#header .description {color: $descriptioncolor;margin-left: 12px;padding: 10px 0 0 10px;font: $descriptionfont;}
#header img {margin-left:auto;margin-right: auto;}
#headerright{width: 500px;float: right;padding: 10px 20px 0 10px;margin: 0 auto 0;text-align:center;font-size:12px;}
#headerright h2{display:none}
#headerright a, #headerright a:hover, #headerright a:visited{color:$linkcolor;}
Teks yang berwarna hitam adalah warna latar utama Header
Ganti semua dengan :
#header-wrapper
{width: 100%;margin: 0 auto 0;background: #000000
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0audtTPWcn0e5pU6SzfFhskA5SaDDpneHSfby334Bia-fkiSwFrtUc53xVZHBVggl9q2NYHEPj17E7VyDXiCRSdRiW7_5wxGk8MJ1q2eoagbT6OnoH94U5lmKJjAx2_ljpHDNhO-dddY/s1600/headerbg.jpg)
no-repeat center center;padding: 5px 0 10px 10px; height: 90px;border-bottom:
0px solid rgb(10, 115, 154);}
#header {height: 90px;margin:0 auto 0;}
#header h1 {clear: both;float: left; padding: 10px 0 0 25px;}
#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 55px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eD6efHDXJDx7V3qx16OLTzF1tD9I9Q_H9D_Y5g8qVxP9zb_C7E3LOGNpupjBQ2I1fW2m266Vpp2QGVSehyphenhyphenV4ESvCDbUXy8WnouOUCMZr_GeKLJfYjuxKvWSDbDqyVTPTVA78FTwgY7Y/s1600/Header+BBC.gif) no-repeat 0 0;}
#header .ad {width: 500px;float: right;padding: 15px 6px 0 0;}
#header {height: 90px;margin:0 auto 0;}
#header h1 {clear: both;float: left; padding: 10px 0 0 25px;}
#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 55px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eD6efHDXJDx7V3qx16OLTzF1tD9I9Q_H9D_Y5g8qVxP9zb_C7E3LOGNpupjBQ2I1fW2m266Vpp2QGVSehyphenhyphenV4ESvCDbUXy8WnouOUCMZr_GeKLJfYjuxKvWSDbDqyVTPTVA78FTwgY7Y/s1600/Header+BBC.gif) no-repeat 0 0;}
#header .ad {width: 500px;float: right;padding: 15px 6px 0 0;}
Teks yang berwarna merah [width:400px;height:55px;]
untuk Header Animasi, sedangkan [width:500px;]
untuk Banner Iklan Sponsor 468x60.
Teks yang berwarna putih dengan background biru adalah URL Animasi saya, silahkan diganti dengan URL Animasi kawan :z;
Teks yang berwarna putih dengan background biru adalah URL Animasi saya, silahkan diganti dengan URL Animasi kawan :z;
Simpan sementara Template kawan sebelum menlanjutkan
- Selanjutnya cari <div id='header-wrapper'> yang letaknya dibawah </head><body> yang selengkapnya kurang lebih seperti berikut :
<div
id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BLOGBEGO CREATION (Header)' type='Header'/>
</b:section>
</div>
<div id='headerright'>
<b:section class='headerright' id='headerright' showaddelement='yes'/>
</div></div>
<!-- END header -->
<div id='head-inner'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BLOGBEGO CREATION (Header)' type='Header'/>
</b:section>
</div>
<div id='headerright'>
<b:section class='headerright' id='headerright' showaddelement='yes'/>
</div></div>
<!-- END header -->
Ganti semua dengan :
<div
id='header-wrapper'><div id='header'>
<div class='break'/>
<h1><a expr:href='data:blog.homepageUrl'>My Blog</a></h1>
<div class='ad'>
<b:section class='headeradsense' id='headeradsense' preferred='yes' showaddelement='no'/>
[Tempatkan Banner Iklan Sponsor 468x60 atau yang lainnya disini] </div></div></div><!-- END header -->
<div class='break'/>
<h1><a expr:href='data:blog.homepageUrl'>My Blog</a></h1>
<div class='ad'>
<b:section class='headeradsense' id='headeradsense' preferred='yes' showaddelement='no'/>
[Tempatkan Banner Iklan Sponsor 468x60 atau yang lainnya disini] </div></div></div><!-- END header -->
- Simpan Template kawan, :x;
AGAR DIPERHATIKAN :
Saat menyimpan Template terjadi masalah, disebabkan oleh </div> bisa kelebihan dan bisa kekurangan
yang diletakkan sebelum <!-- END header
-->
Selamat Ber-Kreasi
