Latest News
Saturday, February 25, 2012

Tutorial buat scroll banner exchange - Banner bergerak

Assalamualaikum, atas permintaan 3 orang warga sengal (pompuan tau... hakahak) so payah tol lah nak PM kat inbox Facebook script ni nanti ada pulak yang tak paham. So korang cuma LIHAT, FAHAMI, SALIN dan PASTE je kat slidebar blog korang.
Image from Google.com

Berikut adalah tutorial buat scroller banner exchange yang menjimatkan ruang slidebar dan perlu susah-susah nak CREATE PAGE yang belum tentu orang tengok kan. Nama pun nak promo blog so biarlah banner kawan-kawan korang tu di pasang kat main blog korang. lain lah kalau blog korang tu BLOG RETIS ramai pelawat.

LANGKAH PERTAMA
Setelah Login> Dashboard> Design..
Add a Gadget
LANGKAH KE 2
HTML/Javascript
LANGKAH KE 3
Paste kod di sini

Kod Scroller Banner Exchange seperti di bawah :
*Salain kod di bawah dan paste ke bahagian seperti gambarajah langkah ke 3.

<style type="text/css">
#marqueecontainer{
position: relative;
width: 150px; /*marquee width */
height: 200px; /*marquee height */
background-color:lightyellow;
color:black;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

<script type="text/javascript">


/***********************************************
* Cross browser Marquee II- © Banner Scroll (www.silenceblogz.blogspot.com)
* This notice MUST stay intact for legal use
* Do not delete OR edit at this area.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--LETAK KOD BANNER RAKAN DI BAWAH NI-->

<h4>Banner Exchange</h4>  
<a href="http://silenceblogz.blogspot.com/" target="_blank"/><img border="0" src="http://4.bp.blogspot.com/-QlZME_kFnhw/Tx7Hi0psj5I/AAAAAAAAAZY/uehELMkqxYc/s200/banner4.gif" height="125" width="125"/></a>
<a href="http://url-blog.blogspot.com/" target="_blank"/><img border="0" src="http://url-banner.gif" height="125" width="125"/></a> 
<!--LETAK KOD BANNER RAKAN DI ATAS NI-->

</div>
</div>
 NOTA: Anda cuma perlu tukarkan URL-BLOG [link blog] dan URL-BANNER.GIF [url image banner] kepada blog rakan anda. Kemudian
SAVE !!

Siap la...

Nota: Kalau nak cantik lagi banner mestilah berukuran 125px X 125px.
Kelebaran dan ketinggian boleh di edit begantung kepada slidebar blog korang. Korang cuma perlu edit pada nombor yg berwarna merah untuk kelebaran dan biru untuk ketinggian seperti contoh di bawah.
width: 150px; /*marquee width */
height: 200px; /*marquee height */.

CONTOH SCROLLER BANNER





Banner exchange: Pasang banner blog ini di blog anda dan tinggalkan pesanan di shoutbox.

Blog Terhebat!!










INCOMING SEARCH TERM :

  • Blogger Comments
  • Facebook Comments

4 comments:

  1. ehem3 ramainye peminat die.. sape lah tu kan kan.. ahahahaha thankss awak! ^^

    ReplyDelete
  2. hakahk.. peminat lah pulak... kesian kat awk sebenarnya... klu x jd lg jgn main blog...sekeh paler tu kang....hkehke

    ReplyDelete
  3. Wah..tutorial berguna ni Potia..nanti saya pun nak try wat jugak :)

    ReplyDelete

Sebarang Komen yang tidak berkaitan dengan artikel / SPAM akan Di PADAM. Terima Kasih.

Item Reviewed: Tutorial buat scroll banner exchange - Banner bergerak Rating: 5 Reviewed By: potia casadelarossa