Cara Membuat Widget Follow Me Twitter

Follow Me On Twitter Widget itu dia istilah kerennya untuk widget ini. Ada berbagai macam jenis widget Follow Me yang sering kita lihat tentunya, mulai dari widget Follow Me animasisampai yang statis (diam). Dan penempatan widget ini pun bisa dimana saja, bisa di sidebar dan ada juga widget Follow Me yang melayang (floating) bebas ditempatkan di area mana saja. Kali ini saya mau share cara pasang widget follow me twitter melayang aja deh seperti yang ada di blog ini. Sekalian saya kasih 2 tipe sekaligus, yang dengan animasi sama yang statis (diam) alias non animasi biar ngga ada yang minta-minta lagi ya he he.

Widget Follow Me Twitter Melayang dengan Animasi :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/SamuelSynGates" target="_blank"><object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="159" height="159"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=http://twitter.com/SamuelSynGates" /></object></a>

4.      Ganti username Twitter http://twitter.com/SamuelSynGatesdengan akun twitter anda.

5.       Save / Simpan.

Widget Follow Me Twitter Non Animasi (statis) :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/SamuelSynGates" target="_blank"><img src="http://www.twitterbuttons.org/images/twitter-9a.png" width="150" height="124" border="0" /></a>

4.      Ganti username Twitter http://twitter.com/SamuelSynGatesdengan akun twitter anda.

5.       Save / Simpan.

Nah untuk widget follow me twitter yang kedua, sobat dapat menggonta-ganti gambar buttonnya dengan koleksi gambar button follow me yang ada disini http://www.twitterbuttons.org/index.html. Caranya tinggal ganti URL button yang saya tandai dengan warna birudengan URL button twitter pilihan. Ada puluhan button twitter follow me yang bisa sobat pilih. Contoh gambar-gambarnya yang ada dibawah ini nih :

Oke sobat, sekian dulu sharing kali ini tentang cara memasang widget follow me twitter melayang. Semoga bisa memenuhi keinginan sobat blogger yang pernah menanyakan cara membuat widget follow me ini pada saya beberapa waktu yang lalu. Don�t forget to follow me OK !

Cara Membuat Floating Share Button di Blog

Membuat share artikel melayang (floating button) ini merupakan kelanjutan dari posting saya sebelumnya Cara Memasang Button Share Artikel di Blog. Bedanya kalau tombol share melayang ini hanya untuk berbagi artikel ke 4 layanan social bookmark saja yaitu share artikel ke Facebook, Twitter, Google Buzz dan Google Plus One ( +1 ). Yang penting bisa berbagi artikel postingan lah.

Baik sobat langsung saja nih cara memasang share button melayang di blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste kedalam gadget baru tadi.

 

<style>

#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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;/*bs-fsmsb*/-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>

<div id="pageshare" title="Get this code from rayhanzhampiet.blogspot.com">

<div class="sbutton" id="fb">

<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script></div>

<div class="sbutton" id="rt">

<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">

</script></div>

<div class="sbutton" id="gb">

<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">

<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">

</script>

</a></div>

<div class="sbutton" id="gplusone">

<script src="http://apis.google.com/js/plusone.js" type="text/javascript">

</script>

<g:plusone size="tall"></g:plusone></div>

</div>

4.       Save / Simpan.

Update 5 Maret 2012 :

Cara pemasangan widget pada template:

1. Ganti/edit kode #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; dengan kode ini #pageshare {display:scroll;position:fixed;top:165px;left:30px;
2. Login ke dashboard blogger, pilih Rancangan > Edit HTML
3. Letakkan script widget tepat diatas kode   pada template.
4. Save / Simpan.

Cukup singkat bukan ternyata cara pasang share artikel melayang di blogspot ini ? Selamat mencoba cara membuat share artikel blog ini dan semoga sobat puas dengan hasilnya.

Cara Membuat Widget Daftar Menu Blog Otomatis

  Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi �All label�. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.

Cara Membuat Daftar Menu/Isi Di Sidebar Blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:310px; overflow:auto; padding:10px; width:260px;">

<div id="cl_option">

Loading... </div>

<div id="cl_content_list">

</div>

<script type="text/javascript">

var jumlah_kata_dalam_ringkasan = 250;

</script>

<script src="http://raihanun.googlecode.com/files/DaftarMenuOtomatis.js">

</script>

<script src="http://rayhanzhampiet.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script></div>

4.       Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.

5.       Save / Simpan.

Cukup mudah bukan cara membuat widget daftar menu blog ini ? Mudah-mudahan postingan ini bisa menjawab keinginan sobat-sobat yang �mungkin� saja salah alamat datang ke blog ini.

Cara Membuat Widget Random Post

Tips blogging kali ini saya ingin berbagi tentang bagaimana cara membuat widget random post, topik usang tapi masih banyak dicari oleh para newbie. Widget Random Post atau posting acak adalah satu dari sekian banyak pilihan widget yang bisa kita pasang di sidebar blog kita. Pada widget random post ini semua posting yang ada di blog, baik posting lama maupun postingan terbaru akan ditampilkan secara acak setiap kali kita membuka tab baru. Seperti apa cara membuat widget random post ini, ikuti langkah-langkahnya seperti dibawah ini :

• Login ke dashboard blogger anda.

• Pilih Rancangan >> Elemen Laman >> Tambah gadget (Add gadget) pilih HTML/JavaScript.

• Copy script dibawah ini dan paste pada gadget yang baru dibuat tadi.

<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

• Simpan dan preview hasilnya dengan mengklik Pratinjau.

• Selesai

Dengan adanya widget random post ini maka setiap pengunjung blog anda juga dapat langsung melihat postingan apa saja  yang ada di blog sobat. OK sobat, demikian langkah singkat cara membuat widget random post dari saya. Selamat mencoba untuk anda dan salam blogger.

Cara Membuat Widget Buku Tamu Melayang Floating Widget

  Widget buku tamu/guestbook melayang atau floating widgetbiasanya digunakan untuk buku tamu/guest book (shoutmix atau cbox) atau widget seperti statistik blog dan lain-lain terserah yang mau memakai saja. Kelebihan utama dari widget ini adalah bisa disembunyikan (sistem buka-tutup) dan bisa diletakkan dibagian tepi kiri, kanan atau bawah, sehingga bisa menghemat tempat pada sidebar.

Cara membuat buku tamu (guest book) / chatbox melayang :

1.    Daftar dulu di Shoutmix atau Cbox, pilih salah satu saja.

2.  Isikan data yang diminta dengan lengkap, jika sudah selesai ambil kode shoutmix yang diberikan dan simpan dulu di notepad.

3.    Selanjutnya login ke dashboard blogger anda.

4.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

5.  Copy kode script dibawah ini dan paste pada gadget, kemudian masukkan kode shoutmix anda pada bagian yang saya tandai dengan tulisan warna merah.

<!-- Mulai Hidden Widget -->
<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:180px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>

LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI

<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="http://img221.imageshack.us/img221/4097/bukutamu3c.png" /></a>
</div>
<!-- Selesai Hidden Widget -->

6.    Preview dulu untuk  melihat hasilnya.

7.  Edit kode shoutmix pada bagian width dan height untuk mengatur lebar dan tinggi kotak widget sesuai keinginan. Sobat juga dapat melakukan editing pada bagian CSS untuk mengganti kode warna background atau mengganti URL gambar button dengan URL gambar anda sendiri. Silahkan bereksplorasi sendiri saja ya. Saran saya buatlah blog khusus untuk tempat uji coba sobat.

8.  Jika sudah beres Simpan/Save gadgetnya.

Dengan adanya widget guest book/buku tamu melayangseperti ini jadi memudahkan kita berinteraksi dengan pengunjung blog. Karena banyak juga pengunjung blog yang kadang malas menulis di kotak komentar namun hanya ingin sekedar menyapa melalui widget buku tamu shoutmix/cbox ini.

Cara Membuat Scroll pada Kotak Komentar dengan Menggunakan CSS

Hayoo..siapa yang mau membuat scroll pada kotak komentar blognya dengan menggunakan CSS silahkan mampir disini�(he he kayak orang mau jualan aja..!). Soalnya saya juga lagi bingung mau mulai dengan kalimat apa diawal tulisan, yang jelas topik kali ini memang mau membahas tuntas..tas..tentang cara membuat/menambahkan scroll pada kotak komentar dengan menggunakan CSS. Jika jumlah komentar pada sebuah artikel di blog sobat sudah banyak mungkin 20-50 komentar, tentunya pengunjung lain yang ingin berkomentar sedikit kerepotan karena harus scroll sampai bawah untuk menemukan kotak komentarnya. Nah solusi jitu untuk hal yang seperti ini, sobat bisa membuatkan scroll langsung pada kotak komentar agar lebih memudahkan pengunjung sekaligus membuat tampilan blog jadi lebih simple.

Berikut ini langkah-langkah cara menambahkan/membuat scroll pada kotak komentar :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Edit HTML, centang Expand widget template.

3.    Carilah kode CSS kotak komentar dengan bantuan Ctrl+F, biasanya ditandai dengan kode #comments-block{.

4.    Tambahkan kode CSS dibawah ini setelah kode  tadi.

max-height:300px;border:1px solid #eee;overflow:auto;

5.    Biar lebih jelas lagi saya berikan ilustrasi kode CSS pada kotak komentar blog ini SEBELUMdan SESUDAH dilakukan perubahan.

Kode CSS kotak komentar SEBELUM dirubah :

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

Kode CSS kotak komentar SESUDAH dirubah :

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

6.    Ukuran tinggi kotak komentar 300px, jenis border 1px solid serta warna border #eee dapat dirubah sesuai selera anda.

7.    Jika sudah selesai, SAVE template anda.

Well..sekarang tampilan kotak komentar jadi lebih rapi bukan ? Kalo gitu segera saja sobat membuat scroll pada kotak komentar blog anda dengan sedikit menambahkan kode CSS saja, sehingga tampilan blognya juga jadi lebih simple dan rapi serta nyaman dipandang. Semoga tips blogging ini bermanfaat.

Cara Membuat Button/Tombol Efek Animasi Bubble dengan Menggunakan CSS3

Pastinya sobat blogger sudah pernah melihat di blog lain ada dipasang button/tombol dengan animasi bubble atau seperti ada gelembung-gelembung balon didalam button/tombol tersebut. Button/tombol biasanya dibuat untuk meletakkan link download atau link lain tergantung kemauan si pengguna atau si pemasang tombol. Pada tips blogging ini saya mau berbagi mengenai cara membuat button/tombol dengan efek animasi bubble menggunakan CSS3. Namun sebelumnya silahkan dilihat dulu preview dari button animated bubble yang dibuat menggunakan CSS3 dibawah ini.

Demo BIGDemo MEDIUMDemo SMALL

Button/tombol yang dibuat terdiri dari 3 size atau ukuran yaitu besar, sedang dan kecil. Untuk kode button/tombolnya seperti yang saya tuliskan dibawah ini yang terbagi dalam 4 warna pilihan, sobat tinggal pilih ukuran dan warna yang sesuai yang diinginkan.

Kode button/tombol besar :

<a class="button big blue" href="LINK">LINKNAME</a>

<a class="button big green" href="LINK">LINKNAME</a>

<a class="button big orange" href="LINK">LINKNAME</a>

<a class="button big gray" href="LINK">LINKNAME</a>

Kode button/tombol sedang :

<a class="button blue medium" href="LINK">LINKNAME</a>

<a class="button green medium" href="LINK">LINKNAME</a>

<a class="button orange medium" href="LINK">LINKNAME</a>

<a class="button gray medium" href="LINK">LINKNAME</a>

Kode button/tombol kecil :

<a class="button small blue" href="LINK">LINKNAME</a>

<a class="button small green" href="LINK">LINKNAME</a>

<a class="button small orange" href="LINK">LINKNAME</a>

<a class="button small gray" href="LINK">LINKNAME</a>

Ganti tulisan Link dengan link referensi tujuan jika button/tombol animasi bubble tersebut diklik, kemudian ganti juga tulisan Link-Name dengan nama button atau tulisan yang akan terlihat didalam button. Untuk penempatan kodenya bisa ditempatkan didalam postingan atau kalo mau meletakkannya didalam template maka letakkan dimana saja atau diantara kode <body> dan kode </body>  pada template anda. Eeiiitt�sabar jangan di save dulu templatenya karena masih ada kode CSS yang harus sobat masukkan pada template agar button/tombol dengan efek animasi bubble tadi berfungsi dengan baik.

.button{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; } .button:hover{ background-position:top left; background-position:top left, bottom right, 0 0, 0 0; } .button:active{ bottom:-1px; } /* The three buttons sizes */ .button.big { font-size:30px;} .button.medium { font-size:18px;} .button.small { font-size:13px;} /* BlueButton */ .blue.button{ color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color: #48b5f2; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover{ background-color:#63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); } /* Green Button */ .green.button{ color:#345903 !important; border:1px solid #96a37b !important; background-color: #79be1e; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); } .green.button:hover{ background-color:#89d228; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); } /* Orange Button */ .orange.button{ color:#693e0a !important; border:1px solid #bea280 !important; background-color: #e38d27; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); } .orange.button:hover{ background-color:#ec9732; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); } /* Orange Button */ .gray.button{ color:#525252 !important; border:1px solid #a5a5a5 !important; background-color: #a9adb1; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button:hover{ background-color:#b6bbc0; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCg-uDCrxi19dLki5sq0cmA-rbAN848fQSCQ0FNgGYRr7XeO-XN_Ep5yOV43sFsAT_MEvu6XEkBqkurDWNHO9A6fp72rr3urSvLzFSZpNAmyTgR_7Hsj0qELOs0pz07CVKCnJ4h9ANnah/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }

Copy kode CSS diatas  kemudian paste tepat diatas kode  ]]></b:skin>pada template anda. Nah sekarang barulah SAVE template anda dan coba lihat hasilnya. Dengan menggunakan button/tombol efek animasi bubble ini pastinya button yang dibuat jadi kelihatan keren dan menarik. Selamat mencoba

Cara Membuat Menu Navigasi Rocking Rolling Rounded

Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya kepincut. Pada versi awal dari menu Rocking Rolling ini hanya menggunakan efek sliding seperti yang dapat sobat lihat di http://tympanus.net/Tutorials/RockingRollingMenu/. Namun dalam versi yang saya share kali ini terdapat penambahan  efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!





VIEW DEMO HERE

Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

 Selamat bereksprimen coba Membuat Rocking Rolling Rounded Menu dengan JQuery ini, kalo belum berhasil coba terus aja yaaacchh�!! Salam Blogger and happy nice blogging !

Cara Membuat Link Menjadi Warna-Warni di Blog

Udah pernah liat link yang berwarna-warniseperti pelangi (rainbow) ketika disorot kursor ? Ya sebenarnya itu adalah salah satu trik sederhana yang menggunakan javascript. Cara membuatnya pun sangat mudah dan GPL alias gak pake lama, asal sudah tau script yang mau dipake maka ngga sampe 5 menit proses membuat link di blog menjadi berwarna-warni seperti pelangi itu pun akan segera terwujud.

Cara membuat link berwarna-warni :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.    Copy kode javascript dibawah ini dan paste pada gadget.

<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>

4.    Selesai dan silahkan diliat hasilnya.

5.    Cara lainnya adalah sobat bisa meletakkan script tadi pada template tepatnya diatas kode <body>, masuk ke menu Edit HTML, letakkan scriptnya dan save template anda.

Benar kan ngga sampai 5 menit ? Nah selamat mencoba cara membuat link menjadi warna-warni ini, semoga sobat puas dengan hasilnya.

Cara Membuat Efek Hujan Salju di Blog Anda

 Efek hujan salju yang saya posting ini sangat bagus ditampilkan jika blog sobat mempunyai background/latar belakang berwarna gelap atau hitam. Karena kalo efek hujan salju ini dipasang di blogyang background pada bagian posting warna terang atau putih seperti blog saya ini, maka pemasangan efek hujan saljunya jadi sia-sia karena tidak akan terlihat. Apalagi kalo hujan saljunya kecil-kecil kayak hujan gerimis gitu wah tambah ngga keliatan jadinya. Kalau efek hujan daun  berjatuhan yang saya posting sebelum ini karena daunnya berwarna hijau malah lebih terlihat jika backgroundnya putih. Langsung aja nih sobat ikuti langkah pembuatannya disini ya.

Cara membuat/memasang efek hujan salju di blog :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).

3.    Letakkan script efek hujan salju dibawah ini pada gadget.

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

4.    Simpan dan lihat hasilnya.

Nah hujan saljunya sudah terlihat turun kan he he.., kapan ya kita bisa merasakan musim dingin beneran kayak di Amrik sono ? OK sobat sekian dulu aja tips/trik cara membuat/pasang efek hujan salju pada blogini. Semoga bermanfaat dan salam blogger.

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor

Pastinya sobat blogger sudah sering melihat tampilan kursor di blog lain dengan efek bintang yang bertaburan (sprinkle) dan berwarna-warni bukan ? Memang efek bintang bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.

Cara membuat efek bintang bertaburan pada kursorcukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :

1.       Login ke dashboard blogger sobat.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy dan paste script dibawah ini pada gadget baru tadi.

<script>// JavaScript Document<script type='text/javascript'>// <![CDATA[ var colour="red"; var sparkles=65; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]></script>

4.       Simpan dan lihat hasilnya.

NB : Silahkan ganti warna �red� dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Efek bintang bertaburan pada kursor ini akan terlihat jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja yang sabar ya. Selamat mencoba sobat.

Cara Membuat Efek Daun Berjatuhan Di Blog

Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1.       Seperti biasa login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode </head> pada template dengan menggunakan Ctrl+F.

4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he�

NB:Kalau di blog sobat sudah menggunakan efek bintang pada kursor, video slide, pemutar music mp3 online atau penggunaan script animasi yang lainnya, sebaiknya jangan tambahkan lagi dengan efek daun berjatuhan ini. Karena akan memberatkan loading blog sobat alias jadi lemot. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript. Trims.

Cara Membuat Text Pada Cursor Blog

Kali ini saya mau share tentang membuat teks pada kursor. Teks yang mengikuti kursor pada trik efek ini menggunakan javascript yang relatif ringan, jadi jangan khawatir akan pengaruhnya terhadap loading blog. Buat yang sudah bosan dengan trik mengganti gambar pada kursor, coba aja trik membuat teks yang mengikuti kursor ini biar ganti suasana tampilan baru. Kan udah Tahun Baru nih..he he.


Cara Membuat Teks Pada Kursor :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda disini";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

4.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6.    Tulis teks yang anda inginkan pada �Tulis teks disini� yang berwarna merah.
7.   Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

Selamat mencoba Cara Membuat Teks Pada Kursor ini dan Selamat Tahun Baru 2012 buat sahabat blogger semuanya !!