Membuat Widget Burung Twitter Terbang Di Blog Anda

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini :

• Pertama-tama silahkan login di Blogger
• Klik Design > Page Element > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWC_Fss2eCB-vzwgpszprgsoarv51OrOAJevEUnAeminJSEzwSh2ARFQTQzLZosTgkp7NuaSw7dQ6qUE97Wx8BUAZ-sJ58opg2-j4rKjOZudNE3sx7S2S7YKdJv-zhrNoE3CcYl7QXKKc/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter Anda Sendiri";
var tweetThisText = "Twitter - UserID http://rifaldiwahyu.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna merah dengan akun Twitter sobat
• Ganti kode warna ungu bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
• Simpan dan lihat hasilnya.

 Warna Pilihan Burung Twitter

 Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdnvrICOqjXt9whJvvKT2t8ML7-AoaRFFDrSYyEKbk9QQ5Stfgyw46EvFWIiGYtMCW8w2NBWydNJUJXp0MyKd5QiuNcTPysuzTjFhtjbU9Hza7PV347XnZZ2eIGpKCiHddEzsC4P2D54/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHRW8z9FA6r4EtY74tOxTjBFdRZhTIGxBTPaYC4nYe1gmR6PAuPbX-JqzproXL1cswemg-i8PW4qPtExQ2v_qRJClAffSnFe0aNJHJ8YdOHtRXEaPwW5hMRaB_KFRayim7ENzTLgeSek/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh62vq1HVqqYXOHwTUdRJSCWLcCRFEGRNjRf_ZojTm2K1vCCPeF_UOhWQKwj7XYihCHcOOzeJi_wfwu-CQmRsFOkF3i3Vloq1KqJr7a6LE0oxqBR3qoLfvUZ0Eh0X_GGmgUYDJxcYqUtIs/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiljP7qrM5x48dsuzWIX-wn3uh4vs71UJXFpQudb3guQdhr7r0HC0yXJFx-pNUdFTjDnX_HMqkslYVMlqLjyu-fnDPfa2FmxvA965rCD9kasSXgS5tgNhbM7dbxfkqxmc1WuSxbUoB1IQ/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdXA7VuCZAcx0qtj1WDLV9ULOBqPnogjvCdrPQsqvjOZcb7hQCqsFuxUzaOUygMbT1RZjdqJrRX8ArggexWzKPwgIMopaaishCQ-wjiih3RD20ZS5aOma0_GIJYqntzZLq_ebEwhoV35c/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTu0CYdspKoHr1CJJAnq5jz6_lcFyV1ULwrGxya0Rgvq_LyWFa8Kjs_o_dzFz4RPBpuztmppRrxCwpj41alunXRnZJZXpNeLG0b0c81io8mCuNbzkHWhaGC6hYZ5741Yyf-WHxQztJGFQ/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6ahKtH7wcyT6UfteIMpxsMtxNgnLc-ilMv6xaXu6u950rJdhZSZV1aPk_bLwfLDToHsZsyr3reZb06nCsu-nwfgumJ6Ybqy8EZA7QmMuZs3sa4qEMgrlli32urqPeGpW_EUbibWmGhk/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NT7rT5FkDEjI2HZTlzbnrAF_nfx9_FwWztXf8pSEItuacCPLZicxYE8Ngm6oabj2Z0kSiN30zNoEuqYMlAmX3aB0lRRgGBFmpDfw44Whfyqgttbe2SJHynkH2o3UplJCfwwSiNX2rWE/s1600/red+bird.png

Dan terakhir jangan lupa disimpan

Read More

Cara Memasang Tombol Back To Top

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7MZuklSVEqzPjqqHekN-ycA18BH6GLidkEMfLbtcZwX7sX71PkpuGJp8s6DHzu3QYnTk_mzMJXvEPVXsyyBAV_P_wJO4-yKMuw5ffnURhucddrsFebMYGAS1ZSxoqQ7464Sq1B2KgLb9/s1600/Untitled-2.png'/></a>




Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7MZuklSVEqzPjqqHekN-ycA18BH6GLidkEMfLbtcZwX7sX71PkpuGJp8s6DHzu3QYnTk_mzMJXvEPVXsyyBAV_P_wJO4-yKMuw5ffnURhucddrsFebMYGAS1ZSxoqQ7464Sq1B2KgLb9/s1600/Untitled-2.png'/></a>



5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

• Kode warna kuning adalah posisi tombol berada
• Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)

Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1.      Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode </body>

    <div id='Enjoy'>
    <a href='#' onClick='window.location.reload()' title='Reload page'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
    <a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
    <a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
    <a href='#footbar' title='Ke bawah halaman'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
    </div>

3.      Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Read More