PASANG SHOUTMIX di BLOG

Assalamualaikum. Wr. Wb.

Setelah selesai dengan materi BLOG sesion pertama, dari cara bagaimana buat blog dari awal sekali, mulai dari tamplate,  posting dan  pasang banner,   temen2 juga bisa pasang asesoris yang lain nya untuk menghiasi blog masing2.

Dan tuk yang pertama kita bisa pasang "  CHAT BOX  "yaitu fasilitas tuk kita bisa ngobrol dengan pengunjung yang mampir ke blog kita . Salah satu penyedia Chat Box gratis adalah SHOUT MIX.

 jadi bisa chating dgn pengunjung blog:)
Salah satu penyedia gratis adalah Shoutmix
1. browse http://www.shoutmix.com/
2. klik CREATE SHOUTBOX
3. Ada form yang harus teman2 isi untuk mendaftar: pilih username, password dan masukan nama serta alamat email kita
4.Klik lanjutkan..maka akan muncul seperti gambar dibawah
isikan password yang tadi sudah di tulis.

pilih display shoutmix:

supaya box chat gak standart..temen2 bisa mulai otak atik tampilan.
coba perhatikan kotak 2 yang berjajar horizontal..pilih kotak display, isinya ada beberapa ya:
- style and colour
pilih warna sesuai yang teman2 mau.bisa diotak atik /dipadu padan:)
untuk merubah warna..klik kotak kecil ditiap bagian..lalu pilih warna
sebelum save..temen2 bisa klik preview untukk melihat hasil rancangan warna dan style tadi..kalau sudah cocok, klik save seting

klik back to seting

 

 

.Date and Time  C

sekarang pilih date and time..
- pilih Asia/jakarta
-tampilan jam: sesuai selera ya..silahkan dipilih->save

 Ambil kode chat box

Balik lagi ke setting..muncul tabel seperti awal.( liat gambar)
- klik pada box yang dikasih tanda panah..klik kanan-select all-copy

e . Pasang Shoutbox di blog

Nah sekarang cara pasangnya..
- masuk lagi ke dassbor blogspot-rancangan-tambah gadget
- pilih yang html/java script
- Paste kode yang sudah kita copy tadi di bagian yang ada tanda panah -paste disini
- bagian judul boleh dikosongi..boleh diisi
- save
coba lihat blog temen2 sekarang

 

dan kalo misal nya neh temen2 mau pasang shoutmix nya lebih uniQ lagi, alias shoutmix kalian tersembunyi dan ngga memakan space yang banyak karna pas di klik dia akan masuk ke dalam di copas yah kode ini 

<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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 ini dengan kode shoutmix kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script> 

trus dari kode diatas <!-- Ganti ini dengan kode shoutmix kamu -->. proses penempatan nya sama seperti di atas.

ok... :D .. selamat BLOGING

kalo masing bingung, bisa tinggal kan coment yah.

sukses selalu

Wassalamualaikum.Wr.Wb
Br.
Rinni Mamelas