Last night, when I was browsing for information about making blogger blogs look more stylish and professional, I found a beautiful widget that will scroll along the page as and when you scroll up or down. What attracted me, is the gliding movement of the widget to display the important links for your blog. You may use this widget to display some of the best posts in your blog or some important links. Look at the red box in the picture below. If you are still confused, please have a look at the demo in my test blog by clicking here - Stylish Scrolling Sidebar Demo.
I am pretty sure everyone would love to add this widget in their blog. There are lots of customizations with this widget. For example, you may ask the advertisers to place their ads in this widget or display your social networking links. The only disadvantage is that, it will take a little bit of time to load since it works on a JavaScript. Any way, let us get to our work by installing this stylish widget in our blogger blogs.1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.
<body>
3. Download the text document - Stylish Scrolling Widget For Blogger Blogs.4. Now, open the text document, copy the entire code and paste it just below the line you searched in step 2.
5. Change the code that says "Your Link 1, Your Link 2 and so on" with the links you wish to display in your blog. You may even change the text "USEFUL LINKS" with some other name, which gets displayed in the widget on hitting the "CLICK HERE" tab.
(Note: For any other customization with this widget, please feel free to leave your comments and I will help you customize them as per your request.)
6. Save your template and view your blog. You will find the widget installed successfully.
I made this post as simple as possible. I hope you enjoyed this post. As I said earlier, feel free to leave your comments here. You may even add the codes using the "HTML/Javascript" option in the "Design->Add Page elements" page. So, just give this widget a try!! If any links are broken or any other problem you face with your blog, you can always reach me through my email id at smalwayz@gmail.com or via comments!!
About the Author
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
thank you it very stylish widget....
REPLYYup!! I know!! Hope that helped you improve your blog! Thanks for the visit! Keep in touch for more updates!!
REPLYOh thankQ so much Mukund.It helped me very much.Its quite a beautiful piece of work.Thanks for the original writer also.
REPLY@ναяυη g: Thanks for the comment! I am happy that you liked the widget. Keep up with blog for more interesting updates!!
REPLYhi, great side bar,
REPLYi added it success fully,
now i appears on my blog, very well.
how to configure now posts to the link.
clicking on link should take to a link, how to add it.
@pramod: You will find lines your HTML as follows:
REPLY<li><a href="#">Your Link 1</a></li>
Just replace # with the links you want to point and replace "Your Link 1" with the name of your link. I hope I answered to your question!!
Hi Mukund Your blogger tips are so great,can u do me a favor....
REPLYcan u make a Stylish Scrolling Widget for social sites like facebook,twitter and etc..,
looking forward for your replay....
Thnx :-)
@vamsi: Thanks for the comment! May I know what actually you need? You want links to get displayed in the sidebar which will link to the social sites like face book and twitter?
REPLYThe actual need is i want facebook,twitter and other social sites buttons in the place of "click here" and it should scroll with sidebar and it should not expand on mouse hover.....
REPLYthnx 4 ur quik reply....
@vamsi: Fine! I get you! You want floating social bookmarking buttons along sidebar. I will soon find out the code and make a post about it!!
REPLYThnx 4 ur Help(in advance),I'm waiting for ur post.....
REPLY@vamsi: Thank me only after I make the post vamsi:) Any way, happy to receive your comments!!
REPLYThnx 4 ur Help(in advance),I'm waiting for ur post.....
REPLY@pramod: You will find lines your HTML as follows:
REPLY<li><a href="#">Your Link 1</a></li>
Just replace # with the links you want to point and replace "Your Link 1" with the name of your link. I hope I answered to your question!!
@ναяυη g: Thanks for the comment! I am happy that you liked the widget. Keep up with blog for more interesting updates!!
REPLYhi! i haven't even started yet but the < body > doesn't show up. i get a Phrase Not Found when i do CTRL + F. i find this widget interesting and would love to have one in my blog. what do you think went wrong? hope to hear from you. thanks!
REPLYhttp://aobibliosphere.blogspot.com/
http://twitter.com/aobibliophile
@aobibliophile™: Haha!! Every HTML file will have a body tag buddy! Just check without the spaces. May be, that's why, you did not find the code. If you still face problems, just contact me via email: smalwayz[at]gmail.com
REPLYeven iam not able to get d body tag...can u pls tell wat went wrong??
REPLY@Ashish Kumar Srivastava: Send your template to my email address with your request and I will fix up your issue.
REPLYwell dude its not working for my site, when i added the code after implementing it i got errors...
REPLYfor example like i gave a link to webhosting site, when made to click the hosting site link, i get result is mysiteurl.com/webhosting site name!! this way the url comes
its not going directly to the site url, what should i do how to solve it, please help me out
@raj: Contact me via email buddy! Will fix your issue!!!
REPLYwhats ur email id dude????
REPLY@raj: My email id is smalwayz@gmail.com. You can hit the contact button at the footer of my blog!!!
REPLYHie mukund....
REPLYi added this Style bar widget in my blog.. i can view it.. i gave links for it.. but when i was clicking on CLICK HERE. it is going to TOP page plz resolve my issue.
Thanks.
www.thegossipsguru.blogspot.com
@User Freindly: Yeah! That's because you still have not provided any link. Just contact me via email and I will solve your problem. It's pretty simple!!!
REPLYHi!
REPLYThat's great! But I seem to have a little problem to. Since my layout is wide and both the header and articles stand to the far left, the bar floats under them. I can see part of it between posts when scrolling (so it is above the background). I guess there is a simple way to change it but my knowledge is kinda limited!
Thanks for sharing!
@BDNf: I'm not able to understand what you said but I can very well solve your problem. Just email me and I will help you solve the problem!
REPLYHi! Sorry to bother you again but I just wanted to make sure you had received my email!
REPLY@BDNf: Yes buddy! I received your email but I did not receive your template. Only if I get to the coding, I can work on it. So, send me your coding or give me the access to your blog. The latter would be a better option for this customization!
REPLYhye how to change its colour n how to change 'click here' to other name
REPLY@FarisFarhan: Since it is a picture that has been used on the coding. You need to change the image for it. Just download that image and change the color using Photoshop. I hope it is easy for you to do that. Thanks for the comment!
REPLYi ve 1 more problem....whenever i apply this sidebar to my blog...it disables my other j-query widgets...u can see my blog here
REPLY@SakeT KumaR: Well, probably you are using two jquery files on your blog - that is, you already have a jquery file on your blog. Just recheck the scripts. If you face problem, ping me on gtalk.
REPLY@Mukund
REPLYI've a good knowledge of HTML (basics only) but i don't have a command over CSS n xml.....so i can follow ur directions but i will certainly not be able to do anything substantal on my own...if u need i can send u my blog's full template....please if u can sort out my problem...it would certainly be a help of high quality..looking forward to ur reply
@SakeT KumaR: Sure! As I said earlier, just email me stating your problem and I'll direct you with further instructions:) Use the contact button at the top navigation bar.
REPLYhow too add replay button like u
REPLY@Naren Dran: Do you mean the "Reply" button on the comment's section?
REPLYGREAT BLOG
REPLYhttp://teknologydemystified.blogspot.com/
Use the tab below to comment. No spam please!!!
POST YOUR COMMENT