Widgets

Widget Shop Online


# CARA MELETAKAN KODE HTML/JAVASCRIPT (UMUM):

1. Masuk ke Blogger, dan ke "Tata Letak",
2. Klik "Tambah Gadget",
3. Pilih "HTML/JAVASCRIPT",
4. Letakan kode html ke kolom html,
5. Beri Judul Gadget (Opsional),
6. Klik "Simpan",
7. Lihat Hasilnya

GADGET BLOG COLLECTIONS:

- Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog

Dipostkan: Jumat, 05/10/2012 04:23:30 PM

  buku tamu cbox

Apa kabar sobat blogger??? Pertama - tama saya memohon maaf atas komentar - komentar sobat blogger yang belum sempat saya balas sebelumnya, karena hidungku ( mampet ), aktivitas blogging ku terhenti hampir seminggu. Setelah sebelumnya memposting artikel cara memasang artikel acak di blog, kali ini dengan hidung yang masih cenat - cenut saya akan menjawab permintaan dari salah satu sobat blogger yang meminta cara membuat buku tamu auto hide di blog seperti yang tampak di sidebar blog ini.

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>
<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
 

Caranya :
  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan kodenya di kotak yang di sediakan.
  3. Klik Save 
Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Sumber:  http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html

- Widget Browser Support:

Dipostkan pada: Rabu, 21 November 2012 jam 08:05:40 AM

Google Chrome:




Mozilla Firefox:



Safari:



Internet Explorer:



Opera:
 photo opera_cocok_zps2642ffbe.png


Untuk tambah background gambarnya anda bisa menambahkan diatas kodenya dengan copy paste berikut ini:


Untuk style warnanya pada "#632943" bisa diganti dengan warna lain dengan mengunjungi situs ini:
http://www.quackit.com/html/html_color_codes.cfm
lalu tinggal copy paste code itu. Ingat kode selalu ditambahkan # didepannya, contoh: "432455" menjadi "#432455".

Untuk pemasangan kode widget, ikuti langkah berikut:

  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan kodenya di kotak yang di sediakan.
  3. Klik Save 
Selesai.

- MENU ACC UNTUK WIDGET:

Dipostkan pada: Senin, 24 Juni 2013 jam 02:09:30 PM


Kode HTML:
<div id="acc">
<div id="namamenu"><h3><a href="#namamenu">Menu</a></h3><div class="post">Kode widget Disini</div>
<div>"namamenu2"><h3><a href="#namamenu2">Menu 2</a></h3><div class="post">Kode widget Disini</div>
<div>"namamenu3"><h3><a href="#namamenu3">Menu 3</a></h3><div class="post">Kode widget Disini</div><br />
<a href="#closeacc">Close all tabs</a> | <right><a href="http://rozivector.blogspot.com/p/mari-berbagi-post-dari-blog-lain.html">Tutorial</a></right></div></div>

Nota:

- Merah = Ubah menjadi nama menu pendek yang anda inginkan (Jangan pakai spasi).
- Kuning = Ubah menjadi nama menu yang anda inginkan (Spasi diperbolehkan).
- Hijau = Ubah dan letakan kode HTML Widgetmu.
- Anda dapat menambah menu sesuai keinginan dengan menyalin kode diatas ke dalam bawah kode itu, lalu ubahlah dan sesuaikan. mulai dari " <div>"namamenu"...</div>". Ingat, supaya tidak berubah letakan pada bawah kode menu ke-2 atau menengah itu setelah </div> .

<<< Tunggu widget blog selanjutnya >>>


Tidak ada komentar:

Posting Komentar

Tinngalkan jejak komentar!

Sebelum berkomentar:

1. Gunakan kata-kata yang sopan dan baik,
2. Tidak boleh mengirim dengan SPAM
3. Anda boleh mengirim link, Blog ini DOFOLLOW.

Selengkapnya di KEBIJAKAN PRIVASI DISINI!

Selamat berkomentar ^_^

Ikuti Rozi Vector: