Add stylish popular posts widget to your blogger side bar

Popular posts is not just a widget it is just like a representative of your entire blog.because it is nothing but the list of most view posts on your blog through out that blog life.that is enough for visitor to understand the quality of your blog content and how that blog will informative to him.so if you design this widget very colorful ,the it will attract the visitor concentration and will increase your page views.here i'm going to show you how to add color full popular posts widget in your blogger side bar. take a DEMO of this widget
 
1) go to blogger ----> template ----> Edit Html
2)find ]]></b:skin>
3) past the bellow code just above the ]]></b:skin>



/*--- MBT Popular Posts --- */ 
.popular-posts ul{padding-left:0px;} 
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px; 
list-style-type: none; 
margin:0 0 5px 0px; 
padding:5px 5px 5px 20px !important; 
border: 0px solid #dddddd; 
border-radius:10px; 
-moz-border-radius:10px; 
-webkit-border-radius:10px;
}
.popular-posts ul li:hover { 
border-left:5px solid #FF0099; 


}
.popular-posts ul li a:hover { 
text-decoration:none; 
}


4) Save template that's it

How to Create a table in html?-customization of blogger

customization of blogger design is the most important factor in attracting visitors for your blog.in this Blogger Designing posts i want to go through so of the important elements that will help you in make your blogger blog and posts more attractive.a part of this in this post i'm going to explain you how to create a table in html.befor going to main part you need to know some important tags that we to use in creat a table in html.

<table> -starting tag of a table
<tbody> represents starting of table body
<tr> represents table row
</tr>represents ending tag of a row  in  a table
<th> represents table header. this must end with </th> 
<td> represents table discription  this must end with </td>
</tbody></table> ending tags of a table

Now i'm going to show you basic strecture of table and its html code

<table><tbody>
<tr><th> Header1 </th><th>Header 2</th></tr>
<tr><td> Deseription 1</td><td>description2</td></tr>
</tbody></table>


the above code will look like below

Header1	Header 2
Deseription 1	Description2

Now i'm going to explain you how to design your stylishly. for that tags you need to know some tags
1)border tag 2) width tag 3)style tag 4) border radius tag
now i'm going to use these tags

<table border ="3" width="250px" style="background:red;border-radius:2px; color:white;"><tbody>

<tr><th> Header1 </th><th>Header 2</th></tr>
<tr><td> Deseription 1</td><td>description2</td></tr>
</tbody></table>
the above code will look like

Header1	Header 2
Deseription 1	description2

you can change that width, colors, as you like.you can also use custom back grounds like images etc.
Example:

<table border ="3" width="250px" style="background:#F4F3F3 url(http://www.labnol.org/wp/wp-content/themes/baba/F2F1ED.png);border-radius:5px; color: #F00000  ;"><tbody>

<tr><th> Header1 </th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
</tbody></table>


in this example i'm using image as background this will look like

Header1	Header 2	Header 3	Header 4
Deseription 1	description2	description2	description2
Deseription 1	description2	description2	description2
Deseription 1	description2	description2	description2

You can also use "border-color:  ; " to change border color      reference for colors
                          "font-family:    ;" to  change your table font  reference for fonts
                           "font-weight:   ;" to  change your font style
                         how this post will help in your blogger posts designing

Check list that you need to check before applying to Google Adsense

Now a days getting Google adesense approval for blogger is very difficult in countries like India, china,other many pacific countries because of so many fraud click activities from these countries.before this i already wrote an article about how to get quick adsense approvel? ,in that article i discussed about the basic things that every publisher need to keep in mind for getting adsense approval.but with this article i'm going to explain that same things in depth.here i'm going each element wise..


Website/Blog content: content wise every the following things every publisher need to keep in mind

• Your content must be original
• if you Regularly copied content for your website from web,it is difficult to get adsense approval.even by luck if you get adsense approval with copied content ,then there is no problem from adsense team once you get approvel.but blogger team will deleate your site by treating your site content as spam.so don't do that
• update your site content regularly

Website/blog designing:

designing of you blog is very important factor the influence you approval.for designing 

• Use lite background colors
• Use attractive font in your webpage
• make your blog user friendly by using sitemap and search box
• your Blog/site navigation must be clear and simple.your navigation must be like that every visitor can easily understandable the objective of your blog/site 
• make you blog socialize  by using social network plugins through your blog/site
• don's use many widgets which will confuse visitor

Payee name: Payee name is the most important thing while your applying to Google adsense a/c.Payee name change option is available in some few countries only.in this list of countries which include india  this option is not available.u must be very carefully about this

• if you already had a Bank a/c. then it is not a problem because you can use that account name 
• if you want to apply for a new bank a/c after getting adsense approval, u guys must be careful about the payee name which you have to mention while you applying for Google adsense.
• Use the same name which is on your ID Proof  (PAN,VOTER ID etc...) that which is the supporting document(PAN,VOTER ID etc...) you want for open bank a/c.i'll explain the problem involve in this by an example.

Ex:Gali gannarav(Gali is sur name) is an India based publisher.he has no bank account.he want to apply for a bank a/c after getting adssense approval.he applied for google adsense a/c.He mentioned    G gannarav payee name and he got adsense approval.now he want to open one bank. he want to submit PAN as supporting document for bank.on PAN his name is Gali gannarav . he mention          G gannarav as A/c name in application which is his payee name in adsense. but bank rejected his application because A/c name does not match  with the name on supporting document(Here PAN).

now he has two options

1. Changing his name on PAN which is not possible
2. changing his account payee name to name on PAN( example  here ) which is possible in some countries.but in India he need to close his present a/c and have to apply again with the new payee.that will pain for us.these are the list of countries in which we can't change payee name and we need to apply again

I've the experience of this same example.that's why i'm sharing this in details,so be careful about payee name .once again i'm repeating that use the name which is on your ID cards(PAN,Voter IS etc...) as payee name.

Other points you need to keep in mind

• Use correct address which is very impotent factor in Verifying Your address through 4 digit PIN system
• don't share your blog/site details among your family members

Feel free post your comments and feed back about this blog

Impotence Of Meta keywords and Description in Blogger SEO

Generally every webmaster think that Meta keywords are the most important Factors to get top results in Google search .they will give preference to this even more then description, and title tags. But if you ask any buddy from Google webmaster tool team that Google will give page rank based on Meta keywords? ,u know what is the reply from them ? .. “No”... Yes you can get that same answer from them. Because Google will never give page ranks based on Meta keywords. Even Google spider never uses Meta keywords for Google search. I know what is the next question that will rise in your mind “then what are the factors that we have to keep in mind to get better search results?” I’m coming to that point only...

The factors you have to kept in mind while you creating a post

Post Title: Post title is the main important in Blogger SEO. Before mentioning your Post title keep the below point in your mind.

•         Make sure that your post title must be unique    
•         Make sure that Your post title is just like that every reader will  easily understand the objective of           your post i.e. what you want to say through that post   
•         Don’t Put Difficult vocabulary… keep it simple   
•         Don’t make your title Keyword stuffing. just like “Movie name-videos,music, entertainment” titles like this     .    this will never help you in generating traffic , this will decrease your website traffic.

Post Description: this is nothing but Meta description of your post. This will definitely help you for better search results. Sometime Google can use this post description in search results as snippets if that Google robot thinks that this description will better answer for the user query. Better meta description will increase your click through rate that will help you to put your site at top in search results .this description will not visible in the pages. This is only for search engine robots to understand the summery of your post.

Other points that you need to kept in your mind

1) Make sure that you allowed search engine to crawl and index your web pages.

2) Don’t use robot.txt protocol on your site that will stop search engine to crawl your webpage which will decrease your site traffic.

3) Submit a valid site map in your Google webmasters. You can use below url as sitemap in webmaster tool.

Only for blogger users

          http://www.yoursite.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500 

Change 500 based on your total no of blog posts. If your blogger total posts are 550 then put 600 like that.

       4)Provide User with One XML Or HTML Site map on your site. This will help user to go through all of your site content and also search engine robots to find the linked pages.

     5)    Blogger user use Search Description Option in your post. To know how to enable this option click here

Once again I’m repeating that search engine not at all use only Meta keywords for search results. 

don’t spend much time in finding keywords for each and every post.

How To Add Meta Description and key words for each post in your blogger

Blogger logo.trademark of google . this onle for user reference

The main problem of every blogger is To Index their blogger post with search engines and finding their posts at in  the search results. with out matching keywords and description for each and every post  you can't find your posts on top in search results even the blog has original content .for this keywords and description every blogger use one traditional code which is  :

                 <meta content='DESCRIPTION HERE' name='description'/>                    
                 <meta content='KEYWORDS HERE' name='keywords'/>                      
                 <meta content='AUTHOR NAME HERE' name='author'/>                      

But I think it is absolutely wrong because if you use that code you can add a single  description  and keywords for your entire blog .that means every blogger post contain same keywords and description.then search engines neglect your posts and mark it as spam . so be careful with this and to add separate key words just follow below instruction.

this is to parts 1)Adding Keywords 2) Meta Description

Adding Keywords:
1) go to blogger ---> Template ---> Edit Template
2)Expand template (make sure that you save one copy of present template before making this changes)
3)Find <head>
4) Replace <head> with below code


<!--::::::::::: Block1: Output post meta keywords -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:section id='meta1' showaddelement='no'>
   <!-- widget must be a of Type = 'blog' to have posts data exposed, and must have a unique id -->
   <!-- Empty Includables(functions) to output nothing, You must keep them ): -->
   <b:widget id='Blog2' locked='no' type='Blog'>
      <b:includable id='nextprev'/>
      <b:includable id='backlinks' var='post'/>
      <b:includable id='post' var='post' />
      <b:includable id='status-message'/>
      <b:includable id='comment-form' var='post'/>
      <b:includable id='backlinkDeleteIcon' var='backlink'/>
      <b:includable id='postQuickEdit' var='post'/>
      <b:includable id='commentDeleteIcon' var='comment'/>
      <b:includable id='feedLinks'/>
      <b:includable id='feedLinksBody' var='links'/>
      <b:includable id='comments' var='post'/>
      <b:includable id='main' var='top'><!-- Main Function of Any widget comes with ID 'main' -->
         <!-- Loop Page Posts (only 1 in a post page )-->
         <b:loop values='data:posts' var='post'>
            <b:if cond='data:post.labels'>
               <!-- If the post has labels, make Meta keywords by looping lables -->
               &lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;
            </b:if>
         </b:loop>
      </b:includable>
   </b:widget>
   </b:section>
</b:if>
<!--::::::::::: Block1 END -->


<head> <!-- THE HEAD -->


<!-- must include(called) here to output other head sub elements -->
<b:include data='blog' name='all-head-content'/>


<!--::::::::::: Block2: Output Index Title,keywords,decription and Post Title,description -->
<!-- Post/Archive Page -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
   <title><data:blog.pageName/></title>
    
<!-- Index Page -->   
<b:else/>
   <title><data:blog.pageTitle/></title>
   <meta name='keywords' content='your,blog,keywords!!' />
   
</b:if>
<!--::::::::::: Block2 END -->


And then click Save that's it .With this you can use your post labels as keywords.so while posting add categories labels and othe matching terms for keywords
for example one of my post is about Nokia lumia 900. and my labels are mobiles,nokia,nokia mobile,nokia lumis,lumia 900,lumia 800,window phone etc..  in  this lables mobiles,nokia are for categories purpose and remaining other are for keyword purpose.hope you catch the point.

Next Adding description i already wrote one article about this so plz read that

             How to add Meta description for each post in blogger?

After reading this two articles you can add meta description and keywords for each and every post in you blogger. hope it will be helpful

How To Create Blogger blog Site Map?

Yes Thus is the main question that every blogger confused with.for that digital  inspiration created one tool that will enables you to create your blogger site map and costume robot.txt file that will enable search engine to find your blog site map. before going to procedure that how to creat this sitemap and robot.txt first of all ..all of you say thangs to Mr.Amit agarwal who is the founde of Digital  inspiration blog and also he is the inspiration for me to creat this site.ok now we are going to procedure.

1) Use This Sitemap tool.open it
2) enter your blogger  URL,click creat sitemap
3) the you can find a code like below image showing

4) Copy the entire code and then go to blogger---> dashboard-->setting-->search preference
under this search preference you can find A Costume robot.txt option enable that option .and copy past the above code in that box and the save .that's it now google bot can easily find your sitemap and further posts.no need to ping your URL manually

and you can also use the site map URL showing in the above image in your webmaster tools as a sitemap.because most of bloggers use their custom feed URL as site maps.but with that URL you can't submit and index all posts .for example my blog has more than 300 posts and initially i use

www.degitalbox.in/feeds/posts/default

as my site map .but this site map submit and index only 25  URL . i was shocked .after i tried

http://www.degitalbox.in/atom.xml?redirect=false&start-index=1&max-results=500


this URL submitted my entire  blog posts just in 5 min and indexed them . it is really aswome .u can also try

Stylish Popular Posts Widget For Blogger

Demo

To Get This Colorful Widget  Just Follow The Below Steps

1. Go To Blogger  Dashboard ---> Template ---> Edit Html
2. Find   ]]></b:skin>  Then Add Below Code Just Before  ]]></b:skin>

.mostpopular {

    list-style: none outside none;

    margin: 0.3em 0 !important;

    padding: 0;

}

.mostpopular_li {

    background-image: none !important;

    border: 0 none;

    list-style: none outside none !important;

    margin: 0 0 -7px !important;

    padding: 13px 0 8px 8px !important;

    position: relative;

    width: 100%;

}

.mostpopular_li.color0 {

    background-color: #EE5826 !important;

    width: 100%;

}

.mostpopular_li.color1 {

    background-color: #27B6E2 !important;

    width: 93%;

}

.mostpopular_li.color2 {

    background-color: #C5E627 !important;

    width: 89%;

}

.mostpopular_li.color3 {

    background-color: #FF6F51 !important;

    width: 84%;

}

.mostpopular_li.color4 {

    background-color: #D59B8E !important;

    width: 80%;

}

.mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {

    background-color: #888888 !important;

    width: 74%;

}

a.barlinko {

    background: none repeat scroll 0 0 transparent;

    display: block;

    font: italic 13px georgia,serif;

    margin: 0 6px 0 0;

    padding: 0;

    text-decoration: none !important;

}

a.barlinko:hover {

    color: #FFFFFF;

}

.barco {

    display: block;

    right: 0;

}

.mostpopular_li img {

    margin-top: 15px;

    position: absolute;

    right: 5px;

}

a.thethingwithc {

    border: 0 none !important;

    color: #FFFFFF !important;

    display: block;

    font-family: arial;

    font-size: 11px;

    font-weight: bold;

    padding: 0 9px 0 0;

    text-align: right;

    text-decoration: none !important;

}

 3.No find <b:section id='sidebar' showaddelement='yes'> In Template and put the below code after <b:section id='sidebar' showaddelement='yes'> 

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>                        
                                     <div id='sidebartitlewrapper'>
                                         <b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>                                        
                                     </div>                                     
                                     <div class='sectioncont'> 
                                         <ul class='mostpopular'> 
                                             <script type='text/javascript'>
                                                 //<![CDATA[                                                 
                                                 var i=0;
                                                 //]]>
                                             </script>
                                             <b:loop values='data:posts' var='post'>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                                 
                                                         document.write ('<li class="mostpopular_li color'+i+'">');
                                                         var i= i +1;
                                                     //]]>
                                                 </script>
                                                  <a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
                                                 <span style='display: inline-block;width:100%;'>
                                                     <span style='float: left;font-size:10px;color:#f5f5f5;'> </span>                                                        
                                                     <span class='cb'/>
                                                 </span>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                                 
                                                          document.write ('</li>');
                                                      //]]>
                                                 </script>                                            
                                             </b:loop>
                                         </ul>
                                     </div>                                     
                                     <b:include name='quickedit'/>
                                   </b:includable>
</b:widget>

4. Save The Template And Click View The Blog

Click on the wrench icon in the right corner of widget

Change the Widget Settings As Below

And The Save The Settings And Change the Widget Position To Up And Down On Layout Option