PAKCIK MAKCIK COMEL

Ahad, 10 April 2011

(TUTORIAL) LETAK GAMBAR DAN SEMBUNYIKAN SHOUTBOX

Assalammualaikum! hooohhoooiii!!! upgrade lagi blog aku.. **ketinggalan zaman betul.. apa yang aku upgrade hari ni?? hehe~ cube tengok kat belah --> .. ada apa?? yess!! anda telah memenangi satu lolipop dalam mimpi! hehe~ aku tambah shout box.. sebab apa?? sebab.. malam ni, aku sangat bosan dan tak tau nak buat apa.. jadi.. aku saja ngada2 nak tambah.. haha~ tapi tak cantik lah.. disebabkan aku dapat ilmu hari ni, aku pun nak gak kongsi kan..

so.. macam mana letak gambar dekat benda alah tu dan sembunyikan dia supaya nampak kemas??

1. korang copy je code bawah ni..


<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 BACKGROUND SHOUTBOX KORANG');

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 YANG KORANG NAK LETAK" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="shoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com --><center>

CODE SHOUT BOX KORANG


<!-- 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>


2. paste-kan kat add gadget -&gt; HTML code

3 preview, kalau dah ok semua tu, save!

dalam code di atas, ada perkataan yang aku bold dan warnakan dengan warna merah. korang cuma perlu edit kat situ je. yang warna hijau pula adalah background. yang ini pun korang bOoleh ubah ikut suka korang.. macam mana nak dapat url gambar??? 1st, cari atau create gambar yang korang nak.. kalau nak letak gambar korang, letak la.. pepandailah korang edit guna photoshop ke.. photobucket ke.. photo segala photo lah yang korang nak.. lepas tu, korang upload gambar dalam blog korang (new post). next, save. then view blog, click gambar tu, pastu copy lah URL dia! easy peasy! 

 pape hal, sila lah tanya~

p/s siapalah pengguna pertama SB aku ni ye.. 


~LEAVE ME A COMMENT SO THAT I KNOW WHO R MY READER~

5 ulasan:

aNiss :):) berkata...

wahh =) dah ade shoutbox blog dia.. nice tutorial dear =)

GadisGula-gula berkata...

thanks!

Tanpa Nama berkata...

salam..saya da letak da pic kt tpi n ade..but bila tekan utk kali kedua pic ye ilang..npe ye??

G3-lina berkata...

encik tanpa nama..... kemungkinan, salah code atau dia lambat loading..

Tanpa Nama berkata...

Lipitor Pregnancy Class Creatine Phosphokinase Cpk [url=http://www.buncospace.com/celebrexnoprescription ]Celebrex No Prescription[/url] Feeling Worse On Synthroid Lipitor Therapy Lipitor Morton's Neuroma Nexium Plus Card [url=http://www.buncospace.com/lipitornoprescription ]Lipitor No Prescription[/url] Does Synthroid Cause Leg Cramps Nexium Plasma Stool Tamiflu Itching Nexium And Beer Proton Pump Lipitor Vs Grapefruit Treat High Cholesterol [url=http://www.buncospace.com/celexa20mg ]Celexa 20mg[/url] Tamiflu And Pneumonia Serum Lipitor Lipitor Prescription Tablet Metolazone Lipitor Synthroid Acceptance [url=http://www.buncospace.com/nexiumnoprescription ]Non Prescription Nexium Without[/url] Drospirenone And Celexa Prescription Drug Celebrex Reviews Nexium Hunger Always Hungry Taking Plankton With Synthroid [url=http://www.buncospace.com/tamiflunoprescription ]Tamiflu No Prescription[/url] Food Restrictions With Synthroid Celebrex Online Doctor Consultation Prescription Vioxx Zyban Buy Tnt Lipitor Prescription Side Alcohol Lipitor Plavix Prescription Tablet [url=http://www.buncospace.com/synthroidnoprescription ]Order Synthroid Online No Prescription[/url] Yahoo Answers Celexa Olmesartan Inexium No Prescription Tamiflu Singapore H1n1 [url=http://genericdrugsaving.com/buy-cyclogyl-usa.html]generic cyclogyl cheap[/url] Tendonitis And Lipitor Buy Synthroid Without A Otc Celebrex Reaction


_________________ ____
Related Posts Plugin for WordPress, Blogger...

wibiya widget