Tutorial Sembunyikan Shoutbox Blog

Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Tutorial kali ini akan menunjukkan tutorial untuk sembunyikan shoutbox anda.:)



Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.


Tutorial sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<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>

Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)


3. Save dan lihat hasilnya.:)

TAMBAHAN.

Secara default, tab shoutbox adalah berwarna hijau, anda boleh menukar mengikut warna yang anda mahu dengan gantikan url yang anda mahu.

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}

Anda copy sahaja mana² url dari tab di bawah ini.
(tidak tahu cara dapatkan url gambar.?)




Tab kredit:ohcerita.com

Page FB Yang Lebih Style Untuk Blog

Sesetengah blogger ada yang mempunyai facebook page untuk blognya. Tidak kira apa tujuan page tersebut, kebiasaannya ianya berkaitan dengan blog. Tutorial kali ini akan menunjukkan cara meletakkan page facebook dalam blog, tetapi bukan dengan design biasa.



Kalau sebelum ini widget yang dinamakan 'facemask' ini didapati di wordpress, kini blogger yang mengunakan platform blogger.com juga boleh menggunakannya.

Tutorial meletakkan page ini adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste code di bawah kedalam ruangan HTML/javascript dan ubah seperti yang dinyatakan dalan nota di bawah.

<center>
<iframe style="height:250px; width:85%; " scrolling="no" frameborder="0"href="

URL PAGE

"src="http://www.facebook.com/plugins/fan.php?id=

NO ID PAGE

&width=292&height=250&connections=25&stream=false&header=false&logobar=false&css=https://sites.google.com/site/unwanted86/javascript/fblike.css" ></iframe></center><center><iframe src="http://www.facebook.com/plugins/like.php?href=

URL PAGE

&send=false&layout=standard&width=292&show_faces=false&action=like&colorscheme=light&font&height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:40px;" allowtransparency="true"></iframe></center><p align="right"> <small><a href="http://tutorialuntukblog.blogspot.com/2011/09/page-fb-yang-lebih-style-untuk-blog.html">Get tutorial here </a></small></p>

Nota:

a)Gantikan url page dengan url page anda.
Bagaimana hendak dapatkan url page.?



b) Gantikan No ID page dengan no ID page anda.
Bagaimana hendak dapatkan ID page.?

Daripada page, klik pada 'edit info', kemudian daripada paparan yang muncul akan anda no di url, itu adalah No ID page anda.




3. Apabila selesai gantikan yang berkenaan, save dan lihat hasilnya.:)