Blogger Widgets Hacks Templates Tips Tricks Make money Seo & Pagerank

Hack To Share Your Adsense Revenue With Different Authors Of Your Blog

noreply@blogger.com (Anshul) — Sun, 08 Nov 2009 13:58:00 +0000

You would be knowing for sure as now all the big bloggers with many writers use adsense revenue sharing hack for blogs.What actually it is about?.As many still would be not knowing about it,Like suppose i own a blog and run it.Now there are also,3 more authors to my blog who also write for my blog.Now the blog is owned by me but it have 4 authors including me who are very active on my blog to post and i have been using adsense adds at the beginning and end of the post to make some money out of it.

Now problem comes here,as how to distribute or share the revenue with other authors of my blog to give there share,as it becomes difficult to check how much the authors post is contributing to revenue of blog.So the thing only can be done is to show the adds of the that author google adsense account on posts done by him/her.As this will give him the exact revenue he deserves for doing that post.

I hope now you would be clear what i was talking about.Now this hack is very simple in wordpress blogs as plugin is available for it.Now i would like to tell you how make this work in bloggers.If you really have many authors to your blog-you can really use this hack to attract more authors and give them the reason to work hard for posting on your blog,which would give them the real revenue they deserve for that post.

As the best part is,if the author had previous posts on your blog,the adds will appear on that posts too automatically.Now how to implement it in blogger.

1. Login to Blogger dashboard
2. Navigate to Layout >> Edit HTML and Expand Widget templates
3. Search for the following code inside your template

<data:post.body/>

4. Insert the following piece of code just above or below the red code you find.As adding above will show adds at beginning of post and below will result in at end of post.Or add at top and bottom both,to show at both places.

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "admin"'>
Insert Ad Code for admin here (first author)
</b:if>

<b:if cond='data:post.author == "anshul"'>
Insert Ad Code for anshul here (second author)
</b:if>

<b:if cond='data:post.author == "sunil"'>
Insert Ad Code for sunil here (third author)
</b:if>

</b:if>

5. Replace the author name and ad code with the actual ones.As names are in bold and replace whole line 'Insert Ad Code for admin here (first author)' with the add codes of that author.

~~Its not necessary to use only adsense codes there.The author can have any banner add also like of his affiliate program he wants.Its upon the author with what add he wants to display.~~

Like above i have made 3 authors- admin,anshul and sunil.You can make any number you like,just keep on adding codes as i have done.Just change them with the name of yours,you are using in blogger as display name i.e post author name.Remember all the author names should be different.

6. Save the changes you have made.
7. You are done.
8.Verify that correct ads are shown by viewing HTML source code of the web pages when visiting posts created by various authors or bloggers.

I hope it will be very helpful for some bloggers who have many authors to there blog and even give you now opportunity to invite other authors to your blog.

Enjoy This Hack !!

Blogger Template | sGallery Grunge Style

noreply@blogger.com (Anshul) — Thu, 29 Oct 2009 06:45:00 +0000

Hi friends as its fast i am releasing my another blogger template and this time a gallery one.As i have seen many high quality gallery templates are being released by many bloggers, so i thought why not design a gallery template too, as i have not yet designed any gallery theme for you.But don't worry a premium gallery template of mine is under designing which i will release later after its completion.So for now you can use this sgallery blogger template,which is also of high quality.As my first impression of seeing it at wordpress was simple and beauty and third one very easy conversion to blogger.As i have only changed few codes of blogger html including colors and images and added gallery hack.

As you have seen all my previous templates were magazine styles but the last one which i released was irresistible by far my best conversion.Don't forget to check it for sure.Now lets see our sGallery blogger template.

Features Of sGallery Blogger Template

Gallery Style

Blogger Avatars Installed

Fixed Width Template

Right Sidebar

Compatible With Mozilla, Chrome and IE7

Show Of Your Favourite Photos

Support All Blogger Features

Top Comment Bubble

sGallery Template Installation

Changing Thumbnail

http://2.bp.blogspot.com/_j82W7u9kZbs/Sukp7en5B9I/AAAAAAAAAPg/2PnEl4-nZ38/s400/nothumb.jpg

~~If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.~~

Donate If You Like The Work

If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.

How Show Blogger Profile Images In Comments As Avatars

noreply@blogger.com (Anshul) — Mon, 26 Oct 2009 12:47:00 +0000

How To Show Blogger Profile Images In Blogger Comments.As many of us bloggers saying it as showing of avatars in blogger comments but they are not avatars, they are just your blogger profile images and many readers also get mistaken by it, But they are right to say them as avatars, as they are like avatars for our bloggers.As it has been near about an month blogger has released this feature and i have found most of the bloggers also using this in there blogs.But some still have problems and not have made the solution for blank spaces in comments for anonymous comments.So i would like to hold a complete detailed tutorial on it.The below picture show up how profile images show up in blog as i have taken this snapshot from my blog after implementing this hack.

Now How to enable the blogger profile images in blogger comments.

First of all Go to Blogger > Settings > Comments and enable “Show profile images on comment”

If you are using default blogger templates then they get enabled and profile images will start up to show in blogger comments.They can also start up to show up in some customized templates but it depends at to what extent there comment section been customized or not.

Some Of The Problems You Wouldn't Like even after Enabling Profile Images In Default Template.

There will be two major problems in it.

1)The bloggers who don't have uploaded there profile images to there profiles while comments will show up a blogger favicon of size 16x16 like below.It doesn't look good from my point of view because the blogger profile images show up a picture of size 35x35.

2) The bloggers who do comments with there blog urls or anonymous comments will end up with a blank space in comments.That looks really awkward.It destroys the beauty of comment system as you can see from below image.

I have shown all the 2 problems in above picture as i hope it will be clear to you right now.Now we need to solve these problems.But first i would like to tell you about how to enable profile images in comments in blogs who are using customized templates, just what they they need is to edit small bit of codes in there blogger html.Now carry on with this tutorial.

How Enable Blogger Profile images In Customized Templates

First of all enable the feature of profile images in your blogger settings as i showed above.Now check your comments.If it shows up blogger profile images in comments,then its ok else follow next step.

First step Go to Blogger Layout >Edit HTML and backup your template.Now Expand the widget templates and check if you can find this line there

If you don't find above line then find below line:-

And replace it with the above line which you didn't found in your codes.

And if you still not able to find the above line you may get this one:-

And replace it with the top most line which you didn't found initially.

Now find this line in code:-

And replace it with below codes.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

If you are using the author comment highlighting trick then you will get this code <a expr:name='data:comment.anchorName'/> once more in your template.So replace it also with above codes.

Now Save your template and you will be now able to see blogger profile images in your comments as i showed above in picture but with the two problems of showing favicon of small size and blank space for anonymous and other url comments.

Solution For The Problem

What we need is now to resize the blogger favicon to the size of blogger profile images and we need one more image for showing up for anonymous and url comments.As Soufiane from LeBlogger was the first to come out with the solution and helping us.

Now Just Go to blogger edit/Html and find for ]]></b:skin> tag and place the below css codes before it.

/* Avatar */
.avatar-image-container img {
background:url(http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=35);
width:35px;
height:35px;
}

You can just edit the image link, height and width in above css codes as you like.

Save it, You're done.

Now The the above image will be shown up for anonymous and url comments and favicon will be resized to width and height of size as you set as above in css codes.Now check how the better comments look as compared to above i shown.

I am sure now you will have no problems in implementing this in your blogs.If still you have some problems leave your comments i will try to solve them.Best Of Luck !

Blogger Template | Irresistible

noreply@blogger.com (Anshul) — Sat, 24 Oct 2009 21:58:00 +0000

Hi Friends, Its long i have not released any blogger template for you as me too was not able to update my blog from long time.So a template after a such long time should be premium blogger template, so that every reader of mine should like it and can use it on there blogs.I wanted it to be so good that every viewer of it should get impressed with the design so much that he/she can't wait to switch to this theme.Don't worry it will be going to free but not less than premium template.I have tried my best to make it look best and work with full functionality as like wordpress.Speciality about this template will be that i am releasing this template into all 9 colors available in irresistible with an easy change of only 3 colors with blogger fonts and colors tool.Now i think you should watch an demo of it for sure.

~~Just Don't Forget To Check All The Colors Available For This Template From Fixed Drop Down Menu at Top Right Of Demo Blog.~~

Features Of Irresistible Blogger Template

Fixed Width Template

Full Magazine Style Template

Three Column Blogger Template

Right Sidebar

Nine Colors Background

Multilevel Menu Links

Compatible With Mozilla, Chrome and IE7

Three Tabber Widgets

Search Box Ready

Beautiful Comment System

Show Of Your Favourite Photos And Video

Support All Blogger Features

125 x 125 adds Widget

Hacks Supported By Template

Multi-Level Menu Links

Automatic Read More Hack With Thumbnail

Search Box For Blog

Swap Title Hack For Blogger

Magazine Style Widgets

Hidden Navbar Layout

Tabber Content Widget

Layout Of Irresistible Blogger Template

Click The image to View Large

Now after uploading this template you would get the layout look like this in your blog.

Irresistible Template Installation

Top Menu Links For Blog

<ul class='nav' id='nav'>
<li class='current_page_item'><a href='/'>Home</a></li>
<li class='cat-item'><a href='http://www.anshuldudeja.com' title='Wordpress To Blogger'>Blogger Templates</a></li>
<li class='cat-item'><a href='http://www.funnypictures.net.in' title='WP Blogger Themes'>Funny Pictures</a></li>
<li class='cat-item'><a href='#'>Menu »</a>
<ul class='children'>

<li class='cat-item'><a href='#'>Link 1</a>
<ul class='children'>
<li class='cat-item'><a href='#'>SubLink 1</a></li>
<li class='cat-item'><a href='#'>SubLink 2</a></li>
</ul>
</li>
<li class='cat-item'><a href='#'>Link 2</a></li>
<li class='cat-item'><a href='#'>Link 3</a></li>
</ul>
</li>
</ul>

<ul class='nav' id='nav'>
<li class='cat-item'><a href='#' title=''> Menu</a></li>
<li class='cat-item'><a href='#' title=''> Menu1</a></li>

<ul class='children'>
<li class='cat-item'><a href='#' title=''> Link1</a></li>

<ul class='children'>
<li class='cat-item'><a href='#' title=''> Sublink1</a></li>
<li class='cat-item'><a href='#' title=''> Subink2</a></li>
</ul>

<li class='cat-item'><a href='#' title=''> Link2</a></li>
</ul>

<li class='cat-item'><a href='#' title=''> Menu2</a></li>
</ul>

Blogger Title And Description

<div id='logo'>
<div class='titlewrapper'>
<h1>
<a href='/'>Demo - Irresistible</a>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>http://www.anshuldudeja.com</span></p>
</div></div>

Flickr Photos

flickr account

Tabber Widget

~~Note:-If you use tabber script in template of your own,don't forget to find and remove the script i have expanded in template.~~

125x125 Sidebar Adds

Switching To Other Colors Of Template

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#18191b">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#6099ff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#a3d5ea">

body#woothemes {
background:$bgcolor url(http://3.bp.blogspot.com/_j82W7u9kZbs/Sqh3r8PhzRI/AAAAAAAAAJU/6s3whGZYO5U/s1600/bg.jpg) repeat-x center 0;
color: #e9e9e9;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
}

~~If i left something that you need more while installation of template or something where i got wrong in explaination or made complex let me know.~~

Template Full Support

If You really liked the template and want full support for this template,just use the paypal button at my blog sidebar to appreciate my work and make my time worth,i spent on this template design.

How Install Wibiya Toolbar Multi Function Widget

noreply@blogger.com (Anshul) — Mon, 19 Oct 2009 09:05:00 +0000

Many of my readers are asking for the fixed widget,which i am having at the bottom of my blog.It is by far best widget with useful features for a blog and is available in different colors to suit your blog.Best part is,its very easy to add and customize,The simple thing you have to do is just go to wibiya.com and sign up your blog there.Then they will get you approve your blog in 3-4 days and you will be ready to get codes for this widget from there site.You can select on the which features you want in your blog from below list and also select color of widget to suit your blog.

Features Of Wibiya Widget

1. Translator

2. Posts Navigator (Recent Article and Random Article)

3. Community via Facebook

4. Twitter Widget

5. RSS Subscribers Bar

6. Sharing Bar

7. Blog Searches

8. Photo Gallery

9. Live Notifications

10. Facebook Fan Page

11. Games (HeyZap)

Now How to get this widget.Just go to Wibiya.com

Then click on the Getit now button.

Now give your details and request an invite.

Then you will get an message from them.

Just wait for getting approved your blog for some days and after approve they will send you the invite to your email,just use that invite to activate your account and get that widget codes.

How to install widget from your account now.

Now When you receive invitation,then click on the invitation link from your mail and login to your wibiya account.

Fill in the details they are asking for.

Then you will go through 4 steps Process.

1.Create A Account 2. Select A Theme 3. Select Your Apps 4. Get It Now.

Just In step 1 Give the desired Information they asked For.

In Second Step Select the theme i.e color for widget which suits your blogger template.As while choosing theme at the right you have an option of Choosing toolbar icon.Use bloggers or any other you like.

In Third Step Select The Applications you want in your widget.As i have written all application at the beggining of the post.

In fourth Step You will get page like below.Just select the paltform and allow the popup to open in your browser as it will directly give you add a widget option in one step.As many readers have problem in getting codes of the widget, so its the easy one.

And after adding widget Just Hit Done.And you are to your dashboard Page with all stats for your widget and also a notifier option is there to set an message for your visitor whenever he comes to your blog.You can set it if you want.

Problem Users Facing To Implement In Blogger

1.In Getting Codes For Blogger

In The Fourth Step When You Select The Platform To Install the widget, There are four options.
1.Wordpress
2.Blogger
3.Typepad
4.Other Sites

Just when we click for blogger a new window opens for one click add a widget to blog.So for this you have to allow pop ups.If you are still not getting codes just select option for typepad or last option then you will get the script and place it in your Html/javascript widget of your blog.

And for wordpress you will get the download link for plugin just download it and install it.

2.Slowing Down Of Blogger

As one of reader didn't used it because of slowing down the loading of blogger.As for this the dror cedor from wibiya.com gave a simple solution to it as you can read his comment here.

What exactly you have to do is that how to start the loading of widget after blog gets loaded.For this here is the simple solution.

The code which you will get to be placed in blogger will be like this.

Now what you have to do is just add &pl=1 in your link after you toolbar id as i have assumed here to be XXXX and make whole code look like below :-

What i have done is just added red part in link. By adding this the widget will load only after when the blog gets loaded, which will not effect the loading of blogger.

*Note:-If you are adding the script in widget its ok.But if then you adding in blogger codes it will not accept the script after making changes.So just make it code friendly from this Encode tool.

I checked this and really it had no effect on loading speed of my blog now.

I hope now you will have now no problem in installing the widget.

Submit Blogger Sitemap To Google Yahoo And Bing

noreply@blogger.com (Anshul) — Fri, 09 Oct 2009 18:54:00 +0000

How to submit blogger sitemap to different search engines.I hope most of us have done it with there blogs but most still would be not knowing on how to do it.But this post is for all bloggers even if they have submitted there sitemaps as i would share some method to remove some errors while you are getting in indexing all blog posts in search engines.

How to Submit Blogger Sitemap to Google.

Follow the simple steps to add blogger blog to Webmaster Tools

1. Login to Blogger Dashboard.
2. At the end of the page, under Tools and Resources box – Click on Webmaster Tools.You will Be asked To Enable Webmaster Tool Enable It.
3. If asked, enter username and password again to Login.
4. After Logging in Click Add A site Button.

5.Now Enter Your Blog Address And Continue.Dont Forget To Include '/' At the end of your blog address.Like this http://www.anshuldudeja.com/ .
6.Now you will be asked to verify your blog Just verify it as they say.

7. Inside Webmaster tools, click on Submit a Sitemap and add the following code inside the box :

atom.xml?redirect=false&start-index=1&max-results=100

8. If you have more than 200 posts then replace value 100 by something bigger number like 500.If they are more than 500 then add sitemaps in this format.

atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500
atom.xml?redirect=false&start-index=1001&max-results=500

As Labnol has developed the tool for it also. Just visit the tool page here to get submit blogger map to google yahoo and bing also.For More Help you can read this post also on how to use this tool with an video tutorial.

I hope you will do it easily now.If you still have any problems let me know in comments.I will try to solve them.

How To Host Javascript Or .js files on Blogger Itself

noreply@blogger.com (Anshul) — Wed, 16 Sep 2009 08:59:00 +0000

How To Host Javascript Or .js files on Blogger, yes as blogger supports javascript which makes blogger support all the possible hacks in this platform, but the problem we bloggers face in using this is , where to host this javascript on blogger.As blogger doesn't provide any source to host javascript for blog like it has provided picasa for images.As of before we all were using googlepages to upload the .js files but google closed this service and switched to google sites.As still we can upload these .js files to google sites but just upload it with file extension .txt instead of .js and it start working.

But still,we can face any problem in future with it.The best solution is to have paid server to host your files for unlimited bandwidth, but bloggers using this free platform dont like spending on it.

I also provided you with the list of some servers to upload your javascript files but the problem was bandwidth which was very less.

So i will provide you the best solution to host your javascript on blogger itself and enjoy unlimited bandwidth.

Now just see the below codes.

Whenever you are trying to implement some hack making use of javascript you would have mostly been asked to download the .js file and upload to your own server,get its url and then replace it with red link in above codes shown above,and then place the whole above codes in blogger html before closing of head tag.The Problem we all face is getting an free server with unlimited bandwidth to host these javascripts.

So why don't we upload these javascripts to blogger itself.Just what you have to do is,whenever you are asked to do this kind of above stuff while implementing any hack.

Just use below code in place of above one i showed you.

Just in place of red line in above code what you have to do is just open the .js file (which you are asked to download or upload to your own server) in notepad or on your browser , copy its code and paste it in place of above red line.And your javascript codes are now ready which are now hosted on blogger itself instead of hosting to third party server.

Now you will face no bandwidth problems.If you still have any problem related to this tutorial just leave your comments.

How Auto Adjust Images Size In Blogger Posts

noreply@blogger.com (Anshul) — Wed, 09 Sep 2009 10:33:00 +0000

How Auto Adjust Images Size In Blogger Posts,yes friends many of us would be daily posting some images in there blogger posts or would have photo blogs and would be tired of giving the width and height to there post images again and again to adjust and look good in there blogs.And dont they think when they will switch to new template the width and height assigned to images in post can create problems for them.And many of blogs would be facing problems if they post images with width longer than post section and image would overlap the sidebar and if not overlapping then only part of the image in post section will be visible rest part hidden.So i will be telling you on how to auto adjust images size in blogger posts to suit your blog needs.

Now Please look at the pictures carefully to know what i am exactly talking about.

Suppose you have post section of width 500px and you post a picture of width 800px in the post without defining any width and height to it.Note if you uploading through blogger editor it automatically define width and height to image so will never face error in that.

The image would appear in post like below two methods.

1) As image width was 800px,Image width get shortened and will show up in post upto 500 px and rest 300px will be hidden.

2) Full Image is shown but overlap the sidebar.

But the proper way the image should be shown in blogger post should be like below.

So to make it correct i am making you learn this css property for your blog,if you are facing any of these problems.

As say you have an blog and want to show images of width equal to post section i.e you have post section of width 500px and you want to show images to autoadjust to that size in your post.For doing that just go to blogger Layout >> Edit/Html and add the below codes before ]]></b:skin> tag :-

.post img {
max-width:500px;
max-height:500px;
min-width:200px;
min-height:200px;
padding : 10px;
clear: both;
}

Just adjust the properties min-width,min-height and max-width and max-height.As after using above codes now in your post the image width and height will never get less than 200px and not more than 500px.So image size will always lie between 200-500px.If image size is less than 200px it will auto adjust to 200px and if more than 500px it will autoadjust to 500px.

Now if you wanna use all images in your posts of same height and width i.e mostly used by all photo blogs to show of all the images of same sizes.You can use below codes.

.post img {
width:500px;
height:400px;
padding:10px;
}

Now all the images of any size in post will appear to auto adjust to size of width 500px and height 400px.

**Note:- If not working properly , there might be image property defined in your template,just find for it and check it.Find for .post img tag to check it.

How Change Width And Height Of Blogger Comment Form

noreply@blogger.com (Anshul) — Sat, 05 Sep 2009 17:27:00 +0000

How To Change The Width And Height Of Comment form in blogger.As you would have seen some using wide comment form and some using small comment from.As there are no much options in blogger to make changes in the blogger comments form but still there are some alterations like we can make,to alter its width and height.As blogger comment system is not one of the best comment system and blogger team need great modifications to be done in it to make it better and useful for readers.

Some comment system hacks you can use like are highlight blog author comments and numbering of blogger comments.The must read on hack is how making your blogger comment system seo.

Now lets continue on our tutorial on how to change the width of comment form.Just GO To Blogger Layout >> Edit/Html >> Expand Widgets >> Press Ctrl+ F >> Search For Below Codes.

Just now edit the value of codes in red that is width and height of blogger comment form.Just increase or decrease the values of width and height properties to make it alter.I am sure you will be going to love this tutorial.Best of luck!!

Blogger Template | Portfolio Press

noreply@blogger.com (Anshul) — Thu, 03 Sep 2009 19:20:00 +0000

Portfolio Press a new blogger template i am going to release today.I like the simplicity of this template.Its good for readers who likes the simple dark background template with beauty in it.The theme has been designed by blog oh! blog who really gives nice wordpress themes.The speciality of the template is that it has a great Vertical navigational menu with search box.As the Layout is very simple.I am damn sure you will love this blogger template.As i have succesfully converted this theme it into blogger template.Now lets show you the template.

Features Of The Template

Fixed Width Template

Two Column Blogger Template

Left Sidebar

Dark Background

Vertical Menu Links

Compatible With Mozilla, Chrome and IE7

Rss Feed Ready

Search Box Ready

Beautiful Comment System

Portfolio Press Template Installation

I request you to Please Back Up your blogger template and all blogger widgets to your desktop or just copy paste all sidebar widgets codes to notepad and save to your desktop for further use in this template.

1) Header Image And Description:-To change the header image and description.Just go to Blogger Layout > Edit html and find for logo.gif image.Just replace this image with your header image and save it.

Now find for below codes:-

<div class='description'>Just Another Blogger Template</div>

And change the above red text with your blog descrpition.

2) Menu Links:-To Edit the menu links.Just Go To Blogger Edit html.

Just find below codes :-

<div class='page_item'>
<ul>
<div class='current_page_item'><li><a href='/'>Home</a></li></div>
<li><a href='#'>Edit Rss</a></li>
<li><a href='#'>Edit Comments</a></li>
</ul>
</div>

Now just keep on editing the # with your links and red text with linking text to your link.

Donate If You Like The Work

If You Really liked my work and want encourage me to convert more Professional wordpress themes to blogger templates for Free, Then please help us by donating something you feel for this design by using paypal button in my sidebar.

Table Of Contents Widget For Blogger

noreply@blogger.com (Anshul) — Wed, 02 Sep 2009 13:28:00 +0000

Table Of Contents Widget For Blogger,as every blogger wants to create a table of content page or archive page like in wordpress blogs.And since from time many widgets have been provided by many great bloggers and working great.So i will review all the table of contents widget available till now.The widgets are provide by many great bloggers like amanda from bloggerbuster, abu-farhan from abu-farhan.com, Hans from beautifulbeta , vin from blogdoctor.me and last one is adding the posts manually side by side in post.All these widget are great and any one of will suit your blog needs for sure.

First Table Of Content Widget

So First table of content widget was given by hans from beautifulbeta.blogspot.com.He gave us this widget 2 years ago and he made look this widget look like table.I too was using this widget but with time i switched to new table of contents.If you want to get this widget you can get it from here at beautiful.blogspot.com.

But as there seems some problems in implementing that,so i am also holding an tutorial for it in the way i used it.

Just download this script first.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

<div id="toc"></div><span style="font-size:80;"></span><script src="http://Your-Script_url/tableofcontents.js"></script><br /><script src="http://Your-Blog_url/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><script type="text/javascript">showToc();</script>

Just replace the above codes in red with the script url and your blog url.And Publish Your Post.

Now to make it look great and look like an table just add this css in your blogger html.Just go to blogger layout >> edit/Html and place the below css before the ]]></b:skin> tag.

#toc {
border: 2px solid #C3D9FF;
background: #ffffff;
padding: 5px;
width:500px;
margin:10px 0 20px 0;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #3D81EE;
color: #5d5d54;
padding: 5px 5px 5px 5px;
width: 300px;
}
.toc-header-col1 {
width:300px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:90%;
color: #404040;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:90%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:90%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
text-decoration: none;
}

Second Table Of Content Widget

Second Way the users adopted to display the table of content widget was to make seperate post with title table of contents and keep on adding and editing the post with title of posts and linking them to post urls manually.This is as simple process as everybody can do it himself.Demo of it can be checked on these two posts Post1 And Post2.

Third Table Of Content Widget

This widget is given by amanda.He has created the widget using google feed control.In this widget you can display 100 posts from any specified label or category you want in a single post and is also very easy to add.

Just how to add this widget.First go and Generate a Google AJAX API key for your site, and copy this long string to your clipboard (or your favourite text editor) for later use.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

Just Edit the Red code with the api key which you copied to notepad after signing up here.

Now edit the blue codes with the lable feed url and green links with title of categories.
If you dont know about how to get label feeds you can read it here.

Above codes consist of 8 labels to add more keep on repeating this line of code in above script.

feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

If still you have any problem in this widget you can read on complete tutorial here by amanda.As she has explained all Troubleshoting and many things like on how to show more than 100 posts in one label if you had more than 100 posts in onelabel.

Fourth Table Of Content Widget

Now this is also the best widget given by abufarhan.Just what you have to do,to place this widget is just create a new post and post two line of codes and publish it.
So simple.Just first download this script.

And below are the codes you have to place in new post and publish it.

Just change the codes in red with your blog url and the script url you uploaded to your server.

As the loading of table of widgets is fast but it will keep on increasing with increase of posts in labels.

Fifth Table Of Content Widget

This method uses the AJAX Dynamic Feed Control from Google to show any number of posts from any number of your blogs in one place and cycles through each post title to show a preview at the top.This widget is given by blogdoctor.

Just download this script and upload to your server.

First login at Blogger.com and click Settings link on Dashboard. Then click Site Feed subtab. Click drop down arrow for Allow Blog Feeds and choose the Short option. Save Settings.

Next click Layout tab and on the Page Elements subtab click the Add Page Elements link. Choose Html/Javascript option in popup window. In Contents paste the following code :

<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>


<script src="http://www.google.com/jsapi?key=<<INSERT KEY>>"
type="text/javascript"></script>


<script src="http://Your-Script-Url/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Table of Contents',
url: 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "BLOG_TITLE."
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Just change above the codes in red with the the Api key , Blog Title and Your Blog url and the script url you uploaded to your server.
Just get api key by signing up here signing up here.

Now Just what you have to do is just select the widget which satisfy your needs and use it in your blog for showing all your posts.Best Of Luck !!!!!

Random Posts Widget For Blogger

noreply@blogger.com (Anshul) — Mon, 31 Aug 2009 07:22:00 +0000

Random Posts Widget For Blogger i.e each time the page of your blog refreshes the posts on the blog showed by this widget changes, means this widgets always shows unique posts from your blog with unique combinations at random,i.e the widget selects the posts randomly from all your blog posts and never knows which post might it pick from your blog to show.Really this is the gem of the widget you really should show on your blog for sure.

As before this i had blogged about a one more random posts widget in which a link was made and clicking on it would show random post in blog.

Now how to add this widget in the blog.

1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.

Change the the text no in red above in codes to select how many random posts you want to display.

And Save the Widget.Now you will be shown up the the title of the posts in widget like you see in recent posts, recent comments or popular posts widget and all the posts will be picked randomly.

Now How to show random posts title with post summary.

Just open this script or download this Random Post Script.

If it gets downloaded then just upload it to your file host and if it opens just copy it to notepad and save it as .js file and upload to your server.

You can get Free File Host Here.

1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.

Just change the green url with your script url which you uploaded to your server.

Alter the codes in red in above codes to adjust the count of posts and and how much word summary you want up to show up in the widget.Thats it so Simple.If you have any problems leave your comments below.
Credits for widget to Divya Sai And Hackers Blog.

How Remove Dotted Lines From Blogger Links

noreply@blogger.com (Anshul) — Sat, 29 Aug 2009 06:21:00 +0000

Hi Friends,i am going to share a small trick with you all friends,the trick seems small but is very useful and i have seen many professional blogger designs even not using it in there designs.Doesn't it look bad when user clicks on any link in your blog and link is then surrounded by dotted lines.It looks very bad to me.As you can see from the below demo picture as when i clicked the link in blogger the dotted line appeared,it doesn't look good to me.

So i will tell you on how to remove these dotted lines from all your blogger links.

Just Login To Blogger Go To > Layout > Edit/Html and Find for ]]></b:skin>

And just place the below codes before it.

a { outline:none; }

And save your template and you are done now.Now whenever you will click on any link in blogger no dotted lines will appear.

How Compress Or Zip Your files Online Free

noreply@blogger.com (Anshul) — Tue, 25 Aug 2009 10:08:00 +0000

How To Compress Or Zip Your files Online For Free,as nowadays there is no big need to zip or unzip files online as everybody will be using winrar software installed in there pc to zip or unzip your files but sometimes you come into need of doing this online,as it happened with me.

As some days ago my pc got effected with viruses and my winrar was not working,then i tried to install it again but was not successfull and i needed to zip my file for sure as i have to upload it to server to complete my post.

Than came an idea of zipping it with online server.Then got some tricks and sites to do it very easily as like you have installed any software in your desktop.

First i will tell you some sites which will zip your files online for free in just seconds depending upon the size of your files.

The two best sites for compress or zip your files online for free are:-

Zip-it

Filestomp

Go to these sites just browse your file to them and they will zip it for you.

If you find at any time these sites have closed or there server are down,then i have one more trick to zip your file online.

Just open your mail account write an mail to your other email address and attach the file to the mail you want to zip and send it.

Now login to your other mail account to which you sent your mail and download the attachment,the attachment you downloaded will be zipped which you can use.

I hope you will like these tricks for sure.

Search Google For Most Recent Pages On Any Keyword

noreply@blogger.com (Anshul) — Sun, 23 Aug 2009 05:17:00 +0000

Google Real Time Web Search,what it is-whenver you search google for some keywords you always get the pages from the sites at the top that have high page rank value for that keyword,the result may be not be as useful as you can get some useful information from pages listing too below sometimes or you may be searching for latest content in recent time and getting only old resuls valued high by search engines.

So what real time web search can do is you can get the all latest results for any keyword published most recent on different sites in google search.

How its more useful for me:-Sometimes i find for exmas results that are not published on many big sites and doesn't get the pages at top for that keyword as they have very less page rank value,but if i use google real time web search to get the most recent pages who posted the results of any exams.

Its only one example it applies to many things like i want latest technology results,latest softwares its really useful.

Now how to use Google Real Time Web Search.

Open Google.com

Now write for the keyword you are searching for and hit enter.

If you get desired results its good.If not then copy the below word in red

&as_qdr=d

And add it in search url of google as below in blue

Now Hit enter and you will see the results within latest hours as below.

I hope you will like this real time search.For any queries let me know.

Chucky Theme Blogger Template

noreply@blogger.com (Anshul) — Fri, 21 Aug 2009 09:15:00 +0000

After a wait here is my next template release,and the release is really fast and good as my friend ritesh and me made this template together.So you will be eager to see my this blogger template.It is an chucky blogger template,the wordpress theme from topwpthemes.
As the special feature in this for you is the featured galley which many readers like to use and a automate shortening of post section on home page which is the speciality of wordpress themes.So what you waiting for, just have an demo and download it and start using it as soon as you can.

Snapshot Of The Chucky Template

Now if you think this template doesn't satisfy your dream design,then check out my last two designs for sure as may like it for sure.
1)The Latest Blogger Template
2)Mainam Blogger Template

Hacks Installed In Chucky Template

Search Box Installed

Horizontal Navigational Menu Links

Automatic Read More Hack With Thumbnail

Swap Title Hack For Blogger

Embed Comment Form

Hidden Navbar Layout

How Highlight Authors Comments In Blogger Blogs

Numbering Of Blogger Comments

Features Of The Template

Fixed Width Template

Two Column Blogger Template

Right Sidebar

Beautiful Comment System

Featured Content Gallery

Top Menu Ready As Linklist

Search Box Ready

Rss Button Ready

Compatible With Mozilla, Chrome and IE7

Layout Of Chucky Blogger Template

I request you to Please Back Up your blogger template and all blogger widgets to your desktop or just copy paste all sidebar widgets codes to notepad and save to your desktop for further use in new template.

When you will Download This Template you will get an installation guide downloaded with template but i would like to tell about installation here too.

Chucky Template installation

1) Header Image:-Just upload your header image from header widget inside the blogger layout.That is widget at top left of page elements,by hitting Edit Button.If you don’t wanna use image,you can use text also.

2) Menu Links:-To add the menu links.Just you will see Linklist In Blogger Layout,Just add your menu links from there,as like you add your bloggroll in sidebar.

3) Read More Hack With Thumbnail:-As read more hack with thumbnail is installed.And it display image of size i assigned on homepage.If you want to change it or remove it or any alterations in it,you can read and modify it from here.

http://www.anshuldudeja.com/2009/05/automatic-read-more-hack-for-blogger.html

4)Using Featured Content:-

a) You will see the Featured Content widget in the layout above in picture as i shown where it is.
b) Just Add the Following Content in the way to make it work.

<div id="featured-post-wrap" class="clearfix">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#featured-post').cycle({
fx: 'fade',
speed: 'fast',
timeout: 6000,
pause:2,
next: '#featured-next',
prev: '#featured-prev'
});
})
</script>
<div id="featured-post">
<div class="featured-item">
<img alt="Image Name" width="304" src="Link of the Image" class="featured-thumb" height="190"/>
<div class="post clearfix">
<p class="date-post">Date of the Post </p>
<h2 class="title"><a href="Link of the Post" title="Title of the post">Title of the post.</a></h2>
<div class="entry">

Post Content Or Description

</div>
<a class="read-more" href="Link of the Post" title="Continue Reading...">Continue Reading...</a>
</div>
</div>
</div>
<a id="featured-prev">prev</a>
<a id="featured-next">next</a>
</div>

c) You have to just change the things highlighted in red color.

d) If you want to add more post then Just before below code

</div>
add this code :
<div class="featured-item">
<img alt="Image Name" width="304" src="Link of the Image" class="featured-thumb" height="190"/>
<div class="post clearfix">
<p class="date-post">Date of the Post </p>
<h2 class="title"><a href="Link of the Post" title="Title of the post">Title of the post.</a></h2>
<div class="entry">

Post Content Or Description

</div>
<a class="read-more" href="Link of the Post" title="Continue Reading...">Continue Reading...</a>
</div>
</div>

e) Repeat The step and Get as much post you want.

I have seen many having problem in adding this slider.So i am ading one more way for you to add it correctly.Just open this notepad file and copy codes from it and paste it in the widget of slider and save it.These are codes which i am using in demo blog.If it works perfectly then just edit content in that codes in the way i have told above.

5) Comment Section:- I have placed two images for Commets,one for author and one for readers.
Just Go To Layout > Edit/html > Expand widgets and can search these.
http://i29.tinypic.com/10fe2pl.gif - Image for author
http://i32.tinypic.com/5efnk9.png - Image for Readers

6) Removing Date Header For Proper Functioning:- Just Go To Layout > Page Elements and click On Edit Button Of Blog Posts Section.
A Pop Up Window will open and just uncheck the date option first in the list and save it.

Donate If You Like The Work

If You Really liked my work and want encourage me to convert more Proffessional wordpress themes to blogger templates for Free, Then please help us by donating something you feel for this design by using paypal button in my sidebar.

Mainam Theme Blogger Template

noreply@blogger.com (Anshul) — Sun, 16 Aug 2009 07:56:00 +0000

Today i am going to release a new conversion i made from wordpress theme,and i am sure you are going to like this also for sure.As my last conversion was the Latest Blogger Template and i got a very good responses from that conversion from my readers and other bloggers.If you haven't checked that template you can check on my last conversion The Latest Theme Blogger Template.

Now the template i am going to release today is three column and is very clean layout and the theme name is mainam as title is saying Mainam Theme Blogger Template.

Snapshot Of The Mainam Template

Hacks Installed In This Template

Blogger Header Splitted Into Two Sections

Horizontal Navigational Menu Links

Automatic Read More Hack With Thumbnail

Swap Title Hack For Blogger

Embed Comment Form

Hidden Navbar Layout

Removed Showing Posts Wih Labels

Removed Labels Posts Count

Removed Subscribe To Posts Atom

How Delete Posts Count Number Of Blogger Archives

How Highlight Authors Comments In Blogger Blogs

Features Of The Template

Fixed Width Template

Three Column Blogger Template

Right Sidebar

Add Ready Widgets

Top Menu Ready As Linklist

Compatible With Mozilla, Chrome and IE7

Layout Of Mainam Blogger Template

After uploading this template you would get the layout look like this in your blog.

I request you to Please Back Up your blogger template and all blogger widgets to your desktop or just copy paste all sidebar widgets codes to notepad and save to your desktop for further use in new template.

When you will Download This Template you will get an installation guide downloaded with template but i would like to tell little bit about installation here too.

Mainam Template installation

1) Header Image:-Just upload your header image from header widget inside the blogger layout.That is widget at top left of page elements,by hitting Edit Button.If you don’t wanna use image,you can use text also.

2) Advertisement Widget :- Just add the adsense banner or any banner add of size 468 cross 60 in the widget that is at the top right of blogger layout.

3) Menu Links:-To add the menu links.As would see I have made two menus.
One is at the to and second below header.

Just you will see Two Linklist In Blogger Layout,Just add your menu links from there,as like you add your bloggroll in sidebar.

4) 125 x 125 ads:-To edit the sidebar adds,Go to Layout > Edit HTML and find for this code in template

Below this code you will find links like these below:-

Just keep on changing the red links with the banner url and pink links with the blog url.

5) Adding Widget To Sidebar:-As you can see i have made two sidebars.One is small and one is big.
Just to make some widget work perfectly in big sidebar at the righmost of template,just keep below codes in mind.

Whenever you write any text in sidebar just apply this class to them like below and then add text to widget.

<div class="text">

</div>

If you are addding any other widget codes from other sources and its not properly aligned in it,you can use this class for it too.

<div class="text">

</div>

6) Read More Hack With Thumbnail:-As read more hack with thumbnail is installed.And it display image of size i assigned on homepage.
If you want to change it or remove it or any alterations in it,you can read and modify it from here.

http://www.anshuldudeja.com/2009/05/automatic-read-more-hack-for-blogger.html

7) Change Backgrounds:-Just Go to Layout > Edit Html and find this url http://i27.tinypic.com/2rg13lt.gif
This is the background image to template.If you wanna change to other backgound,just select from the images from backgrounds folder
which you have got after downloading this template.Just selct the background you liked and upload it to your server or tinypic.com.
Just take the url to backgrund and replace with the one you find in red above,and you will get change your background.

Donate If You Like The Work

Add Digg Submit-Vote Buttton To Each Blogger Post

noreply@blogger.com (Anshul) — Thu, 13 Aug 2009 07:43:00 +0000

How to add a Digg Submit-Vote Buttton To Each Blogger Post,yes friends today i am going to hold a small tutorial on adding it to each blogger posts.As today i got mail from my reader as he was not able to add it,in his blog by following tutorials on other blogs and requested me to hold a simple tutorial with complete explaination on it.So i am writng about it , i.e how to add a digg button to each blogger posts for all templates who use read more hack or not use read more hack.

As adding of it is mostly same as like adding of retweet button to each blogger posts.

As we can add button in two ways one is to make it float to the beggining of posts to right or left where ever you want and second is to show it at the end of posts when it ends.Both demo pictures you can see below.

Now to add digg button like this just above in picture Follow these steps.

(a) Follow this Method If you are not using read more hack.

Login To Blogger Go to Layout > Edit Html > Expand Widgets > Press Ctrl+F and find for below codes

<p><data:post.body/></p>

And replace them with below codes.

*Note:-If you dont find above code you find this one <data:post.body/> and replace it.

(b) Follow this Method If you are using read more hack.

As Problem is every blogger is using read more function and all with different techniques,as some using on only read more funtion and some read more function with thumbnail and some do it manually.But i will tell on simple method to add it easily to every one.

Every thing as i told above has to be done same,if you are using read more function but only the difference is that you will find this code <data:post.body/> Twice in your template and just what you have to do is replace this code with the below one,with first one you get in template.

Now Save Your Template.

Second way of adding digg button that is after post when it ends,like picture below.

(a) Follow this Method If you are not using read more hack.

Login To Blogger Go to Layout > Edit Html > Expand Widgets > Press Ctrl+F and find for below codes

<p><data:post.body/></p>

And replace them with below codes.

*Note:-If you dont find above code you find this one <data:post.body/> and replace it.

(b) Follow this Method If you are using read more hack.

Every thing as i told above has to be done same,if you are using read more function but only the difference is that you will find this code <data:post.body/> Twice in your template and just what you have to do is replace this code with the below one,with Second one you get in template.

And Thats It . Complete addition of digg button to your Post. I Hope now you will add it easily and successfully. Let me Know if you feel any problems.

Remove Duplicate Content And Urls From Blogger

noreply@blogger.com (Anshul) — Thu, 06 Aug 2009 18:32:00 +0000

Hi Friends,i hope you all will be fine.As since it has been really a long time for me to have any useful post for you.As before i was busy in exams and after it i didn't got time but today i have an really useful post for you.As blogger is not very search engine optimized and we have to keep in mind some things to make it seo or have to implement some hacks to make it seo to an extent we can.

As previously i had an post on problem with blogspot blogs in seo,which also was very informative post for every blogger.You have to read it for sure before continuing this post.

Some other tips you can read on to increase your visitors are how to increase visitors from search engines and promote you random posts via emails.

Now let continue on some useful tips to make you blogger really seo by removing all duplicate content from your blog.Duplicate content can be urls,meta tags,titles and descriptions.

First Issue:-
Adding Of Meta Tags:As we all bloggers add meta tags to there blogs.Meta tags are used to tell search engines about the important keywords of your blog and inform it to rank high,there blog for these keywords.As in the way we all add meta tags to blogger,we don't know that they are adding it in wrong way and effecting rank of all blogger pages,becuase the way we are adding meta tags,the seach engines are considering it for all your posts.As i will tell on how to add these meta tags correctly.

If you you don't know how to ad meta tags you can read for sure.

Solution:-Whenever you are adding meta tags to blogger just embed that tags between these two lines,i am writing below.As embeding between them will make it add only for blog home page url.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<-----------------Meta Content Here------------------->
</b:if>

Just add meta tags in between them,and to get meta tags you can read on this post.As now search engines will consider them for only your blog home page,not all blogger pages,which will remove duplication of same keywords for all your blogger posts.

Second Issue:-
Different Urls With Same Content In your blog:As there is one more problem in blogger as search engines indexes comment links of blogger posts,now if you have comments on posts and search engine indexes blogger posts url and also indexes its comments link and find the same content in both,which make the duplicate content for search engines and your seo for that post will be effected,its an serious cause and should be solved.Just view the picture below to make it clear.

Image source From Bloggerstop.net

As you can see in image the post page is same but it is being indexed for two differnt urls,which creates duplicate content and affects seo.

Solution:-Go To (Layout -> Edit HTML), click on "Expand Widget Templates",
Then Press (CTRL+F) and find below codes:

And Replace above codes with any one codes you like:-

First One:-

<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>

These codes will change the form of link and stop them from being indexed.

Second One:-

<a expr:href='data:comment.url' title='comment permalink' rel='nofollow'>
<data:comment.timestamp/>
</a>

It will make the link simply nofollow and inform engines not to follow them.

Now your comments link will not be get indexed by search engines.In a month time, i am sure google will start visiting your blog more and make it seo.Best Of Luck From Me !!!

!!Latest Widget !!How To Add News To Your Blog!!

noreply@blogger.com (sunil chhabra) — Sat, 01 Aug 2009 10:12:00 +0000

Some Blog Publisher & Webmasters wants to put some widget on their sides or blog that shows some fresh news on their blog or sides to attract the people.If till now you not having this type of widget then now this is for you.

you can Click Here

Or go to http://www.feedzilla.com

Freezilla is a frre widget for every one and you can chose the source,type of news you want to taget the visitor.

And also you can chose the method for installation like Flash, HTML, Javascript, Wordpress,myscpae,blogger and lots of more.

Why add Feedzilla news widgets to your site?

* Attract targeted visitors to your website by providing them with the latest news in over 1,700 categories of your choice.
* Increase your visitor's repeat traffic by providing fresh and relevant news.
* Add credibility to your site by providing news from top news providers.
* Improve your ranking on the search engines (SEO), by adding free, updating and customizable news to your site.

How To Publish Post Via E-mail?

noreply@blogger.com (sunil chhabra) — Fri, 31 Jul 2009 05:52:00 +0000

The Mail-to-Blogger feature in the blog enables you to publish the post via Email. For this feature you have to make a change in you r blog setting. Just go to “Settings” then click “E-mail & Mobile” or “E-mail”

You can create a Mail-to-Blogger address which you will use to publish the posts via email to your blog:

To post to your blog via email, you need to configure your Mail-to-Blogger email address in Settings | Email:

The format of the email address will be username.secretword@blogger.com. Note that this Email must be kept secret. Otherwise, anyone who gets it will be able to post as you.

Also be sure to specify whether or not you prefer your email posts to publish automatically. If this option is not checked, then your posts will be saved on your account but will not appear on your blog until you log in to Blogger.com and publish them yourself.

Once you have saved your Settings, you can send email to your blog. The subjects of your email letters will be the titles of your posts, and the body of the emails will be the posts themselves. To include an image in your post, you can attach an image to you your email.

Notes:
• Sometimes email programs append text to the bottom of each sent message; to make sure this cruft doesn't get posted to your blog, put #end at the end of your post.

How Show Older Posts-Newer Posts Links At Top Of Posts

noreply@blogger.com (Anshul) — Sat, 25 Jul 2009 12:36:00 +0000

How To Show Older Posts and Newer Posts Links Above Post Titles,as we all use these navigational links at the end of the page,but in very few blogs i see them using these navigational links older posts and newer posts link at top of the the post title.I am not sure you would like to have it at top or not but few might love to have it at top as navigation becomes more easy task,and someone using photoblog might love this for sure.

You must read the before tutorial also of mine on how to change these older-newer posts links with images and read on for adding of beautiful page navigation widget for blogger.

Now let's carry on with our tutorial on how to make navigational links to show at top instead of bottom.
Just Go To EDIT HTML page of your blog > Check mark Expand Widgets option > Now search below tag in your template.

<b:includable id='main' var='top'>

Now paste the following code below it.

<b:include name='nextprev'/>

Now you will have navigation links at top of all posts instead of having it at the bottom of all posts like picture below.

I hope you will love this trick for sure.

How Align Your Blog Template Design To Center Or Left

noreply@blogger.com (Anshul) — Sun, 19 Jul 2009 11:46:00 +0000

How to Center Your Blog Template Design or start it from left,as you would have seen mostly all the blog designs are located at center,only few of the designs you will see starting from the left of your screen.That is the your blog design will either start from the left of the pc screen instead of showing at center or will show up in middle of screen expanding equally to left and right.This is now your choice on how to display your template,as below i am going to tell you about both methods.

As below i will be going to tell how to do it on basic default codes given by google in there template,as the code to your template may vary from user to user.But i will guide you for sure on how to find the codes if you want to change the alignment of your template.

Like just check the snapshots of design aligned to left and center.

The above blog design is aligned to left of the screen of your computer.Now lets just check the codes of it below.

Just find the below blogger codes in your blogger html.

#outer-wrapper {
margin:0;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Now in above code the property of margin is set 0.

If you will make it to set margin:0 auto;

Then the template design will align to center of your screen resolution,like below picture.

**Important Notes:- As the codes above i took was from google minima template.If you are using it you will do it easily.But if you are using templates by other designers you may not find codes with same name outer wrapper id.As they may have been defined differently,but the property you have to change is same as of margin in all designs.The skill you have to do is to find by which name the outer layout of your template has been defined.

In many designs you may find it with name #wrap or #wrapper or #outer-wrapper etc.
I hope you will be able to do it now,if you know little bit about template codes.

Show Comment Bubble At Top Of Each Blogger Posts

noreply@blogger.com (Anshul) — Mon, 13 Jul 2009 08:59:00 +0000

How To Make Comment Bubble At Top Of Blogger Posts,as you have seen it using in many blogs and i am sure you would not be knowing how to make and show that comment bubble count and link at top of the blogger post.So that's why i am here to make you learn it,and add it to your blogs.As its not as difficult as you might be thinking of.

As you would have checked my last blogger template-The latest Blogger template for sure and must have liked it.I have made 3-4 more proffesional templates for you,but unluckily today i got my exams schedule and will not be able to post these templates for you till 30 of july,so you have to wait for them ,as they need little finishng touch and testing with an installation guide,so will post these templates in beggining of august.

So we just continue with out tutorial on how adding comment bubble to top of each blogger posts.Some tutorials like these which you would like to read for sure are show labels as tags like woork and show post date as calender widget.

For demo of comment bubble you can check the my blog as i have comment bubble or check the demo blog too.

Now To make comment bubble,Just
Login to blogger > Then go to Layout > Edit/Html > Expand Widgets > Press Ctrl+F

And Search For ]]></b:skin> tag and place the below codes before it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

In red above is the image link of bubble,you can use yours and don't forget to change its width and height also of the image you use.To adjust the bubble position you can edit the distance from margin-right and margin-top properties of css.

Now after adding above css just find the below codes and add the red codes in between them as i have shown below.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Afer adding red codes in between them just preview your template,if comment bubble is ok,just save your template and you are done.Now you have added an comment bubble to bog in an very easy way you wouldn't have thought of.Enjoy this hack and let me know you liked it or not.
And Friends i will try to schedule one or two posts for you,but that for sure will be small blogger tutorials which also will be very useful for you to learn a lot.

Wish Me Good Luck For My Exams.

Blogger Widgets Hacks Templates Tips Tricks Make money Seo & Pagerank

Hack To Share Your Adsense Revenue With Different Authors Of Your Blog

Blogger Template | sGallery Grunge Style

Features Of sGallery Blogger Template

sGallery Template Installation

Donate If You Like The Work

How Show Blogger Profile Images In Comments As Avatars

Some Of The Problems You Wouldn't Like even after Enabling Profile Images In Default Template.

How Enable Blogger Profile images In Customized Templates

Solution For The Problem

Blogger Template | Irresistible

Features Of Irresistible Blogger Template

Hacks Supported By Template

Layout Of Irresistible Blogger Template

Irresistible Template Installation

Template Full Support

How Install Wibiya Toolbar Multi Function Widget

1.In Getting Codes For Blogger

2.Slowing Down Of Blogger

Submit Blogger Sitemap To Google Yahoo And Bing

How To Host Javascript Or .js files on Blogger Itself

Read More Function Now Finally Made Available By Blogger Team

How Auto Adjust Images Size In Blogger Posts

How Change Width And Height Of Blogger Comment Form

Blogger Template | Portfolio Press

Features Of The Template

Portfolio Press Template Installation

Donate If You Like The Work

Table Of Contents Widget For Blogger

Random Posts Widget For Blogger

How Remove Dotted Lines From Blogger Links

How Compress Or Zip Your files Online Free

Search Google For Most Recent Pages On Any Keyword

Chucky Theme Blogger Template

Snapshot Of The Chucky Template

Hacks Installed In Chucky Template

Features Of The Template

Layout Of Chucky Blogger Template

Chucky Template installation

Donate If You Like The Work

Mainam Theme Blogger Template

Snapshot Of The Mainam Template

Hacks Installed In This Template

Features Of The Template

Layout Of Mainam Blogger Template

Mainam Template installation

Donate If You Like The Work

Add Digg Submit-Vote Buttton To Each Blogger Post

Remove Duplicate Content And Urls From Blogger

!!Latest Widget !!How To Add News To Your Blog!!

How To Publish Post Via E-mail?

How Show Older Posts-Newer Posts Links At Top Of Posts

How Align Your Blog Template Design To Center Or Left

Show Comment Bubble At Top Of Each Blogger Posts