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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjusjhFjAondNBU94l4b5UiSrPCaZtiNKCiQVphOqtC_G3-W49Gbk5l1TDCaJanUnAbkQOV973mI_rYqBFUQKV-UEkZYqNVdFvKpe9AN98qodCKMp_pFR1zdZjIVihapgXlI1dqMKRCY/) no-repeat;">Kode Cbox Disini
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkEhCQESl5xD7dlN5qVRUKjw9DCFE1fSxb7cA3uOsYH9Lb3Xuw1xZNqpz1889trzCokZ1s-h0Ahz-a0NFtNI1xM87uIbwj5NKq_TmYmpqYopKoO7ON0gxDHFVkSTHxhyphenhyphengWot3WDO6p-bc/" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisApg39VNvw3LCddCLDNomIyYw0WyyGoqNnov0giylJb9dREZOvo0Xzb1LzRAnxEkdRsyEKyg40jv9WY8u_AlkOx8oe6g7uOyhKXH0Thsx4q_XJR4Gd3mBAWReVTcrqvZO_Xpa94yYJDA/" 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...
14 komentar:
nah ini baru pas..., ,makasih sob ye, jadi ngrepotin nie
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!
@syaiful : ok sob...
@Er'end : gpp sob.. ini bisa mengurangi spam yg masuk ke blog..
keren tipsnya... patut q coba!!!
yupz... selamat mencoba sob....
wah..sharing yg bagus sob.saya mau coba.thanks ya.......
mantap sob :6:
nice tutorial...
silahkan di coba tmn2...
:a:
Info yang menarik...boleh ya dicopas buat blogku..salam blogger..
oke... monggo sob...
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
^^
benar-benar tersembunyi...
Silakan Bekomentar.!!!
Semakin banyak berkomentar, semakin banyak backlink, semakin cinta Search Engine terhadap blog anda
:7: :8: :9: :10: :11: :12:
Posting Komentar