Peluang Usaha

Cara Pasang Gadget Buku Tamu di Blog

Bismillahirrahmanirrahim

buku tamu
MULTI PASTE - Memasang elemen Buku Tamu di blog, selain 'mempercantik blog' juga penting sebagai alat interaksi antara pemilik blog dengan pengunjung atau antar sesama pengunjung blog, namun terkadang pemasangan buku tamu ini menyita sebagian 'space blog', untuk mengatasi masalah ini banyak para blogger telah mempublikasikan 'cara memasang buku tamu diblog secara hiden atau tersembunyi'.

Pada kesempatan ini saya coba menulis artikel tentang Cara Pasang Gadget Buku Tamu di Blog, secara tersembunyi tetapi dengan style seperti 'update status di facebook', untuk memunculkan buku tamu ini, pengunjung blog tinggal mengklik button Buku Tamu yang terdapat di samping kanan halaman blog.


Cara Pasang Gadget Buku Tamu ini, silahkan ikuti langkah berikut :

  • Login ke blogger.com dengan ID Anda
  • Pilih type Gadget 'HTLM/Javasript' lalu 'copy' kode di bawah ini dan 'paste' pada kotak content Gadget 'HTML/Javascript' lalu klik button Save untuk menyimpannya
  • <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('https://lh4.googleusercontent.com/-fZjSRKf7YE4/T0Wdm2aLTRI/AAAAAAAAA9g/YQVVuGx16No/s100/bukutamu.gif') no-repeat;
    }
    .gbcontent{
    float:left;
    border:1px solid #E4E3E3;
    background:#8ea88e;
    padding:15px;
    }
    </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"><div style="text-align: center;">Simpan Jejak Anda di Sini..!<span style="color: blue; font-size: x-small;"></span>
    </div>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=191249341007955";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-live-stream" data-event-app-id="191249341007955" data-width="280" data-height="400" data-always-post-to-friends="true"></div>

    <div style="color: #999999;">
    <div style="text-align:left">
    [<a href="javascript:showHideGB()">close</a>]&nbsp;&nbsp;[<a href="http://multipaste.blogspot.com/2012/02/pasang-buku-tamu.html"><b>?</b></a>]
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = "-313px";
    </script></div></div>
  • Periksa blog anda sekarang, lihat hasilnya jika berhasil ucapkan Alhamudilillah

Script ini telah diperbaharui, mengikuti script plugin facebook terbaru.


Note :

Jika style buku tamu ala 'update status di Facebook' ini dirasakan kurang cocok dengan style blog anda, maka anda dapat mengganti sebagian script (tulisan yang berwarna biru) dengan script dari situs penyedia layanan shoutbox seperti :
  • http://www.myshoutbox.com/
  • http://www.oggix.com/
  • http://www.shoutmix.com/main/

10 comments:

  1. di saya gak bisa ..

    katanya gini
    Plugin komentar memerlukan parameter href.

    ReplyDelete
  2. @leo dacosta

    Maaf bro... ternyata plugin facebook pada script sebelumnya telah di non-aktifkan oleh pihak facebook.. silahkan gunakan script yg sudah saya perbaharui...

    ReplyDelete
  3. makasih sob... tapi komennya yang ke tampil cuma 3 ya, biar bisa banyak atau pake scroll gimana ya? matur nuwun

    Http://belalang-goreng.blogspot.com

    ReplyDelete
  4. @BELALANG GORENG TJAP.WALANGTerima kasih sudah berkunjung, jika ada kesempatan akan saya coba modifikasi script di atas supaya bisa menggunakan tombol scroll agar komentar pada buku tamu bisa di tampilkan lebih banyak lagi

    ReplyDelete
  5. Makasih infonya gan, sangat bermanfaat ney buat ane..

    ReplyDelete
  6. tERIMA KASIH INFORMASINYA.. BOLEH DICOBA GAN..
    http://mitrakerjabisnis.blogspot.com

    ReplyDelete
  7. SayaPoker.com | Agen Judi Poker dan Domino Online Terpercaya Indonesia

    Kami Agen Judi Poker Online Indonesia - SayaPoker.com mengadakan Kontes SEO yang akan
    di mulai pada tanggal 15 Maret 2014 sampai dengan 31 Mei 2014 ,
    dengan Total Hadiah Rp 30.000.000,-

    Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes SEO ini.
    Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mencoba kemampuan SEO Anda dengan tidak sia-sia, hadiah kontes ini adalah Rp 30.000.000,- Tunggu apa lagi?


    Kontes SEO SayaPoker.com ini akan menggunakan kata kunci (Keyword):

    "SayaPoker.com Agen Judi Poker dan Domino Online Terpercaya Indonesia"

    Jika Anda cukup percaya akan kemampuan SEO Anda, daftarkan web
    terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama
    Rp 10.000.000. Pemenang Akan ditentu-kan dengan aturan kontes SEO
    yang dapat dilihat di halaman berikut :

    http://itulink.com/iframer4.php?page=KontesSeoSayaPoker

    Tunggu apa lagi? Ikuti kontes ini sekarang juga.

    ReplyDelete
  8. terimakasih atas tutorialnya diatas semoga bisa menjadi Bimbingan Belajar buat saya dan Anak didik saya...

    ReplyDelete
Konversi Kode di Sini Top Komentator

* Jangan Menempelkan Link Hidup, karena tidak akan ditampilkan
* Untuk Menyisipkan tag <code>, gunakan tag <i rel="code"> ...Isi Kode... </i>
* Untuk Menyisipkan tag <pre> atau kode panjang, gunakan tag <i rel="pre"> ...Isi Kode... </i>
* Untuk Menyisipkan Catatan, gunakan <b rel="quote"> ...Isi Teks... </b>
* Untuk Menyisipkan Gambar, gunakan <i rel="image"> ...URL Gambar... </i>
* Untuk Memasukkan video YouTube, gunakan <i rel="youtube"> ...URL Youtube... </i>

NB: Sebelum menyisipkan kode silahkan gunakan tool konversi kode yang terdapat pada bagian atas kolom Note ini untuk menampilkan kode tersebut pada elemen komentar