As Blogger gives you full access to modify the blog completely, so thanks to Blogger and all the blogger-geeks from around the world, that I am successfully able to compile these modification 'tips and tricks' which can completely modify your free blog into a problog !
General Hacks For Templates
01. Download The Best Template for your Blog
02. What is a blog and How to Get One
03. Get a better domain for your blog !!! (Most Important)
04. How to change blogger templates
05. Back Up your blog posts and comments
06. Remove the "Navbar" from your blog
07. How to show HTML text in Blogger posts
08. Add a better Favicon to your blog (Best method available on Internet)
09. Embed the "Comments Form" just below your blog post
10. How to add a post to all Social Networking Websites at Once
11. How to add/change background image in Blogger
12. New fonts for Blogger
13. Create a professional "Contact Me" page in Blogger Blogs
14. Add 3 new widgets, at the bottom of your blog
15. Convert your blog from Blogger to WordPress/LiveJournal/MovableType or vice versa
Search Engine Optimization
01. How to add Site map To Your Blogger Blog
02. How to add Meta tags to your blog / website
03. Swap title of your blog
04. Search Engine Optimization plug-ins/add-ons for Firefox
05. How to add separate Meta Tags for individual blog posts
06. How to track your website's visitors and optimize your website for Search Engines
07. What most people search for - Important keywords
08. How to add your blog to Google Blog Search
09. Show only titles in your Blog archives pages
10. Check how fast your blog / web site loads (improve loading speed)
11. A quick Search Engine Optimization tool
12. Find and remove broken links from your blog
13. Get better traffic from BlogExplosion
Widgets And Hacks For Posts
01. How to create a sticky post in Blogger
02. How to make a scheduled post in Blogger
03. How to add "Related Posts" widget below all your blog posts
04. How to add Popular Posts widget to your blog
05. Recent posts widget for Blogger
06. How to add "Read More" tags to posts, and hide entire posts on the Home Page - Create Expandable Posts
07. Scrolling text widget for recent posts
08. Add your sign below all the posts in Blogger/BlogSpot blogs.
09. Customized Popular posts widget for blogger
Widgets and Hacks for comments
01. Display commentators profile image in Blogger
02. Recent posts widget for Blogger
03. Top commentators widget for Blogger/BlogSpot blogs
04. Easily moderate comments through email in Blogger
05. Change "Post a Comment" link/text in your Blogger Blog
06. Highlight Blog owner's / author's comments in the blog (i.e. your comments in your blog)
07. Create a customized and better looking "About Me" or "Profile" widget
Try These Widgets and Hacks
01. How to show widgets only in homepage, or all posts or only in a specific page
02. Blogger Help - Animated Flash Tag Cloud For Blogger
03. How to add "Star Ratings" and "Customized Feedback" below your blog posts in Blogger blogs
04. How to add Flash Clock in your HTML website
05. How to add social networking buttons to posts in blogger
06. How to embed Flash and JavaScript files in your blog posts
07. How to embed songs or MP3 files in Blogger posts
08. Add language translator widget / country flags in Blogger
09. How to create a mutli-tab widget in Blogger/BlogSpot blogs
10. How to add auto-scrolling widget [text and image slide shows] in Blogger
11. Add falling snow flakes /flowers/leaves or balloons in Blogger Blogs
12. Top EntrCard Droppers widget for Blogger blogs
13. Show/Hide Text widgets, through JavaScript toggle method
14. Create a Drop Down menu in your blog
15. Add floating "Back To Top" button in your blog
16. Add a fixed (floating) "Feedback button in your blog"
17. Put a "Save As PDF" button/icon in your blog
18. Add a text resizing widget to your blog
19. Create an HTML Rollover button for your blog
20. Show present date and time as simple text in your blog
21. Add a JavaScript calendar to your blog
22. New multi-tabbed widget for your blogs
23. Create lightbox image display in your blog
24. Encrypt or hide your HTML code
25. Add a fish tank or aquarium to your blog
26. Create a customized side menu for your blog
27. Create a multi-level drop down menu for your blog
28. Show Twitter updates on a image
29. Send your blog updates to twitter automatically
30. Add, Edit or Delete labels in Blogger
31. Change or customize "Older Posts", "Newer Posts" and "Home" links in your blog
Image or Picture Hacks
01. How to embed pictures in Blogger Posts
02. How to upload images in Blogger without changing the size of images
03. Image hosting websites guide
04. Free images stock-websites (search and download free images from these websites)
05. Free Animated Gif Image/Picture creator
06. Create round cornered / smooth edged pictures
07. Uploading images in Blogger, in the original size
08. How to show a different image on mouse hover
09. Measure pixels length on screen (add-on for Firefox)
10. Color picker, Eye dropper and Page zoomer - while working in a browser. (add-on for Firefox)
11. 70+ background images collection
12. Create fractal Background images for your blog
More to come here, so keep a watch on this post !!!
01. Download The Best Template for your Blog
02. What is a blog and How to Get One
03. Get a better domain for your blog !!! (Most Important)
04. How to change blogger templates
05. Back Up your blog posts and comments
06. Remove the "Navbar" from your blog
07. How to show HTML text in Blogger posts
08. Add a better Favicon to your blog (Best method available on Internet)
09. Embed the "Comments Form" just below your blog post
10. How to add a post to all Social Networking Websites at Once
11. How to add/change background image in Blogger
12. New fonts for Blogger
13. Create a professional "Contact Me" page in Blogger Blogs
14. Add 3 new widgets, at the bottom of your blog
15. Convert your blog from Blogger to WordPress/LiveJournal/MovableType or vice versa
Search Engine Optimization
01. How to add Site map To Your Blogger Blog
02. How to add Meta tags to your blog / website
03. Swap title of your blog
04. Search Engine Optimization plug-ins/add-ons for Firefox
05. How to add separate Meta Tags for individual blog posts
06. How to track your website's visitors and optimize your website for Search Engines
07. What most people search for - Important keywords
08. How to add your blog to Google Blog Search
09. Show only titles in your Blog archives pages
10. Check how fast your blog / web site loads (improve loading speed)
11. A quick Search Engine Optimization tool
12. Find and remove broken links from your blog
13. Get better traffic from BlogExplosion
Widgets And Hacks For Posts
01. How to create a sticky post in Blogger
02. How to make a scheduled post in Blogger
03. How to add "Related Posts" widget below all your blog posts
04. How to add Popular Posts widget to your blog
05. Recent posts widget for Blogger
06. How to add "Read More" tags to posts, and hide entire posts on the Home Page - Create Expandable Posts
07. Scrolling text widget for recent posts
08. Add your sign below all the posts in Blogger/BlogSpot blogs.
09. Customized Popular posts widget for blogger
Widgets and Hacks for comments
01. Display commentators profile image in Blogger
02. Recent posts widget for Blogger
03. Top commentators widget for Blogger/BlogSpot blogs
04. Easily moderate comments through email in Blogger
05. Change "Post a Comment" link/text in your Blogger Blog
06. Highlight Blog owner's / author's comments in the blog (i.e. your comments in your blog)
07. Create a customized and better looking "About Me" or "Profile" widget
Try These Widgets and Hacks
01. How to show widgets only in homepage, or all posts or only in a specific page
02. Blogger Help - Animated Flash Tag Cloud For Blogger
03. How to add "Star Ratings" and "Customized Feedback" below your blog posts in Blogger blogs
04. How to add Flash Clock in your HTML website
05. How to add social networking buttons to posts in blogger
06. How to embed Flash and JavaScript files in your blog posts
07. How to embed songs or MP3 files in Blogger posts
08. Add language translator widget / country flags in Blogger
09. How to create a mutli-tab widget in Blogger/BlogSpot blogs
10. How to add auto-scrolling widget [text and image slide shows] in Blogger
11. Add falling snow flakes /flowers/leaves or balloons in Blogger Blogs
12. Top EntrCard Droppers widget for Blogger blogs
13. Show/Hide Text widgets, through JavaScript toggle method
14. Create a Drop Down menu in your blog
15. Add floating "Back To Top" button in your blog
16. Add a fixed (floating) "Feedback button in your blog"
17. Put a "Save As PDF" button/icon in your blog
18. Add a text resizing widget to your blog
19. Create an HTML Rollover button for your blog
20. Show present date and time as simple text in your blog
21. Add a JavaScript calendar to your blog
22. New multi-tabbed widget for your blogs
23. Create lightbox image display in your blog
24. Encrypt or hide your HTML code
25. Add a fish tank or aquarium to your blog
26. Create a customized side menu for your blog
27. Create a multi-level drop down menu for your blog
28. Show Twitter updates on a image
29. Send your blog updates to twitter automatically
30. Add, Edit or Delete labels in Blogger
31. Change or customize "Older Posts", "Newer Posts" and "Home" links in your blog
Image or Picture Hacks
01. How to embed pictures in Blogger Posts
02. How to upload images in Blogger without changing the size of images
03. Image hosting websites guide
04. Free images stock-websites (search and download free images from these websites)
05. Free Animated Gif Image/Picture creator
06. Create round cornered / smooth edged pictures
07. Uploading images in Blogger, in the original size
08. How to show a different image on mouse hover
09. Measure pixels length on screen (add-on for Firefox)
10. Color picker, Eye dropper and Page zoomer - while working in a browser. (add-on for Firefox)
11. 70+ background images collection
12. Create fractal Background images for your blog
More to come here, so keep a watch on this post !!!
101 comments:
Nice blog...this is really helpful.you know a lot of blogger need more information about what do need to learn more.
it is a great blog site and really very help full.
Hi
thanks for templates that's very cool.
take a look at my friend's website if you wanna free professional banners.
have a nice day!
Hey, great blog!
How did you create the tabs area in the top right hand corner? With the subscribe, tag cloud, and translate buttons?
thats a great list that you have compiled
nice site you got here! This is very helpful especially for those who are still into Blogger. Thanks to you, you're putting "Pro" to the word "Blogger"
More power!
CarloBlogg
http://carloblogg.blogspot.com
Lovely blog, I want to put digg and other social bookmarks in my posts so I will come back and see later if you have a section on that. Just finishing my entredrops!
Thnx for appreciating the work Jenai !
And yes, I have described the method to add social bookmarking buttons to your blog
Hi Carlo.....thanks to u too
And yes this is definitely possible to convert blogger blogs in to pro-blogs, we just have to work more on the template nad of course content :)
wow it so greats tips...
nice blog , your blog is very resource full i just bookmark this page
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Sarah
I've come across this site many times now recently, you're doing something right :P
I was just looking up "blogger widgets" and voila, there you are. I love your RSS icon, very cute but now I'm off to read several of the links you've got here, thank you for posting them. I think I'll start with the multi-tab widget!
Hello everybody!
thanks for these lovely comments, your comments encourage me more to add these sort of hacks, now i'm trying to give you some less known hacks in the easiest possible ways, wish me luck for that :)
Wow....Good Article. Nice to visit your Blog. Good Luck For you.
Hi Daryo!
Thanks for the comment....
Regards
Sai
hey, this is so cool ! ;)
Thanks Rara !
:)
hi! wanna earn ? try this - http://r.yuwie.com/geraldinetoring/
Good blog. Can you supply the coding so I can put this 'share your views' application on my blog?
Well "Share your views" is nothing but an image.
I checked your blog, and I found comments posting in a "pop up". So to embed a "comment form", read this post:
Embed comment form in Blogger
And to add those smilies, read this:
Add smilies in comment form in Blogger
Format is like :
Post Title
Date
Widget 1 Widget 2
I want to increase gap between date & Widgets so as to accommodate calender date icon easily..
Waiting 4 ur reply !!
Hello ankit
in the template, you'll find something like this:
.date-header {
***
***
***
}
and one of the *** will be
margin 1.5em 0 2.0em; (or similar to this)
now increase the first value, that is 1.5 to 1.75 or 2
Leaving my footprints and made a drop. Hi, nice blog doctor.
:)
I have bookmarked this page. Excellent collection.
I am happy that you did that Venkata
You are always welcome on this blog !
Regards
Sai
I want to add background image to my post title like
http://i719.photobucket.com/albums/ww200/bajaj151/heading.jpg
Dude that image is just a comment-bubble, are you sure you have given the right link ?
Just look at this site :
http://www.dcblog.net/
Hello Ankit,
You'll find something similar to this in the template;
.post h3 a, .post h3 a:visited, .post h3 strong {
background: #ffffff url("http://www.gigaimage.com/images/144t0jyusibmi30pojj.jpg") no-repeat;
line-height: 2.5em;
margin:0 50 .75em;
display:block;
text-decoration:none;
color:#FF0000;
font-weight:normal;
}
The bolded line may/may not be there, so add it, and in place of the image-link in italics, add any image you want to !
There is nothing like :
.post h3 a, .post h3 a:visited, .post h3 strong {
good post and good article overall...
thanx
sagar
www.freetemplates4u.co.cc
Welcome Sagara !
wonderful blog...been looking for this kind of info for a long (well not that long) time..will in time try to improved my site which is so...soooo..well you know..
thanks again
I'll be happy if this blog is helpful to you, feel free to ask your doubts anywhere in the blog!
Regards
Sai
This is an awesome resource. Thanks so much for putting it together in such a well organized and complete manner.
Nicely done.
Welcome Sushi !
Thank you for sharing this great post!
You are welcome Hesham,
Although the list of tricks provided on this post is quite big, but actually the number of posts available on this blog is much more than this list, as I keep on adding tricks but sometimes i do not get time to update this list, so I suggest the visitors to subscribe to this blog, so that the updates are directly mailed to you, and you don't miss any article.
Regards
Sai
I never to get great information like this post, hope you want to teach me more about SEO brother.. :D
very nice blog...
totally useful..
thx alot.. ;;)
Hi Rizhal and Kenmax,
I am glad you visited my blog, and thanks for those lovely comments !
You are always welcome here, and you can comment anywhere in this blog, to get quick replies !
Regards
Sai
wow is nice info in here, thanks for share ur knowledge for me
Very cool info here. I started out with blogger/blogspot and it's a great place to get your feet wet.
Thanks.
Nigel
Welcome Harry and Nigel, you can subscribe to this blog if you want the updates directly to your inbox !
You are always welcome here!
Regards
Sai
wow, very complet info. from newbie to master, i'm blogspot user ;;)
Is it possible to transfer posts from one blog to another ?
Yup certainly ankit,
if you want to shift from blogger to blogger, then easiest way is to change the domain name itself.
Or you can use this export/import method:
http://bloggerstop.net/2008/11/back-up-your-blog-posts-and-comments.html
And to go from blogger to wordpress etc. use this method:
http://bloggerstop.net/2009/01/blogger-blogspot-converters-tofrom.html
I have a huge problem.. IE can't view my blog..only firefox can..Emailed to blogger forum but no replies...Can someone please help?
Hi Allure
There's too much of javascripting in your blog, even before your <html> and <head>, you have kept some scripting, this all will definitely affect the loading time etc., and moreover IE being more lame than firefox, it completely fails to load your blog.
Remove all javascript files/code from your blog, which you think are un-neccessary.
That's it !
How to display feed count as text ?
excuse me... how to use flash cloud tag in my link?
HI tetagga,
You can read this post:
Blogger Help - Animated Flash Tag Cloud For Blogger
@ AB,
It involves php coding dude...
I am very glad that you requested an ad on my blog. I am going through some changes in business and wanted to trick out my blogger blog. This will be a very big help. Not only do you get the ad, but I am getting your feed and putting you on my entrecard friends list!!!
Some of your tips and tricks are really useful, keep it up.
i agree with you. thank you
http://www.marioseotips.com
And I agree with both of you :)
This is the second blog I have read on this topic.I am floored I never read this before. Thank for sharing
seo tips blog
You too have some nice SEO tips on your blog...keep up the good work !
i Want Back To Top Button Like You
http://riteshsanap4u.blogspot.com/
Hi Ritesh you can read the tutorial here:
http://bloggerstop.net/2009/01/add-floating-back-to-top-buttonimage-in.html
hey sai!....how did u create this page??...i mean,this 'index' kinda page?....i also wanna create one,..plz guide me!..thx
Hi Zaeem,
No coding here, simple typing :)
i agree with you :p
thank for sharing
How to redirect Custom Domain to blogspot blog ?
www.exclusivearena.com --> www.exclusivearena.blogspot.com
Hi Ankit,
This post will be helpful to you:
Custom Domain For Blogger/BlogSpot Blogs
can you tell me how to add 125*125 ads section like your Sponsors portion
Well pooh,
there are various ways to put these ads, You can simply add a table to your blog, and place the ads in it:
<table border="1"><tr><td width="275" height="275">
YOUR ADS CODES HERE (You can put a max of 4 ads with 275x275 dimensions)
</td></table>
Change the dimensions if you want to add less/more than 4 ad units.
Regards
Sai
Good job
Can you please tell me that how to highlight the code in the posts
Hello Pooh,
I think this post will be useful to you:
Highlight Text In Posts Through Colored HTML Text Boxes
Regards
Sai
Helpful - I've bookmarked this page.
That made me happy...
Thanks :)
great stuff. how did you create the social networking widget? (just above "recommended)
thanks
Hi David,
thanks for your comment, actually that's not a single widget, they are simple images, with hover effect, you may read this post to know it in detail:
Image Hover EffectRegards
Sai
-To customize header I have this in layout (edit html)
<div id="typoork-header">
<!-- Your logo here -->
</div>
How can I add logo here ?
- How to add download link like :
http://img18.imageshack.us/img18/619/ddddjxo.jpg
put it in the image tag dude !
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
your site is so many help full so thx many
please visit now http://dramaandnatok.blogspot.com/
Thanks !!
What about the 2nd query ?
How can I add nav bar at top and search box in header image area ?
Dude,,it's already the direct link, you just have to save it...
nav bar ? you mean the one that is given by blogger ?
and to put search box in header it needs css & javascripting, that is difficult to explain for me...
No reply ???
If possible can I add search box in Drop Down Menu bar ?
How to add thumbnail related post ?
Yes Ankit, I'll write about it soon...
Actually it doesn't even require a tutorial, simply go to : http://www.linkwithin.com
& u'll understand the rest of the process.
Regards
Sai
How to convert
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=ea&style=black"></script>
into html ?
Hi,
Stumbled upon your website through a google search and now i think this was the best thing ever happened to me since i started blogging.
As mentioned above regarding placement of adslots in blogger, you have mentioned the code above but there is no mention of where to place it ?
Help me with that.
Also i have joined performancing ads and dont know how place them in my blog ! They provide java scripts .
Hi Perry,
Can you be specific about which code are you talking about, and in general for any ad-code, do this:
Go to Layout -> click on "Add a Gadget" and select "HTML/JavaScript" type, and then paste the ad code in to the widget.
Then save the widget. And finally drag the widget wherever you want in the template.
What about my query ?
Why do you want to do it Ankit....their data is dynamically shown through javascript, if you are ready to upload new images regularly, then simply save their image(no. of followers badge) occasionally and show it on your blog with a simple html-img tag.
Thanks for such a prompt reply.
Never expected it !
The thing is i use blogger.com to host my website and recently have joined performancing ads. The problem is i want to place 4 125by125 ads in my sidebar i.e in form of 2x2 box ( want to know how to make such widgets ). For doing this i searched for some tutorial and came to know about this site. I tried to customize my template but to no avail.
A help to put the ads correctly would be highly appreciated.
Thanks
Okay...it actually depends on your website (sidebar's width), presently I am considering that it's width is more than 250px.
And there many ways to do this, but I always keep things simple, so here's a simple table with 2 columns and 2 rows, place ads in them:
So use this code:
<table border="1"><tr>
<th align="center" width="130" height="130">Your Ad Banner 1</th>
<th align="center" width="130" height="130">Your Ad Banner 2</th>
</tr><tr>
<td align="center" width="130" height="130">Your Ad Banner 3</td>
<td align="center" width="130" height="130">Your Ad Banner 3</td>
</tr></table>Regards
Sai
Actually I want to add it along with feedburner count...see my blog..so that you can know my prob exactly.
Thanks
I love your site!!! but some codes doesn't seem to work on my template but thank you so much for all the help! Cheers!
´´´´´´´´´´´´´´´´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´0¶¶¶0´´´´´´´´ø¶¢´´´´´´´´´´´´ø¶ø
´´´´´¶ø´´´¶¶´´´´o¶1´´´´¶¶¶´´1¶¶¶´´´7¶¢
´´´´´¶1´´´´¶´´´$ø´´´´´´¶¶$´´´¶¶´´´´´´¢¶
´´´´´o¶´´´o¶´´o¶´´´´´´´¶¶o´´´¶¶´´´´´´´øø
´´´´´´¶´´´¶´´´¶´´´´´´´´´´´´´´´´´´´´´´´´ø
´´´´¶¶¶¶¶¶¶¶¶¶¶¶´´´´´´´´´1¶1´´´´´´´´´´´ø¶
´´´¶´´´´´´´´´´´´¶´¶¶´´´´´¶¶¶´´´´´´¶¶´´´´ø
´´ø¶´´´´´´´´´´´o¶´´¶¶´´´´´´´´´´´´¶¶´´´´´ø
´¶¶´´´¶¶¶¶¶¶¶¶¶¶¶´´´7¶¶ø7oo77¢¶¶¶´´´´´´ø¶
´¶´´´´´´´´´´´´´´´¶´´´´´¶¶¶¶¶¶¶´´´´´´´´oø
´¶¢´´´´´´´´´´´´´´¶´´´´´´´´´´´´´´´´´´´¶
´´¶´´´¶¶¶¶¶¶¶¶¶¶¢¶7´´´´´´´´´´´´´´´´7¶ø
´´´¶´´´´´´´´´´´¶´´ø¶¶´´´´´´´´´´´øø¶
´´´´¶¶¶¶¶¶¶¶¶¶¶ø´´´´´´¶¶¶¶¶¶¶¶¶¶´
thanks for sharing.... this blogger help...
i want to create older post icon for my blog...
help me to do...
what i have to do.....
www.vikneshblog.blogspot.com
Dude...u just made my simple looking blog into something special...at least for me :D
But I should start working on some of them again...they just don't work or even my layout doesn't have the codes which you asked to find for... :((
Allowed HTML tags: <b>, <i> and <a>