Thursday, August 26, 2010

Add Floating Hover Text - Which Trails Mouse Cursor

If you want to show any text like "Welcome Here" or "Sign My Guestbook"or "Your Text Here", which follows the mouse cursor (trail text effect), like the one displayed in the image


STEP #1 Log in to Blogger, go to Layout





page-elements

Add a Gadget of HTML/JavaScript type. 



image
Then add this code in to it:.



<script language="javascript">





// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.

var text='YOUR TEXT HERE...';



var delay=40; // SPEED OF TRAIL

var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)

var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)

var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES

var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.

var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.



//********** NO NEED TO EDIT BELOW HERE **********\\



ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;

ie4 = (document.all && !document.getElementById)? true : false;

ie5 = (document.all && document.getElementById)? true : false;

ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var txtA=new Array();

text=text.split('');

var x1=0;

var y1=-1000;

var t='';



for(i=1;i<=text.length;i++){

t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';

t+=beghtml+text[i-1]+endhtml;

t+=(ns4)? '</layer>' : '</div>';

}

document.write(t);



function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x+'px';

id.style.top=y+'px';

}}



function animate(evt){

x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

}



function getidleft(id){

if(ns4)return id.left;

else return parseInt(id.style.left);

}



function getidtop(id){

if(ns4)return id.top;

else return parseInt(id.style.top);

}



function getwindowwidth(){

if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;

else return window.innerWidth+pageXOffset;

}



function movetxts(){

for(i=text.length;i>1;i=i-1){

if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){

moveid(txtA[i-1],0,-1000);

moveid(txtA[i],0,-1000);

}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));

}

moveid(txtA[1],x1,y1);

}



window.onload=function(){

for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);

if(ns4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=animate;

setInterval('movetxts()',delay);

}

</script>



Now click Save 

Tuesday, August 24, 2010

Animated (On Hover) Fixed-Floating Twitter-Follow Me Badge


Steps to follow:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template
</head>

And immediately before it, paste this code:
<!--FOLLOW-ME-STARTS-->

<style type='text/css'>

.feedbacktw {

width: 31px;

height: 116px;

display: block;

font-size: 10px;

text-decoration: none;

background-repeat:no-repeat;

background-image:url(http://i26.tinypic.com/1zb4509.jpg);

position:fixed;

top:20%;

right:2px;

}



.feedbacktw:hover {

width: 31px;

height: 116px;

display: block;

text-decoration: none;

background-repeat:no-repeat;

background-image:url(http://i26.tinypic.com/xpu99c.jpg);

position:fixed;

top:20%;

right:10px;

}

</style>

<!--FOLLOW-ME-STOPS-Widget-by-http://bdlab.blogspot.com-->


Now click Save Template



STEP #1 Log in to Blogger, go to Layout

page-elements

Add a Gadget of HTML/JavaScript type.


image
Then add this code in to it:.



<!--FOLLOW-ME-STARTS--><a style="display:scroll;" href="http://twitter.com/rohul786" class="feedbacktw"> </a><!--FOLLOW-ME-STOPS-->

Change the link in RED color to your own Twitter profile.

Now click Save















Image Floating Twitter Follow Me With Different Styles












Direct link imageOn Hover Direct link
01. http://i42.tinypic.com/353cvh4.jpghttp://i42.tinypic.com/212en7t.jpg
02. http://i40.tinypic.com/j65sts.jpghttp://i44.tinypic.com/2cncvq1.jpg
03. http://i40.tinypic.com/x283dc.jpghttp://i43.tinypic.com/m9sj5y.jpg
04. http://i42.tinypic.com/30kf7mp.jpghttp://i42.tinypic.com/330ab9s.jpg
05. http://i43.tinypic.com/20hwowl.jpghttp://i41.tinypic.com/i1mauo.jpg
06. http://i43.tinypic.com/x5nygw.jpghttp://i43.tinypic.com/2nk2qn9.jpg
07. http://i44.tinypic.com/1zqsowk.jpghttp://i39.tinypic.com/33nukja.jpg
08. http://i43.tinypic.com/24c8jm9.jpghttp://i39.tinypic.com/14112c7.jpg
09. http://i44.tinypic.com/r8ug3o.jpghttp://i43.tinypic.com/18nf54.jpg
10. http://i44.tinypic.com/2rz7u9s.jpghttp://i44.tinypic.com/2gxmamx.jpg
11. http://i44.tinypic.com/6jozr4.jpghttp://i43.tinypic.com/25iaycy.jpg
12. http://i39.tinypic.com/2a68u1k.jpghttp://i42.tinypic.com/2rnk9py.jpg
13. http://i43.tinypic.com/34zjfo5.jpghttp://i43.tinypic.com/a4ak2v.jpg
14. http://i43.tinypic.com/8wjfbs.jpghttp://i41.tinypic.com/5wbecx.jpg
15. http://i42.tinypic.com/23uucco.jpghttp://i43.tinypic.com/fee7ht.jpg
16. http://i41.tinypic.com/dcfzag.jpghttp://i44.tinypic.com/200g0w4.jpg
17. http://i41.tinypic.com/2quhswn.jpghttp://i42.tinypic.com/f5a83s.jpg



Thanks to http://loneeagle110.blogspot.com/2010/04/17-styles-animated-on-hover-floating.html

Sunday, August 22, 2010

add your site’s webpages to all the popular social bookmarking sites


Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout ->


page-elements

Add a Gadget of HTML/JavaScript type.


image
Then add this code in to it:.



more information http://web.informer.com