Cara Mengganti Header dengan Animasi

Rabu, 26 September 2012 0 komentar
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


    Gratis Blogger Template Main Kolom 32

    Jumat, 21 September 2012 0 komentar
    Blogger Template Main Kolom 32 adalah Lanjutan Template Main Kolom sebelumnya yang merupakan Template Kalaborasi dengan menggunakan antara Theme WordPress yang diciptakan oleh ChiQ Montes [ di Edit menjadi Blogger Template oleh: BloggerTricks ] dengan Template Magazine Flatform Blogspot yang saya beri Nama Main Kolom 32 :z;
    Mengapa memakai Nama Main Kolom 32,....... ?! [apalah artinya sebuah nama]
    maksud saya disini : Tampilan pada Home Page dengan 3 Kolom, sedangkan pada Full Page menjadi 2 Kolom [Post dan Sidebar - kiri kanan] 
    Perhatikan screenshot dibawah













    Nama Template : Main Kolom 32
    Flatform : Blogger / Blogspot
    Nama Author & URL : Blogger Edan 

    Deskripsi : Template Blogger Main Kolom 32 adalah Blogger Template Gratis kalau kawan ingin mencoba Template ini untuk Blog kawan silahkan, Gratis..... Blogger Template Main Kolom 32 ini dengan Header Fixed dan sudah berisi seperti Menu Navigasi, Readmore Otomatis, Relatif Post dan lain sebagainya, membuat tampilan Blog dengan kesan beda dan seperti profesional.

    Lisensi
    Blogger Template Main Kolom 32 merupakan  Blogger Template Gratis  yang bisa kawan  pergunakan secara cuma-cuma, namun yang harus kawan patuhi adalah tidak boleh mengahapus Credit Link ke Desainer Template yang ada dibagian Credit [kanan bawah] Template.

    Tampilkan TimeLines Twitter di Blog

    Sabtu, 15 September 2012 0 komentar
    Jejaring Sosial yang paling ngetrend informasinya sekarang ini, salah satunya adalah Feature Aplikasi Twitter dengan TimeLinesnya, kalau kawan ingin mengetahui lebih lanjut cara penerapannya di Blog silahkan berkunjung ke Twitter Developers :y;
    Persyaratan yang diperlukan sudah pasti kawan sudah bergabung atau mempunyai Account Twitter :z; untuk Create your own embedded timeline 

    Caranya :
    • Masuk Account Twitter kawan dengan meng-Klik  Create your own embedded timeline 
    • Pilih Widget - Buat Baru
    • Selanjutnya, silahkan kawan mengadakan setting seperlunya yang secara otomatis akan keluar disamping kanannya Pratinjau [seandainya Pratinjau tidak mau muncul silahkan kawan setting Account Twitter kawan kemungkinan ada kesalahan atau kurang lengkap]





    • Ambil Scriptnya yang kode kurang lebih seperti berikut 

    1. <a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
    2. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    • Tapi sebelumnya kawan tambahkan atau buatkan Kolom luar biar kelihatan manis seperti contoh berikut dibawah ini 

    <div style="margin: 10px auto;display: block;text-align: center;box-shadow: 0px 5px 10px rgba(50,50,50,0.75);width: 500px;height: 405px">

    <a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>

    Informasi Tambahan :
    TimeLine Twitter ini di simpan pada Postingan, tapi dalam penerapannya saya menemui kendala saat loading mau tampil yang selanjutnya cuma ada kolomnya saja, solusinya saya taruh di Sidebar



    Cara Membuat Navbar Menu Bertingkat ke2

    Selasa, 11 September 2012 0 komentar
    Kawan masih ingat postingan saya sebelumnya "Cara Membuat Navbar Menu Bertingkat" yang merupakan salah satu contoh dasar cara-cara membuat Navbar Menu Blog yang perlu lagi di modifikasi [Kreasi] lagi supaya kelihatan menarik :z; dan enak dipandang [secara pribadi saya tentunya], karena apa yang saya sampaikan itu dengan harapan mengajak kawan-kawan Blogger untuk mencoba ber-Kreasi tentunya [khusus untuk yang masih Pemula dan yang ingin sama-sama belajar] :x;
    Cara Membuat Navbar Menu Bertingkat ke-2 ini kawan bisa lihat dan coba pada Blog saya ini :q; 
    Oke langsung saja ke Cara Memodifikasi / Membuat Navbar Menu Bertingkat ke-2


    • Masuk Account Blogger dengan ID kawan
    • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
    • Kalau kawan mempergunakan Navbar Menu [atau apalah namanya silahkan di Copas dulu untuk jaga-jaga] atau kalau tidak ada Navbar Menu pada Blog kawan, Copas Kode Css berikut persis diatas ]]></b:skin> 
    #NavbarMenu {
    background: url(http://1.bp.blogspot.com/-wp0DzI7xqh8/UEyNjZbDuDI/AAAAAAAAEtU/Hb_dpxxx9oI/s1600/menu_bg.png); no-repeat top center;
    width: 100%;
    height: 40px;
     color: $navcolor;
     margin: 0 auto 0;
     padding: 5px 30px;
     font: bold 12px Arial, Tahoma, Verdana;
     border: 0px solid #699AB8
     }
    #nav {
    width: 95%; float: left;
     margin: 0;
     padding: 0;
    }
    #nav ul {
     float: left;
     list-style: none;
     margin: 0;
     padding: 0;
    }
    #nav li {
     list-style: none;
     margin: 0;
     padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
     color: $navcolor;
     display: block;
    height: 20px;
     text-transform: uppercase;
     margin-top: 2px;
     padding: 7px 15px;
     font: bold 13px Tahoma, Georgia, Times New Roman;
     background: transparent;
    }
    #nav li a:hover, #nav li a:active {
    background: url(http://3.bp.blogspot.com/-70-CZNgfB_I/UE23lDwWTbI/AAAAAAAAExo/U1EisTMCNPQ/s1600/selected.png); repeat-x center center;
    border: 1px 1px 0 1px;
    color: #FFF;
    text-shadow: 1px 1px 1px #F00;
    text-decoration: none;
    margin-top: 2px;
    padding: 7px 15px ;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: url(http://3.bp.blogspot.com/-J31b0oQWCd0/UEywAnDZ0cI/AAAAAAAAEwU/Jl4gHLDDUOw/s1600/submenu.png); repeat-y left bottom;
    width: 150px;
    height: auto;
    color: #000;
    text-transform: uppercase;
    float: none;
    margin : 0;
    position: relative;
    padding: 7px 20px;
    font: normal 13px Tahoma, Georgia, Times New Roman;
    }
    #nav li li a:hover, #nav li li a:active {
    background:  url(http://1.bp.blogspot.com/--I7I2qB7dSw/UEy3AlXW7uI/AAAAAAAAEw8/T9-CXeKvGIk/s1600/submenuhover.png); no-repeat center top;
    border: 0px solid #ccc;
    color: #FFF;
    text-shadow: 1px 1px 1px #F00;
    text-decoration: none;
    margin: 0;
    padding: 7px 20px;
    font-size: 13px;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 140px;
    margin: 0;
    padding: 0;
    }
    #nav li ul a {
    width: 140px;
    }
    #nav li ul ul {
    margin: -30px 0 0 190px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }
    #nav li:hover, #nav li.sfhover {
    position: static;
    }
    • Simpan Template kawan, 
    Catatan khusus : untuk yang memakai Cara Membuat Navbar Menu Bertingkat yang saya posting sebelumnya bisa lihat langsung hasilnya
    • Untuk kawan Blogger yang memakai model Navbar Menu lain atau yang pada Blognya belum berisi Navbar Menu silahkan Copas HTML berikut pada tempat yang kawan inginkan 
    <div id='NavbarMenu'>
    <ul id='nav'>
    <li><a href='http://blogbego-creation.blogspot.com' title='Kembali ke Beranda'> Beranda</a></li>
    <li><a href='http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html'>Daftar Isi</a></li>
    <li> <a href='#'>Katagori</a>
    <ul>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/Kreasi' target='_blank'>Kreasi </a></li>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/tips%20trik' target='_blank'>Tips Trik</a></li>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/tutorial' target='_blank'>Tutorial </a></li>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/animasi' target='_blank'>Animasi </a></li>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/widget' target='_blank'>Widget </a></li>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/komentar' target='_blank'>Komentar </a></li>
    </ul></li>
    <li><a href='http://blogbego-creation.blogspot.com/search/label/Template' target='_blank'>Template </a></li>
    <li><a href='http://pagespeed.googlelabs.com' target='_blank'> TEST BLOG </a></li>
    <li> <a href='#'>Page</a>
            <ul>
            <li> <a href='#'>Edit Page #A</a>
                      <ul>
                      <li><a href='#'>Page #A-1</a>
                              <ul>
                              <li><a href='#'>Page #A-1-1</a></li>
                              <li><a href='#'>Page #A-1-2</a></li>
                              </ul> </li>
                       <li><a href='#'>Page #A-2</a></li>
                       <li><a href='#'>Page #A-3</a></li>
                      </ul> </li>
            <li><a href='#'>Edit Page #B</a></li>
            <li><a href='#'>Edit Page #C</a></li>
            <li><a href='#'>Edit Page #D</a></li>
            <li><a href='#'>Edit Page #E</a></li>
            </ul></li>
    </ul>
    </div>
    Silahkan Ganti URL / Link saya dengan URL / LInk Blog kawan
    Selamat Ber-Kreasi :x; 

      Ngeblog...... Mau cari apa ?!

      Sabtu, 08 September 2012 0 komentar
       
      Kawan Blogger akhir-akhir ini saya jarang posting dikarenakan kondisi kesehatan sedikit menurun semenjak musim dingin ini,  :q; yang menyebabkan tak bisa konsentrasi penuh, untuk itu saya minta maaf  :w;  
      Sekarang apa yang saya posting dengan judul Ngeblog..... Mau cari apa ?!, kelihatannya nyeleneh bukan, itulah kenyataannya yang terjadi :y;  Kawan Ngeblog sudah pasti punya tujuan, yang pada umumnya bertujuan ingin mendapatkan Penghasilan sudah pasti...... ya/tidak !!! mungkin kawan mendapatkan informasi dari kawan Blogger yang sudah berhasil, yang pada akhirnya kawan ikut-ikutan membuat Blog biar bisa menampilkan Iklan Sponsor membabi buta sampai-sampai pengunjung tidak bisa membaca postingan kawan karena ditutupi oleh Iklan yang tak bisa di Close :x; 
      Iklan Sponsor yang menjadi Idola Blogger adalah Google Adsense yang persyaratannya cukup ketat [kalau dulu minimal memakai bahasanya mbah Google] tapi sekarang sudah ada keringanan bisa memakai bahasa Indonesia asal Blog kawan sudah memakai Domain sendiri [.com, .co.id, dll] :z; sedangkan Iklan Sponsor lainnya seperti PPC, yang menjadi pertanyaan saya pada kawan Blogger sudah berapa banyak Penghasilan yang kawan dapat dari memasang Iklan Sponsor itu di Blog ?! 

      Ooohh Kawan jangan berkecil hati dulu untuk yang belum berhasil mendapatkan ceperan dari Blog, karena disini saya akan mencoba memberikan solusi yang bisa sama-sama menguntungkan diantara kawan Blogger asal masing-masing Blogger jujur dan mempunyai minat serta merasa senasib dan seperjuangan [INGAT: Jangan mau untung sendiri] caranya :
      1. Bentuk Group Blogger [seperti Komentar Berbalas] yang saling kunjung-mengunjungi, balas-membalas maupun yang lainnya [saling Download] :r; 
      2. Buat postingan yang beberapa isi intinya agar bisa disimpan pada Web/Site yang menyediakan layanan Download Berbayar]
      3. Sesama Group Blogger wajib dan harus men-Download milik kawan Blogger lainnya [walau file tersebut tidak begitu penting baginya]

      Kalkulasi Keuntungan Blog kita :
      • Loading Blog jadi ringan karena bebas Iklan Sponsor yang tidak perlu 
      • Tidak ada sanksi Banned seperti Iklan Sponsor  
      • Yang Download File kita dari luar Group Blogger sangat mungkin dan pasti ada 
      • Dan Keuntungan-keuntungan lainnya, silahkan kawan pikirkan sendiri
      Mudah-mudahan apa yang saya sampaikan ini ada manfaatnya, 
      Bagaimana dengan kawan Blogger sekarang, apa masih tetap memasang Iklan Sponsor :y;



      Akhirnya Foto Profil Tampil juga di G+

      Sabtu, 01 September 2012 0 komentar
      Postingan saya sebelumnya tentang Tampilkan Image Author di Pencarian G+ dan Tampilkan Rating Bintang di Blog  :z; setelah menunggu peng-Indekan dari Google yang duluan tampil Rating Bintangnya, sedangkan Rating Bintang saya posting belakangan dari Tampilan Profil di G+. :y: 
      Sekarang saya akan memberikan kawan Solusi agar Avatar Profil Tampil di G+ seperti yang saya terapkan pada Blog ini : 


      • di bawah ]]></b:skin> simpan  <link href='URL G+ Anda' rel='author'/> ingat postingan saya sebelumnya - contoh <link href=' https://plus.google.com/101141011579420362463 ' rel='author'/> 
      • di atas <b:skin><![CDATA[/* simpan <link href='URL G+ Andarel='publisher'/> bedanya author dengan publisher - contoh <link href='https://plus.google.com/101141011579420362463 ' rel='publisher'/>
      • Buat satu postingan tentang diri kawan [About me] yang Linknya mengarah ke Google Plus, cukup satu Link saja dan jangan lupa tampilkan di Home Page sedangkan Readmore / Selengkapnya mengarah ke postingan About me [lihat contoh di pojok bawah Blog saya ini] 
      Catatan :
      Kadang-kadang antara Foto Profil dan Rating Bintang tidak ngumpul alias kelihatan hanya salah satu pada masing-masing postingan atau bisa keduanya tak akan kelihatan dan khusus untuk Rating Bintang akan kelihatan bila postingan tersebut ada komentarnya seperti Reviews Alexa :q;

       Ingat : Tampil tidaknya Avatar Profil kita di Pencarian tergantung peng-Indekan Google Plus 

      Hampir lupa kawan, sebenarnya ini yang paling penting, berdasarkan pengalaman saya seandainya sampai satu mingguan Avatar Profil belum juga tampil coba lihat Foto Profil G+ kawan, karena penyebabnya disini, untuk persyaratan Foto Profil usahakan supaya agak besar [disini saya pakai 500x500px] caranya coba  perhatikan image dibawah - Klik - Ganti Foto Profil  
      Foto setelah saya Edit On Line
      Sebenarnya disini diharapkan Foto Asli kita tapi saya tetap memakai Avatar [dikarena wajah saya jelek] makanya saya pakai Avatar disamping saya memakai Avatar ini sudah dari awal nge-Blog, :w; 
      Saat Upload Foto dari Komputer untuk Foto Profil - perhatikan tulisan dengan latar kuning dibawah "Sepertinya tidak ada wajah di foto ini" atau "Foto yang anda upload terlalu kecil" itu berarti kawan mengulang upload Foto yang lain sesuai persyaratan :r;

      Foto sebelum saya Edit
      Kalau Foto kawan sudah memenuhi syarat pilih Tetapkan sebagai Foto Profil 
      Simpan Profil dan selanjutnya kawan tinggal menunggu Google Search menampilkan di Pencarian kalau sudah memenuhi persyaratan