Info Toko Surya62: Dua Obyek bergerak naik turun

Sunday, December 16, 2012

Dua Obyek bergerak naik turun

Trik bagaimana membuat 2 obyek bergerak naik dan turun

Assalamu'alaikum warakhmatullahi wabarakatuh, Sahabat Bloggers yang berbahagia, ada trik yang dapat menarik perhatian jika kita mampu menampilkan gambar gerak namun tidak terlalu berat untuk diload dalam blog yaitu membuat tulisan atau gambar dapat bergerak naik dan turun. Ini adalah hasil tulisan darisahabat kita di http://www.rieztoshare.com/2012/08/tulisan-naik-turun-di-blog.html. Sobat tertarik membuatnya? silahkan simak tulisan berikut ini.

Dua obyek yang dimaksud gambar atau tulisan yang dapat bergeraknaik turun pada posisi ketinggian 25% 50% dan 100%. Penerapannya Sobat masuk ke pengaturan template dengan centran edit expand wdget template selanjutnya masukkan tag seperti berikut ini.

Aturlah CSS-nya dengan meletakkannya diatas ]]></b:skin> sebagai berikut:

#infotipsrama {position:fixed;top:1%;right:1%;}
.infotipsrama
{font-size:300%;text-transform:uppercase;
font-family:impact,tahoma,verdana,arial,sans-serif;
position:relative;
animation:infotipsrama 8s infinite;
-moz-animation:infotipsrama 8s infinite; 
-webkit-animation:infotipsrama 8s infinite; 
text-shadow:0 1px 1px #FF0000,-1px -2px 1px #FF0000,-2px -3px 1px #FF0000,-3px -4px 1px #FF0000;}
@keyframes infotipsrama
{
0%   {top:0px;}
25%  {top:500px;}
50% {top:250px;}
75% {top:500px;}
100% {top:0px;}
}
@-moz-keyframes infotipsrama  
{
0%   {top:0px;}
25%  {top:500px;}
50% {top:250px;}
75% {top:500px;}
100% {top:0px;}
}
@-webkit-keyframes infotipsrama  
{
0%   {top:0px;}
25%  {top:500px;}
50% {top:250px;}
75% {top:500px;}
100% {top:0px;}
}

Masukkan script berikut di bawah tag </body>:

<script type='text/javascript'> 
function autoLink(){ this.keywdHref = new Object();
this.add = function(keyword, href){ if(keyword.substr(0,1) != " ")
{keyword = " " + keyword;} this.keywdHref
[keyword] = href; } this.createAnchor = function(){ 
var objs = document.getElementsByTagName("div"); 
for(var i=0; i<objs.length; i++){ var obj = objs[i]; 
if(obj.className.indexOf("post-body")>-1){ var content = obj.innerHTML; 
for(var keyword in this.keywdHref){ var href = this.keywdHref[keyword]; 
var newstr = content.replace(keyword, "<a href='" +href+"'>"+keyword+"</a>", "gi"); 
obj.innerHTML = newstr; content = newstr; } } } } 
this.startScript = function(){ var onLoad = window.onload; 
window.onload = function(){ if(onLoad){onLoad();} 
setTimeout ("f.createAnchor()", 100); } } } </script>
<script type='text/javascript'> var f = new autoLink(); f.add("Blogging",
"http://www.rieztoshare.com/"); f.startScript(); </script>

Untuk meletakkan obyek yang Sobat kehendaki silahkan letakkan dibawah tag <body> seperti berikut ini:

<div id='infotipsrama'>
<div class='infotipsrama'>
<center>Surya62<br/><img alt='Photobucket' border='0' 
src='http://i1222.photobucket.com/albums/dd489/surya546/6976.gif' 
title='Monyet Musik'/></center>
</div>
</div>

Demikian tulisan saya kali ini semoga dapat bermanfaat dan berbagilah untuk kemanfaatannya. Sebagai illustrasi saya tampilkan pada obyek contoh diatas berikut ini.
Wassalamu'alaikum warakhmatullahi wabarakatuh.