Cara Membuat Buku Tamu Bersembunyi

smart_cerdas_pro
Disini di tutoial ini akan saya akan sedikit berbagi cara membuat Buku Tamu tersembunyi, buku tamu ini gunanya untuk memudahkan pengunjung blog Anda bila ingin berkomentar atau sekedar menuliskan salam dari para pengunjung di blog Anda.

Caranya tidak begitu sulit, hanya tinggal Copy dan Paste Script di bawah ini ke dalam blog Anda. Selanjutnya kalau masih kurang paham, ikuti tata can cara berikut ini :

1. Masuk ke account Blogger Anda, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (Tambah Gadget), kemudian pilih "HTML/JavaScript",
3. Copy - Pastekan  code berikut :

<style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://i994.photobucket.com/albums/af66/warnetbio/header.jpg') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #A5BD51;
    background:#F5F5F5;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">
    <!-- Ganti disini dengan code buku tamu Anda -->
    <br/>
    <br/>
    <a href="http://forantum.blogspot.com">.
    </a>
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>


. ganti script ini   <!-- Ganti ini dengan kode buku tamu kamu -->  dengan Buku Tamu Anda.
.dan   <a href="http://forantum.blogspot.com">.   ganti dengan alamat blog teman.
.  Lalu simpan, dan Selasai !!
. Sebagai informasi, : Saya sarankan gunakan Cbox.ws  dari pada Shoutmix.com , Sebab  Shoutmix di kotak isi / komentar sekarang tidak akan dimunculkan Link komentar kecuali harus Login terlebih dahulu.

cara bikin spoiler di blog

cerdas_smart_pro
Kali ini saya akan membahas tentang membuat Spoiler pada blog.
Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak terlalu memakan tempat. Sebenarnya anda juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

Spoiler ini bisa anda letakkan di postingan, mungkin anda gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

Kode Spoiler :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b> Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan kode script, HTML dan teks anda disini

<br>
</div>
</div>
</div>

Keterangan :

1. Untuk tulisan Open dan Close bisa anda ganti sesuai keinginan.
2. Width : 55px untuk lebar Spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak Spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan anda.

Semoga bermanfaat