Modifikasi Shoutmix

Bagi blogger baru blogwalking menjadi hal wajib untuk membangun traffic mereka. Shoutmix menjadi persinggahan tepat untuk meninggalkan jejak Anda, sehingga si-empunya blog bisa balik mengnjungi Anda. Kadang Anda melihat berbagai shoutmix yang telah dmodifikasi sedemikian rupa sehingga terlihat berbeda dan menarik. Jangan khawatir karena Anda pun bisa melakukannya. Dengan shoutmix gratisanpun telah banyak sekali fasilitas yang disediakan. Mari kita bahas satu persatu. Bagi yang belum membuat shoutmix, baca Cara Membuat ShoutBox.

Langkah Pertama Login
1. Buka http://www.shoutmix.com/main/login.php
2. Isikan ID dan Password Anda
3. Klik tombol Login

Modifikasi
Setelah Anda login Anda akan masuk bagian contrtol panel Anda

1. General: Shoutbox Details
Gunakan ini untuk mengatur akun Anda, Anda bisa merbah password Anda disini.

2. General: Configuration
General Setting
- Enable Website/Email Input......... : Pengunjung dapat menyertakan link untuk namanya.
- Enable Anmation...... : Ada effect saat pesan baru muncul
- Automatically convert websit and email: Pesan berupa alamat ewebsite atau email langsung diubah dalam bentuk (link) atau (mail) atau Anda bisa menentukannya nanti.

Posts Per Page Display
Pilih jumlah pesan yang akan ditampilkan tiap halaman shoutmix

Maximum Pages Displays
Tentukan jumlah maksimal halaman/lembar shoutmix Anda. Perpindahan lembar dilakukan melalui tombol navigasi di bawah shoutmux, berupa angka dan kata 'next' juga 'previous' sesuai situasi.

Jangan lupa klik Save Settings jika selesa mengatur.

3. General: Prune Messages
Anda bisa menggunakan ini untuk optimasi load shoutmix agar tidak terlalu lama.
Pilih sesai keinginan Anda. Misal Anda memilih Keep latest 10 posts and delete the rest
maka berarti Anda hanya akan menyisakan 10 pesan terakhir di shoutmix dan pesan sebelumnya otomatis terhapus.
Setelah memilih, masukkan password Anda dan klik Apply settings.

4. Display: Style&Colors
Untuk mengatur tampilan shoutmix Anda.
Jika Anda malas mengaturnya sendiri pilih saja template dari drop down Load From Preset
Jika Anda lebih puas mengatur sendiri, gunakan tombol preview untuk melihat hasil sementara sebelum anda menyimpan setting menggunakan tombol Save Settings

5. Display: Date&Time
Banyak sobat blogger yang bertanya tentang jam shoutmix yang aneh. Bukannya aneh, tetapi belum Anda lakukan pengaturan. Sesuaikan jam shoutmix dengan tempat Anda berada. Anda bisa menetukan zona waktu dan juga model penampilan tanggal dan jam.

6. Display: Labels
Shoutbox
Title: Tentukan judul buku tamu Anda

Message
- Link : dalam keadaan standart bertulis lin. Itu berarti semua link dalam pesan pengunjung akan diubah menjadi tulisan [link] dan mengarah ke tujuan saat di klik. Anda bisa mencuranginya dengan menggantinya menjadi alamt blog Anda sehingga setiap link yang diketikkan otomatis berubah menjadi alamat blog Anda, tetapi tetap mengarah ke alamat asli yang diketikkan pengunjung.
- Mail: Berlak sama seperti hal di atas, tetap utnuk emngganti otomatis setiap alamt email yang diketikkan dalam pesan
- Anda juga bisa mengubah pengaturan status on atau off sesuai keinginan.

Form
Name: Perhatikan gambar di atas. Ganti ini seusai keinginan anda untuk label pengisian nama. Misal Anda ganti dengan 'Nama Sobat'
Website/Mail: Label pengisian URL atau alamat email. Misal saja Anda ganti dengan 'Rumah Anda'
Refresh : Tombol untuk menyegarkan, misal Anda ganti dengan'Segarkan!'
Shout: Tombol untuk meninggalkan pesan. Misal Anda ganti dengan 'Pasang Pesan'
Guest: Jika seseorang belum melakukan aktivitas dengan shoutmix, maka ketika ia menemui shputmix Anda otomatis pada pengisian nama akan terdapat kata Guest. Bisa Anda ganti dengan 'Selamat Datang Sobat' misalnya

Page Navigation
Next&Previous: Navigasi ke halaman selanjutnya. Misal Anda ganti dengan 'Lanjut' dan 'Balik'

Jika sudah jangan lupa klik Save Settings


7. Displays: Smileys

Di atas adalah smileys standart bawaan shoutmix. Anda bisa menambah sendri smileys Anda hingga 10 macam. Masukkan saja alamat URL gambar dan tentukan kode saat untuk menlisakan pesan nanti.

8. Modifikasi Script
Jika Anda sudah mantap dengan berbagai modifikasi di atas, maka yang Anda lakukan adalah mengambil script Anda kembali. Menuju kotak pertama, Quick Start pilih Get Codes
Pada width tentukan lebarnya dan heght untuk menentukan tinggi kotak tamu Anda. Sesuaikan dengan template blog Anda.
Misal Anda mendapatkan kode seperti kode berwarna biru di bawah ini:

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="bloggeranyar" src="http://www6.shoutmix.com/?bloggeranyar" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?bloggeranyar">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

Jika Anda mempunyai tutorial menarik mengenai cara pembuatan shoutmix, Anda bisa mengganti
Warna Merah Pertama dengan URL ke tutor pembuatan shoutmix, jika Anda tidak mempunyai ganti saja dengan /2009/07/buat-shout-box.html
Warna Merah Kedua dengan Pesan Yang Muncul Saat link Tersebut di Sorot
Warna merah ketiga dengan Buat Buku Tam Seperti Ini

9. Modifikasi Tingkat Lanjut
Dua modifikasi ini saya temui di Info Blog.
- Login ke blogger
- Tata Letak
- Elemen Halaman
- Add Gadget
- JavaScript/HTML

Untuk kodenya pilih diantara dua jenis modifikasi sebagai berikut:

Modifikasi Jenis Pertama: Membat Buku Tamu Tersembunyi

<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 Dengan Kode Buku Tamu Anda

<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>

Buku tamu jenis ini akan membuat buku kamu tersembunyi dengan tombol dibagian samping kanan halaman blog kamu. Muncul setelah di klik. Jangan lupa ganti Ganti Dengan Kode Buku Tamu Anda dengan script buku tamu yang telah kamu modifikasi dan diambil dari shoutmix.
Untuk mengatur posisi tombol di blog kamu, ganti saja Top pada bagian atas script, sesuaikan angkanya.

Modifikasi Jenis Kedua: Membuat Buku Tamu Hantu

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #88C900;
background:#E5E5E5;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div> <a href="javascript:void(0)" onclick="gb_showHideGB()">[x]</a> </div>

Ganti Dengan Kode Buku Tamu Anda

<div style="text-align:right; font-size:10px">
widget by
<a href="http://infotentangblog.blogspot.com/2009/08/buku-tamu-tersembunyi-versi-2.html">
Info Blog
</a>
</div>
</table>
</div>

<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">

<div class="gb_fixed" style="z-index:+5">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px"
src="http://lh4.ggpht.com/_jn57XA2jLxY/SpS8DmNReHI/AAAAAAAAAc8/OZmZfpilhh4/gbbutton.png" />
</a>
</div>
</script>

Buku tamu jenis ini akan membuat buku kamu tersembunyi dengan tombol. Saat di klik akan muncul secara perlahan. Jangan lupa ganti Ganti Dengan Kode Buku Tamu Andadengan script buku tamu yang telah kamu modifikasi dan diambil dari shoutmix.

Sekian. Sepertinya sudah sangat lengkap. Semoga bermanfaat.