Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat dan Memasang Hidden Shoubox - Shoutbox Nongol Hilang

Panduan BloGGeR dan Tutorial BloGGeR kali ini merupakan kelanjutan Panduan BloGGeR sebelumnya tentang (langsung KLIK untuk membuka panduan tersebut!). Supaya shotbox yang sudah sampeyan pasang tidak terlalu meemenuhi halaman blog dan terutama biar terlihat lebih genit, maka akan kita lengkapi menjadi sebuah hidden shoubox yang nongkrongnya di blog sampeyan bagian sebelah kiri atau sebelah kanan. Untuk membangun "Hidden shoutbox" ini, dibutuhkan sebuah javascript dan kode html yang terdiri dari kode css dan xhtml. Melalui bantuan kode tambahan inilah, maka shotbox bisa ngumpet seperti burung beo sampeyan yang pinter ngomong "mboke ..., nambah maning, mboke ..." he ... he ... iya, khan, to?! he .... Dengan perubahan sedikit kode, Hidden shoutbox ini juga tidak hanya dengan cara di "KLIK", baru bisa nongol, kandang burung beo pinter ini bisa juga nongol hanya gara-gara sebuah elusan dan sentuhan yang di berikan pada pintu sangkarnya. Ndak percaya? Coba saja, pasti sampeyan baru percaya! Emang burung Perkutut saja yang bisa merespon elusan tangan? He ....

Pada prinsipnya shoutbox ini akan kita sembunyikan dari halaman blog sampeyan, sehingga yang terlihat hanya sebuah teks dengan bentuk tulisan "Buku tamu". Teks yang berupa gambar (tinggi 145px dan lebar 30px - seperti gambar di samping) ini akan menjadi kunci untuk membuka dan mengumpetkan (menyembunyikan, he ... he ...) si shoutbox supaya kembali ke ... kandangnya lagi. Untuk memfungsikan Hidden Shoutbox kita berikan 2 (dua) pilihan. Yang pertama model KLIK dan yang kedua model sentuhan.

Cara Membuat Hidden Shouthbox :

  1. Buka Kode HTML shoutbox : Buka kembali kode html shoutbox sampeyan yang sudah disimpan di penambahan widget. Caranya seperti biasa : Login trus lanjutkan KLIK "Tata Letak (Layout)". Setelah masuk di Page Element (Elemen Laman), cari dimana sampeyan menyimpan kodenya. Setelah ketemu KLIK "Edit". Lihat dengan teliti apakah benar yang terlihat di depan mata sampeyan yang sudah "riyep-riyep" ngantuk itu benar-benar kode html shoutboxnya. Bila nggak keliru, silahkan teruskan lanjutannya.
  2. Copy Kode CSS, javascript dan html : Copy seluruh kode html dan javascript yang ada di bawah kemudian tambahkan pada kode html shoutbox.
  3. Save/Simpan : Setelah kode html dan javascript yang baru dipadukan dengan kode html shoutbox, KLIK "SAVE/Simpan".
  4. Buka Blog : Lihat hasilnya dengan membuka blog.

Kode CSS, Javascript dan xHTML Hidden Shoutbox :

<style type="text/css">
#CilukBa_bgsGR{position:fixed;top:50px;z-index:+1000;}
* html #CilukBa_bgsGR{position:relative;}
.CilukBa_bgsGRknop{height:145px;width:33px;float:left;cursor:pointer;
background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/button/TeksAnimaBukuTamu2.gif) no-repeat;}
.CilukBa_bgsGR_SB{float:left;border:2px solid #022f81;background:#75a3f8;padding:3px;}
</style>

<script type="text/javascript">
/* gubhug reyot * bloggerstars1 - bgs1GR */
function Ciluk_ba_bgsGR(){
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var w = CilukBa_bgsGR.offsetWidth;
CilukBa_bgsGR.opened ? moveCilukBa_bgsGR(0, 30-w) : moveCilukBa_bgsGR(20-w, 0);
CilukBa_bgsGR.opened = !CilukBa_bgsGR.opened;}
function moveCilukBa_bgsGR(x0, xf){
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;
CilukBa_bgsGR.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveCilukBa_bgsGR("+x+", "+xf+")", 10);}}
</script>

<div id="CilukBa_bgsGR">
<div class="CilukBa_bgsGRknop" onmouseover="Ciluk_ba_bgsGR()"> </div>
<div class="CilukBa_bgsGR_SB">

<!-- Disini Posisi KODE HTML Shoutbox === Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="bgs1GR" src="http://www6.shoutmix.com/?bgs1GR" width="160" height="500" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?bgs1GR">View sMix</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free aMix chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!--di sini akhir KODE HTML Shoutbox ==== End ShoutMix -->

</div></div>
<script type="text/javascript">
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");
CilukBa_bgsGR.style.right = (33-CilukBa_bgsGR.offsetWidth).toString() + "px";
</script>
  1. Model Sentuhan : Kode di atas digunakan sebagai model sentuhan. Ketika cursor disentuhkan ke gambar yang bertuliskan buku tamu, maka seluruh shoutbox akan nongol keluar.
  2. Model KLIK : Apabila sampeyan pingin yang model KLIK, silahkan kode yang bercetak tebal bertuliskan "onmouseover" (javascriptnya), diganti dengan "onclick", sehingga bentuknya menjadi :
    <div class="CilukBa_bgsGRknop" onclick="Ciluk_ba_bgsGR()
    Dengan perubahan ini maka si shoutbox akan nongol ketika "Buku tamu" di KLIK.
  3. Peletakan KOde Shotbox : Kode shoutbox milik sampeyan diletakkan persis di bawah kode :
    <div class="CilukBa_bgsGR_SB">
    dan di atas kode :
    </div></div>.
  4. Hidden Shoutbox ini telah dicoba dan berhasil digunakan tanpa kendala apapun!
  5. .

Selesai sudah dan semoga langsung bisa dinikmati hasilnya.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

9 komentar:

  1. mantap nich...
    BOS kalo mempercepat membuka bukutamu apanya yg di edit,,yg saya agak lebay keluarnya
    terima kasih sebelumnya...
    salam bloger..

    BalasHapus
  2. nah ini yang kucari-cari,,,makasih infonya top bgt

    BalasHapus
  3. kok ga bisa ya om.. timbul bacaan kya gini :

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "dd" must be terminated by the matching end-tag "".

    Tolong dong om pencerahannya

    BalasHapus
  4. WAH,,,,,,,BLOG NYA KEREN KAK,,,
    BISA MINTA RAHASIA NYA KAK?

    BalasHapus
  5. kak, kalau tulisannya diganti dari buku tamu menjadi chat aja gimana?

    BalasHapus
  6. ou ini caranya ya bang, baru au ane bang. tenkyu. patut di coba bang.

    BalasHapus
  7. Wah gemes aku, tapi kadang bingung, hehehe_

    BalasHapus
  8. Yang melayangnya di tengah ada ga gan ?

    http://aniemov.blogspot.com/

    BalasHapus

 
GR | Edited by | gubhug reyot