Menyembunyikan buku tamu di sidebar kanan

Setelah sobat berhasil membuat buku tamu, tapi setelah dilihat....ko' rasanya sempit ya blognya (semak/sumpek/nyesak). Bila seperti itu yg sobat rasakan, sobat bisa menyembunyikan buku tamu tersebut di sebelah kanan sidebar (sebelah kanan tampilan blog)...hanya akan muncul bila di klik. Mau mencoba..??? silahkan baca trik berikut :

1. Login ke Blogger Account Anda, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" boleh di element manasaja, pilihlah "HTML/JavaScript",
3. Copy-paste kode di bawah :

<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://i142.photobucket.com/albums/r81/gusdiwanto/tab.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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="1" marginheight="2" marginwidth="2" height="200" src="http://www7.cbox.ws/box/?boxid=46036&amp;boxtag=eb73nb&amp;sec=main" id="cboxmain" scrolling="auto" style="border:#DBE2ED 1px solid;" width="300" allowtransparency="yes" name="cboxmain"></iframe></div>
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="75" src="http://www7.cbox.ws/box/?boxid=46036&amp;boxtag=eb73nb&amp;sec=form" id="cboxform" scrolling="no" style="border:#DBE2ED 1px solid;border-top:0px" width="300" allowtransparency="yes" name="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
<a href="http://bit.ly/3KeJ9c">|</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kemudian Simpan....Tempatnya dimana saja..terserah kita.
Yang diganti hanya Tulisan berwarna merah , karena itu adalah Script cbox milik kamu. (jika belum tau apa itu script...baca disini)
hasilnya :

Selamat mencoba, semoga bermanfaat.

READ MORE - Menyembunyikan buku tamu di sidebar kanan

Membuat buku tamu

Membuat buku tamu sangat penting bagi sobat yg mempunyai blog, karena dengan adanya buku tamu maka kita akan tahu siapa saja tamu yg telah berkunjung ke blog kita sehingga kita bisa mengunjunginya kembali. Buku tamu juga bisa kita buat sebagai media untuk Promosi gratis untuk kita. Cara membuatnya sangat gampang, silahkan sobat ikuti langkah-langkah berikut ini :

Pertama daftar di http://www.cbox.ws/ klik Sign Up. Isi data-data anda >>> konfirmasi melalui email masuk.

Kalo udah terdaftar, kemudian kita Login >>> Option >>>Smilies

kemudian akan tampil seperti ini :

sampe' sini STOP dulu....buka New Tab dengan Firefox (halaman baru), masuk kesini disini 33smiley..Nah...banyak gambarnya kan...

Pilih gambar yang mau kita masukkan >>> Klik kanan pada gambar >>> Properties >>> Copy alamat situsnya >>> dan Paste kan ke dalam cbox, lihat gambar dibawah :

Tanda "x" sebelah kanan untuk menghapus....kalau kita pastekan kedalam langsung ada "Preview"nya disebelah kiri. Kotak "code" harus kita isi (:b atau :c terserah) yg penting diisi. Kotak "alt.code" kosongkan saja, bila sudah selesai semua kemudian simpan dan lihat hasilnya. (lucu kan...)

Lalu kenapa Blog ini gak ada buku tamunya..??? Tapi tutorialnya tentang buku tamu..!!! Karena blog ini menggunakan sistem Dofollow, artinya setiap sobat yg meninggalkan pesan melalui kotak komentar akan menjadi backlink buat sobat. Jadi bila ingin mengisi buku tamu...silahkan saja berkomentar di kotak komentar.
Terima kasih telah membaca tulisan ini.

READ MORE - Membuat buku tamu

Memasang Script Top Comment

Top comment berguna untuk mengetahui siapa yang paling banyak berkomentar di dalam blog kita. Apakah Top Comment tidak sama dengan Recent Comment..??? Tidak...!!! kalau Recent comment adalah untuk mengetahui siapa yang berkomentar terakhir. Yang berkomentar paling banyak akan muncul namanya pada urutan yg paling atas di Widget Top Comment, sedangkan pada urutan selanjutnya adalah blog - blog yang memberikan komentar - komentar lebih sedikit dari urutan yang pertama (terbanyak). Untuk lebih jelasnya lihat gambar di bawah ini :

Nah....udah tau kan bedanya....Sebenarnya kalo menurut sy...Top comment berguna untuk melihat siapa sobat kita yg paling sering berkunjung, memang untuk mengetahui siapa pengunjung blog kita bisa melalui buku tamu (cbox atau shoutmig)....tapi kalau pake' buku tamu sobat yg datang lebih dulu akan tertimpa namanya ma sobat kita yg baru datang...iya kalo kita sering periksa (kalo' kita lg malas...) kasihan sobat kita, udah cape'-cape' nulis gak kebaca...hehehe. Tapi itu semua terpulang kepada kita juga ya....mau mana yg dipake.

OK dech...bila sobat mau pasang Top comment ini...berikut Scriptnya :

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=a55cb97ebb368bb1b89b7f6bdeb35336&filter=bloganda&url=http%3A%2F%2Fadolganteng.blogspot.com&num=20" type="text/javascript"></script>

Ganti tulisan yg berkedap-kedip itu dengan nama blog sobat tapi tanpa http:// ya....Cara pasangnya gimana..??? Biasalah...masuk ke dasbor >>> tata letak >>> elemen halaman >>> tambah javascript >>> masukkan kode di atas tadi. Selesai.
Semoga tulisan ini bermanfa'at. Terimakasih telah membaca tulisan ini.

READ MORE - Memasang Script Top Comment

Memberi warna pada Text Box

Salah satu cara agar tampilan website/blog lebih menarik dan informatif adalah dengan memberi pernak-pernik pada tulisan. Hal ini bisa kita lakukan dengan kode (tag) HTML div. DIV merupakan kode HTML yang akan menghasilkan blok paragraf, atau dengan kata lain disebut dengan Text Box.

Karena dengan menuliskan paragraf atau kalimat diantara tag <div>isi tulisan kita</div>, maka kalimat/paragraf tersebut akan tampil dalam box yang bisa kita atur tampilannya. Untuk memudahkannya, berikut berbagai contoh dan penggunaan tag DIV.

kode untuk membuat kotak ini adalah :
<div style="color:red;background:yellow;">disini tulisan yg akan tampil</div>

sobat bisa lihat di atas, color adalah untuk warna tulisan dan background untuk warna box, untuk 2 atribut itu bisa kita ganti dengan blue, brown, green dll.

kode untuk membuat kotak ini adalah :
<div style="color:blue;background:#EBF3FB;border:1px solid #AACCEE;">tulisan yg akan tampil</div>

Penggunaan ini sama seperti yg pertama, hanya bedanya disini kita pake border..border adalah garis tepi..kita bisa sesuaikan dgn selera kita (semakin tinggi nilai px border..maka semakin tebal garis tepinya)

kode untuk membuat kotak ini adalah :
<div style="color:#990099;background:#ADE4AD;border:2px dashed #006600;padding:5px;margin:10px;">tulisan yg tampil</div>

Margin adalah kode untuk jarak tulisan ke kotak (atas, bawah, kiri, kanan)..silahkan di rubah-rubah sesuai dgn selera kita.

Text Box yg di atas itu semua...lebar kotaknya akan mengikuti sesuai dengan panjang tulisan kita, tapi yg di bawah ini lebar kotak bisa kita sesuaikan sendiri.


kode untuk membuat kotak ini adalah :
<div style="color:#FFFFFF;background:#FFD4AA;border:2px dotted #FF2A00;padding:5px;margin:5px;width:300px;">tulisan yg tampil</div>

Lebar kotaknya bisa kita atur dengan menambahkan nilai pada width:300px
Bagi yg mau mengetahui beberapa kode warna bisa di klik disini.
Semoga artikel ini bermanfa'at.

READ MORE - Memberi warna pada Text Box

Membuat menu Dropdown

Apa itu menu dropdown ya..??? dan keuntungannya apa..??? hmmm...Dengan menu dropdown kita bisa menghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang sangat banyak. Itu bisa diisi dengan arsip, blogroll dll. Gimana ? Mau mencobanya ?....Gak mau.??? lho... kenapa..??? ya udah, mau gak mau yg penting sy tulis...hehehe...

Caranya : masuk ke dasbor >>> tata letak >>> tambah HTML/JavaScript >>> kemudian masukkan script berikut :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>tulisan utama</option>
<option value="Links yg mau dituju">tulisan kedua</option>
<option value="Links yg mau dituju">tulisan ketiga</option>
</select>

hasilnya seperti ini :


tulisan utama
tulisan kedua
tulisan ketiga


Bener kan...menghemat tempat...Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog kita sendiri. Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu.

Yang ini cocok untuk Blogroll atau Friend link.
Hanya tinggal merubah kodenya :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>tulisan utama</option>
<option value="Links yg mau dituju">tulisan kedua</option>
<option value="Links yg mau dituju">tulisan ketiga</option>
</select>

Hasilnya seperti ini :

tulisan utamatulisan keduatulisan ketiga

Masih ada satu lagi cara atau menu untuk menghemat ruangan di blog kita, yaitu dengan menu Scrool.

READ MORE - Membuat menu Dropdown

Menghilangkan icon obeng dan tang

Obeng dan tang..??? lho...apa maksudnya ni...ko' di blogger pake obeng dan tang..??? kaya' bengkel honda aja..!!! Begitulah kalimat yg ada di benak sy waktu pertama x membuat blog dan membaca tutorial tersebut di sebuah blognya sobat blogger. Karena penasaran, aku klik aja...ooOOo..maksudnya seperti ini rupanya....

Sebenarnya icon obeng dan tang tersebut berguna untuk edit dengan cara cepat sebuah widget yg kita pasang pada blog kita. Tapi pada sebagian orang icon ini agak mengganggu...kenapa..??? "risih...karena mengganggu pemandangan" kata sy...hehehe...Baiklah bila sobat juga ingin menghilangkan icon ini, berikut caranya :
Masuk ke dasbor >>> tata letak >>> edit HTML kemudian cari kode ini :

]]></b:skin>

Sudah ketemu...??? kalau sudah...letakkan kode ini :

.quickedit{
display:none;
}

tepat di atas kode ]]></b:skin> tadi
Kemudian simpan...dan lihat icon obeng dan tangnya...sudah hilang blom...!!!

READ MORE - Menghilangkan icon obeng dan tang

Menghilangkan tulisan "Tampilkan semua posting"

Tulisan "Tampilkan semua posting" akan muncul bila tulisan pada pilihan Labels di klik, pada sebagian sobat blogger menganggap tulisan ini sangat mengganggu dan sebagian lagi juga menganggap ini tidak masalah. Tapi bagi kamu yg ingin tulisan ini dihilangkan, berikut cara-caranya :

Masuk ke dasbor >>> Tata letak >>> edit HTML >>> Beri tanda centang pada "Expand Widgets Templates" kemudian Cari kode dibawah ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Setelah ketemu, ganti semua kodedi atas dengan kode berikut :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Kemudian klik Save Template.
Selesai. Silahkan dicoba hasilnya.
Selamat mencoba..!

READ MORE - Menghilangkan tulisan "Tampilkan semua posting"