Banyak cara untuk merias tampilan blog kita, sehingga terkesan lebih enak di pandang. salah satu caranya dengan menambahkan buku tamu tapi dengan tampilan yang mengambang di samping kanan dalam blog, seperti yang kita tau umumnya buku tamu menyatu dengan page blog, tapi kali ini kita bisa mencoba menambahkan buku tamu yang mengambang. seperti apa buku tamu yang saya maksud ! bisa di lihat seperti ini
Untuk membuat buku tamu yang mengambang di samping sisi kanan blog, yang perlu kita lakukan adalah
- Mendaftar di situs penyedia buku tamu gratisan, seperti di www.shoutmix.com ataupun disitus laen.
- Setelah mendapatkan code javascriptnya, langkah selanjutnya adalah copykan code berikut
- Letakkan di blog anda, seperti biasa masuk ke dasbord blog anda kemudian paste kan kode tadi pada Tab Design >> Page Elements.
- Klik ADD Widget >> HTML /Java Script. pilih Save untuk menyimpan.
"sekarang bisa di lihat hasilnya, sobat akan mempunyai buku tamu yang menyambang di sisi kanan blog."
Untuk membuat buku tamu yang mengambang di samping sisi kanan blog, yang perlu kita lakukan adalah
- Mendaftar di situs penyedia buku tamu gratisan, seperti di www.shoutmix.com ataupun disitus laen.
- Setelah mendapatkan code javascriptnya, langkah selanjutnya adalah copykan code berikut
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRnG_ZtTWakAzu8rOXxQg_TO36yMW8YkqlkJDRDCRxEvI4e3CW-njIxWBKWDRL3npj0iFGcSF6aBwk1LviyDa4JxT2rV2WfXMKk2WF8gCXp5zy98BnPaqBKZoAK-yu0bnjyo9mZwBUVM/s800/tabs%252520copy.jpg') 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 ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="300" frameborder="0" src="http://www6.shoutmix.com/?aji1990" height="350" title="aji1990">
<a href="http://www6.shoutmix.com/?aji1990">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 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>
- Ganti teks yang berwarna hijau di atas dengan script /kode yang sobat peroleh dari situs penyedia buku tamu gratisan tadi.#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRnG_ZtTWakAzu8rOXxQg_TO36yMW8YkqlkJDRDCRxEvI4e3CW-njIxWBKWDRL3npj0iFGcSF6aBwk1LviyDa4JxT2rV2WfXMKk2WF8gCXp5zy98BnPaqBKZoAK-yu0bnjyo9mZwBUVM/s800/tabs%252520copy.jpg') 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 ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="300" frameborder="0" src="http://www6.shoutmix.com/?aji1990" height="350" title="aji1990">
<a href="http://www6.shoutmix.com/?aji1990">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 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>
- Letakkan di blog anda, seperti biasa masuk ke dasbord blog anda kemudian paste kan kode tadi pada Tab Design >> Page Elements.
- Klik ADD Widget >> HTML /Java Script. pilih Save untuk menyimpan.
"sekarang bisa di lihat hasilnya, sobat akan mempunyai buku tamu yang menyambang di sisi kanan blog."
makasih ilmu yang manfaat ini
ReplyDeletelain waktu akan berkunjung kembali dengan artikel yang lain
@ Santri tulen : iya sob, sama2...
ReplyDeletetapi sayang shoutmix skrg dah ndak gratis, jdi solusinya mungkin bisa nyari buku tamu laen, yg sperti shoutmix..
nice share sob..lanjutkan !
ReplyDelete