Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu
09.36

Animasi Tulisan Pada Blog


Eye Catching Spiral Animated Welcome Message Widget adalah pesan animasi selamat datang atau pemberitahuan kepada pengunjung blog anda. Juga dapat digunakan untuk menampilkan berita.

Mungkin ada sebagian dari kita yang bertanya-tanya bagaimana situs-situs lain menunjukkan berita dan postingan baru di blog mereka. Dengan bantuan javascript sederhana ini memungkinkan kita untuk melakukan hal tersebut.

Widget berbasis javascript ini untuk menambahkan pesan baru dan pesan selamat datang sangat membantu untuk meningkatkan lalu lintas blog dan juga meningkatkan tingkat konversi website.

Semua kustomisasi dilakukan dalam javascript. Kita dapat mengedit javascript ini untuk menyampaikan pesan dan informasi atau skedar ucapan selamat datang kepada para pengunjung.


Cara memasang widget :
Login ke dashboard pada blog
Klik “Tata Letak"
Klik “Tambahakan Gadget” 
Cari  “HTML/JavaScript” kemudian klik tanda “+”
Copy kode di bawah ke kolom konten


12-1BLOGGER
<script>

var text=new Array()
var textsplashcolors=new Array()

/////////////////////////////////////////////
// START OF CONFIGURATION ZONE //
/////////////////////////////////////////////

// your messages. Add as many as you like
text[0]="HELLO VISITOR"
text[1]="WELCOME TO 12-1BLOGGER"
text[2]="FREE BLOGGER WIDGETS"
text[3]="ALWAYS HAPPY"

// letter-color
textsplashcolors[0]="#00FFFF"

// font
var textfont="Times"

// font-size (pt)
var textfontsize=10

// font-weight, enter "normal" or "bold"
var textweight="normal"

// font-style, enter "normal" or "italic"
var textitalic="normal"

// pause between messages (seconds)
var textpause=2

// the path of the movement (x-coordinate, y-coordinate and so on). Tip: use your imagemap-tool to set a path of your own (just extracte the coordinates from your imagemap-tool)
var textpath=new Array(97,5,91,5,90,5,85,7,77,10,71,13,65,14,59,15,54,17,48,20,43,24,38,27,34,31,30,37,24,43,20,49,18,52,17,58,15,65,14,70,12,75,12,80,12,86,12,96,12,100,17,112,21,121,24,126,31,135,37,140,48,141,56,142,64,143,73,143,81,143,89,143,95,143,104,143,109,143,117,142,123,137,126,132,126,124,126,117,126,113,121,108,114,103,103,98,91,92,80,87,71,82,69,81,69,77,69,71,69,62,69,54,70,47,73,41,80,35,84,31,94,28,107,27,126,30,140,43,142,54,141,64,134,71,122,76,110,78,101,82,93,90,90,96,89,104,89,112,96,121,113,130,133,130,146,127,160,121,171,111,176,99,176,86,176,73,176,63,176,51,174,45,170,37,164,28,161,24,148,16,134,11,122,7,104,4,93,4,85,4,74,4,67,4,60,4,48,4,35,4,25,4,18,4,9,4,8,4,8,4,0,0,0,0)

/////////////////////////////////////////////
// END OF CONFIGURATION ZONE //
/////////////////////////////////////////////

// DO NOT EDIT CODE BELOW THIS LINE

var textfontsizeHTML=3
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var windowwidthOri=330
var windowheightOri=250
textpause*=1000

var spanwidth=new Array()
var i_colors=0
var letterspace=Math.floor(textfontsize/1.4)

var tickerleft=textpath[textpath.length-2]
var tickertop=textpath[textpath.length-1]
var timer
var finalxpos=tickerleft
var i_text=0
var textsage=""
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var message=new Array()

var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

var textpathx= new Array()
var ii=0
for (i=0;i<=textpath.length-1;i=i+2) {
    textpathx[ii]=textpath[i]
    ii++
}
ii=0
var textpathy= new Array()
for (i=1;i<=textpath.length-1;i=i+2) {
    textpathy[ii]=textpath[i]
    ii++
}
for (i=0;i<=text.length-1;i++) {
    if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
    message[i]=text[i]+" "
}

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
    xpos[i]=5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
    ypos[i]=5000
}

function randomizer(range) {      
    return Math.floor(range*Math.random())
}

function resettextpath() {
    if (ie) {
        windowheight=parseInt(document.body.clientHeight)
        windowwidth=parseInt(document.body.clientWidth)
    }
    if (ns4 || ns6) {
        windowheight=parseInt(window.innerHeight)
        windowwidth=parseInt(window.innerWidth)
    }
    windowwidthfactor=windowwidth/windowwidthOri
    windowheightfactor=windowheight/windowheightOri
    for (i=0;i<=textpathy.length-1;i++) {
        textpathy[i]=Math.floor(textpathy[i]*windowheightfactor)
    }
    for (i=0;i<=textpathx.length-1;i++) {
        textpathx[i]=Math.floor(textpathx[i]*windowwidthfactor)
    }
    changetextsage()
}

function makesnake() {
    if (i_textpath<=textpathx.length-1) {
        for (i=textsage.length-1; i>=1; i--) {
               xpos[i]=xpos[i-1]
            ypos[i]=ypos[i-1]
        }
        xpos[0]=textpathx[i_textpath]
        ypos[0]=textpathy[i_textpath]
        if (ie) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan = eval("document.all.span"+(i)+".style")
                thisspan.posLeft=xpos[i]+(i*letterspace)
                thisspan.posTop=ypos[i]
            }
        }
        if (ns6) {
            for (i=0; i<textsage.length-1; i++) {
                document.getElementById('span'+i).style.left=(xpos[i]+(i*letterspace))+"px"
                document.getElementById('span'+i).style.top=ypos[i]+"px"
            }
        }
        if (ns4) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan = eval("document.span"+i)
                thisspan.left=xpos[i]+(i*letterspace)
                thisspan.top=ypos[i]
            }
        }
        i_textpath++
        timer=setTimeout("makesnake()",20)
    }
    else {
        clearTimeout(timer)
        getfinalpos()
    }
}

function getfinalpos() {
    if (ie) {
        x_finalpos[0]=parseInt(document.all.span0.style.posLeft)
        y_finalpos=parseInt(document.all.span0.style.posTop)
        for (i=1;i<textsage.length-1;i++) {
            x_finalpos[i]=x_finalpos[i-1]+spanwidth[i-1]
        }
    gotofinalpos()
    }
    if (ns4) {
        x_finalpos[0]=parseInt(document.span0.left)
        y_finalpos=parseInt(document.span0.top)
        for (i=1;i<textsage.length-1;i++) {
            x_finalpos[i]=x_finalpos[i-1]+spanwidth[i-1]
        }
    gotofinalpos()
    }
    if (ns6) {
        x_finalpos[0]=parseInt(document.getElementById('span0').style.left)
        y_finalpos=parseInt(document.getElementById('span0').style.top)
        for (i=1;i<textsage.length-1;i++) {
            x_finalpos[i]=x_finalpos[i-1]+spanwidth[i-1]
        }
    gotofinalpos()
    }
}
  
function gotofinalpos() {
    if (ie) {
        if (i_loop<=max_loop-1) {
            for (i=1;i<textsage.length-1;i++) {
                var thisspan=eval("document.all.span"+i+".style")
                x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop)
                y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)      
                thisspan.posLeft+=x_step[i]
                thisspan.posTop+=y_step[i]
            }
            i_loop++
            var timer=setTimeout("gotofinalpos()",20)
        }
        else {
            i_loop=0
            clearTimeout(timer)
            timer=setTimeout("endposition()",textpause)
        }
    }
    if (ns4) {
        if (i_loop<=max_loop-1) {
            for (i=1;i<textsage.length-1;i++) {
                var thisspan=eval("document.span"+i)
                x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop)
                y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop)      
                thisspan.left+=x_step[i]
                thisspan.top+=y_step[i]
            }
            i_loop++
            var timer=setTimeout("gotofinalpos()",20)
        }
        else {
            i_loop=0
            clearTimeout(timer)
            timer=setTimeout("endposition()",textpause)
        }
    }
    if (ns6) {
        if (i_loop<=max_loop-1) {
            for (i=1;i<textsage.length-1;i++) {
                var thisspan=eval("document.getElementById('span'+i).style")
                x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
                y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)      
                thisspan.left=parseInt(thisspan.left)+x_step[i]+"px"
                thisspan.top=parseInt(thisspan.top)+y_step[i]+"px"
            }
            i_loop++
            var timer=setTimeout("gotofinalpos()",20)
        }
        else {
            i_loop=0
            clearTimeout(timer)
            timer=setTimeout("endposition()",textpause)
        }
    }
}

function endposition() {
    if (i_endposition<=endpausemilli) {
        if (ie) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan = eval("document.all.span"+(i)+".style")
                thisspan.posTop+=Math.ceil(8*Math.random())-4
            }
        }
        if (ns6) {
            for (i=0; i<textsage.length-1; i++) {                document.getElementById('span'+i).style.top=parseInt(document.getElementById('span'+i).style.top)+Math.ceil(8*Math.random())-4+"px"
            }
        }
        if (ns4) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan = eval("document.span"+i)
                thisspan.top+=Math.ceil(8*Math.random())-4
            }
        }
        i_endposition++
        timer=setTimeout("endposition()",10)
    }
    else {
        clearTimeout(timer)
        i_endposition=0
        endposition2()
    }
}

function endposition2() {
    if (i_endposition<=20) {
        if (ie) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan = eval("document.all.span"+(i)+".style")
                thisspan.posTop+=Math.ceil(80*Math.random())-40
            }
        }
        if (ns6) {
            for (i=0; i<textsage.length-1; i++) {
                document.getElementById('span'+i).style.top=parseInt(document.getElementById('span'+i).style.top)+Math.ceil(80*Math.random())-40+"px"
            }
        }
        if (ns4) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan = eval("document.span"+i)
                thisspan.top+=Math.ceil(80*Math.random())-40
            }
        }
        i_endposition++
        timer=setTimeout("endposition2()",20)
    }
    else {
        clearTimeout(timer)
        i_endposition=0
        cleartextsage()
    }
}

function cleartextsage() {
        finalxpos=tickertop
        i_textpath=0
        for (i=0;i<=maxtextlength;i++) {
            xpos[i]=-5000
        }
        if (ie) {
            for (i=0;i<=maxtextlength;i++) {
                var thisspan = eval("document.all.span"+i)
                thisspan.innerHTML=" "
                thisspan.style.posLeft=xpos[i]=-5000
            }
        }
        if (ns6) {
            for (i=0;i<=maxtextlength;i++) {
                document.getElementById('span'+i).innerHTML=" "
                document.getElementById('span'+i).left=xpos[i]=-1000+"px"
            }
        }
        if (ns4) {
            for (i=0;i<=maxtextlength;i++) {
                var thisspan = eval("document.span"+i+".document")
                thisspan.write("<p> </p>")
                thisspan.clear()
                thisspan = eval("document.span"+i)
                thisspan.left=-5000
            }
        }
        timer=setTimeout("changetextsage()",textpause)
}

function changetextsage() {
        var textsa=message[i_text]
        textsage=textsa.split("")
        if (ie) {
            for (i=0;i<=textsage.length-1;i++) {
                var thisspan=eval("document.all.span"+i)
                thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+"pt;font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+";text-align:center'>"+textsage[i]+"</span>"
                i_colors++
                if (i_colors>textsplashcolors.length-1) {i_colors=0}
                spanwidth[i]=Math.round(thisspan.offsetWidth*1.3)
                if (spanwidth[i]==0) {spanwidth[i]=parseInt(textfontsize)}
            }
        }
        if (ns6) {
            for (i=0;i<=textsage.length-1;i++) {
                var thisspan=eval(document.getElementById('span'+i))
                thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+"pt;font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsage[i]+"</span>"
                i_colors++
                if (i_colors>textsplashcolors.length-1) {i_colors=0}
                spanwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.3)
                if (spanwidth[i]==0) {spanwidth[i]=textfontsize}
            }
        }
        if (ns4) {
            for (i=0; i<textsage.length-1; i++) {
                var thisspan=eval("document.span"+i+".document")
                thisspan.write("<p><font size="+textfontsizeHTML+" color="+textsplashcolors[i_colors]+" face="+textfont+">"+textitalicA+textweightA+textsage[i]+textweightB+textitalicB+"</font></p>")
                spanwidth[i]=Math.round(thisspan.width*1.3)
                if (spanwidth[i]==0) {spanwidth[i]=textfontsize}
                thisspan.clear()
                i_colors++
                if (i_colors>textsplashcolors.length-1) {i_colors=0}

            }
            for (i=0; i<textsage.length-1; i++) {
                var thisspan=eval("document.span"+i)
                thisspan.visibility="show"
            }
        }
        i_text++
        if (i_text>=text.length) {i_text=0}
        finalxpos=tickertop
        i_textpath=0
        makesnake()
}

document.write("<div id='roof' style='position:relative;width:1px; height:1px;'>")
if (ie) {
    for (i=0;i<=maxtextlength;i++) {
        document.write("<span id='span"+i+"' style='position:absolute'>")
        document.write(textsage)
        document.write("</span>")
    }
    window.onload=resettextpath
}
if (ns6) {
    for (i=0;i<=maxtextlength;i++) {
        document.write("<span id='span"+i+"' style='position:absolute;'>")
        document.write(textsage)
        document.write("</span>")
    }
    window.onload=resettextpath
}
if (ns4) {
    for (i=0;i<=maxtextlength;i++) {
        document.write("<layer name='span"+i+"' visibility=hide>")
        document.write(textsage)
        document.write("</layer>")
    }
    window.onload=resettextpath
}
document.write("</div>")
</script>


Ubah teks warna merah sesuai keinginan
Klik “Simpan”
Klik “Pratinjau” untuk melihat hasilnya

SMOGA BISA BERMANFAAT

komentar (0)
TOP

Postingan ()