Rapid Gadgets: Hyper links

	read more

Showing posts with label Hyper links. Show all posts

JQuery LINK Nudging

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths RapidGadgets.blogspot.com
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
 // margin left = - ([width of element] + [total vertical padding of element])
 $(this).css("margin-left","-180px");
 // updates timer
 timer = (timer*multiplier + time);
 $(this).animate({ marginLeft: "0" }, timer);
 $(this).animate({ marginLeft: "15px" }, timer);
 $(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements  
$(link_elements).each(function(i)
{
 $(this).hover(
 function()
 {
  $(this).animate({ paddingLeft: pad_out }, 150);
 }, 
 function()
 {
  $(this).animate({ paddingLeft: pad_in }, 150);
 });
});
}

//]]>
</script>

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<ul id="sliding-navigation">
      
<li class="sliding-element"><a href="#">Link 1</a></li>
      
<li class="sliding-element"><a href="#">Link 2</a></li>
      
<li class="sliding-element"><a href="#">Link 3</a></li>
      
<li class="sliding-element"><a href="#">Link 4</a></li>
      
<li class="sliding-element"><a href="#">Link 5</a></li>

<li class="sliding-element"><a href="#">Link 6</a></li>

<li class="sliding-element"><a href="#">Link 7</a></li>

<li class="sliding-element"><a href="#">Link 8</a></li>

<li class="sliding-element"><a href="#">Link 9</a></li>

<li class="sliding-element"><a href="#">Link 10</a></li>
  
</ul>

You are done.
Check reView

jQuery Link Nudging

Posted on : | By : Er. Ankita Dhiman | In : Hyper links, JQuery

Adding Text Links (Hyperlinks) to Your Blog

This post explains how to add hyperlinks to text,how to make hyperlinks open in new window.

If you don't know what hyperlinks means?Hyperlink means a link which when clicked go to another section of document or webpage,etc.
Here are a few examples:
Put youtube videos in your blog
Disable navbar in blogger blog

As you can observe the above links,when clicked go to another page.
So,how to add the hyperlink,
Adding hyperlink(open in the same window):

Here is the sample code to do it

Example: put inplace of
TEXT HERE - Google
target - google.com

So,the html code looks like

and the output will be Google

How to add hyperlink(open in new window):
Anyone don't want their visitors to go away from their site.So,placing links which open in new window is very useful and very good thing to do.
So,here is the code

the output will looks like Google (If you click on the link,it will open in the new window)

As you can observe,we added the attribute "target......blank" to make this happen.
Not in this case, add that attribute to any link(image or text) to make them open in new window.

Posted on : | By : Er. Ankita Dhiman | In : Hyper links

0

Read Full Article

Scrolling text-marquee-html codes for bloggers

This post explains you how to add Scrolling text(also called as marquee)to your blog sidebars,blog posts,etc.
Another way to attract the visitors is adding some decoration to the site like scrolling text,etc.But,don't decorate it too much,particularly if your site contains too much text as it irritates and spoils the concentration of the reader.You can add scroll bars to tell your visitors what will be your next updates,popular posts,advertisements,etc.

So,how to add the scrolling text in your blog,let me explain it:

Adding simple scrolling text:
Here is the code to add a simple scrolling text from right to left side

<marquee>code to simple scrolling text</marquee>

The output will be like:
Example 1:

code to simple scrolling text

If you want some more attraction,then try these,

Add a background color to the text,

<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>

Example 2:

code to simple scrolling text

You can choose your background colour by replacing the hexadecimal code(#99ccff).
Here are some mode attributes to learn:

direction="left"

direction="right"

direction="up"

direction="down"

The above attributes tells the text which direction to scroll.
Use the code below:

<marquee bgcolor="#99CCFF" direction="right">code to simple scrolling text</marquee>

Here is are some examples:
To scroll in the 'right' direction:
Example 3:

code to simple scrolling text

Example 4:
To scroll in the 'up' direction:

code to simple scrolling text

Example 5:
Downwards:(I changed the hexa decimal codes for different colors)

code to simple scrolling text

few more attributes:
You can add this attribute to alternate the text

behavior="alternate"

Here is the code to do this:

<marquee bgcolor="#99CCFF" direction="right" behavior="alternate">code to simple scrolling text</marquee>

Example 6:

code to simple scrolling text

You can also set the speed of the text with this simple attribute:

The lower the scrollamount value, the less the speed it moves,
the html code for this:

the html code for this:

example 7:(for scrollamout =2)

code to simple scrolling text

Example 8:(for scrollamount=5)

code to simple scrolling text

Pausing the text when mouse is over the text:
It is very useful when the reader wants to read the text,and the scrollamount is big,sothat he will put the mouse over the text to pause the text and read the matter:
Here is the code to do this

Example 9:

code to simple scrolling text

(place the mouse over the text to test it)
Changing the text colour:
Here is the code to change the text colour:(Add it before the marquee tag)

So, the code looks like this

Example 10:

code to simple scrolling text

Here is the important one and most useful one, adding hyperlinks in the scrolling text.
Hyperlink means a link when clicked go to another location(site).
Let's see how to add hyperlinks to the scrolling text:

Adding hyperlinks(open in the same window):
Here is the sample code:

NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.
Here is an example:

The output will look like this

Free Softwares Free Wallpapers Funny Video's

If you want to open the links in new window,here is the code:

Free Softwares Free Wallpapers Funny Video's

That's it!Now you can add this to your blogger sidebar,in the blog post,where ever you want.

Posted on : | By : Er. Ankita Dhiman | In : Hyper links

0

Read Full Article

Show Comment Bubble At Top Of Each Blogger Posts

How To Add Beautiful Subscribe Section to Blogger

How to show 10 posts instead of 5 posts in blogger

Add jQuery Image Preview With Caption

40+ Read More Buttons

Add jQuery Tooltips

Posted on : | By : Er. Ankita Dhiman | In : Hyper links, JQuery

0

JQuery LINK Nudging

Posted on : | By : Er. Ankita Dhiman | In : Hyper links, JQuery

0

Adding Text Links (Hyperlinks) to Your Blog

Posted on : | By : Er. Ankita Dhiman | In : Hyper links

0

Scrolling text-marquee-html codes for bloggers

Posted on : | By : Er. Ankita Dhiman | In : Hyper links

0

Popular Tags

Labels

Followers

Posted on : document.write(ultimaFecha); | By : Er. Ankita Dhiman | In : Hyper links, JQuery

Posted on : document.write(ultimaFecha); | By : Er. Ankita Dhiman | In : Hyper links, JQuery

Posted on : document.write(ultimaFecha); | By : Er. Ankita Dhiman | In : Hyper links

Posted on : document.write(ultimaFecha); | By : Er. Ankita Dhiman | In : Hyper links

Popular Tags

Labels

Followers

Posted on : | By : Er. Ankita Dhiman | In : Hyper links, JQuery

Posted on : | By : Er. Ankita Dhiman | In : Hyper links, JQuery

Posted on : | By : Er. Ankita Dhiman | In : Hyper links

Posted on : | By : Er. Ankita Dhiman | In : Hyper links