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 Layoutoption.
- 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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.
No comments:
Post a Comment