Blogger Falling Rectangles : How to Add Falling Rectangles to Blogger?
By blog
You can add falling objects like small rectangles, circles, stars etc. to your blogger template. When anyone open your blog, they will see that small rectangles or circles or stars are falling. This really increase your blog outlook. You can add these type of objects easily to your blog. This page contains information to add rectangle objects which will be falling to your blog.
Steps to add falling rectangles to blogger
Follow the following steps to add falling rectangles to blogger:
- Open www.blogger.com in your browser and log in to your account by using your username and password.
- After successfully logged in, you will be redirected to Dashboard. From the "Dashboard" panel, select the blog you want to modify and click that blog's Layout option.
- Soon you the "Layout" of your desired blog will be opened. Now, click on the option Add a Gadget.
- Now a window will be opened and you will see several gadgets option to add your blog. Choose HTML/JavaScript as a page element of your blog.
- Now, add the following lines of code to the HTML/JavaScript window.
<div align="center"> <marquee behavior="scroll" direction="down" style="position:absolute; left:50px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:300px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:700px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:800px; top:500px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:900px; top:150px; width:16px; height:200px; z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i43.tinypic.com/2hxbx2a.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:100px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="2"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:400px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="3"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:800px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:1000px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="1"><span class="falling2"><img src="http://i42.tinypic.com/w7iovc.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:150px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="3"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:650px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:235px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="4"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:450px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="1"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee> <marquee behavior="scroll" direction="down" style="position:absolute; left:750px; top:180px; width:16px; height:437px; z-index:1;" scrollamount="2"><span class="falling2"><img src="http://i44.tinypic.com/24phw5w.jpg"/></span></marquee> </div>
Note: You may use your own liked image. To do this, you must have to upload your image to any image hosting website and replace the like with your desired ones.
And that's all. Now if you open your blog, then you will see small rectangles are falling.
Live Demo
I already developed one blog to see you the live demo if you apply this tutorial. To see that blog or that live demo, click on the following link:
©
This tutorial is written by Blog.
For more blogspot tutorials, visit http://hubpages.com/hub/blog-index.
rancidTaste's Recent Pages
- Drawing a line: How to draw a line using HTML 5?
HTML5 canvas API provides basics tools and great supports to draw and style different types of sub paths including lines, arcs, Quadratic curves, and Bezier curves, as well as a means for creating paths by connecting sub paths. - 15 hours ago
- SEO Pages
SEO, Search Engine Optimization and Keywords - these common three terms are the brainstorming terms for any content publisher, seo company, seo service provider, seo researcher, seo firm, seo consultant, seo professional or other seo lover. - 3 months ago
- WordPress.org vs. WordPress.com: An explained comparison between WordPress.org an WordPress.com
WordPress is a common name but do you know that there are two things: WordPress. - 3 months ago
- Creating database from cpanel: How to create a database from cpanel hosting?
A step by step full tutorial to create a database from cpanel hosting account for any dynamic website. - 3 months ago
- Natural Join in Database: Retrieving records from more than one table with Natural Joins
Natural Join is one of the sql joining. - 3 months ago
- Explanation of SQL Join: Obtaining data from multiple tables using Join
Explanation of SQL Join: Obtaining data from multiple tables using Join. - 3 months ago
- How to solve "CreateFile error 32 when trying set file time" Error During Oracle Installation
Solution of the Oracle installation problem on Windows 7 / Windows XP during Oracle installation start-up. - 3 months ago
- A Brief Explanation of SQL Statements and Classification
Any type of database is based on several statements. - 3 months ago
blog's Recent Pages
- Hover Peek-a-boo Blogger Navbar: How to Hide Blogger Navbar and Make It Visible When You Place the Mouse Cursor on It?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 2 years ago
- Remove or Hide the Blogger Navbar: How to Remove or Hide Blogger Navbar?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 2 years ago
- Change the Color of Blogger Navbar: How to Change the Color of Blogger Navbar?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 2 years ago
- Blogger Navbar: What Is Blogger Navbar And It's Advantages and Disadvantages
Blogger Navbar appears at the top of every blogger by default. - 2 years ago
- Adding "Top of Page" Icon Link: How to Add "Top of Page" Icon Link on Your Blog or Website
Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. - 2 years ago
- Adding "Top of Page" Text Link: How to Add "Top of Page" Text Link on Your Blog or Website
Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. - 2 years ago
- Adding Signature to Blogger Posts: How to Add a Signature under Your Blogger Posts?
You can easily add your own custom signature to your blogger posts. - 2 years ago
- Blogger Falling Rectangles : How to Add Falling Rectangles to Blogger?
You can add falling objects like small rectangles, circles, stars etc. - 2 years ago
uminami 6 months ago
thank you for this information:)