Download File

MEMASANG BUKU TAMU DENGAN MENU SLIDING

A

pakah sobat memasang buku tamu dengan mengunakan shoutmix ? Bagaimana rasanya setelah terpasang ? Tentu semakin seru saja kan, walau sedikit agak berat ketika loading. ( Hah...berat..!!? ) Walau cuma sedikit tapi lama-lama bisa semakin berat jika widget yang kita pasang bertambah. Sebelum hal ini terjadi bagaimana kalau shoutmix kita sembunyikan, tentunya akan bergeser keluar jika kita klik. Untuk hal ini kita bisa menggunakan menu sliding atau para sobat yang lain biasa menyebutnya dengan widget tersembunyi. Jika sobat ingin menyembunyikannya bisa memasukkan buku tamu sobat kedalam menu di bawah ini.

Caranya seperti biasa:

Login ke blog sobat.
Pilih tata letak.
Tambahkan Gadget.
Pilih HTML/JAVAScript.
Ganti kode shoutmix di bawah ini yang berwarna biru dengan kode shoutmix milik sobat.
Kemudian klik simpan

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:160px;
width:35px;
float:right;
cursor:pointer;
background: url(http://i761.photobucket.com/albums/xx252/darma_bucket/MENU-1.gif) no-repeat;
}
.gbcontent{
float:right;
border:2px solid #336633;
background:#FF66CC;
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.left = 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 ShoutMix - http://www.shoutmix.com -->
<iframe title="darmasena" src="http://www4.shoutmix.com/?darmasena"
width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?darmasena">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 -->

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


Catatan:

Warna kuning adalah alamat gambar beserta posisinya.
Warna hijau untuk tampilan warna bisa sobat rubah.
Warna merah adalah di mana posisi widget akan diletakkan.
Sedang untuk warna biru adalah di mana sobat harus meletakkan kode shoutmixnya.

Jika sobat ingin mengganti tulisan menu dengan buku tamu atau guest book bisa memakai gambar di bawah ini. Sobat tinggal mengganti alamat gambarnya.

http://i761.photobucket.com/albums/xx252/darma_bucket/guestbook.jpg

http://i761.photobucket.com/albums/xx252/darma_bucket/buku-tamu.jpg



Semoga bermanfaat !!

Available link for download

MEMASANG BUKU TAMU DENGAN SHOUTMIX

Caranya :

• Masuk ke www.shoutmix.com.
• Dari halaman ShoutMix klik create shoutbox.
• Isi kotak yang tersedia:
  Shoutbox informationShoutbox ID : Nama ID sobat.>
  Choose passsword : Masukkan password.
  Retype password : Ulangi masukkan password yang sama.
  Contact information
  Name : Nama sobat.
  Email : Masukkan alamat email sobat.
  
• Beri tanda ceckbox pada kotak kecil.
  
  
• Klik Continue
  Tunggu sampai proses loading selesai,sobat akan di bawa ke halaman setting. Sesuaikan dengan keinginan sobat.
  
• Untuk mengambil kodenya pada kolom Quick Start klik Get codes.
  Jika sudah terbuka halaman baru sobat bisa menyesuaikan ukurannya sesui dengan template sobat. Kemudian ambil kodenya,kopi dan paste. Bisa disimpan pada notepad terlebih dahulu.
  
  Untuk memasukkan kodenya.
  
• Login ke blog sobat.
  
• Pilih tata letak.
  
• Tambahkan Gadget.
  
• Pilih HTML/JAVAScript.
  
• Masukkan kode yang sobat ambil tadi ke bagian konten.
  
• Klik simpan.
  
• Lihat hasilnya.
  

Available link for download

MEMBUAT KOMENTAR PENGUNJUNG BERBEDA DENGAN PEMILIK BLOG

• Login ke blog sobat.
• Pilih tata letak.
• Klik edit html.
• Beri tanda centang pada Expand template widget.
• Cari kode yang mirip di bawah ini, kemudian tambahkan kode yang berwarna merah.
  
  /* Comments ----------------------------------------------- */
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em; text-transform:uppercase;
  letter-spacing:.2em;
  color: #999999;
  }
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }
  #blog-pager-newer-link {
  float: left;
  }
  #blog-pager-older-link {
  float: right;
  }
  #blog-pager {
  text-align: center;
  }
  .feed-links {
  clear: both;
  line-height: 2.5em;
  }
  .admin-comments{
  background:#00CC33;
  border:3px solid #FF9966;
  padding:5px;
  Kode warna merah adalah kode yang harus sobat tambahkan.
  Kode tersebut bisa juga sobat letakkan di atas kode ]]></b:skin> tinggal terserah sobat mau meletakkannya di mana.
  Kemudian kita juga bisa mengganti warna background,sobat bisa menyesuaikan kode warnanya dengan warna template sobat. Bisa lihat Kode warna di sini
  
• Setelah selesai meletakkan kode di atas tarik scroll ke bawah, cari kode seperti di bawah ini dan tambahkan juga kode yang berwarna merah.
  
  <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
  </dt>
  <b:if cond=data:comment.author == data:post.author>
  <dd class=admin-comments>
  <p><data:comment.body/></p>
  </dd>
  <b:else/>
  <dd class=comment-body>
  <b:if cond=data:comment.isDeleted>
  <span class=deleted-comment>
  <data:comment.body/>
  </span>
  <b:else/>
  <p>
  <data:comment.body/>
  </p>
  </b:if>
  </dd>
  </b:if>
  <dd class=comment-footer>
  
• Kode yang berwarna merah adalah kode yang harus sobat tambahkan.
  
• Jangan lupa klik pratinjau terlebih dulu, jika tidak muncul peringatan baru klik simpan.

Available link for download

MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS

• Seperti biasa login ke blog sobat.
  
• Pilh tata letak.
  
• Klik edit html.
  
• Letakkan kode di bawah ini di atas kode ]]></b:skin>hingga posisinya sbb:
  .tooltip {position:relative;}
  .tooltip span {display:none;}
  .tooltip:hover span {
  display:block;
  position:absolute;
  width:200px;
  left:20px;
  top:20px;
  background-color:#006633;
  border:3px solid #0099FF;
  padding:5px;
  font-size:15px;
  color:#000000;
  text-decoration:none;
  font-family:Verdana,arial, helvetica, sans-serif;}
  ]]></b:skin>
  
• Kemudian klik simpan.

<a href="http://activekita.blogspot.com/2010/04/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>
Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.
Cara menulis kodenya seperti di bawah ini:
background:url("http://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSSTooltip

Available link for download