Show/hide Cbox pada posisi bawah [+Fire Background]

Written By Enda Fivers on 30 September 2010 | Thursday, September 30, 2010


Hmmmm...akhir-akhir ini postingan saya tidak jauh-jauh dari Cbox nih, tapi tak apalah yang penting Cbox (hehehe..Cbox lagi). Setelah otak-atik kode akhirnya saya menemukannya nih bagiamana cara membuat Cbox Show/Hide pada Posisi bawah dengan fasilitas Background(Background dapat diganti). Mungkin saja sobat bosan dengan Cbox Show/Hide disebelah kiri atau kanan blog (*Patut dicoba nih).

Caranya mudah kok, baiklah...mau tau caranya?? yuk ikuti langkah berikut :

1. Pastinya login Blogger dulu
2. Pilih Rancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java Script (Jangan diberi judul)
4. Copas kode berikut :
<style type="text/css">
#cb{
position:fixed;
bottom:150px;
z-index:+1000;
}
* html #cb{position:relative;}
.cbtab{
height:30px;
width:150px;
float:top;
cursor:pointer;
background:url('http://lh3.ggpht.com/_yF0--u7KSSI/TKQjhw7n0fI/AAAAAAAAAuY/Kn2pdAIOzcA/BUkuTamu.png') no-repeat;
}
.cbcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:5px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideCB(){
var cb = document.getElementById("cb");
var w = cb.offsetWidth;
cb.opened ? moveCB(0, 30-w) : moveCB(20-w, 0);
cb.opened = !cb.opened;
}
function moveCB(x0, xf){
var cb = document.getElementById("cb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
cb.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveCB("+x+", "+xf+")", 10);}
}
</script>
<div id="cb">
<div class="cbtab" onclick="showHideCB()"> </div>
<div class="cbcontent">

<!-- GANTI DENGAN KODE CBOX - v001 -->

<div style="text-align: right;">
<a href="javascript:showHideCB()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.berbagidisini.com/2010/09/showhide-cbox-pada-posisi-bawah-fire.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var cb = document.getElementById("cb");
cb.style.bottom = (30-cb.offsetWidth).toString() + "px";
</script>

5. Ganti Kode yang berwarna merah dengan kode cbox
Note : Kode diatas digunakan untuk ukuran Cbox berikut (lihat Contoh berikut) :
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: left; line-height: 0">
<div><iframe frameborder="0" width="270" height="130" src="http://www6.cbox.ws/box/?boxid=558049&amp;boxtag=b5gcdz&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 0px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="270" height="80" src="http://www6.cbox.ws/box/?boxid=558049&amp;boxtag=b5gcdz&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 0px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

-Silahkan ubah ukuran Cbox sesuai text berwarna biru diatas.
-Jika menggunakan Cbox yang ukuran tingginya melebihi ketentuan diatas silahkan ubah kode yang diberi background kuning (30) menjadi -100 (min 100), merubah kedua kode tersebut harus sama angkanya, Kalau belum pas silahkan ubah angka tersebut hingga menemukan hasilnya (*Jangan bosan-bosan mencoba)


6. Save & Lihat Blog..... jeng..jeng..jeng....
Nah... Cukup segitu caranya.
"Silahkan dikembangkan sendiri untuk tampilan lebih menarik lagi"
"Jika ingin Copas tulisan ini jangan lupa beri sumbernya yaa (*kode etik blogger) "
 thx....

33 comments:

Kisah Abu Nawas said...

cara menyembunyikannya begitu ya
ok sob aku coba dulu

BRI Jakarta Veteran said...

wah mantabs bisa dicoba, agar loading blog bisa lebih cepat ....

Dhana/戴安娜 said...

salam sahabat
wah bisa di amksimalkan dengan baik hasilnya makasih yach good luck

Dimas Anarky said...

maksud posisi bawah tuh apa????hehehe..saya gak mudeng

Usman Jambak said...

Ok...ntar tak coba ya..

Oh ya gan saya mo ngasih gan sebuah Award, silahkan ambil dan bawa pulang di link http://exeloph.blogspot.com/

Beben said...

mantap coy...

secangkir teh dan sekerat roti said...

anr sih bukan pengguna Cbox :)

z33s said...

Cbox mang lebih mendingan dari yang lain... terus berkarya kawan...

salam fivers...

eNdA said...

@Dimas AnarkyPosisi bawah maksudnya,,pemasangan[peletakan] cbox tidak lagi di kiri/kanan blog seperti umumnya yg digunakan blogger.

(seperti tombol Follow pada pojok kiri bawah blog saya ini)

Skydrugz said...

thnaks

D3nBa9as said...

Cari tau ah. Thanks bro. Salam kenal.

erik said...

Thank son Info...gue coba dulu.....

narti said...

makasih tutorialnya ya...

Anonymous said...

oke jg tutorialnya...tp ane pake wp..

aciid !!!!!! said...

owh gitu tow :D
thanks ya

Iskaruji said...

Ctr+D lagi nich...nice tips...happy blogging aja

Raharjo Ismail said...

keren mas, nati aku coba praktekin. Thanks mas, berkarya terus...!!!

Raharjo Ismail said...

mas, show/hide cbox udah aku coba di blog aku. Aku mau nanya gimana posisinya agak tersembunyi sedikit ke bawah, yg nampak cuma form cboxnya aja. Satu lagi mas, waktu aku ganti gambar navigasinya di bagian atas, kok gambarnya gak transparan masih ada warna putihnya di sisi gambar, gimana mas supaya transparan. Jangan bosan-bosan mas yaa. Thanks.

eNdA said...

@Raharjo Ismail : Untuk menyembunyikannya lagi, jawabannya ada di note pada point No.5 (baru saya tambahkan)hehe...

Kalo gambar navigasinya ga transparant itu berarti memang sudah dasar gambarnya,, silahkan ganti gambar (membuatnya bisa menggunakan Photoshop dengan mode backgroundnya transparan).

Silahkan dicoba mas..moga berhasil...

(@_^)

kisah abu nawas said...

akhirnya belum juga mudeng ini sob

eNdA said...

@kisah abu nawas : hehehehe...dimananya yg ga mudeng nih sob :D

03agoenk said...

Nice info bro, uda saya coba dan berhasil, thankz......

Raharjo Ismail said...

Trims mas, udah saya coba dan berhasil. skali lagi trims ya. Tapi gambar navigasinya tetap saja gak transparant, padahal udah saya bikin di photoshop dgn mode transparan. Cuma navigasi tutupnya saja yang jadi transparan. Jangan bosan-bosan ya mas..

Kedai Obat said...

Andi Kusuma mengatakan :

Makasih buat "suplemen" bikin buku tamu di CBOX.. Salam Blogger Sobat Fivers :)

Muhammad Chandra said...

waah tambah mantep aja dengan adanya widget sperti ini sob :)

oh iya , saya mau tanya bagaimana cara membuat tab view dengan gambar seperti di blog sobat ?

saya tunggu jawabanya di blog saya ya sob..

thanks

shiput™ said...

Keren Blognya, ,mampir atuh kang enda

sHeRrY said...

this looks really cool..would you mind having tutorials in English?

»•ASforeva•«™ said...

Itu kenapa pny saya gabisa d show/hide ya? thx tolong bantuan ny...

gembelusernya said...

kayaknya kalo di hidden jadi agak lamban deh,,, menurut aku loh..

AegyoRin_Sherin said...

Kalo misalnya nyembunyiin cboxnya pake gambar html gambar gif gimana caranya? tolong dibantu ya!! :D

Admin said...

@AegyoRin_Sherin Silahkan lihat DISINI

AE. Yahya Mappaerang said...

ijin copas brother :) thanks b4

Anonymous said...

Hosting Gratis Brow keren nih
check it bro buruan di link bawah ini

http://goo.gl/DcD5z