Membuat CBOX Tersembunyi di blog
Membuat cbox tersembunyi 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMwvxLypIxvU_O_tTPP9fmcUugd6dEBj3CsNdG-bmo2rjxKPxqvja9othE_OEHsbaWUJHagGgSBAwSMSOktbzpMqm5vv2ZPnFYgMIYNkwvQi4RwcMrd0WLVSiMC69RkHIRRhzBkEhD_w36/) #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/AVvXsEgauIjJAb7O5vWVj9pPecWpLcyK4nPMH9UN50F54AAZqSUXlklybRN6dNPPNn89goHzRkbqrWQBpPdrUjenKN4PBbe6QFFA9A-PVQwzDQUpQ6zeOkxB9PZH8oUbLa8fcZiUZ4n1CWxvqoQ/) 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/AVvXsEhGVFyHVILfKCifDhbhZWMi_EUsm_cTLFlGN84KWkUOZrRFMSSLXSGheg9syydHGevwj2BqKOTxQL3nV3ZcNY6YuiBxgfr5mjCW3NNKO2-YguE6R2vMbfpRymm3NtviRpc6uxFHfScIyAE/" 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/AVvXsEgP1KiGabJpWUMoXkUmyuryrgK963xxyctnjclhMNqyt2gwBGc90GFeCLcCsQLw5Y2DwP7pevOshqB5oymrYe8vOeM7PYVAu2OBgl1aM0RxFH3y7nzFoq_CaABhY_nBDOHGmif31Ql11X4/" 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.
Sumber : http://raytkj.blogspot.com/2011/03/membuat-cbox-tersembunyi-di-blog.html#ixzz29p7kWs23
Kaca
pembesar atau lup digunakan untuk melihat benda kecil yang tidak bisa
dilihat dengan mata secara langsung. Lup menggunakan sebuah lensa
cembung atau lensa positif untuk memperbesar objek menjadi bayangan
sehingga dapat dilihat dengan jelas.
