Trik Menyembunyikan Cbox Diatas Blog

Berhubung banyak sobat blogger yang menanyakan cara membuat cbox tersembunyi diatas seperti di blog saya ini. Saya buatin aja tutorialnya buat sobat semua. Sebenarnya agak menyimpang dari tema blog saya karena tidak membahas tentang tutorial blog tapi karena banyak permohonan kali ini tak apa2lah.hehehe

Langsung to the point aja saya kasih tutorialnya :D
Silahkan ikuti step by step berikut :
1. Login Blogger
2. Pilih Perancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java script (Jangan diberi judul)
4. Copas kode berikut :

<style elbtype="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://exeloph.blogspot.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

Semoga bermanfaat buat sobat semua. Trik ini juga saya blajar dari blog Enda Fivers. Saya bisa kalian juga pasti bisa... Selamat mencoba...

Posted by Sang Pemimpi | at 3/02/2011

15 komentar:

Syaiful Anwar mengatakan...

nah ini baru pas..., ,makasih sob ye, jadi ngrepotin nie

Er'end mengatakan...

Bagus Gan jadi kepingin nie,tapi untuk jaringan yg lelet seperti disini(Papua)cocok ga yach? Jam2 sibuk seperti sekarang,saya ga bisa masuk cbox agan.Makasih infonya Gan,salam kenal!

Sang Pemimpi mengatakan...

@syaiful : ok sob...
@Er'end : gpp sob.. ini bisa mengurangi spam yg masuk ke blog..

angkring tugu mengatakan...

keren tipsnya... patut q coba!!!

Sang Pemimpi mengatakan...

yupz... selamat mencoba sob....

Marindajaya mengatakan...

wah..sharing yg bagus sob.saya mau coba.thanks ya.......

Puisi - Puisi mengatakan...

mantap sob :6:

fyna mengatakan...

nice tutorial...

Sang Pemimpi mengatakan...

silahkan di coba tmn2...

Kabar Kepri mengatakan...

Info yang menarik...boleh ya dicopas buat blogku..salam blogger..

Sang Pemimpi mengatakan...

oke... monggo sob...

Achmad Ridwan mengatakan...

:a:
(I LIKE IT)

*SpRing mengatakan...

udah di coba, berhasil sieh, tapi ga bisa transparant, eh sekalinya download ga bisa di buka kode transparant utk background nya, hiks, mohon penjelasannya lebih lanjut donk...

thanks a lot
^^

lucky one mengatakan...

benar-benar tersembunyi...


Silakan Bekomentar.!!!


Semakin banyak berkomentar, semakin banyak backlink, semakin cinta Search Engine terhadap blog anda
:a:
:b:
:c:
:1: :2: :3: :4: :5: :6:
:7: :8: :9: :10: :11: :12:

Posting Komentar