How To Add Smooth Scrolling Up Links In Blogger, WordPress or HTML Site

No votes yet.
Please wait...

In different sites or blogs, you might have seen some Smooth Scrolling Up Links with some icons that indicate that these are new/latest or best products.

img-9

If you ever wanted to make such links in your own blogger, WordPress or in Html developed site then here I’m going to share some html code below that you can simply & easily add on your site to make such scrolling links on your own site or blog.

Related: How To Add Social Content Locker To WordPress

Before going any further, do check some examples below in the screenshots.

img-7

screenshot-1


img-8

screenshot-2

 

You might be expert or still newbie but you might be well aware of the marquee tag in Html which we use to make any link, image or any other thing scroll-able on our sites.

Related: How To Make Professional Printable & Online Payment Acceptable Invoice For Free

For the same thing, we’ll use marquee tag to make scrolling up, down, left or right links or images in our sites.

Follow these steps.

For Blogspot platform, go to your blog’s Layout> Click on Add a Gadget> Click on Add HTML/JavaScript gadget & then paste the code below.

<!-- Coded By AndroidCoolTricks.com -->
<marquee behavior='scroll' direction='up' scrolldelay='220'>
  <a href='http://www.yourdomain.com/page-1'>Download Pak Urdu Installer Free - Urdu Keyboard</a> <img src='http://2.bp.blogspot.com/-qFlW7yvjGoA/VbtSBbLr4aI/AAAAAAAAAXw/_q4z45KkNxM/s1600/New_icons_37.gif'/>
  <br/>
<a href='http://www.yourdomain.com/page-2'>Learn How To Take A ScreenShot in HTC Phones</a> <img src='https://2.bp.blogspot.com/-6TN4K4LMMJM/VbtSBV-nYMI/AAAAAAAAAXs/MeEjoxE_uWc/s1600/download%2B%25281%2529.jpg'/>
<br/>
<a href='http://www.yourdomain.com/page-'3>Download Free Weaponeer Computer Fonts</a> <img src='https://2.bp.blogspot.com/-6TN4K4LMMJM/VbtSBV-nYMI/AAAAAAAAAXs/MeEjoxE_uWc/s1600/download%2B%25281%2529.jpg'/>
<br/>
<a href='http://www.yourdomain.com/page-4'>Learn How To Speed Up Your System</a> <img src='https://2.bp.blogspot.com/-6TN4K4LMMJM/VbtSBV-nYMI/AAAAAAAAAXs/MeEjoxE_uWc/s1600/download%2B%25281%2529.jpg'/>
<br/>
<a href='http://www.yourdomain.com/page-5'>Download Responsive Enplate Free Blogger Template</a> <img src='https://2.bp.blogspot.com/-6TN4K4LMMJM/VbtSBV-nYMI/AAAAAAAAAXs/MeEjoxE_uWc/s1600/download%2B%25281%2529.jpg'/>
<br/>
<a href='http://www.yourdomain.com/page-6'>How To Add My Computer icon On Desktop In Windows 8</a> <img src='https://2.bp.blogspot.com/-6TN4K4LMMJM/VbtSBV-nYMI/AAAAAAAAAXs/MeEjoxE_uWc/s1600/download%2B%25281%2529.jpg'/>
  <br/>
</marquee>
<!-- Coded By AndroidCoolTricks.com End -->

Now, change the links & titles ( <a href=’http://www.yourdomain.com/page-1′> ) with your blog or blog’s posts or pages links & also, change the image/icon links with your own image/icon ( <img src=’http://2.bp.blogspot.com/-qFlW7yvjGoA/VbtSBbLr4aI/AAAAAAAAAXw/_q4z45KkNxM/s1600/New_icons_37.gif’/> ).

For WordPress.org site/blog, log into your dashboard> go to widgets> add a Text/Html widget & paste the code in the widget & change the Urls then save & place the widget anywhere on your blog/site you want.

For Dynamic Site, copy the code, paste it anywhere you want before the </body> & after the <body> in the Html source code of your site or blog to show scrolling up links on your site.

Looking forward to hearing from you guys. If you have any question regarding this post then don’t hesitate to post your comment below.