.jpg)
Untuk membuat scroller dengan file HTML kamu harus membuat isi scroller yang file-nya berbentuk file HTML. File ini harus di upload terlebih dahulu di file hosting untuk digunakan sebagai"isi" HTML scroller. Supaya bisa dilakukan dengan sempurna sebaiknya kamu cari file hosting atau free file hosting yang melayani penyimpanan file HTML. Pembuatan scroller type seperti ini melalui dua proses pembuatan :
Gunakan kode xHTML berikut dan lengkapi dengan teks, image dan link:
Update » Senen WAGE, Maret, 26, 2012
- Pembuatan html scroller yang harus di upload di file hosting.
- Membuat iframe untuk diterbitkan di boc posting.
Gunakan kode xHTML berikut dan lengkapi dengan teks, image dan link:
xHTML html scroller
<html>
<head>
<title>HTML Scroller</title>
<style type="text/css">
body{
margin:0;
background: black url(https://lh4.googleusercontent.com/-3sq3R-Qmin8/T3H9YqFQ11I/AAAAAAAAAk4/kbQCfpNO6-E/gubhugreyot2.jpg) no-repeat 25px 35px;
}
#NewsDiv{
position:absolute;
color:#000;
background:#b7b5b6 url(https://lh4.googleusercontent.com/-M8HD-Ovj-Rw/T3H9JpvQijI/AAAAAAAAAks/SYJyigNu9ak/gradient-gray-1x400.jpg) repeat-x;
width:453px;
}
#NewsDiv .leftbox{
width:150px;
height:250px;
border:2px solid #333;
margin:8px 0 8px 5px;
float:left;
}
#NewsDiv .middlebox{
width:120px;
height:250px;
border:2px solid #333;
margin:8px 5px;
float:left;
}
#NewsDiv .middlebox img{
width:110px;
height:160px;
border:2px solid #333;
paddding:2px;
margin:8px 3px;float:left;
}
#NewsDiv .rightbox{
width:150px;
height:250px;
border:2px solid #333;
margin:8px 0;
float:left;
}
#NewsDiv a{
color:#660000;
text-decoration:none;
font-weight:bold;
}
#NewsDiv a:visited{
color:#990033;
text-decoration:none;
}
#NewsDiv a:active{
color:black;
text-decoration:underline;
}
#NewsDiv a:hover{
color: #FF9900;
text-decoration:none;
}
#NewsDiv h3{
font:11px Verdana;
font-weight:bold;
color:#660033;
padding:0;
display:block;
margin:12px;
text-align:center;
}
#NewsDiv h2{
font:14px Times New Roman;
font-weight:900;
color:#996600;
text-align:center;
}
#NewsDiv span{
font:11px Arial;
color:#666;
padding:0;
margin:8px;
display:block;
}
#NewsDiv b{
font:12px Tahoma;
color: #003366;
padding:0;
margin:8px;
display:block;
}
</style>
</head>
<body onMouseover="scrollspeed=0" onMouseout="scrollspeed=current" OnLoad="NewsScrollStart();">
<div id="NewsDiv">
<div class="leftbox">
<h3>Left box-01 Title</h3><span>Left box-01 description.<p><a href="http://gubhugreyot.blogspot.com/">Link title</a></p></span>
</div>
<div class="middlebox">
<img src="image-01.jpg"/><h2>Image-01 Title</h2>
</div>
<div class="rightbox"><b>Right box-01 description.<br/><br/><a href="http://gubhugreyot.blogspot.com/" target="_blank">GubhuGReyoT</a></b>
</div>
<div class="leftbox">
<h3>Left box-02 Title</h3><span>Left box-02 description.<br/><br/><a href="http://gubhugreyot.blogspot.com/">Link title-01</a></span>
</div>
<div class="middlebox">
<img src="image-02.jpg"/><h2>Image-02 Title</h2>
</div>
<div class="rightbox"><b>Right box-02 description.<br/><br/><a href="http://gubhugreyot.blogspot.com/" target="_blank"> GubhuGReyoT</a></b>
</div>
<div class="leftbox">
<h3>Left box-03 Title</h3><span>Left box-03 description.<p><a href="http://gubhugreyot.blogspot.com/">Link title-02</a> </p></span>
</div>
<div class="middlebox">
<img src="image-03.jpg"/><h2>Image-03 Title</h2>
</div>
<div class="rightbox"><b>Right box-03 description.<br/>Right box-03 description.<br/><br/><a href="http://bloggerstuars.blogspot.com/" target="_blank">Link title-03</a></b>
</div>
</div>
<script type="text/javascript">
var scrollspeed = "3" // 1=slowest
var speedjump = "30" // range : 20 s/d 40
var startdelay = "2" // start scrolling delay (s)
var nextdelay = "0" // second scroll delay (s)
var topspace = "2px" // top spacing first time scrolling
var frameheight = "200px" // resize window
current = (scrollspeed)
function HeightData(){AreaHeight=dataobj.offsetHeight
if (AreaHeight==0){setTimeout("HeightData()",( startdelay * 1000 ))}
else {ScrollNewsDiv()}}function NewsScrollStart(){
dataobj=document.all? document.all.NewsDiv : document.getElementById("NewsDiv")
dataobj.style.top=topspace
setTimeout("HeightData()",( startdelay * 1000 ))}
function ScrollNewsDiv(){dataobj.style.top=parseInt(dataobj.style.top)-(scrollspeed)
if (parseInt(dataobj.style.top)<AreaHeight*(-1)) {dataobj.style.top=frameheight
setTimeout("ScrollNewsDiv()",( nextdelay * 1000 ))}
else {setTimeout("ScrollNewsDiv()",speedjump)}}
</script>
</body>
</html>- Lengkapi xHTML di atas dengan teks sebagai title/judul, deskripsi dan URL image.
- Setelah lengkap silahkan upload di file hosting.
- Simpan URL-nya (alamat file html-nya) untuk digunakan di xHTML posting.
xHTML Posting:
<div id="IframeScroller" style="position:absolute;visibility:show;z-index:3;">
<table cellpadding="2" cellspacing="0" border="0" style="border:#000 1px solid;background:#996600;color: #fff; font: 13px arial, sans-serif; font-weight: bold;"><tr><td align="center">
Gubhug Reyot<br>
</td></tr><tr><td>
<iframe id="NewsWindow" src="html-scroller.html" width="453" height="265" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border:#000 1px solid;"></iframe>
</td></tr></table>
</div>- Ganti kode berwarna merah (html-scroller.html) dengan URL file html hasil upload anda di file hosting.
- Gunakan kode di atas di halaman posting.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:
Update » Senen WAGE, Maret, 26, 2012
» Happy Blogging - gubhugreyot «
Mas .
BalasHapusGmna cara buat ganti kata" .
Kan saya promosi in blog lewat facebook .
Dengan cara .
- Klik tautan
- Tulis website
- Kan udah keluar tuh gambar n website nya .
- Eh punya saya malah kata-kata nya aneh .
- Kolo punya sampeyan malah kata-kata nya bagus
- Contoh : Panduan blogger,Tutorial blogger DLL.
- Tolong yo mas bantu blog saya .
Thx .