Jika ingin membuat tampilan buku tamu atau shoutbox / shoutmix tersembunyi seperti buku tamupada blog saya, berikut langkah-langkah membuat buku tamu tersembunyi atau
langkah-langkah membuat shoutbox tersembunyi atau juga langkah-langkah membuat shoutmix tersembunyi :
masuk dabor blog kalian pilih tata letak Add Gadget pilih "HTML/JavaScript" Copy paste kode di bawah ini <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/AVvXsEi_WCQq8L4SR6JWuzfbMyTUeUfMZcjh3RJe8FRJNJmOywz0asHLIoIxvjCFIQTrhyphenhyphenoa1Ar3xjowGEYFnMStdFt7c-TJ1pMy-pmsDse4q6XXnhFZ6RdG96dKlVwmIJUuuSwqy5Br29n3mlHG/') 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">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://kyhananto.blogspot.com/2010/01/cara-membuat-shoutbox-tersembunyi.html">
Share With Me..
</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></div></div>
Itu dulu aja ya untuk share kali ini..
Terima Kasih.

langkah-langkah membuat shoutbox tersembunyi atau juga langkah-langkah membuat shoutmix tersembunyi :
#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/AVvXsEi_WCQq8L4SR6JWuzfbMyTUeUfMZcjh3RJe8FRJNJmOywz0asHLIoIxvjCFIQTrhyphenhyphenoa1Ar3xjowGEYFnMStdFt7c-TJ1pMy-pmsDse4q6XXnhFZ6RdG96dKlVwmIJUuuSwqy5Br29n3mlHG/') 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">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://kyhananto.blogspot.com/2010/01/cara-membuat-shoutbox-tersembunyi.html">
Share With Me..
</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></div></div>
- Lihat kode HTML yang di atas
- Kemudian cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode shoutbox / shoutmix yang kamu dapatkan dari situsnya. Atau bisa dibilang ganti dengan kode shoutmix / shoutbox yang sudah ada di blog kalian sebelumnya.
- Kalian bisa juga mengatur posisinya dengan mengubah nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah saja menjadi 30px atau 30px atau semau kalian seberapanya.
Itu dulu aja ya untuk share kali ini..
Terima Kasih.

16 komentar:
jadinya spt yg di pojok kanan blog ini ya...
mantabs gan..
salam kenal,
Blognya PNS
ini yang saya cari-cari mas...
maksih ya tips nya
wah bagus neh, lg mikir2 neh masang SM ky gni ga yah?
saling kunjung yah, selalu ada yg baru di tempatku
oh sembunyi nemplok di dinding toh, hehhe
hihihihi... yg geser2 itu bukan kag??? hihihihi...
hadir disini, betewe postingannya emang sgaja ga dibikin read more ya mas???
woow, info yang hebat. Bagi yang pengen buat situs sendiri dan murah..hubungi kami :-)
OWh...ngono too, xixixi...
Baru tau saya....
Dari dulu mau buat kayak gitu cuma gak tau cara buatnya... :D
Thx! :)
@Oecil_Kritingz; iya sob bner bgt ky yg di pojok kanan blog ne..thx ya..
@Luthfifuadi; iya sm2 mas.tips yg ttd jg makasi ya mas...
@kontroversi teknologi; mu pasang to ga tergantung kebutuhan aja sob...yoyoi...pasti selalu berkunjung ko sobb..
@secangkir teh dan sekerat oti; iya jdnya ngumpet di pojok knan atas tu...hehe...klo di klik cilukba dah...
@ina; iya ina yg geser itu...ky di angkot kan geser2...haha
@nophie; ga ko nophie..wktu pas ru bkin blog,bljr bkin readmore,tp salah dan lupa backup kode nya,jd da bnyk kode HTML yg ilang,skrg jd bingung bkin readmorenya gmn?bisa bantu ga?
@ArNetStudio; makasi sob...nanti sy kunjungi yah..
@Zippy ; hehe...monggo mas di coba...
pake ini aja mas
postingan awal, mpe dmn yg mo ditampilin
< span class="fullpost" >
Lanjutan postingan bla bla bla
< /span >
nb : antar <> jgn dispasi yah,
Wah ini yg w tunggu2 prikitiew...
Kodenya dimana ya ?
kok aku nggak dapet-dapet sih ..
kasih tau dong..
nice sharing bro...
mantap sekalian kita $enggol $enggolan yuk
Terima Kasih.... senggol2 om
wah, mantap mas.
di wordpress jg bisa kan ?
Posting Komentar