Home » animasi » cara » dengan » header » mengganti » Cara Mengganti Header dengan Animasi

Cara Mengganti Header dengan Animasi

in , , , , - on 9:00 AM - No comments

Sekarang saya akan berbagi dengan kawan hasil Kreasi alias Percobaan saya yang berhasil dengan sukses untuk kawan Blogger yang setia mengunjungi Creation ini yaitu "Cara Mengganti Header dengan Animasi" yang kawan bisa lihat pada Header Blog saya ini :y;


Langsung ke caranya : 
  • Siapkan dan buat Animasi silahkan baca disini 
  • 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/AVvXsEhFpWY-qZsA1fgvXxGnNlcPZYfG_QOlqVKedGXdFG9gJZnIntNyK0P6Npd94J-Qlt4sjojzbqU2OciOWKQ35wCnIGW6kJvM_OAQlhbymj8fT4Z3xs2tV9fWsHYXjHoBHyJ5QX-aVEFrvT0/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;}
    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/AVvXsEhFpWY-qZsA1fgvXxGnNlcPZYfG_QOlqVKedGXdFG9gJZnIntNyK0P6Npd94J-Qlt4sjojzbqU2OciOWKQ35wCnIGW6kJvM_OAQlhbymj8fT4Z3xs2tV9fWsHYXjHoBHyJ5QX-aVEFrvT0/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/AVvXsEhRcuKwTPVkiqCpJM_fFNedYAPsHQhTJ6RZqbW_TuMZLtImiEKQ1Dn4TZ9U4DEQvxL-VM9iYEfevVXxVpD_kuNitt9OML7ahHTYjSVpSyS8DXL0Ivcgul4yiRusE9i6_1tTbYKC9YdSw_Q/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;
    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 -->
    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 -->
    • 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


    Labels: , , , ,

    Post a Comment