How Add Random posts Widget to blogger new way 2014

Add Random posts Widget to blogger :

                                                           When you making regular posts in your blog the visitor visit new post and  ignore old posts so for we have way to show your old posts on side bar of your blog by adding a gadget.

So this process will occur in few steps:

1st Step:

             First of all open your blog dashboard and then click on  Layout and then click on Add a Gadget

2nd Step:

             In second step Add new HTML/JavaScript Gadget as given below.

3rd Step: 

            In the third step Add the following HTML Code in your Gadget HTML box .

 <style>
#random-posts img{float:left;margin-right:10px;
width:65px;height:50px;background-color: #F5F5F5;padding: 3px;}
ul#random-posts {list-style-type: none;}
</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyaHQhT00vvPonsiGqOfi92dkXd4gff5hMprJA3sYD0YjUZQlENWcFtiT8zssor1oNCv-5v0Mr-EmBq_gWCn253KFY3AqQZp4VL1ImqabuKpc6BCHBGe57rAtvRLX8nPQGFSnzvblbbs/s1600/no_thumb.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

In the given HTML code The 5 represent the Number of post that you want to show in the Gadget .
And the width; 65px  and height;  50px  is for the size of the thumbnail size of the post that you can change .

4th Step:

           In this step click on save button and the the gadget is displayed .
If you have any problem about this you can comments below...

Thank you !

How add Multi colored Popular posts to blog

Hello,
           Today i am gonna to show you that how we can use multi colored popular posts .So the popular posts are those which most visited in your blog or site.So we want to display them in different colors.
So for we use some CSS codes to change them.as in the given image.                                                        

This will complete in a few steps.

1st Step:

            So of all go to your blogger dashboard and then go to Template and then go to Edit HTML.

2nd Step:

           In this step click on (Expand Widget Template) .

3rd Step:

              In this step search for the following tag as given below...

 /* Variable definitions
   ====================

So if this have some problem in searching you can't find it the paste it below autor information that is usually below this tag 

  <b:skin><![CDATA[/* 

This should end up with the this symbol 

  ----------------------------------------------- */

4th Step:

              In the 4th step paste the given HTML codes below the above codes.

 <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>

5th Step :

               in this step search for the following code.

 ]]></b:skin>

and above it add the following codes  as below.......

 #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

6th Step:

              In this step find the following HTML codes.

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

And Delete this until you reach on this tag as "delete the </b:widget>also):

 </b:widget>

Keep in Mind that after this the entire fragment of the HTML code should appear like this as .

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

7th Step:

              In this step you replace the above HTML code with the following codes.

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oHssMhH71t51FbIYhFO1wcw3t47OKOGzbz3_PmmUfUmBxtwSTm3BzDvxzF4jtHePMR5iq-WsgkotdsiZQMk65zhfpN0HWuB2vDhp9UuXVjjb-rU5yz89yQr20-N500yqHIYDZJR4ung/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oHssMhH71t51FbIYhFO1wcw3t47OKOGzbz3_PmmUfUmBxtwSTm3BzDvxzF4jtHePMR5iq-WsgkotdsiZQMk65zhfpN0HWuB2vDhp9UuXVjjb-rU5yz89yQr20-N500yqHIYDZJR4ung/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>

Last Step :

                    Click on the Save Template.

After this the setting is that go to Layout and click on the edit link of popular posts widget and then click on

(Display up to 5 posts ) and then save the widget.as in the screen.

So of you want to change the background color of the popular posts  widget you can easily change them as 

Go to Template and then go to Customize and then go to Advance and then popular post Background and then there you can change the color of background as you want.

So you have done this .

If you have any problem about this post you can comments below..

Thank you !

How Add Different Background color or an Image in backgroung of each blog post

How Change the background of the blogger post:

                                                         When you want to modify your blogger posts by using different treks this is one them.So i am gonna to show you that how we can change the background of the blogger post.So this is very easy to change the background of blogger posts.

1st step:

 So when writing the new article(Post) in blog then click on the HTML Near the Compose tab and then add the following code at the beginning and at the end of the post content.

 <div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

</div>

the above red line will add at the Beginning of the post .
and the Blue at the end of the post.
The Green part replace with your own color.
This background color you can change later on the published posts and also can remove this .
                            

 2nd Step:

              How to add an image in background of post and for add the following codes at the beginning and at the end of the post content .as in above.

 <div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

</div>

 Paste the URL address of your hosted Picture instead of of green text.
The red color add at the beginning of the post.
the blue color add at the end of the post and then click on publish and this will occur.
If you have any problem about this you can comments below..

Thank you !

How SEO Optimize your Blog Titles For Higher Searching results

SEO Optimize your Blog Titles For Higher Searching results :

Today i am gonna to show you that how to SEO Optimize your your blogger post title for higher search results so it is called Blogger/blogspot Title swaping This can help boost your position in search engine results page listing and it also increase click throughs from an ASEO "searching engine Optimization"  Perspective page title is the most import element on your blog in terms of ranking well in searching engine.As your browser display your blog title in front of each post title.
This will occur in a few Steps that are given below.
Follow the following steps ;
  

1st Step:

          In the first step open your blogger dashboard and then open my blog and then go to Template then click on Edit HTML.

2nd Step:

         IN second step go to Searching box that can be find by clicking any where in the HTML and then press Ctrl+F. and then paste the following codes into it.

 <title><data:blog.pageTitle/></title>

 Replace the above codes with the following given codes.

 <b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> |<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

 Last step:'

                 In last step save your template and the changes will be saved.
If you have any problem about this you can comments below...
Thank You !

How Show /Hide widgets/post/Gadgets in Home/static/archive pages in blog

How Show /Hide widgets/post/Gadgets in Home/static/archive pages in blog:

Hello,
        Today i am gonna to show you that how How Show /Hide widgets/post/Gadgets in Home/static/archive pages in blog as all the Gadgets when you add to your blog this will displayed on every/post and Also on Home page.I think a very Know that Adsense  could disable you account when you put ads units inside the content of your contact privacy policy Page.SO there for i can say that the hiding of several elements inside your blog pages is only  a matter of design but it is also an important requirement.So follow the  following few steps As below..

1st Step:

              In first step go to Blogger Dashboard and then open My blog and then Lay out and Name the HTML/Javascript gadget that you have already added . So after this it become very to identify widgets that you have in your blogger template and then give it unique title that is different then other Gadgets which are already added .

2nd Step:

              In second step go to your template and then click on Edit HTML.

3rd Step:

              Select the Expand widget Template Check box.

4th Step:

             Find the widget title in the HTML By the searching process that is Ctrl+F and then enter the name of Widget name and the similar code will be highlighted in the HTML of HTML codes.
The given code is that represent the Gadget that you have added in the page elements location in Layout.

 <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>  

 5th Step:

               After that you will found that your widget code add the following conditional tags marked with red just below and above to hide widget from specific post or place in blogger at which you want After this you will done. I have some other ways that i want share with you is given below..

    1.         If you want show the widget only on 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>

     2.   If you want to Display the widget only on Posts:

 <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>

        3.     If you want to display the widget on a specific page:

replace the red URL of the page with the specific page url

  

 <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>

    4.      If you want to hide the widget on 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> 

    5.        If you want to display widget on specific static page:

 <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> 

     6.       If you want to want to hide widget on a static page:

 <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> 

     7.         If yo want to show the widget only on archive page:

  <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> 

Note that you need to replace the red highlighted text with the URL of page,post or specific region on which you want to show or hide.....


   6th     At last Save the template and the changes will be saved .
 If you have any problem about this you can comments below..
Thank you!

How Add Facebook Like Button to a blog beneath every post 2014 very easy

Add a Facebook Like button on blogger posts:

                                    To day i am gonna to show you that how we can add a Facebook like button on a blogger site .It`s very easy i will show in a few steps .We use this like button to increase the ranking rate of the blog and spread our site through out the world .So for this we have another way that is Facebook that is best social media on which we can share our post with friends.

The blogger Plugins has  developed a simple customizable way of installing  Facebook Like Link button for each page of you blogger site.Such tool is based on original code and design developed by
mia of design matters In using a slightly altered  version of this widget here on my blog.

I am gonna to show that how we can Install Facebook Like Button :
                                                  Head over to the installation page at blogger plugins and full the form and there will need to enter URL of Faceboo Fan page or Profile and also your dsired width in pixel.

 Codes below form will update once you will enter these details.for several template that function with the blogger Template designer then you can add CSS style codes in Design then Template Designer  then Advanced and in the CSS section of your dashboard .Follow the instruction of  post to add directly to your blog template .And at last add the following codes below the &it;data:post.body/&gt; tag In  HTML Codes and save template So after this you will see the Facebook like button on item pages of you site.
If you want to add a simple Like button then you can install a widget like this with or without avastars instead.

If you want to add the style of widget then go to Design and then Edit HTML of your blogger dashboard and check the Expand widget  Template Box.(Button).
 Search for the following Codes  &lt;data:post.body/&gt; tag below this HTML paste the following Codes  as given below...

<b:if cond='data:blog.pageType == &quot;item&quot;> 

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/> 

</b:if>

Further a few changes are given below..

1. you like to display the avastars of peoples who have linked  the page change the section that is highlighted Red in above the HTML codes to "true"
2.  you can changes the number value of yellow highlighted to other and change the size.

 At last save your template and the change will be saved.Thus you will see the New Facebook Like box on your blog pages.
If you have any problem about this post you can comments below..
Thank you!

How Add a Facebook Invite Friends Link to a blogspot site

 

Add a Facebook Invite friend link to your blog:

Today i am gonna to show you that how we can add a Facebook Invite friends Link on your blog.we add this link because we want to make famous blog .for this we need share our blog with other peoples and we use a short way to add friend invite link in blog.It`s very easy i will show stepwise .
So follow the following steps.

1st Step:

             In the first step to do this you will need to Create a short bit.ly URL for you blog. With the help of this we make a secure base URL (https we cannot use with blogger).

Note of short bit.ly URL as you will need it when Creating your app on Facebook.

2nd Step:

               In the second step we create Facebook app.As you will need to  create Facebook Application That`s you will need an appId to use in your code. For this visit the app or Facebook Developers .

In this Name the Application and fill the 1st set of details as follow:

1. Display name is the name of your site.
2. Name space is your name space that will feature in the URL for you App .For Example: http://app.Facebook.com/shernawazkhan1 .
3. Contact email it is your email address that`s will need.
4. App Domains This is your blog URL this will need to contact with your blog site.For Example: http://shernawazkhan1.blogspot.com

3rd Step:

So after that`s all Click the (Select how you app integrates with Facebook) and fill in detail as given below:

1. Website with Facebook Log in And need URL of the blog as "http://shernawazkhan1.blogspot.com".
2. Canvas URL Here you will need to enter bit.ly URL you generated for your site, adding a question mark at the end .e g : http:bit.ly/shernawazkhan1?
3. Secure  the canvas URL enter you blog bit.ly URL with https : eg : http:bit.ly/shernawazkhan1?

 You can add a thumbnail or icon to your application on the page this will appear when reader use your app.then save you change.
 Once you done this be sure to make  note of your app Id that will shown on your page as and you will need to add this to the code to be pasted on your site.

4th Step:

          Go to layout section of your blog and choose to add an HTML/JavaScript gadget and then paste the following codes in your gadget.replacing the values highlighted in Red and blue as given in the codes below..

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'your-app-id',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message Here'
});
}
</script>
<div id="fb-root"></div>
<span class="invite-friends-link"><a href='#' onclick="FacebookInviteFriends();">
Invite friends link text
</a></span>
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>

 5th Step:

            And in the last step save the changes .
And will create a basic text link on which the visitors will click and bring up a Facebook dialogue box in which their friends can be invited to visit you blog site.
 If you have any problem about this you can comments below..
Thank You!

How add a music player in blog on every page

How to add a music player in blogspot:

                                                  Today am gonna to show you that how we can add a HTML5 audio player to a blog posts or layout.So this is very easy to add audio player to blog I hop every one can do it!

The <audio>tag is also a feature of HTML5 which we can use to natively embed audio playback in our sites.This is so light can be supported by Internet Explorer 9,Firefox,chrome,Safari and Opera and  this link can set as play automatically.When you add this code their will show a audio player in your blog.

<audio controls> 
<source src="url-of-audio-file" /> 
If you cannot see the audio controls, your browser does not support the audio element 
</audio>

By Including Controls in the audio element, a simple player is displayed enabling the user to begin playback when they want and they can ajust the volume as they want.

Any text between the audio tags is displayed in browser which do not support  the audio element.
So if you want to play the audio automatically then you can enable auto play as in the given example.

<audio controls autoplay>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

Through retaining the controls attribute you given visitors the option to stop or resume audio playback if they choose.
To loop  audio include loop element in the <audio>tag link this:

<audio controls loop>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

If you have any problem about this you can comment below..

Thank you !

How Dispaly Adsense Ads Between every posts of blogger

 How to show AdSense Ads b/w posts:

Today i am gonna to show you that how can display ads between the posts of the blogger .It benefit is that often readers visit the site with out touching the ads because ads are displayed on side bar,top or at the bottom by this the clicking rate will be decreased.So we use the another way to display the ads between the posts this make the site attractive for readers.it` very easy to show ads b/w posts.for this you should follow the following steps .

1st Step:

              In first step open you blogger dashboard and then click on More option and then on layout tab.In the blog post section ,and then click on the edit link the the bottom.

2nd Step:

              After the clicking on edit link then a page will open in which scroll down until you find that "show ads between posts.check it if it is unable for the function you must configure you Adsense before you can configure inline adds.Just sign in your adsense and then complete this step.

   

3rd Step:

             So when you check this box you will configuration option to your ads and then elect the ads size and style on  your blog posts.

 
If you wan to display your ads below every post then select 1 from Drop down menu .After the setting of your ads format then click on save button .But keep in mind that you must follow adsense policy that you can not apply more then 3 ads per 1 page .
If you have any problem about this you can comment below .

Thank you!      

How Use Open ID to leave comments on blogger posts

Today I am gonna to show you that how we can use op id to leave comments On blogger post.
That`s very easy .But we use this way as you know that when a reader leave a comments on blogger post its very difficult for him.So therefore we use a new commenting system that Open ID to leave a comment with link on blogger post.By this we use as comments avastars it still work if you leave a comment in blog which has enable these avastars to display. Follow the following method .

New Comments System(should I Say [systems])

As you know that often blogs allow you to leave a comment using the three things that are:

1. The first is using your blogger account or Google account"Thus creating a link to your Blogger profile page"
2. Anonymously That`s why your comments will be posted by "Anonymous").
3. Using  Nick name"No link here either".

I mentioned That some of blogs allow you to sign in in using Open ID /Worldpress/Typepad account.
So this enable only when you when you publish you blog using blogger in draft.If you intrusted on blog readers to be able to leave backlink on your  blog you need to publish your blog using  blogger In Draft.
By visiting the link http://draft.blogger.com in your on your browser instead of the the regular www.blogger.com page.You will need to change your comment setting in your dashboard,allowing (anyone) to make a comments that is

• Go to setting
• Comments 

and to do this! By this any one able to leave a comments on your blogger post And their name will become a hyper link to their openid(profile page)If they do not have Google account or blogger account .then they will choose a the correct option to log in .

If you want Open id system instead of Google account you will need to create an Open ID account.There are some methods to you can choose for this including ClaimID which angel kindly pointed out in her comments.We chosen for Myopenid as it is the only system i know of which will allow you to create link back to your own blog when leaving comments using blogger awful new system.You can create your free myopenid account .this was a way to enable backlinks in your comments. This method i have got from other sites.

Make your blogger comments link back your blog:

                             Assuming you that have set up and verified your MyopenId account you may now prefer for leave comments where you name will link back you blog instead of your MyopenId Profile .This will need to verify that are the owner of blog by adding some codes to head section of your blogger Templates.

For this go to Go to blogger dashboard and then open My blog and then click on Templates and then Edit HTML .In your HTML code click the left button of mouse and then press  Ctrl+F and there a searing box will open then search of </head> tag in your HTML codes and before this this add the following HTML codes .as given below...Ensuring that you substitute all instance of (http://youraccount.myopenid.com) with the correct URL for your own MyOpenId account.

<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://youraccount.myopenid.com/" />
<link rel="openid2.local_id" href="http://youraccount.myopenid.com" />
<link rel="openid2.provider" href="http://www.myopenid.com/server" />
<meta http-equiv="X-XRDS-Location" content="http://www.myopenid.com/xrds?username=youraccount.myopenid.com" />

When ever you have option to use you OpenId to leave comments ,you should enter the URL of your blog instead of you openid Url.and will substitute your  openid profile link with that of you blog URL instead also if  you a MyblogLog member, your avatar will display in commenting system where MyblogLog comment avatar have been enabled.

Thank you!

How add comments form beneath the Post

How to add the comments form beneath the blogger post :

Today i am gonna to show that how we can enable or add the comments form beneath the blogger post this very easy and you need simple customization for this to make.
The has developed so many Features in which the Blogger has developed inline comments form That can activated through blogger in draft. To enable this feature on your blogger you need to sign in in your blogger dashboard.by mean Blogger in Draft. Then click on setting and then comments and then scroll down the page to see the new Comments form placement Setting.

   And check the radio setting for the ( Embedded Below The Post) That will enable the display of comment form below the blogger posts.If have a customized template.Then for this this comments to you need change in you template HTML.

1st Step:

              Open your blogger dashboard and then open my blog then click on template and then edit HTML.  

2nd Step :

              In this step click left button of the mouse and then press Ctrl+F the searching box will open and then search of the given HTML code  as below....

<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>

3rd Step:

              In this step replace it with the Given HTML codes as below..

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>

4th Step:

                   In this step click on save HTML then the changes will be saved .

                                       <::: 2nd Way:::>


      If you have problem with the above its due to your blogger template Then  you can follow the following
way.
In way search for the following HTML codes as given below.  

<b:include data='post' name='comments' />

After this link Add the following codes.

<b:include data='post' name='comment-form'/>

 And then Click on save HTML and the changes are saved in your blogger.
If you have any problem with this you can comments below.
I will try to salve your problem.
Thank you!

In blog Show Posts author,Labels,Coments and Date with Icons below title of Article(Post) In blog

How Display post author,labels,date and comments with Icons:

                        Hello,
                                                        Today I am gonna to show How we can make an article /post in blogger more informative By blog author name ,Comments count link,Labels and the time date at which the post was published.So most of the template already having these properties bus in some case we have add theses information.Now see that how the comments link Behave when there no comments the posts,so There would be a link which says that "Be the first to comments" Which shows the number of comments if there 1 or 2 comments then on the comments will shows comment (1) or  comments(2) as possible.And there will showing near the time and date at which the post was published and the post Labels it is present in every templates.
I am gonna to show you the following steps to make the post of blogger more attractive and beautiful so if you also want then follow the following steps as given below very easy!

1st Step:

               In the first step Open your blogger dashboard and go to my blog and then go to the Template and then Edit HTML. As the further help you can get from the given picture.

2nd Step:

                In the second step just click mouse left button inside anywhere in the HTML And then Press Ctrl+F from the keyboard and then there Free blank will be open on the top of HTML code for searching.
As in the Picture.

3rd Step:

               In this third step Just paste the following Codes in the searching box and then click on the enter button the following codes will be high lighted in HTML.

<div class='post-header-line-1'>

                      
                                 or
     

    <div class='post-header'>

4th Step :

                In 4th step Below this code Add the given HTML.The Given HTML further you can change the Icons For this you need to replace the blue color URLs with your new images URLs.

• The first URL is for the icon for Author.
• Second URL is for Clock Icon.
• The third URL is for Icon near the Labels.
• The fourth URL is for Comments bubble.

So you can edit them!

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4GVPpXw75KutSEDQjHvCAZiqgJi8bZUeKUjDYb81rDxEK7dkmHMkr3Y813TMta_fggs1Lv36V65c0GlcL5oUsHzTs0nDliNyx-Jvo8src4HELMfBRZV_6TICCnP4yHFlXwToapCZYp4D/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMVNM1eNIn2VEqO4VO3lwZ21Na5ZgB9Sb1_7h1t5BsSze-yZvSdQn_fJ3lfbL3UDb_fX8DPJF9pk0g98Yalv0eCCCCPVGyMkDMnrglyPWR_CbG5NUFQ_LUZYyB8Z_faLFU6J6aKdgza-v/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZUHTOJspeMIdU0rNEXeMrFmFmLzR3Ej-6BucEh5V34nt4K0InGgyG68Ho7yc_JnMNN-Q59JHlP8zq_xvmAc1xWe4ldVdEMOdgSi-cmVcNdzpNseztc4SFqlAsKMQyigUFD3LE1Yg6dfn/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
    <span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cajwIzaSyTN6bR-CKnucsMX36NNqP71rgxUCdZbYVRDbzJd6XvRU2mijk3Smsn1SwYazz9zgteoX_VvKZBZwQKmA1yYI6dMUi182HrMybhUj8F_RkRM8SlnFqUpjKkfNVKonLmwUMOkE/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
    </span></div>

5th Step:

               In this step Click on the Save Template Button above the HTML to save the changes and this will Occurs.
If you have any problem with this you can comments below.I will try to solve your Problem.

Thank you!