Membuat Sliding Box

Membuat Sliding box, code Scriptnya :

<!--Slidbox -->
<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBa9-9xf3dY750aGaIn8lyp_ThWXtFNPQAspMcM5xAib-eU1I-bc40N2PducBOr-WsPGz6mOGjbwCbLCKIdqZRdwy5OxWOQ9xzImv4qlqY4NkYr-Jb_RvHGEDYg3qZGL9RJiLzKk4YNOP/s0/bo-bg-html.gif)
repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">

<a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>
<!--Slidbox tempat isi -->
<strong style="color:#66ad3d;">JUDUL</strong>
Diisi Sesuka Hati
<!--Slidbox end tempat isi -->
</div></div>
<!--Slidbox end -->
<div style="-moz-border-radius: 12px 12px 12px 12px; background-color: #e6e6e6; border: 2px solid rgb(204, 204, 204); color: black; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
Hasil CodeScript </div>

Read more »

Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2009/10/membuat-back-to-top-dengan-efek-jquery.html#ixzz22JD8SqQM
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

Hasil CodeScript

Read more »

Membuat floating widget

Sebelumnya saya pernah menulis tentang cara membuat ini (membuat menu floating) tapi dengan tips hanya menggunkan modifikasi CSS saja, nah berikut ini sedikit modifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga mis : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.
Buka Layout Page Element dan Klik add gadget, kemudian pilih HTML/javaScript

<style type="text/css">
.gb_fixed{
position:fixed;
top:80px;
right:0px;
z-index:+10;
}

* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid gray;
background:#111;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div> <a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxMqjhl1P7GLgsrgId4TCLpqi5Ul6pw_-jUItx4sTZexo5K6cH6rpDl160VNBS6WNdDF6LfVvqlYRrJymXPGyxMXfGdeDiyxPpFpNYajett4DR9lV08nVzZutry1pOZ4-Uq4u_ep9DbpJ/s320/CloseButtonHot.bmp" /></a> </div>

tempatkan apa saja disini

<p>
<span style="font-size: 80%;">
<a href="http://jendelainfo23.blogspot.com/p/daftar-isi.html">Jendela Informasi</a></span></p>
</td></tr></table>
</div>

<script src="http://andreblog.googlecode.com/files/ordinaryhack-floatingku.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnV3CqrJq8c0l4Q07ETBBsrvDbaTuZPnSxM0DZRXC843TxxfKK2By19vAKYwODHu3tTmaEPEFPbz-1jil5Q12cNqPNYJa7Wv6-5gfAG-E9jZhpEkXTtKnaT2ZhMEOMW0OG2rlmPMPg-RwP/s320/sponsored.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>

Silahkan di Coba

Read more »

Membuat Top / Down Halaman

Dengan adanya perintah ini dapat memudahkan para reader untuk melihat halaman atas/bawah blog kita tanpa harus melakukan penggulungan layar.

Script Codenya hampir sama dengan Floating Image, yaitu gambarnya tetap diam sekalipun kita menggulung layar, seperti pada kotak dibawah halaman ini.

Untuk membuat perintah ke atas dan ke bawah adalah dengan memanfaatkan code script dari floating image yang kemudian dipasangi Link.

1. Dari halaman Darbor Blogger kamu, pilih Tata Letak - Edit HTML.
2. Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>:
#floating-atas-bawah { position:fixed; _position:absolute; bottom:5px; right:5px; clip:inherit; z-index:+1000;}
3. Setelah itu kopikan kode HTML berikut (gunakan Control C) dan letakkan di bawah </head> atau antara </head> dan <body>
   
   <div id='floating-atas-bawah'>
   <a href='#' title='Ke Atas'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/keatas.png'/></a> <a href='#footer' title='Ke Bawah'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/kebawah.png'/></a>
   </div>
   KETERANGAN :
   
   
   • Untuk gambar dapat diganti sesuai selera.
   • Dan Jika Perintah tidak bekerja, ganti  #footer dengan #bottom
   • Selesai dan Simpan.
   
   Berikut Ini adalah CONTOH Gambarnya
   
   
   

   URL: http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif
   

   

   URL: http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif
   

   

   URL: http://sites.google.com/site/ruangsc/imgsb/keatas.png
   

   

   URL: http://sites.google.com/site/ruangsc/imgsb/kebawah.png
   

   

   URL : http://sites.google.com/site/ruangsc/imgsb/scrolltop.png
   

   

   URL : http://sites.google.com/site/ruangsc/imgsb/scrolldown.png
   

   diambil dari Blog Kang Enes

Read more »

Membuat Floating Image (Melayang)

Apa Float Image/gambar melayang? hehehehehehe... susah mau kasih definisi detailnya... coba perhatikan didalam blog ini, floating image adalah gambar kotak yang terletak dibawah display page halaman ini.

Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?

Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.

Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:

• Login pada akun BlogID anda.
• Kemudian pilih Dashboard klik Tata Letak dan pilih Edit HTML.
• Cari kode ]]></b:skin> dengan menekan Control + F setelah ketemu letakkan code dibawah ini di diatas ]]></b:skin>.

#gambar1 {
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}

• Kemudian Copy kan lagi kode dibawah ini diantara ... </head> dan <body> :

<div id="gambar1">
<a href="http://bloggerblogku.blogspot.com/2010/05/membuat-floating-image-melayang.html" target="_blank" title="Tips Membuat Floating Image">
<img border="0" src="http://s3.tinypic.com/32zovnl.jpg"/></a>
</div>

• Jangan Lupa lakukan Preview dulu, setelah berhasil baru Simpan.

KETERANGAN:
Untuk Merubah Letak Gambar/Image

1. TOP untuk ATAS BOTTOM untuk BAWAH LEFT untuk diKIRI RIGHT untuk diKANAN Warna biru adalah URL dari gambar/image atau tautan yang ingin anda tampilkan.
2. Untuk Menampilkan Floting Image lebih dari 1 adalah dengan meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'>
   dst., lalu ubah menjadi gambar2 dst.
3. Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.
   
   Alamat Gambar yang dapat kamu coba : Adiwidget

Dibawah ini gambar yang dapat dicoba (Klik untuk Melihat Previewnya)

# Kupu-kupu 1 URL: http://s3.tinypic.com/32zovnl.jpg

# Kupu-kupu 2 URL: http://s6.tinypic.com/j64bw7.jpg

# Kucing URL: http://s5.tinypic.com/67uxav.jpg

# Mickey Mouse URL: http://s3.tinypic.com/ou5ahd.jpg

# Soniclari URL: http://s6.tinypic.com/auyrgh.jpg

# The Pooh URL: http://s5.tinypic.com/2itlohw.jpg

# Bumi Kita URL: http://s6.tinypic.com/9h5t8p.jpg

# Save Our Planet 1 URL: http://s6.tinypic.com/23sbwv7.jpg

# Save Our Planet 2 URL: http://s6.tinypic.com/1zf4yv8.jpg

Read more »

Cara Membuat Top of Page Icon

Anda mungkin sering mendapat suatu halaman blog yang panjang sehingga untuk melihat keseluruhan halaman harus menggunakan down scroll pada mouse.Kalau sudah pada akhir halaman biasanya agak malas juga harus menggunanan up scroll pada mouse untuk kembali lagi pada awal halaman.

Kalau blog anda model kayak begini yang mempunyai halaman yang panjang, sebaiknya anda menggunakan suatu tombol yang biasa disebut Top of Page Button.Kali ini top of page button modelnya berupa floating button.Untuk membuat adalah sebagai berikut:

1. Login pada Blogger.
2. Klik Layout pada Dashboard anda.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Masukkan kode berikut ini.
   
   <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif" /></a>
   6.Selanjutnya Save
   Anda bisa mengganti gambar lain sesuai dengan keinginan anda.Bila ingin mengganti gambar, ganti alamat image pada kode diatas yaitu:
   
   dengan beberapa icon image berikut :
   URL :http://img119.imageshack.us/img119/8589/arrowupcx2.gif
   URL :http://i831.photobucket.com/albums/zz233/qcux80/go_top.png
   
   URL: http://sites.google.com/site/ruangsc/imgsb/scrolltop.png
   
   dan sebagainya
   
   
   

Selamat Mencoba...

Diambil dari Marchsya Blog

Read more »