Kumpulan Efek - Efek Blog: Dari Yang Ringan Hingga Yang Berat

  Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan

<script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>

2. Efek hati bertaburan

<script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

3. Efek bintang bertaburan

<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>

4. Efek kembang api

<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>

5. Efek Gelembung

<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

Cara pemasangan :

1. Klik rancangan --> Edit html
2. Letakkan script efek di atas kode </body>
3. Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh

<script language="javascript"> nd_mode="meteor"; nd_control="on"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

2. Banjir

<script language="javascript"> nd_mode="flood"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

3. Bunga Mekar

<script language="javascript"> nd_mode="flowers"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

4. Bom Atom

<script language="javascript"> nd_mode="bomb"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

5. Ufo

<script language="javascript"> nd_mode="ufo"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

6. Graffity

<script language="javascript"> nd_mode="graff"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

7. Shaver

<script language="javascript"> nd_mode="shaver"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

8. Gun

<script language="javascript"> nd_mode="gun"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

9.Bloody gun

<script language="javascript"> nd_mode="blood"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

10. Paint ball

<script language="javascript"> nd_mode="paint"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

11. Chainsaw

<script language="javascript"> nd_mode="chainsaw"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

12. Dinosaur

<script language="javascript"> nd_mode="dino"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

13. Lebah

<script language="javascript"> nd_mode="wasp"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

14. Lalat

<script language="javascript"> nd_mode="fly"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

15. Semut

<script language="javascript"> nd_mode="ants"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

16. Siput

<script language="javascript"> nd_mode="snail"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

17. Cacing

<script language="javascript"> nd_mode="worms"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

18. Mold

<script language="javascript"> nd_mode="mold"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

19. Bayi merangkak

<script language="javascript"> nd_mode="baby"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

20. Telur mata sapi

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

21. Kopi tumpah

<script language="javascript"> nd_mode="coffee"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

22. Terbakar

<script language="javascript"> nd_mode="burn"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

23. Tomat

<script language="javascript"> nd_mode="tomato"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

24. Creampie

<script language="javascript"> nd_mode="creampie"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

25. Murka

<script language="javascript"> nd_mode="god"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

26. Sapi Jorok

<script language="javascript"> nd_mode="cow"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

27. Anjing Jorok

<script language="javascript"> nd_mode="dog"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

28. Kencing Sembarangan

<script language="javascript"> nd_mode="pee"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center> </small></div>

Cara pemasangan :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan script efek di dalam kotak yang di sediakan
3. Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam..

Read More. . .

Membuat Gambar Batman Berjalan Di Pinggir Blog

(Batman lagi jalan-jalan)

Penambahan gambar-gambar bergerak di blok akan menambah tampilan blog menjadi lebih indah dilihat, dan bisa menjadi ciri khas blog itu sendiri. Akan tetapi jangan terlalu banyak juga ya, yang ada pengunjung blog jadi ribet melihat tampilannya, dan juga penempatan gambar harus sesuai. 

Untuk membuat gambar Batman berjalan kita hanya perlu menambahkan alamat url gambar tesebut. Mungkin trik ini usang atau tidak berguna bagi para master dan para webmaster, tapi apa salahnya bagi pemula seperti saya yang awam ini, mungkin bagi sahabat bloger yang pengen tau caranya kita ikuti langkah - langkahnya  seperti dibawah ini:

Disini kita nggak perlu upload gambar lagi kok,,

1. Login ke blogger dengan ID anda 

2. Klik tata letak

3. Klik tambah gadget

4. Pilih HTML/Javascript 

5. Masukan kode dibawah ini:

 <div style="position: fixed; bottom: 25px; left: 20px;width:120px;height:135px;"><a href="http://zuazz.blogspot.com" title=""><img src="http://batman-project.googlecode.com/files/zuazz.gif.gif"/></a><small><center><a href="http://zuazz.blogspot.com" target="_blank"><span style="font-weight:bold;color:#00000;"> den zuaz </span></a></center></small></div>

Untuk kolom judul kosongin aja ya, dan untuk menentukan di sebelah mana gambar ditempatkan silahkan ganti kode berwarna merah (left / right).ganti kode berwarna biru dengan url anda sendiri atau dibiarkan saja juga tidak apa-apa kok.

6. Klik simpan dan lihat hasilnya.

Read More. . .

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Silakan anda ikuti cara-cara berikut ini,,

Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>

<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">

Masukkan tulisanmu di sini

</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:

Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.

Klik show untuk melihat

Masukkan tulisanmu di sini

Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.

Read More. . .

Free Link Exchange: Get 1 Million Visitors

English

This is a great way to exchange links. Because we put a link that will help promoted by 1 million people over just by referring 2 people only. Easy enough to invite two people to the list, as all promotional needs, everyone wants the link spread quickly. Especially if more than 2 people ... how will we be able to link the free n again ..

Okay, like what and how to do .. my friend lives just a list, not hurt to try, free of this, here we stick to keep the link, link which can be included his post title and URL for each page had a pagerank as well .. our PR's usually only on the front page, while on post pages not have a PR.

Sign up if you are interested enough. After that please check the password sent to your email, login and then immediately put the article title, description and URL links to be promoted on this website. O Yeah ... we will get our website to promote a replica you know .. For example, I dedicate a post about Free Link Exchange, Get 1 Million Visitors, one easy way to increase traffic and Pegerank our blog.

Next live to make a post like this or just copy and paste this article to the blog and feel the benefits.

To register please click the link Free here, then scroll down and click "Sign Up Now Free" or Click To Sign Up.

Good luck with tips Free Link Exchange: Get 1 Million Visitors this.

When my friend also has other tips .. please share in comments..!!


Bahasa Indonesia

Ini adalah cara dahsyat untuk tukar link. Karena satu link yang kita pasang akan dibantu dipromosikan oleh 1 juta orang lebih hanya dengan mengajak 2 orang saja.  Cukup mudah mengajak 2 orang untuk daftar, karena semua butuh promosi, setiap orang ingin linknya tersebar dengan cepat.  Apalagi kalau lebih dari 2 orang… berapa link yang akan kita dapat n gratis lagi..

Oke kayak apa dan gimana caranya.. sobat tinggal daftar saja , tak ada ruginya untuk dicoba , gratis ini, disini  link kita bisa nempel terus, link yg dimasukan bisa judul postingan dan URL nya agar tiap page punya pagerank juga.. kan biasanya PR kita hanya di halaman depan saja, sementara di halaman posting gak punya PR.

Kalau  berminat cukup Mendaftar. Setelah itu silahkan cek password yang dikirim ke email  anda, kemudian langsung login dan pasang judul artikel, keterangan dan URL link yang ingin dipromosikan pada Website ini. Oh ya …  kita juga akan mendapatkan web replikanya untuk kita promosikan lho.. Sebagai contoh saya persembahkan postingan tentang Free Link Exchange: Get 1 Million Visitors, salah satu Cara mudah meningkatkan Traffic dan Pegerank blog kita.

Selanjutnya tinggal bikin sebuah postingan seperti ini atau silahkan copy paste artikel ini untuk di blog sobat dan rasakan manfaatnya.

Untuk mendaftar silahkan klik Link Gratis disini ,  kemudian scroll kebawah lalu klik “ Sign Up Now Free “ atau Klik Untuk Mendaftar.

Selamat mencoba tips Free Link Exchange: Get 1 Million Visitors ini.

Read More. . .

Background Sambaran Petir Di Blog

Bagi para pemula blogger contohnya seperti saya pasti banyak yang menginginkan background blognya di ganti dengan foto sendiri atau gambar yang mereka inginkan sendiri. Kali ini saya akan menulis artikel tentang 'Membuat Background Kilat Di Blog'.

Ikuti langkah berikut untuk membuat background blog :

1. login ke bloger dengan id anda

2. Lalu menuju ke 'design' -> edit HTML

3. Centang Expand Template Widget

3. Cari kode  body {

4. Tambahkan kode berikut di bawah kode ' body { ' 

background:#000000 url(http://petir-project.googlecode.com
/files/petir.gif) no-repeat center fixed; 

• Kode ungu = Kode warna di belakang background 
• Kode Biru  = Link/url background kilat / url background lain yang ingin dipasang 
• Kode merah = Jika inginkan gambar berulang-ulang hilangkan saja

5. Lalu 'Save Template' dan lihat hasilnya.

Read More. . .

Membuat Widget Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot. Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

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/AVvXsEjy7lXFhtGMWKZv1kMN_GmyimKuyQ14lJohOtSE23pVHeABIHk7F9sxowso6B75xaAmfDnbATghTkpV08j1LUucv2KEtJbHW6uAllvtCJMNIkag1gWM3IpUCJd8lGhmq_6wobiUCrxOEoM/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 sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan akun Twitter sobat
• Ganti kode warna merah 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/AVvXsEgM0cUqaasqrix8jHsftWnhsTuwmmABVwa6PZUJkAi8j5eNanwQoeUb3KrmtSHNi54TeM5XB3P5AVfL6N7TGyrEdSJnOtae2cFk0iz7wqJcHlEhtGr0emicq8D_ptJPT7cDn9Cs2-HB4fY/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKFrjSHTHBIa7USfKqjie8cDmULjCO6jX3yDZtOuMftQ7Ey3tfTHg2AhDzu3nytA2wc6Nh3ZNrMLgFRByhtie3qT17Kz054UX5rYp4YB3WR-KFbWm6y4-lz_zuM6g7dehaBvOABquR80/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4Y7w6KBR1TnFFw9cPV5iUWfWakLeIibBCza-OVm3ersSieQ2twbG3OA6274hWbAKw2oM8GRK426vqgMfh0Tz-WfQV6DLFuKo15rlucdViPWosQXBS296Gf5ULpq1KwPLrOK8I_5_wrk/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD8B31x59r-CLUnjOJY493-pyxjN9hh4ThB5eLhdYeCb5bQydvnxQDq-RH46zUTYfTepzgcpda6NZkXqVObb0ENN-99rYwSlsoEKAPXFNAG_wK14G8Hy4tKxg0yBiz_x7SqzQI8elElZU/s1600/brown+bird.png

Warna Hijau

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

Warna Ungu

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

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilYQYKI4fFFW6INB-Y41lAn7iNUPuPteNVW7qdxORdkkHwM9s8lbYwvOWOYktxxpe6AxHUqM3sj2N-qdTLgrWX4ZSyoNYaQQva1MIrWwNSFlIqvStwFBuPhfGrD5sLAMEEEqfYy4KEaA/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9oP_W1vENos9HHN1-JjOuuakjWsbIQjUDUDQU9wH0216Rmz0sHLtkjdCLCVz9micZmo1G_islJLEVc9QJShGe_8wAvP-xwto3TJhYKxopl8yvXS_GrsCRowlbg8dXomvPLhvZ6wE8yus/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!!!!

Read More. . .

Cara Membuat Widget Menu TAB View Pada Blog

  Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */ div.Tabateonsoft div.TFs {height: 30px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0; color: #333; border-top:1px solid #CCCCCC; border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #cccccc; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px; } div.Tabateonsoft div.TFs a:hover { background: #E8E8E8; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999;} div.Tabateonsoft div.TFs a.Active { background: #333; color: #000000; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999; font-weight:bold; color: #ffffff;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -moz-border-radius:5px;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:12px;padding: 3px 5px; text-align:left;}

5. Letakkan kode dibawah ini diatas kode </head>

<script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/>

6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get"> <div class="Tabateonsoft" id="Tabateonsoft"> <div class="TFs"> <a>tab1</a> <a>tab2</a> <a>tab3</a> <a>tab4</a> </div> <div class="Pages"> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 1 anda </div> </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> Disini letakkan kode untuk tab 2 anda </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 3 anda </div> </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 4 anda </div> </div> <!-- end Tab --> </div> </div> </form> <script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Setelah itu simpan dan lihat hasilnya.

Read More. . .

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob, maklumlah pemula,, heheheheee,,,,

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,, ]

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, ] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger sobat.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

• Kode warna hijau: ganti dengan URL Feeds sobat
• Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.  

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.

2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png 

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba ya sobat,,

Read More. . .

Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun

Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload

Cara Memasang Tombol Back to Top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

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/AVvXsEghyphenhyphen5IAZwy66HfN25qL9P8nFnFNEMugbkeBzssZ6s5T-j2XMwOzv3d_097IL9GxTU-BsLsW0m4Bs7xRqwb7lkAGn6tZFZW0RdYGX34Vc_aOEW76YPYPyGjo9zIhjePMaC6n_7H_1uy1H2lv/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/AVvXsEghyphenhyphen5IAZwy66HfN25qL9P8nFnFNEMugbkeBzssZ6s5T-j2XMwOzv3d_097IL9GxTU-BsLsW0m4Bs7xRqwb7lkAGn6tZFZW0RdYGX34Vc_aOEW76YPYPyGjo9zIhjePMaC6n_7H_1uy1H2lv/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).

Jangan lupa komentarnya… Untuk artikel ini jika ada yang mau menambahkan cara yang lainnya aku tunggu…

Read More. . .

Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-Gv01VC4HArLkLTOoozzMohY7-nqZAV-kCfjajQ7nCOWE3BrHpAeP76KZc8l1kGfeM20tzl65jrXsmIaVIRoRYRHEVr5XFLmyjOemiMyz9uhmyCwBGujRpiy_DEU9ed_rZrKNysnqSei/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Read More. . .

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

 

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA_YhSDS4bLMarh73mcBc6oM7ItABXGQT_7A0rA6K8_SpGvB3ly9JbJGdoJkQBZepqRCfbWj2nZzmKkfX2t5Ot8Skjrw5lnif_KLDZhY3GmNvdAiKg3cLRwEy7MsoOFXoh8ao1JgOWPccA/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqvKWGHUln9TWGYkNnUgp2iZ3vp7-oXpbka-gp2gshhWDNhEodaB4v5hpfl5oy0JL-0L6JD6G_pYQGUZgI5a-QrR8yVJgt-N3XM63ZArrhDaW1DLzyQyEhqVSm1hG36rXIpmc8zBg0xXk/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

Read More. . .

Otomatis Share Blog Update Pada Google Plus

Otomatis Share Blog Update Pada Google Plus, Sosial media promosi adalah kebutuhan bagi setiap blogger. Jika sebuah blog adalah sebuah mesin, maka media sosial bertindak seperti pelumasnya, yang tanpanya sebuah blog akan tidak maksimal. Inilah sebabnya mengapa blogger perlu berbagi konten menarik mereka sehingga orang di seluruh dunia bisa mengetahuinya. Untuk itu, Google sedang mencoba untuk membantu blogger untuk meningkatkan trafiknya. Baru-baru ini, Google merilis layanan Google Takeout service yang memungkinkan Anda menggabungkan dua akun Google plus. Sekarang, Anda dapat menghubungkan Google plus account dengan Blogger untuk dengan mudah dan berbagi posting Anda juga menshre artikel anda pada google plus. Share box secara otomatis akan muncul ketika Anda mempublikasikan posting, Anda dapat segera berbagi konten dengan orang lain! Kita akan mempraktekan bagaimana melakukan itu semu.
Catatan: Layanan ini untuk blog Blogger saja. Cara ini tidak tersedia untuk WordPress atau TypePad atau blog dengan platform lain. Google tidak mengijinkan share artikel yang berbau porno. Ini adalah cara Google untuk menjaga sosial media bersih dari porno content.
1. Menghubungkan Blogger Dengan Google Plus
Trik ini akan bekerja hanya jika Anda memiliki Google + dan profil Blogger dengan Akun Google yang sama. Jika kedua profil Anda berada di bawah satu account, maka Anda sedang beruntung. Cukup log in ke account blogger Anda, dan pergi ke blog Anda dashboard.In daerah kanan atas layar Anda, Anda akan melihat ikon roda gigi.

Mengklik ikon roda gigi, Anda akan melihat opsi untuk Connect ke Google +. Klik itu, dan Anda akan melihat layar konfirmasi.

Anda siap untuk beralih. Hanya memeriksa “Aku sudah membaca ….”box  dan klik switch.
Jika nantinya Anda ingin memutuskan sambungan kedua account tersebut dan kembali ke profil Blogger Anda, Anda dapat menggunakan ikon roda gigi lagi, dan akan ada pilihan untuk memutuskan dua account.
2. Sharing posting
Setelah posting Anda terhubung, Anda akan melihat opsi untuk berbagi posting Anda langsung dari dashboard Blogger Anda. Ini juga akan memungkinkan Anda berbagi posting Anda kapan pun Anda inginkan, tanpa harus berurusan dengan auto pop-up.

Selain itu, setiap kali Anda mempublikasikan posting, Anda akan melihat kotak pop-up muncul bahwa telah berbagi pilihan. Hal ini telah terisi untuk kemudahan Anda, dan Anda dapat menambahkan komentar yang Anda inginkan. Anda juga dapat memilih teman Anda yang anda ingin berbagi posting dengan anda. Secara default, pilihan tersebut akan ditetapkan ke Publik.
Jika Anda tidak ingin kotak berbagi, dan jika itu mengganggu Anda, Anda dapat menonaktifkannya dengan masuk ke Pengaturan >> Tulisan dan Komentar.

Itu saja. Anda dapat mengambil keuntungan dari fitur ini untuk dengan mudah berbagi konten Anda tanpa harus secara manual pergi ke halaman Anda untuk mensharingnya ataupun kemudian menggunakan widget. Jika Anda ingin otomatisasi, Anda dapat menggunakan sebuah aplikasi seperti HootSuite.

Read More. . .

Cara Membuat Permalink di Blog

Cara Membuat Permalink di Blog  

 

Cara Membuat Permalink di Blog - Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan jawaban atas pertanyaan sobat blogger tentang cara membuat / memasang permalink di blogspot sama persis dengan permanen link di blog ini. Sekedar informasi, postingan sebelumnya adalah cara membuat logo. Sebelum kita ke TKP ada baiknya saya jelaskan sedikit dulu tentang Permalink ( permanen link).

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) .

Cara Membuat Permanen Link di Blog

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.

<!-- Permalink Tatelu -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='http://i1108.photobucket.com/albums/h405/christian410/269111_225685127450056_100000257112719_900053_7432574_n.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Tatelu -->

5. Klik save dan lihat hasilnya.

Tambahan :

• Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat
• Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )

Read More. . .