Sunday, 22 January 2012

tutorial shoutbox tersembunyi =)

Reactions: 

assalamualaikum and hye peeps..

Jom belajar dengan Picci cara nak buat xhoutbox yang tersembunyi, Mesti lagi cool kann.


1) Dashboard --> Design --> Add a gadget --> HTML/ Javascript

2) copy kod di bawah dan paste kan dekat HTML/ Javascript yang telah kamu buka tadi


<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('URL DESIGN SHOUTBOX ANDA') 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>

3) Save dan lihat hasilnya

TAMBAHAN:
Anda boleh dapatkan url design shoutbox anda di sini. Right click untuk dapatkan url =)


ikhlas:
piccioneb-blu.blogspot.com

Tutorial shoutbox terapung & bergambar =)

Reactions: 
assalamualaikum..

Jom kite belajar macam mana nak buat shoutbox yang terapung apabila kita klik pada gambar tu. Tak dapat bayangkan macam mana? Boleh tengok Picci punye shoutbox. Tekan je gambar nanti keluar shoutbox yang terapung-apung tu.

JOM START!

1) Dashbord --> Design --> Add a gadget --> HTML/ Javascript

2) Copy kod di bawah dan paste dekat HTML/Javascript yang telah dibuka

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:0px; right:-0px;'>
<br />
<!-- Start Ajax Popup Shoutbox by -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();


//Get the A tag
var id = $(this).attr('href');


//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();


//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});






//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();


//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);


//transition effect
$(id).fadeIn(2000);


});


//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();


$('#mask').hide();
$('.window').hide();
});


//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});


});
</script>
<style>
img { border: none; }
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}


#boxes .window {
position:fixed;
left:100;
top:67;
width:240px;
height:289px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #shoutbox {
background:url('URL BACKROUND PILIHAN ANDA');

width:540px;
height:300px;
padding:4px 0 30px 3px;
}

#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#shoutbox" name="modal"><img src="URL GAMBAR PILIHAN ANDA" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="shoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com --><center>

KOD SHOUTBOX ANDA

<!-- End ShoutMix -->
<div id="author">
</div><div id="closesb"><input type="button" value="Close" class="close" />
</div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
<!-- End of Ajax Popup Shoutbox--></center></div></div></div>

3) Save dan lihat hasilnya :) selamat mencuba

TAMBAHAN
Anda boleh cuba gambar-gambar di bawah. Right klik untuk dapatkan url=)
















ikhlas:
piccioneb-blu.blogspot.com

FIBOX | PENGGANTI SHOUTMIX :)

Reactions: 
assalamualaikum..
Picci yakin dan pasti ramai yang terTEKAN dan terGELISAH apabila shoutmix bukan lagi FREE macam dulu-dulu. So, tergantunglah shoutmix tu dekat blog tanpa ada apa-apa function pun. Tapi jangan risau KERANA hari ini Picci akan memperkenalkan.. ermmm ayat yang lebih menarik lagi MENGAJAR bloggers semua cara untuk memasang FIBOX iaitu salah satu SHOUTBOX yang lahir di alam maya ini menggantikan SHOUTMIX.


Tetapi, FIBOX masih lagi dalam fasa penguabahsuaian oleh pihak-pihak yang terbabit. Tanpa berlengah-lengah Picci terus mendaftar di FIBOX bagi membolehkan Picci berinteraksi dengan RAKAN-RAKAN Picci. Contoh FIBOX boleh tengok dekat sidebar blog Picci oke!

Sekarang Picci nak ajar cara-cara nak pasang/ daftar dengan FIBOX niey.

1) Mula-mula buka www.fibox.ws dan klik pada SIGN UP


2) Kemudian, masukkan email anda, password dan jangan lupa tick pada term of service. Then continue


3) Notification menyatakan bahawa activation email telah dihantar kepada email yang anda daftarkan.



4) Buka email dan klik pada LINK yang telah diberi


5) Pengesahan akuan telah diaktifkan


6) Login akaun anda dan masukkan nama untuk shoutbox anda


7) Tetapkan setting untuk shoutbox anda


8) Copy dan paste kod yang telah diberikan di blog anda :)


9) Save dan lihat hasilnya =)


Sekarang kawan-kawan sudah ada pengganti shoutmix. So, jangan risau. Anda dah boleh chat dengan followers blog dengan riangnya. SELAMAT MENCUBA YE!

ikhlas:
piccioneb-blu.blogspot.com













piccioneblu dah besar >.

Daisypath - Personal pictureDaisypath Happy Birthday tickers