Setelah otak-atik kode CSS, maka hadirlah penampilan cbox Beben si bloglang anu ganteng kalem tea yang baru b-) Kan tahun baru, jadi sedikit baru lah ;)) Jika minat dengan yg model yg dulu Amazing Glider Menu silahkan :) Menggunakan javascript dan kode CSS terciptalah hide/show cbox ini. Melihat kebanyakan menggunakan teknik slide buku tamunya :D Kalau minat dg show/hide ramuan membuat buku tamu bisa hilang dan muncul ini kemottt coy!!!
Kode CSS
#cboxbutton {
position: fixed;
top: 5px;
right: 5px;
width: 200px;
padding: 3px;
text-align: center;
cursor: pointer;
background-color: #FFFFFF;
border:#000 1px solid;
font-family: Tahoma, sans-serif;
font-size: 14px;
}
#cboxdiv {
display: none;
position: fixed;
top: 35px;
right: 5px;
width: 200px;
background-color: #FFFFFF;
padding: 3px;
line-height: 0;
border:#000 1px solid;
}
Letakin kode CSS tersebut sebelum/diatas kode ]]></b:skin> Keterangan kode CSS berwarna:position: fixed;
top: 5px;
right: 5px;
width: 200px;
padding: 3px;
text-align: center;
cursor: pointer;
background-color: #FFFFFF;
border:#000 1px solid;
font-family: Tahoma, sans-serif;
font-size: 14px;
}
#cboxdiv {
display: none;
position: fixed;
top: 35px;
right: 5px;
width: 200px;
background-color: #FFFFFF;
padding: 3px;
line-height: 0;
border:#000 1px solid;
}
- Warna merah Jika posisi ingin ada diatas, jika ingin ada dibawah silahkan ganti dengan bottom
- Warna biru Lebar frame cbox sobat.
Script berwarna itu (kode frame) ganti dengan kepunyaan sobat ;) Lalu masukin kode HTML ini didalam tag <body><script type="text/javascript">
//<![CDATA[
var cbSide = false;
var cbLoad = false;
function togglecbox () {
var cboxdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");
if (!cbSide) {
if (!cbLoad) {
cboxdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=294584&boxtag=7c3kfw&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#ababab 1px solid;border-bottom:0px" id="cboxmain"></iframe>
<iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=294584&boxtag=7c3kfw&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px" id="cboxform"></iframe>';
cbLoad = true;
}
cboxdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cboxdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbSide = !cbSide;
}
//]]>
</script>
<div id='cboxbutton' onclick='togglecbox ()'>Open Cbox</div>
<div id='cboxdiv'></div>Save. Jika sobat pusing dan mau cara instant Add a Gadget ► HTML/Javascript masukin semua deh ramuan ini Click Here for Look Code<script type="text/javascript">
//<![CDATA[
var cbSide = false;
var cbLoad = false;
function togglecbox() {
var cboxdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");
if (!cbSide) {
if (!cbLoad) {
cboxdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=294584&boxtag=7c3kfw&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#ababab 1px solid;border-bottom:0px" id="cboxmain"></iframe><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=294584&boxtag=7c3kfw&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px" id="cboxform"></iframe>';
cbLoad = true;
}
cboxdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cboxdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbSide = !cbSide;
}
//]]>
</script>
<div id="cboxbutton" style="position: fixed; bottom: 5px; right: 5px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #fff; border:#555 1px solid; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()">Open Cbox</div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 35px; right: 5px; width: 200px; background: #fff; padding: 3px; line-height: 0;border:#555 1px solid;"></div>
//<![CDATA[
var cbSide = false;
var cbLoad = false;
function togglecbox() {
var cboxdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");
if (!cbSide) {
if (!cbLoad) {
cboxdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=294584&boxtag=7c3kfw&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#ababab 1px solid;border-bottom:0px" id="cboxmain"></iframe><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=294584&boxtag=7c3kfw&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px" id="cboxform"></iframe>';
cbLoad = true;
}
cboxdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cboxdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbSide = !cbSide;
}
//]]>
</script>
<div id="cboxbutton" style="position: fixed; bottom: 5px; right: 5px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #fff; border:#555 1px solid; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()">Open Cbox</div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 35px; right: 5px; width: 200px; background: #fff; padding: 3px; line-height: 0;border:#555 1px solid;"></div>
Happy holidays \m/
Loading... |
9 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...