silahkan bergabung dan dapatkan artikel-artikel resep-jitu gratis via e-mail!

EnglishFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

9.07.2009

Widget Buku Tamu Tersembunyi


Bagi anda yang sudah terbiasa mengelola blog dan mengunjungi blog sahabat anda untuk memberi sapaan maupun motivasi anda pasti tidak asing lagi sama dengan yang namanya buku tamu. ya buku tamu biasanya diletakkan dielemen sidebar pada template blog, disana kita dapat memberikan komentar pada blog yang kita kunjungi tersebut. ada beberapa web yang menyediakan source berupa kode gratis buku tamu yang di berikan kepada para membernya. diantaranya adalah di : shotmix.com, oggix.com, chebox.com, dll.

Biasanya setelah mendaftar dan mendapatkan kode buku tamu tersebut, maka kita akan mengcopy pastekan kode itu pada bagian Layout >> add widget di blog, sehingga kode tersebut dapat memunculkan buku tamu pada sidebar blog yang kita pasangi kode tadi.

Nah kalau cara masang kodenya cuma seperti itu sudah standar dan biasakan untuk blogger mania gunakan. nah karna hal yang biasa itulah makanya saya ingin memposting tutorial Membuat Buku Tamu Tersembunyi ini untuk para sahabat blogger semua agar setelah membaca dan tentunya juga mengikuti tutorial ini sahabat dapat memasang kode buku tamu dengan cara dan peetakkan yang unik. agar lebih paham maksudnya silahkan sobat lihat contohnya pada gambar di atas. coba anda lihat dibagian pojok kanan blog tadi, disana ada tampilan dari widget Buku tamu bukan ? jika anda klik tab warna hijau tersebut,maka Buku Tamunya akan tertarik keluar.
Gimana sekarang sudah paham kan maksudnya. kalau sudah paham langsung saja anda kerjakan tugas dibawah ini untuk membuatnya. jangan lupa memberi komentar ya pada postingan yang anda baca. Ok Berikut langkah-langkahnya :

1. Login ke account blogger yang ingin anda edit.

2. Kemudian Klik menu Layout

3. Lalu ambil Page Elements

4. Dan klik lagipada opsi Add a Page Element

5. Setelah itu klik opsi ADD TO BLOG pada menu HTML

6.Kemudian Copy dan paste kode berikut kedalam kotak Html diatas


<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 c1lass="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

< Letakkan disini kode buku tamu Anda>
<div style="text-align:right">
<a href="http://http://resep-jitu.blogspot.com/2009/09/widget-buku-tamu-tersembunyi.html">
[resep-jitu]
</a>|<a href="javascript:showHideGB()">
[close]
</a>
</div>

</div>



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


7.Klik tombol Save.

Jika langkah tersebut sudah anda lakukandengan benar, maka anda akan dapat melihat hasilnya seperi yang telah saya contokhkan diatas

Jangan lupa : "Jika ada pertanyaan atau komentar ,Silahkan tanyakan pada kotak komentar Blog ini."




Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan Disini:

Komentar :

ada 4 komentar ke “Widget Buku Tamu Tersembunyi”
blogscommunity mengatakan...
pada hari 

thanks ya atas infonya

wahyu's Blog mengatakan...
pada hari 

makasi infonya sngt membantu

FAJRI mengatakan...
pada hari 

mas, kok buku tamu saya ga bs di buka yaa ?

Descaa:) mengatakan...
pada hari 

kok buku tamuny gk bisa di buka ?/

Poskan Komentar

Komentar Anda Adalah Semangat Untuk Kemajuan Saya

 

Editting By candra Since february 2009 | On My Blog | Template by techknowl | Original Wordpress theme byBrian Gardner