Memasang Cbox Melayang di Samping Blog

Sobat blogger mungkin sudah tidak aneh lagi dengan postingan yang kali ini saya share hanya saja tidak ada salahnya untuk mempermudah lagi barangkali diantara sobat yang tidak sengaja datang kesini dan belum memiliki buku tamu maka ada insfirasi pada sobat untuk memasang buku tamu melayang (cbox bisa buka tutup) disamping blog.

Langkahnya mungkin sudah tidak asing lagi dan cukup mudah serta cepat tapi mungkin untuk pemula masih bingung itu sudah menjadi hal yang wajar.

Langkah - Langkah :

1. Login blogger.
2. Pilih Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Copy dan Paste code dibawah pada konten
6. Save dan lihat hasilnya

Klik di pada area dibawah, ctrl + a dilanjutkan dengan copy ctrl+c

<style type="text/css"></div> <div> #gb{</div> <div> position:fixed;</div> <div> top:50px;</div> <div> z-index:+1000;</div> <div> }</div> <div> * html #gb{position:relative;}</div> <div> .gbtab{</div> <div> height:100px;</div> <div> width:30px;</div> <div> float:left;</div> <div> cursor:pointer;</div> <div> background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6el1xcIakAMbLr6joVJ0IGKIJNV5nAMF7TIu9rjqC0pGqf5fLLFHuEfSRY1J1_8zTHDgRvGb_d71FG9x0NN05uUw8229j6EpBywJEiuHTucMakaIL3rLVT_JvkHQWZdRKN3rtFrTRicU/s1600/bukutamu.png') no-repeat;</div> <div> }</div> <div> .gbcontent{</div> <div> float:left;</div> <div> border:2px solid #A5BD51;</div> <div> background:#F5F5F5;</div> <div> padding:10px;</div> <div> }</div> <div> </style></div> <div> <script type="text/javascript"></div> <div> function showHideGB(){</div> <div> var gb = document.getElementById("gb");</div> <div> var w = gb.offsetWidth;</div> <div> gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);</div> <div> gb.opened = !gb.opened;</div> <div> }</div> <div> function moveGB(x0, xf){</div> <div> var gb = document.getElementById("gb");</div> <div> var dx = Math.abs(x0-xf) > 10 ? 5 : 1;</div> <div> var dir = xf>x0 ? 1 : -1;</div> <div> var x = x0 + dx * dir;</div> <div> gb.style.right = x.toString() + "px";</div> <div> if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}</div> <div> }</div> <div> </script></div> <div> <div id="gb"> </div> <div> <div class="gbtab" onclick="showHideGB()"> </div> </div> <div> <div class="gbcontent"> </div> <div> <br /></div> <div> <span style="color: red;">Paste code cbox sobat disini</span></div> <div> <br /></div> <div> <div style="text-align:right"> </div> <div> <a href="http://planetinfo-zp.blogspot.com/">[get this widget]</a>><a href="javascript:showHideGB()"></div> <div> [Tutup]</div> <div> </a></div> <div> </div> </div> <div> </div> </div> <div> </div> </div> <div> <script type="text/javascript"></div> <div> var gb = document.getElementById("gb");</div> <div> gb.style.right = (30-gb.offsetWidth).toString() + "px";</div> <div> </script></div>

Berwarna merah silahkan diganti dengan code cbox sobat.

Terimakasih sudah mengunjungi blog Planet Abisefer dan semoga postingan ini membantu sobat.

4.5