Cara Mengganti Header dengan Animasi

Kastaone - Rabu, 26 September 2012 - 17:10 wita
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" 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(http://1.bp.blogspot.com/-Vf9i1ZKtgds/UEfnE5FtdSI/AAAAAAAAElk/Z7HhP2rO-UA/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(http://1.bp.blogspot.com/-Vf9i1ZKtgds/UEfnE5FtdSI/AAAAAAAAElk/Z7HhP2rO-UA/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(http://3.bp.blogspot.com/-YNlcM2ZLacA/UGHm6pbZUvI/AAAAAAAAFP4/RM65yaE2Ovo/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



    Berbagi Artikel :

    Cara Mengganti Header dengan Animasi
    Rate this posting:
    {[["☆","★"]]}

    Kalau pada Artikel Cara Mengganti Header dengan Animasi
    kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
    mudah-mudahan saya bisa segera memperbaiki
    ---ooOOOoo---
    P.pw - Shorten urls and earn money!

    Artikel Menarik Lainnya

    About me


    Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

    24 Komentar pada : “Cara Mengganti Header dengan Animasi”

    1. Balasan
      1. saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI













        saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI

        Hapus
    2. sedappp gan...sengkiyuu

      http://siblah10.blogspot.com/

      BalasHapus
    3. Klik disini gan http://goo.gl/Rcfd2 tema premium terbaru update 2013 gratis keren2 gan

      BalasHapus
    4. yah gan bro kgk ada yg di blog ane #header-wrapper ny gmn dong??? kendala disitu aja nih help me http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif

      BalasHapus
      Balasan
      1. Kalau pada template kawan tidak ada #header-wrapper saya rasa wajar karena kawan memakai template awesome, kawan bisa mencari bagian header [Judul Blog kawan] yang penulisannya bisa #header atau .header atau header-outer dll :y;

        Hapus
    5. mantap gan infonya, permsalahan pada header-wrapper tidak ada ....

      BalasHapus
      Balasan
      1. seperti penjelasan saya sebelumnya Header pada Blog pasti ada cuma penulisannya mungkin lain misalnya Header Title dll :w;

        Hapus
    6. terimakasih buat info mnearik nya semoga bermanfaat http://goo.gl/qbAipv

      BalasHapus
    7. hei sob artikelnya cukup menarik dan bagus http://goo.gl/d6pK0p

      BalasHapus
    8. thanks gan unfollow ya :)
      http://studyngeblog.blogspot.com/

      BalasHapus
    9. artikel sangat bagus sekali, sayangnya saya belum mengerti tentang blogger, saya akan mencoba mempelajari dan mempraktekkan tulisan anda ini, terimakasih! salam kenal dari saya

      BalasHapus
    10. Kok diblog template saya ga ada #header-wrapper nya ya?

      BalasHapus
      Balasan
      1. #header-wrapper atau #header saja atau dengan nama lain misalnya nama / judul blog pasti ada kawan :q;

        Hapus
    11. :x; thanks thanks

      btw nih template blog ini keren ;D

      BalasHapus
    12. keren banget. nice post.trima kasih sudah berbagi

      BalasHapus

    BERIKAN KOMENTAR SESUAI TOPIK
    DENGAN BAHASA YANG SOPAN,
    JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

    Klik Emoticon untuk melihat Kodenya

    Dapatkan Update Terbaru
    BlogBego Creation di Email Kawan





    BANNER [300x250]
    © 2013 - BLOGBEGO CREATION | Powered by Blogger
    Design Template by : Blogger Edan