Show/Hide Cbox pada posisi atas

Written By Enda Fivers on 05 October 2010 | Tuesday, October 05, 2010

Membuat cbox Show/Hide pada bagian atas ini merupakan pengembangan kode dari kode-kode untuk membuat cbox Show/Hide sebelumnya, sebenarnya berawal dari Show/hide cbox pada sisi kiri atau kanan blog. Nekat adalah modal utama saya dalam hal otak-atik kode ini, karna saya bukanlah seorang yang ahli dibidang HTML ini...hehehe...
Tapi saya sangat bersyukur karena ALLAH.SWT telah memberikan sedikit kemampuan dan mengizinkan saya untuk mengolah kode ini... (*Alhamdulillah).

Sebenarnya saya buru-buru buat posting tilisan ini, tapi demi sobat-sobat blogger yang telah me-request nya, dan mungkin tak sempat buat otak-atik kode-kode sebelumnya, maka akan saya persembahkan postingan ini untuk memberikan kemudahan pada sobat dalam membuat Show/hide cbox pada posisi atas :).

Yasudah langsung saja ya :
1. Login Blogger
2. Pilih Perancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java script (Jangan diberi judul)
4. Copas kode berikut :
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ff0000;
background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif) #000000 repeat-y center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</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.top = 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://lh4.ggpht.com/_yF0--u7KSSI/TKYaaJhxVdI/AAAAAAAAAvY/nBUewsjG-Ck/bg-cbox.jpg) no-repeat;">

Kode Cbox Disini

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://lh4.ggpht.com/_yF0--u7KSSI/TKAy32pYhuI/AAAAAAAAArM/68dgmHYFy8M/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="left"><font size="2"><a http://www.berbagidisini.com/2010/10/showhide-cbox-pada-posisi-atas.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font></div>
</div></div></div>


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

5. Save
6. Tambahkan Gadget HTML/Java script lagi untuk Icon Navigasinya, copas kode berikut :
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://lh5.ggpht.com/_yF0--u7KSSI/TKAS0Ee4NLI/AAAAAAAAAq0/HLbB4jGuFxk/GuestBook.png" alt="cbox" title="Click here to open Guest Book" /></a>

7. Save

Note :
- Yang berwarna hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat)
- Yang Berwarna biru adalah background cbox (*Buat cbox nya transparan lihat disini)
- Tang berwarna merah ganti dengan kode Cbox
- Yang berwarna kuning adalah URL icon navigasi Close

Cukup sekian tutorialnya,, maaf atas segala kesalahan dan kekurangan. Saya harapkan sarannya untuk memperbaikin kesalahan dan kekurangan penulisan ini.

hmm,,mungkin postingan ini dapat dikatakan postingan terakhir, karena beberapa hari/minggu kedepan saya disibukkan untuk penulisan laporan kerja praktek(*Mulai dari 5 oct 2010). Mohon do'a sobat-sobat semua untuk kelancaran dalam menyelesaikan tugas-tugas saya.

Makasih..

40 comments:

D3nBa9as said...

Terus berbagi kawan.
Update selalu.
Salam...

lulu said...

wah asik c boxnya disimpan dimana saja mas =) ditunggu tutorial yang lain, mas loadingnya cepet banget blognya keren ih

Pakbroncos said...

ijin nyoba ya mas :)

Zetsu-kun ゼツ said...

thanks gan

MULTIMEDIA SMKN 4 SEMARANG said...

oh, bisa di coba deh ..

main balik nihh ..
hehehehe

gambutku said...

link juga sudah di pasang fren. bisa di cek di bagian situs kawanan---berbagi disini.:D

anak nelayan said...

mantab..terimakasih tutornya sobat

BRI Jakarta Veteran said...

mantab sahabat
ijin disimpan
lengkap koleksiku mengenai Cbox
terima-kasih

Taman Buah Hati said...

makasih informasinya.. tapi untuk semnetara yang standar aja dulu (tanpa di hide)..

dapurana said...

yang diaplikasikan di blog ini ya? menarik..

Papa Josh said...

manstap benar neh sob.... ijin niru ah...

ian said...

mantap sob...!!! makasih banget atas tutorialnya..!!! izin pakai..!!! saya suka blog sobat..!!! maju terus...!!!

yan-tha said...

mantap sob...!!! izin langsung di gunakan..!!! terus berkarya sob..!!!

ilyas prawibawa said...

mantap gan !!!
keren,,,,,, maju terus ya gan !!

Lulus Sutopo said...

Wah mantabs nich Sob
Thanks sharenya

ashtho software easy said...

Sumpah sob keren banget hidden Chatboxnya......

NgePas said...

wah bener keren sob... punya sobat ko bisa tuh ada kembang apinya gitu..
tututu YM az bisa jalan itu.. mantap... ajarin saya sob :D

Media Kesehatan said...

Saya blm pake ginian.. :D

enda fiVers said...

@NgePas : Sudah ada kembang apinya kok sob.. :) silahkan dicoba..

hmm,,klo YM tu saya cuma pake marquee aja :D

raharjo said...

info menarik lagi nih, smoga tetap sehat selalu dan senantiasa berbagi info.trims...

z33s said...

berbagi pengetahuan lagi...
info bagus. nich bisa hemat ruang di blog.

Muhammad Chandra said...

boleh di coba nih :)

Raharjo Ismail said...

sy doakan smoga sukses selalu dalam meraih masa depan, pasti akan ditunggu info-info barunya setelah menyelesaikan tugas

wira said...

tips yang menarik, thanks for sharing :D

adees said...

makasii iaa sob ataas tutornya ..

Indahnya Kebersamaan said...

Sip, makasih gan infonya

Chenk Rahman said...

Keren sob...
Lam kenal, From: Chenk Rahman

IF Info News /如果信息新 said...

tutorial bagus sob nanti mau dicoba Nice Post", oo ia sekalian mau kasih tahu ada award Indonesia Peduli untuk sobat..... silakan diambil ya, thanks

-1y0nk- said...

nice info sob...

Anonymous said...

BANYAK MUSIKNYA http://www.kintunan.tk

zhoul has said...

bisa ngak ajarin aku cara bikin ads bergetar(vibrate)

Enda Fivers said...

@zhoul has cuma pake efek marquee aja kok (*banner+marquee) :))

sepak bola news = soccer said...

bagus nih tutorial saya suka, ditunggu partisipasi mas di blog saya semoga mas sukses dan enjoy

Fiqih Yogantara said...

Gan.. ko buku tamunya stengah yaa masuk nya...
mohon bantuannya.
post balik ke buku tamu.. :)
thanx

blog special said...

gan setalah dicoba ternyata di minta kode chat boxe

Admin said...

yg di gambrny itu apa blognya?

Adrian said...

nice trik sob..jangan lupa komentar balik di blogku ya sobat

Anonymous said...

keren banget gan....!!!!
baru nemu yang kaya ginian...
biasanya di pinggir mulu ga asyik...

terus maju....
keren,,,,
dua jempol buat mu...!!!!

Toko Busana Anak said...

Dicoba dulu sobat di Toko Busana Anak, sangat bermanfaat buat ngurangin space halaman yang tersedia plus unik lagi. Thks ya

Opini Indonesia said...

Ijin share ya bozz