Customize Blogger Labels With CSS3

I am sharing another beautiful CSS3 labels style for blogger.This label hack can be easily applied to your labels by just adding some CSS code in to your blog.This labels and created by Stylifyyourblog and I have reshared them on Helper Blogger,Now lets see how to apply this label hack.

How To Apply This Label Hack?

Important -  Before applying this label hack set your label style to Cloud.

 

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Finally save your template and you are done.
 

Read More

4 Basic SEO Tricks For New Blogger

If you are new in the blogging atmosphere and your blog doesn't have sufficient amount of traffic then you are at right place to improve blog traffic. 4 basic things, which I would like to share, should be properly kept in mind while writing a new post for your blog. You can get huge amount of traffic in a very short time period If you apply these killing SEO tips to your Blog. These tricks are very simple and everyone can easily apply. You may even get thousand of visitors over night in some cases.So lets start to apply these tricks on the Blog.

Basic SEO Tricks For New Blogger:-

Content Is More Important:-

First of all, keep it in mind that neither any search engine nor any SEO tricks will give you a instant traffic if your content don't follow these specification.

• Content should be genuine. 
• Frequency of posting a article should be constant.
• It should not be copied from other sites.
• Content should be according to your audience taste.
• Always write lengthy article greater than 300 words.

Don't Forget About Heading Tag:-

Don't forget to include heading tag ( h1,h2,h3) at appropriate position in blog post. While <h1> tag is most important among all these tag and should be included in the document once. Don't use <h4>, <h5> and <h6> tag in the post.

Optimize Links And Images:-

Whenever there is necessity to use anchor tag <a> or image tag <img> in post then don't forget to add alt attribute under these tag as search engine like those content which have sufficient amount of anchor tag with useful alt keywords so always think about alt attribute before adding a anchor or image tag in post.

Importance Of Backlinks:-

 

Backlinks, also known as Inbound links or Incoming links, are incoming links from another website,blog or web page to your site. Search engine spiders gives maximum priority to the content which have greater number of incoming links.Following point should be kept in mind while creating a backlink.

• Before creating a backlink, be sure the site is a legitimate directory. 
• Never use any script or software to create backlinks.
• Don't use reciprocal linking means link to me and I will link to you. Exchanging reciprocal linking is violation of webmaster agreement.

Always remember that Incoming links from a website which have higher page rank will benefits you but on the other hand blacklisted website will heart your page rank. So avoid backlinks from gambling sites and adult entertainment like sites.

Read More

Top 30 Widgets For Blogger

1. Previewit - Watch a thumbnail live preview of the link pointed out from your blog. Thumbnails appears on mouse hover on the outbound link.

2. Feedjit - Display Real time traffic data of your blog just in your blog sidebar.

3. Twitter Badge - Display a twitter badge on your blog.

4. Jaxtr - Allows your blog visitors to call your mobile number but your mobile number will be kept private.

5. 3Jam - Allows your blog visitors to send messages to your mobile phone without knowing your number.

6. Box storage - Allows your visitors to store data on box.com's storage service while staying on your blog.

7. Flixn - Displays a stream directly from your webcam so your blog visitors can always see what you are up to.

8. Showmyweather - A widget to Display weather stats of various countries.

9. TwentyFeet - A place to keep track of all your social stats and analytics.

10. ClockLink - A widget to show off time of various regions.

11. Skype - A widget that displays whether you are offline or online on Skype.

12. Feedcount - Show off the number of visitors to your blog.

13. Feedbuzz - Display headlines from your Rss Feed.

14. AnswerBox - A widget that allow users to search definition of a particular word and proudly powered by answers.com.

15. Timeline - interested to create a Timeline?, this is what you need.

16. Polldaddy - Create instant polls and expose it on your blog.

17. Plaxo - Let your visitors access their address books from your site.

18. Astore - Create a min store of amazon products and gets a commission when someone buys a product through it.

19. Hellobar - Add a sticky and fixed official bar at the top of your blog.

20. Disqus - Add an official commenting system on your blog.

21. Intensedebate - Another fully equipped commenting system for your blog.

22. LinkWithin - Related posts widget for your blog.

23. Addthis - Grab a beautiful social sharing widget for your blog.

24. Sharethis - Grab a smooth social sharing widget for your blog.

25. 99counters - Place a widget on your blog that displays complete stats of your blog visitors.

26. Kissinsights - Add a beautiful widget on your blog to survey your blog visitors.

27. Livezilla - Add a live chat support feature on your blog to live chat with your blog visitors.

28. Fibox - A shoutbox widget for your blog  where your blog visitors can leave messages same like a  forum.

29. Blinkxlt - Embed a link to related videos directly into your blog.

30. nrelate - Another best related posts widget for blogger.

Read More

Change Home,Newer Post & Older Post to Page Naviagation

. There is no need to customising these links but if you are interested in blog designing and wants your blog to look more professional then obviously this tutorial is for you. Anyone can easily change these links to Numbered page navigation by going through this tutorial. If your blog having a large number of posts with large number of visitors then visitors on your site can reach to different posts easily. So lets to apply this tricks on the blog.

1. Login to Blogger Dashboard.
2. Go to Design /  Edit HTML.
3. Click "Expand widget templates'.
4. Download full template before making any changes in it .

 

5. Find following piece of code in template.

 ]]></b:skin>

6. Paste the following code just above it.

<!.. Plugins By Shahbaz Malik at http://internetricks4u.blogspot.com ..> 

#blog-pager-newer-link {display:none;}

#blog-pager-older-link { display:none; }

#blog-pager {display:none; } 

.showpageArea a{text-decoration:none;} 

 .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;} 

.showpageNum a:hover 
{border: 4px solid #cccccc;background-color:#cccccc;text-decoration:none;} 

.showpagePoint
 {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;} 

.showpageOf 
{text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a 
{text-decoration:none;border: 1px solid #cccccc;padding:3px;} 

.showpage a:hover 
{text-decoration:none;}
.showpageNum a:link,.showpage a:link 
{text-decoration:none;color:#333333;}

7. Find </body> in template and paste following code just above it.

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord =&#39;Previous&#39;;var downPageWord =&#39;Next&#39;;                                                     </script>                                                                        <script src='http://blogger-page-navigation.googlecode.com/files/blogger-page-navi..js' type='text/javascript'/></b:if></b:if> 

8. Finally save the template and see the result.

Note:Make Following Modification

• pagecount=5 is the number of post per page.
• displayPagenum=5 additional page navigation number that will be displayed on the page.

And if you liked this post, please consider sharing it. Thanks

Read More

How To Add Rounded Corner To The Popular Post

Now a days popular post is most useful widget as it shows most viewable posts of the blog in descending order of their priorities means, post which received maximum number of visitors will be on top position while the rest will be on decreasing order. The official look of the widget not gives up any impression to readers. So here you will learn to customize the official look of the widget as seen from above figure. We uses only CSS  to provide rounded corner around all the post. So lets see how this stuff will work?

The changes made by this tutorial can be seen by the above figure or in popular post widget of this blog. To get this changes in your popular post widget also

1. Login to Blogger Dashboard.
2. Go to Design /  Edit HTML.
3. Click "Expand Widget Templates".
4. Download the full template before making any changes in it .
5. Search for following string in BT.

]]></b:skin>

6. Paste the following code just above it.

Widget By Durai Sankar on http://moreforblogger.blogspot.com
.popular-posts ul li 
{border:1px solid #1874CD;
margin-bottom:5px;
border-radius:10px;
padding-left:5px;

}

.popular-posts ul li:hover
{
text-decoration:none;
border:1px solid #BFBFBF;
}

Note:-Make Following Modification

• To change the border color of normal position simply change #1874CD to any desired value you want.
• To change the border color in hover state simply change #BFBFBF to any desired value ( The complete list of CSS color code are given here).

And if you liked this post, please consider sharing it. Thanks

Read More

How To Force Your Readers To Like your facebook Fan Page

To get started with your small blog business or website the first point comes out in our mind is promotion of blog. Facebook gives opportunity to make a static brand page to promote online business, called Facebook fan page. The subscriber receives daily updates directly on their wall whenever blog's owner update status on blog.

The number of subscriber will then increase when readers on your blog click on Facebook fan page like button. Like button is a small widget placed at different position of blog, which force readers to like the page.

So the widget given below force your reader to like the page by popping out at a time when any reader visited on your blog

How To Add Facebook Popup Like Box

Why Use This Widget ?

• Strongly force the readers to like the page
• Can be repeatedly popup
• Will not closed unless readers perform like action

So lets add this fantastic widget on blog

How To Add Popup Like Box In Blogger Blog

1. In Blogger dashboard, Go to Design /  Page Element.
2. Click Add a gadget and then choose HTML /  JavaScript.
3. Paste the following code in it. 

<!-- http://truebloggertricks.blogspot.in/ --> <style> #fblikepop {background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;} #fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;} #fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}#fblikepop #closeable{float:right;margin:7px 15px 0 0;} #fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:14px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;} #fblikepop #actionHolder {height:30px;overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;} #fblikepop #buttonArea a:hover {color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;} #fblikepop #counter-display {float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;} </style> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript"> //<![CDATA[ kakinetworkdotcom01username="pages/TrueBloggerTricks/271108653003969", kakinetworkdotcom01title="Join us at Facebook!", kakinetworkdotcom01skin="01", kakinetworkdotcom01time="20", kakinetworkdotcom01wait="5", kakinetworkdotcom01lang="en" //]]> </script> <script type="text/javascript" src="http://yourjavascript.com/2021803150/facebookv2.2.txt.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });}); //]]> </script> <!-- http://truebloggertricks.blogspot.in/ -->

Modification

• Replace pages/TrueBloggerTricks/271108653003969 with your Facebook fan page username or url with http://www.facebook.com
• Join us at Facebook is title of widget
• How long like box will display on blog is define by 20. ( means 20 second ) after 20 seconds it will close automatically
• 5 define the time in minute after which it will popup again.

And if you liked this post, please consider sharing it. Thanks!

Read More

How to Choose a New Blog Template

Blog Template plays great role in your blogging career. Even though you have great visitors and you have an ugly template, your reputation on your first time visitors goes down and thus your credibility level decreases, and your power to control your visitors decrease. So you need to choose an ideal template that best match your blogging niche in order to get better results. Let us discover how we can choose better theme for our blog.

First thing you need to consider is design. This plays great role as first impression of your blog deals with your design. When a visitor first lands your blog, first thing that is noticed is design and layout before your content is read. So you need to keep your blogs look neat and beautiful as confusing blog templates are hated by the visitors. The template should be a simple one which helps the visitors to take a look of every content in a blog.

Second thing you need to notice is your blog template should be Social Bookmarking Friendly. These days people get a lot of traffic from social Networking and Bookmarking sites, so while choosing a template you should choose the one which already has a place for Social sites like Twitter, Facebook and all because adding them later may make your blog look confusing. So you may consider template that gives place for these thing.

Next thing you need to consider is Font and Color Combination which means you need to check the color of your theme. You need to check everything including hover links ,visited links,simple links and fonts. Template with proper color combination gives an ideal look.

If you are adsense user, you shall need to check if your blogs is ads Friendly or not. Ads friendly in the sense that whether they posses a place for ads placement or not. It would be better if you have a place for ads in your blogs. I would always prefer an adsense ready template because it would not consume my times for placing ads later. This will help you to save your time and prevents your blog to look ugly later when you add ads.

Other thing you need to check is Browser Compablity. Since your visitors can be using different browsers, you need to check the demo of the theme with all the browsers you can before you install the theme, making sure that the template is browser compatible so that you can control all your visitors no matter which browsers they use.

Last but not the least, you need to check the loading Speed of your template. Never choose the template with higher loading times as they annoys both Google and your visitors.


And if you liked this post, please consider sharing it. Thanks !

Read More

Edit Blogger Mobile Templates

here is some Good news from the Blogger Team on the Blogger Code Blog. If you have enabled the Mobile Templates, you will be able to customize the Blogger Mobile Template by using CSS definitions. You will also be able to control which widgets are to be shown and which shouldn't. You can also configure the widgets to show an alternate content in the mobile view.
Though this looks so promising, I was not able to test all of these features.

Where to Start?

Go to Template and Click on the Gear Icon below the Mobile Template. From the Dropdown opt for “Custom”, Preview the mobile template  and Save it. 

Customizing the structure of your Mobile Template.

Blogger Templates are made up  using Widgets.Blogger has added a new property(mobile) to the <b:widget/> tag. This property can take values ‘default', ‘yes', ‘no' or ‘only'. And this property will determine how the widget will be rendered in the mobile view.
The widgets that display on mobile by default are the following:

• Header
• Blog
• Profile
• PageList
• AdSense
• Attribution

If you want to hide any of those, then use the property mobile='no' in the Widget tag, and that widget would no longer appear in the mobile view.
For example I can hide the Attribution Gadget in Mobile view if I use

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

If you want  to display the non-default widgets in your Mobile view, then just set the mobile property to yes.
E.g.: this is the normal tag for the Blog Archive Widget

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Now if you set the mobile property as

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

, then you should see the archive widget on your Mobile View(I didn't get it working).
If you want a widget to appear only in the mobile view, then you can set the mobile property to 'only'

<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>

If I use this tag, the attribution gadget will disappear from my desktop view, and will appear only on the mobile view.
This code change will make the attribution widget disappear from your Mobile View.

Customizing the Look and Feel of your Mobile Template

Now you can fully customize the looks of your mobile template. The body element of the mobile template will be styled my the mobile class

<body class='loading mobile'>

Make sure that your template has:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

So if you are good at CSS, you can use this class name to style your mobile template.

.mobile .date-header {
  text-decoration:underline;
}

Alternate Widget Content on Mobile View

Once you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want, then you can provide alternate content inside a widget.
e.g:

<div class="widget-content">
  <b:if cond="data:blog.isMobile">
    <!-- Show a text link in mobile view.-->
    <a href="http://www.blogger.com">
      Powered By Blogger
    </a>
  <b:else/>
    <!-- Show an image link in desktop view.-->
    <a href="http://www.blogger.com">
      <img expr:src="data:fullButton" alt="Powered By Blogger"/>
    </a>
  </b:if>
</div>

This will show a Powered by Blogger Text link on the Mobile View, and a Powered by Blogger image on the normal desktop view.
The condition
<b:if cond="data:blog.isMobile"/>
can be used to check if the viewer is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog. Happy hacking, and do share if you have created some really awesome mobile template :)

Read More

Facebook Like Button For Blogger

This Tutorial will help you in adding a Facebook Like Button For Blogger. Facebook has come up with a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .This tutorial will teach you to add a Facebook Like button for Blogger

 

How to Add the Facebook Like Button Below every Post

1. First Generate the Facebook code using the options below. (Code will be updated with these details)

Button Type	Standard Button CountBox Count
Text on Button	LikeRecommend
Show Send Button	YesNo
Color Scheme	LightDark
Font	arial lucida grandesegoe ui tahoma trebuchet ms verdana
Float	None LeftRight
Location of the Button	Below the Post Content Above the Post Content
Display	On Post pages only EverywhereEverywhere other than Static Pages

<div>
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>

</b:if> 
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
</div>

2. Copy the Above code. Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”
3. Look for <data:post.body/> and immediately below that place the copied code.
4.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.


              

This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.
4. Now Save the template and you should see the Like Button near each of your posts. You are done :)

Read More

Add Blogger Sitemap to Google Webmaster Tools

I hope you do know about Google Web Master Tools. This tool enables Webmasters to provide a better and detailed information of their site to Google.This will greatly help you in your SEO needs.Webmaster Tools allows you to submit your blog's sitemap so that Google gets a better idea of your blogs structure.

Blogger’s robots.txt file automatically specifies a sitemap URL[The blog feed], but it would be even better if you manually add the sitemap URLs to GWT.

Wordpress and other blogging platforms have some Sitemap generator plugins for the same.If you are using blogger you can use your blog's atom.xml feed as your sitemap.


Note:- If you have disabled Blog Feeds then enable it by going to Settings > Site Feed and change Allow Blog Feeds to Short or Full. (Don't set it to None)
1. Login to Google Web Master Tools with your Blogger account.
2. See if your Blog is already listed there, if it is listed and verified then click on the blog name and proceed to Step 5
3.If its not listed, Click on the Add a site button and provide your blog URL there and hit continue.

4.It will now ask you to verify your Blog using any of the two methods. You can use any of those. The File upload method would be simpler.

  a. File Upload Method – Change the Verification method to Upload an HTML File. Ignore the file download and upload instructions provided there. Google will automatically download and upload that file for you. So just ignore the instructions and hit the Verify button. Your blog should get verified now. If it doesn’t then opt for the  second method (b)

  b. Meta Tag Verification method. Google will provide you a Meta Tag code which looks like

<meta name="google-site-verification" content="verificationkey" />

Copy this Code,  login to your Blogger Dashboard navigate to Layout >Edit HTML and place this code somewhere above </head> Save the template, come back to GWT and hit the verify button.

5. Once your blog is verified you can  add  sitemaps for your blog[From the Left Pane > Site Configuration > Sitemap].In the sitemap URL give the following URL as shown in this screenshot and click the Submit Sitemap button
atom.xml?redirect=false&max-results=500
 
If you have more than 500 posts on your blog, then add an additional sitemap URL
atom.xml?redirect=false&start-index=501&max-results=500
If your blog has more than 1000 posts, then add one more sitemap URL
atom.xml?redirect=false&start-index=1001&max-results=500
If it has more than 1500 posts, then add one more sitemap
atom.xml?redirect=false&start-index=1501&max-results=500
Continue this process depending upon the number of posts on your blog. So this means that you will be adding additional sitemaps for every 500 posts.
Once you have added the Sitemap, you can play around with the different other tools in GWT. It will provide you with a better analysis your site, show you the sites linking to you, help you in managing your site links and much more.



And if you liked this post, please consider sharing it. Thanks!

 Source:Internet

Read More

Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

As you have probably observed, all the widgets/gadgets you add to your blog, will be displayed in all the pages by default, including your homepage too. And if you haven't heard about this already, Adsense can disable your account only for the reason you've put ad units on the content of your contact or privacy policy pages. Isn't that ridiculous? Well, if you ask me, the answer would be: yes and no. First of all, lots of widgets can make a blog/site to look unprofessional, increasing page loading time, therefore visitors will lose their patience.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

1. First of all, go to Blogger's Dashboard >> Design >> Page Elements and give a name for the HTML/Javascript gadgets you have already added. Doing this it will be easy for you to identify the widgets in your blogger template. Give it a unique title so that it does not match with any of the titles of other widgets added.

2. Then go to Dashboard >> Design >> Edit HTML and check the "Expand Widget Templates" box.

3. Find your widget in the HTML by using Ctrl+F and entering the widget's name in the search box. Let's say i have given the title for my widget as "Recent Posts". After searching you will find the below snippets:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>  

This code represents the widget/gadget that you have added in the Page Elements location. All you have to do is to add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. Let's see some examples:

To show the widget only in Homepage:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show Blogger widget only in post pages 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page
 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in Archive Pages

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

After you have added the conditional tags, Save Template and view your blog.


And if you liked this post, please consider sharing it. Thanks!

Read More