Memberikan Efek Falling Bird Pada Blog

Pada kesempatan kali ini saya akan share sebuah tutorial tentang cara membuat efek falling bird (burung jatuh) di blog. Efek ini akan menampilkan kesan seolah-olah ada burung (gambar/animasi) yang akan muncul dari sebelah atas kiri blog dan akan jatuh ke bawah. Efek ini memang terlihat biasa saja karena hanya memanfaatkan efek marquee yang di ulang-ulang, namun tetap bisa menarik perhatian para pengunjung blog kita.

Bagi anda yang berminat untuk membuat efek falling bird (burung jatuh) di blog, silahkan bisa anda ikuti tutorial tentang cara membuat efek falling bird (burung jatuh) di blog di bawah ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut ini :

<br /><br /><marquee behavior="scroll" direction="down"
style="position: absolute; right: 1100px; top: 52px; width: 100px;
height: 900px;" scrollamount="14"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" width="100" height="100"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; left:
358px; top: 2px; width: 60px; height: 450px;"
scrollamount="5"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" width="50" height="50"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
441px; top: 55px; width: 60px; height: 250px;"
scrollamount="9"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" width="50" height="50"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
498px; top: 53px; width: 60px; height: 380px;"
scrollamount="6"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
800px; top: 51px; width: 60px; height: 350px;"
scrollamount="7"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
390px; top: 55px; width: 60px; height: 450px;"
scrollamount="5"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
749px; top: 54px; width: 60px; height: 250px;"
scrollamount="5"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
325px; top: 52px; width: 60px; height: 300px;"
scrollamount="10"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
600px; top: 49px; width: 60px; height: 350px;"
scrollamount="8"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
873px; top: 52px; width: 60px; height: 400px;"
scrollamount="3"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
50px; top: 55px; width: 60px; height: 700px;"
scrollamount="12"><br /><img
src="http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif" /><br /></marquee><br />

6. Kemudian klik save/simpan, dan lihat hasilnya...

Note :
Untuk penyesuaian, anda bisa mengganti tulisan yang saya beri warna hijau dengan alamat url gambar/animasi burung yang akan di tampilkan sebagai efek falling bird (burung jatuh) di blog.

Selamat mencoba dan semoga postingan tentang cara membuat efek falling bird (burung jatuh) di blog ini bermanfaat bagi anda. Saya akhiri cukup sekian, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Special thanks to Imtikhan. Salam sejahtera by ngeposta...

Sumber 

Tutorial Mengganti Template Pada Blog

Selamat pagi semua,
Pada kesempatan ini saya akan menunjukan kepada anda cara mengganti template pada blog menggunakan dengan video dibawah ini.

 Let's check it out :

 

Sumber 

 

Menambahkan / Memasang Gadget Pada Blog

Selamat siang,

Kali ini saya akan memberitahu anda cara memasang / menambahkan aplikasi pada blog.

Aplikasi di sini mungkin yang dimaksudkan adalah widget atau gadget. Widget atau gadget tadi biasanya  dipasang di sidebar, header ataupun footer. Untuk memasang gadget kita perlu menambahkan kode tertentu seperti javascript ,css ataupun html, itu jika kita ingin menambahkan gadget dari pihak ketiga atau hasil copy dari blog lain. Beda dengan gadget bawaan blogger kita tidak perlu lagi menambahkan kode-kode, hanya tinggal klik 1 atau 2 kali saja, maka widget yang diinginkan sudah masuk ke blog kita.

Gadget default blogger itu antara lain, arsip halaman, popular post, tombol google plus one, kotak pencarian / penelusuran, gambar, slide video dan masih banyak lagi yang lainnya..... hehehe

Oke intinya disini kita akan ketahui cara menambahkan widget atau gadget tadi dengan 2 macam yaitu memasukkan gadget bawaan blogger dan memasang gadget dari blog lain/ hasil download.

A. Cara menambah gadget default blogger

1. Sebelumnya perlu diketahui saya memakai tampilan baru dasbor blogger (banyak kelebihan tampilan baru ini) Setelah masuk ke akun blogger, masuk ke dasbor. 
2. Kemudian pilih tata letak lalu klik tambahkan gadget. Sobat bisa melihat 2 gambar di bawah ini. 

Pada gambar 1 pilih tata letak

gambar 1. pilih tata letak

Pada gambar 2 di bawah, klik tambahkan gadget, bisa di bagian sidebar kanan, kiri, footer ataupun header. terserah sobat. namun biasanya di taruh di sidebar kanan agar loading blog menjadi cepat, atau di footer.

gambar 2. KLIK TAMBAH GADGET

Setelah kita klik tambah gadget tadi akan muncul pop iklan/ jendela baru, Naah tinggal pilih deeh, geser aja scroll mouse komputer Anda untuk memilih gadget yang diinginkan.

Sebagai contoh di sini saya akan memilih wigdet kotak penelusuran, Klik tanda tambah ( + ) yang berwarna biru bagian atas, akan muncul pratinjau, Lalu Simpan. Jika tidak jadi pilih batal atau kembali. Selesai, gadget pun muncul di blog sobat blogger.

Klik tanda tambah

B. Memasang gadget dari pihak ketiga / hasil copy/ download dari blog lain

Langkah-langkahnya  tidak jauh berbeda dengan bagian A. Hanya saja kita memakai kode html / javascript khusus untuk memasang widget.

Lihat langkah A gambar 2 geser terus ke bawah cari HTML/Javascript, klik tanda tambah (+)

gambar 4 html javascript

Sebagai contoh di sini saya sediakan kode html/javascript like facebook, tweet dan  google plus. 

Silakan klik saja copy all / select all, (akan otomatis ter copy). 

Kemudian paste didalam kotak form yang tersedia. Terakhir simpan. 

Lalu lihat tombol like facebook tweet dan goole plus 1 sudah muncul di bagian kanan bawah blog.

<style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style><br /> <div id='pageshare' title="bagikan ke teman anda"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br /> <div style="clear: both;font-size: 8px;text-align:center;"> <a href="http://www.super-gaptek.com/" target="blank"><font color="blue">[Cara Membuat Blog]<font></font></font></a></div> </div>

paste kan kode dari copy all tadi di dalam form lalu simpan

Nah, bagaimana sobat, mudahan tutorial bergambar cara menambah gadget ini bisa membantu sobat blogger yang belum tau maupun yang masih bingung. Silakan dicoba. Buat yang sudah paham, harap maklum yeeee...

Sumber