|
|
|
I guess you understood what do I mean changing layouts dynamically.Wondering, why should I use this? Pretty simple! Your blog shall be read by people from various age groups. Few might feel it comfortable to read the articles on your existing font/text size while few may find it difficult - especially the old age group. Hence, you shall add few lines of a JavaScript to satisfy every reader on your blog, by providing him/her the ability to customize the visual appearance of your blog. Interesting... Isn't it?
FOR NEWBIES - ONE CLICK INSTALLATION
Warning: The one click installation button works only on Opera, Firefox 3.0+ and IE 9.0! So, if you are using any other browser, then please skip this method and scroll down to install the widget using the alternate method - the one explained for web masters.
Without wasting your time, let me dive into the tutorial. I've created a simple one click installation button, as shown below, by which a widget shall be added to your blog so as to change the font size dynamically. It's specially targeted to newbies and those who hate playing with codes, unlike me!
On installing the widget, you will notice the following text - CONTENT GOES HERE, appearing on your blog. Just replace CONTENT GOES HERE with the content of your choice and your done! You should be able to make your text bigger or smaller by clicking the respective links mentioned in the widget.
Note: By opting for this method, you will be able to increase or decrease the text that lies in the widget - those lines which you replaced with CONTENT GOES HERE. In other words, the content between the div id and div.
FOR WEBMASTERS - A LITTLE COMPLEX PROCEDURE
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your blogger template and search for the following piece of code. Use CTRL+F to speed up the search.
4. Choose "Add a Gadget >> HTML/JavaScript". Now, paste the following codes in the text document - TEXT RESIZING SCRIPT, in the window that pops up (fill the content part - not the title). You may add a title to the widget or you may leave it blank - the choice is yours.
5. Well, that's it! Save your widget and your done!
Note: By following the complex procedure, the font size of your articles, be it the one on the homepage or the post page, will increase or decrease unlike the ones using the widget version. To understand the difference, try both the methods:)
The biggest advantage with this script is that, it works independently and does not require a jquery library file, unlike the other tutorials on dynamically changing layouts on blogger - Changing Backgrounds and Adaptable View. Just few lines of script will do the magic. Tested to work on all major browsers. Compatible with all the blogger templates - be it the customized ones (or) the default blogger themes.
Well, I would like to know whether you enjoyed the one click installation tool in this tutorial or not? I'll probably try to use them more often than not in the upcoming articles so that, even the newbies can enjoy the various effects posted on my blog. Anyways, share your opinions about the article via comments! We love to hear from you:)
FOR NEWBIES - ONE CLICK INSTALLATION
Warning: The one click installation button works only on Opera, Firefox 3.0+ and IE 9.0! So, if you are using any other browser, then please skip this method and scroll down to install the widget using the alternate method - the one explained for web masters.
Without wasting your time, let me dive into the tutorial. I've created a simple one click installation button, as shown below, by which a widget shall be added to your blog so as to change the font size dynamically. It's specially targeted to newbies and those who hate playing with codes, unlike me!
On installing the widget, you will notice the following text - CONTENT GOES HERE, appearing on your blog. Just replace CONTENT GOES HERE with the content of your choice and your done! You should be able to make your text bigger or smaller by clicking the respective links mentioned in the widget.
Note: By opting for this method, you will be able to increase or decrease the text that lies in the widget - those lines which you replaced with CONTENT GOES HERE. In other words, the content between the div id and div.
FOR WEBMASTERS - A LITTLE COMPLEX PROCEDURE
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your blogger template and search for the following piece of code. Use CTRL+F to speed up the search.
<div class='post-body entry-content' >
2. Just add id='wrap-content' along with the div tag mentioned at step 1, that is, next to class='post-body entry-content'. So, your final tag should be similar to the one shown below.<div class='post-body entry-content' id='wrap-content'>
3. Save your template and move to the "Design >> Page Elements" page.4. Choose "Add a Gadget >> HTML/JavaScript". Now, paste the following codes in the text document - TEXT RESIZING SCRIPT, in the window that pops up (fill the content part - not the title). You may add a title to the widget or you may leave it blank - the choice is yours.
5. Well, that's it! Save your widget and your done!
Note: By following the complex procedure, the font size of your articles, be it the one on the homepage or the post page, will increase or decrease unlike the ones using the widget version. To understand the difference, try both the methods:)
The biggest advantage with this script is that, it works independently and does not require a jquery library file, unlike the other tutorials on dynamically changing layouts on blogger - Changing Backgrounds and Adaptable View. Just few lines of script will do the magic. Tested to work on all major browsers. Compatible with all the blogger templates - be it the customized ones (or) the default blogger themes.
Well, I would like to know whether you enjoyed the one click installation tool in this tutorial or not? I'll probably try to use them more often than not in the upcoming articles so that, even the newbies can enjoy the various effects posted on my blog. Anyways, share your opinions about the article via comments! We love to hear from you:)
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!
thats very nice..have you not installed it ?
REPLY@bhumika: Just searching for a spot to add one! I don't want to make my subscribe box go below the screen and the advertisements too:)
REPLYWhoa.. This is a good one.
REPLYMaybe, I'll add one NOWWWW!! :)
You've been giving us awesome tutorials. Thanks Mukund!!
Mukund, Must say it is an awesome script if it does not increase the loading time for the site. Keep it up.
REPLY@M.Pinto @ ProHacker: Yup! I've been trying to provide unique stuffs! Thanks for the comment buddy! I hope you enjoy the upcoming articles/tutorials too:)
REPLY@Analyst: Well, it will definitely not increase the load time in anyway! It does not work on jquery! So, you can install it Mr.Analyst:)
REPLYI have installed the widget at http://www.indian-share-tips.com/ and results are just awesome. Thanks for great stuff.
REPLY@Analyst: Yup! Had a look at the same! I hope, I'll be able to provide similar widgets so as to keep you excited always:)
REPLYHey, really nice widget. I will install it in my personal blog.
REPLY@Rajib Kumar: Yup! Thanks Rajib! I hope you enjoy the other widgets - upcoming ones as well!
REPLYNice post.. I think it should help for my new blog.
REPLY@skyafar: Hope it does! Thanks for the comment! Hope you enjoy the other articles as well!
REPLYI must say that this blog is an amazing blog an impressive one,,Thanks for the tutorial, very interesting
REPLYITS OSM !!!
REPLYBut i want to resize Images ???
PlZ give script for that
Thanks :>
Waiting....
Use the tab below to comment. No spam please!!!
POST YOUR COMMENT