Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

seo Easy Way To Create Sitemap For Blogger 2013

Seo Master present to you:
Sitemap is a list of pages Of a Blog or Website which enables the Search Engine Crawlers to crawl the blog/website pages.Actually there are two types of Sitemap.

  1. XML Sitemap
  2. HTML Sitemap
XML Sitemap is actually a structured format which a user can't see i.e it may be in the coding of Template or hidden. But the bonus point of this Sitemap is they tell the search Engines for crawling the web pages while on the other side HTML Site-Map are specially designed for the users to enable them to find content on your Blog/website,this visitors and Search Engine Bots find the pages of such Site-mapped blog.
sitemap

How To Create Sitemap For Blogger

  • All you have to do is making a new page in your Blog
  • After Creating a Page Click On The Pages
  • And Then Click On The Page you have Created
  • Now There will be two Option at the left-most side i.e Compose/HTML
  • Simply Click On HTML
  • Now Copy the Below Script and paste it there
<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js"></script><script src="http://www.matrixar.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

  • Change "http://www.matrixar.com" with your Blog Name!
  • Now Save The Pages Section
  • And That's it.
So What's Up:- Adding Sitemap to Blog which certainly enable the Search Engine Crawlers to crawl  your Blog Contents as a result you may get high rank and traffic,Share your beautiful ideas with us,Stay Blessed,Happy Bloggging!
Easy Way To Create Sitemap For Blogger
Last Reviewed by Iftikhar on June 15 2013
Rating: 5
2013, By: Seo Master

seo Stylish Sliding Up Image Description Widget For Blogger 2013

Seo Master present to you:
We Got a new Widget i.e Stylish Sliding Up Image Description Widget For Blogger.Let's Play with this widget,this widget enable us to add description below image but How? Its not a unique to add description Below image ? Of-course but in this widget the description will be shown when One hover the mouse over the image and the description will be clearly seen.Does it make Sense,its looking Sound Good.With the help of CSS and HTML this widget can be added easily to Blog.

How to Add Stylish Sliding Up Image Description Widget To Blogger

  • Visit Blogger.com
  • Go To Dashboard
  • Now Click On Layout 
  • And Then Click On Add a Gadget
  • A Box will Pop-up
  • Select HTML/JavaScript
  • Now Copy the below Script and made the Necessary changes which is mentioned clearly 
  • Paste it there and that's it !
<style>.image-box {  width:280px;height:280px;overflow:hidden;background-color:white;  border:1px solid #ccc;float:left;margin:1px 1px;  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;  color:#333;}.image-container,.image-details {height:280px;border:5px solid white;background-color:#ffc;  transition:margin-top .4s ease-out .4s;}.image-container img {  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;  max-height:none;  background-color:black;}.image-details h4,.image-details p {  margin:0 0 .2em;padding:0 0;height:70px;}.image-details h4 {  font-size:120%;height:auto;}.image-details .details {  padding:10px 12px;overflow:hidden;}
.image-details .more {  color:white;text-decoration:none;display:block;  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;}
.image-box:hover {border-color:#bbb; width:280px;  height:280px;}.image-box:hover .image-container {margin-top:-160px}.image-details .more:hover {background-color:black}</style>
<div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box">  <div class="image-container">   <img width="280" height="280" src="http://www.matrixar.com/-F2yD2BXCAJk/Ua3z1l53o2I/AAAAAAAAAnA/gPBN6hrMeOg/s640/a.aaa-Face-painted-by-hand.jpg" alt="Just">  </div>  <div class="image-details">   <div class="details">    <h4>Lorem Ipsum</h4>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..</p>    <p><a class="more" href="Blog Post Link ">See More</a></p>   </div>  </div> </div> 
 <div style="clear:both;"></div>
</div>

  • Save it and You are Done !
  • Stay Blessed Happy BlogginG! 

2013, By: Seo Master

seo Awesome NetOopsblog Subscription Widget for blogger 2013

Seo Master present to you:
NetOopsblog Subscription box Blogger
This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.




 

Subscription box with Fully Wooden Theme

  • Go to Blogger Dashboard
  • Go to Layout 
  • Select Add a Gadget
  • You can type title any
  • And Copy the following code in the content.
Demo of Fully Wooden Theme

 Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    .emailtext {
        background: url("http://www.matrixar.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
        border: 1px solid #7E4E27;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 1px 1px 4px #7E4E27 inset;
        color: #444444;
        font-weight: bold;
        margin-left: 2px;
        padding: 7px 15px 7px 35px;
        text-decoration: none;
        width: 176px;
    }
    .ebutton {
        background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
        border: 1px solid #D3D3D3;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        margin-left: -18px;
        margin-top: 5px;
        padding: 6px 15px;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000000;
    }
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="http://www.matrixar.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://www.matrixar.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://www.matrixar.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://www.matrixar.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    Subscription box with Default Basic Wooden theme

    • Go to Layout 
    • Select Add a Gadget
     Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="http://www.matrixar.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://www.matrixar.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://www.matrixar.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://www.matrixar.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    I think this widget helps you, Please share and like...
    2013, By: Seo Master

    seo 15+ Smooth Jquery Scroll to Top widget generator for Blogger v.1 2013

    Seo Master present to you:
    jquery scroll to top widget generator blogger
    Jquery scrolling to top buttons help visitors to jump to top of page with smooth automatic scrolling.So the user/visitor of your blog can go to top of page with a single click.This smooth jquery scrolling makes your blog impressive.
    I created a Blogger widget generator for ease of use.Create your favorite scroll to top Button with a single click.





    To view demo look at right-bottom of this blog or Click on the following link


    I think you liked this generator,Check out our other awesome widget generators here.
    Don't forget to say thanks at least for appreciating us..  Also expect more form us.. thanks..
    2013, By: Seo Master

    seo How To Add 5 Star Rating Widget To Blogger 2013

    Seo Master present to you:

    Getting positive feedback from visitors and blog readers enable you to get fame.The Stronger your feedback is the more your blog visitors will be happy.5 Start Rating Widget is an awesome source of getting feedback and Positive response from your readers,this widget show 5 stars at the top or below the blog post,where one can rate your blog article.This Widget also show the total number of views of the article along with the number of votes.You can rate an article by Selecting and Clicking the 5 stars at Once.Actually this Blog has no effect on Blog Loading Speed.

    How To Add 5 Star Rating Widget To Blogger


    • First of all Go To Blogger Dashboard
    • Then Click On Template >> Edit HTML
    • Now search for </head> tag
    • After Finding the Head Tag Copy the below Script and paste it just above it or before it.

    <link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

    • After Implementing the above steps search for this Code <data:post.body/> 
    • Now Copy the Below Code and paste it just above/below <data:post.body/>


    <b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>

    • Hit Save Template and that's it 

    Important to Note

    This Widget Provide two option i.e you want to show it before Blog Post or below Blog Post,Actually i will prefer the below section because when readers read your article at the end they decide how was the article.So for adding it Below the Blog Posts Copy the Above Script and paste it below <data:post.body/>,and if you are interested in showing it above the Blog post so do the above steps and paste the copied script above <data:post.body/>.
    -If you are using Magazine Style Blogger Template or Responsive Blogger Template,then you have to Copy the above Script and paste it below/above <data:post.body/> as many times as it is in the Template HTML.

    So What's Up:- This Widget can impress your blog readers but if you have a good feedback,however it doesn't slow down the blog loading speed,Stay Blessed,Happy Blogging.
    2013, By: Seo Master

    seo Add Go/Scroll To Top Button To Blogger 2013

    Seo Master present to you:
    Professional Blogs have a flood of Comments,reading these comments one can slip into the bottom,then scrolling to Top via mouse or pad is lil bit boring,in this regard we can solve this Problem by using jQuery in Blogger.Adding Go To Top or Scroll to Top Button will help your visitors to easily navigate the Blog Content,Specially when there is alot of Contents or users comments.These Buttons have beautiful fade in and out Effect,it float in the blog and when one click the upper button it slides to the top of blog,and if one click the bottom button it floats to the bottom of the blog.
    Just Scroll below and see ;)


    How To Add Go To Top and Go To Bottom Buttons To Blogger

    • A Box Will Pop,Select HTML/JavaScript
    • Now Copy the below Script and paste it into the Box
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dxONU7s1G8dfySBSCoXbI0GqCBQ-MXeTLFVdSP609pl6yNcjNYKyTnRA7sDTcvVMt4nBrNC0vb4Sl5sklP_AZknUA7BxEbLysjX96yCGoGiH2Pd9F7sJC6nAVdZjWpk4CerzXJEZyoI/h120/scroll-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

    • Now Click On Save and that's it.
    So What's Up:- This is just an extra Widget for Blog,many Bloggers search for this,therefore i add it into my tutorials,this widget has no effect on Blog Loading Speed,Drop your Comments Below,Stay Blessed,Happy Blogging.
    2013, By: Seo Master

    seo Spraying animated subscription buttons for blogger v.1 2013

    Seo Master present to you:
    spraying animated subscription buttons blogger
    Spraying jQuery animated subscription buttons widget is an awesome widget for blogger.This animated subscription buttons created by Redeyeoperations and i modified it by adding some additional features.This widget works best in Mozilla Firefox..
    I created a widget generator for you with some important options.




     
    To view demo of this widget please click on following link

    Features

    • 5 subscription buttons
    • jQuery Animation
    • Effective CSS3 Animation
    • Color Selectable base button
    View Demo
    Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
    • Go to Template->Edit HTML [A dialog box appears click Proceed]
    • Copy and paste the below code <head> and save it
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>



      2013, By: Seo Master

      seo How To Add Multi Tabbed Navigation Widget To Blogger 2013

      Seo Master present to you:

      The Multi Tabbed Navigation Widget enables you to Group all the Blog Gadgets in a single container,which can easily be selected via tabs.The main benefit of this widget is to save the Space of your blog,and you will get rid of scattered gadgets,however it also helps you to navigate the blog gadgets easily.Any one can see blog gadgets in a single container just by Clicking the Tab of the specific Gadget.There are several ways of creating tab-views for blogger like jQuery, or with the help of tools,or any script.

      How To Add Tabbed Navigation Widget To Blogger



      • Now Expand the Style Section of the Template,just by Clicking the arrow near <b:skin> ... </b:skin> at line 14.
      • Now Search for this Tag ]]></b:skin>
      • Now just above ]]></b:skin> tag add the below script
      /* ThatsBlogging Tabview for Blogger
      ----------------------------------------------- */
      .tabviewcont{
      margin:15px 0;
      padding:0;
      clear:both;
      }
      .tabviewnav {
      margin: 0 0 0 14px;
      padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
      font-size:12px; /* Font size of text inside tabs */
      font-weight:bold;
      }
      .tabviewnav li {
      list-style:none;
      margin:0;
      display:inline;
      }
      .tabviewnav li a {
      padding:3px 6px;
      margin-right:1px;
      background:#F6F6F6; /* The background color of the tabs */
      border-radius:5px 5px 0 0;
      -moz-border-radius:5px 5px 0 0;
      -webkit-border-radius:5px 5px 0 0;
      text-decoration:none;
      color:#222222;
      }
      .tabviewnav li a:hover {
      color:#222222;
      background:#EBEBEB; /* Background color of the tab on mouseover */
      text-decoration:none;
      }
      .tabviewnav li.tabviewactive a,
      .tabviewnav li.tabviewactive a:hover {
      background:#EBEBEB; /* Background color of the active tab */
      color:#222222;
      }
      .tabviewcont .tabviewtab {
      padding:5px;
      border:1px solid #EEEEEE; /* Border around the container */
      background:#fff; /* The background color of the gadget */
      }
      .tabviewcont .tabviewtab h2,
      .tabviewcont .tabviewtabhide {
      display:none;
      }
      .tabviewtab .widget-content ul{
      list-style:none;
      margin:0 0 10px 0;
      padding:0;
      }
      .tabviewtab .widget-content li {
      border-bottom:1px solid #ccc;
      margin:0 5px;
      padding:2px 0 5px 0;
      }



      • Now find </head> Tag
      • Now Copy The Below Script and paste it above </head> Tag
      <script type='text/javascript'>
      // Tabview for grouping gadgets
      //<![CDATA[
      document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
      //]]>
      </script>
      • Now Search for <div class='column-right-inner'> or <div id='sidebar-wrapper'> (it will look like the below screenshot)
      • Now Paste The Following Script Just above this Script <div class='column-right-inner'>
      <div class='tabview'> 
      <b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
      <b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>  
      <b:section class='tabviewtab' id='Tab3' maxwidgets='1'/> 
      </div>
      •  And That's it,Now Go To Layout Section,you will see there 3 New Areas for adding Gadgets.

      Changes and Implementation 

      If you want to add any Gadget to the list of single Container,just Click On Add a Gadget,and Drag the Gadget to that section.Now if you are interested in adding more Tabs,then follow the below steps.
      • In the Above last one step we have highlighted </div> ,now if you want to add new tab just add the below script before </div> Tag,and that's it.
      <b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>


      • Note : If you are adding new tab,then use different ID for each tab,e.g for tab 6 use "Tab6" in the script.
      • Next Important Point is that if your Template sidebar is too short they don't add long and high width Gadget to this Widget.
      • ! important ! : This Widget may slow your Blog Loading Speed, because this widget is lil bit heavy.
      • Note:- If your Blog Sidebars is too short it will not work perfect,either it will just show title or nothing 
      So What's Up :- How Was the Widget?You will Like it to Add into your Blog?Share your Beautiful ideas with us.Stay Blessed,Happy Blogging. 

      2013, By: Seo Master

      seo New Expandable Recent Comments Widget For Blogger 2013

      Seo Master present to you:
      Expandable Recent Comments Widget is a new Blogger Widget,which shows the recent comments of the readers along with the Date and Exact Time.This is very interesting widget which allows you to easily see the Contents of the Comment,Now you don't have to Click on the title link or commenter for showing the comments,just add this widget on your blog right side-bar and then you can easily navigate the comments of your readers.For expanding the Content of the comment just click the "plus +"  sign and for hiding the content of comment click the minus sign (-) or you can simply hide and show it by simply pressing Show All or hide All Button at starting time.

      How To Add New Expandable Recent Comments Widget To Blogger

      • A Window will Popup Select HTML/JavaScript
      • Now Copy the Below Script and paste it into the Box
      <style type="text/css" media="screen">
      .row-aa {        background: #f2f2f3; }
      .row-bb {        background: #F8F5F1; }
      .row-div {
        margin:0px;
        padding:5px;
      }
      .comment-header {
        font-size:0.9em;
      //  border:1px solid #E0E0E0;
      //  background-color:#F3F3F3;
        padding:4px;
        margin-top:10px;
        margin-bottom:5px;
      }
      .comment-box {
        margin:0px;
        padding:0px;
        font-size:0.9em;
        height:500px;
        overflow:auto;
      }
      .comments1  {
      //  background: #F3F3F3;
        padding:3px;
        border-left:1px dashed #A6A6A6;
        color: #888888;
        font-style: italic;
        padding-top:4px;
        margin-bottom:5px;
      }
      .comment-footer {
        text-align:center;
        font-size:0.9em;
        padding:4px;
        margin-top:5px;
      }
      </style>
      <div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>
      <div class="comment-box">
      <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
      <script type="text/javascript"  src="http://www.matrixar.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
      </script>
      <script type="text/javascript"  src="http://www.matrixar.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
      </script>
      </div>

      • Replace  "http://www.matrixar.com" with your Own Blog URL 
      • Save The Widget and that's it
      So What's Up:- This was really awesome widget,we already shared many Recent Comments Widgets but this one is really attractive and accessible widget,try it and share your beautiful ideas with us,stay Blessed,Happy Blogging.Script/Code Credit @Helplogger




      2013, By: Seo Master

      seo Add Social Sharing Buttons Widget To Blogger 2013

      Seo Master present to you:
      Add Social Sharing Buttons Widget To Blogger
      Social Media has become the main source of your Blog/website traffic,there fore never underestimate the social media networks.For Boosting Blog traffic you should add Social Sharing Buttons Widget to your Blog.Which helps you and your visitors to easily share your Blog Contents with their Friends,as a result you will get the bonus of traffic to your blog.The widget we are sharing contain Google+ Share Button,Twitter Tweet Buttons,Stumble,Facebook Send and Like Button,Pinterest,and many other social network buttons.You can add it either above the Blogger Post or Below the Blogger Posts,however it is very simple and clean widget which will not effect your Blog Loading Speed.

      How To Add Social Sharing Buttons Widget To Blogger

      • Go To Blogger Dashboard
      • There Click On Template 
      • Now Search for This Script/Code <data:post.body/>
      • After Finding The above Code in Template
      • Copy The Below Script and paste it above(for Showing Buttons above The Blogger Post) or below(for Showing Buttons Below Blogger Post) this Script <data:post.body/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharethatsblogging"> <center><div class="headingthatsblogging">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_zOQnT4HAnmyVzd5fXCLYjllAivcIJVR_BP6ZCT6x-1nYU3fLPvQTq3UZUXtQ25IUdyvhl1D9BUmMULkwsEnfXI8m4e32jlpSDXscI4Xhv6QBT8bAf-mv68DauIwxEbdpulXsTMZvoAY/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4rOB7UvPU_Hkurg8PajyLjj8X6eOJTas1UTSMulZCujL8T4Y7xnMpiDdLMPkdXK0qzkAJhzQKRZBroG6HlUXjGkBmjCMtr-923lN1VwVitXMO0ljBcK6ErBbo6FDjKItb9-mQixkPdiM/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTcSNwiP6UpwnDs4HDRUSI5hLG5naW3d_FSiLoIPYgaowBwVG1dvAwI9dtNhxFlYbbJ7ghPJR-h6IFQ7vSaPETn_bYgSTqbzMUVcSlPUD4BgMPMJdg69edlH6bw4IrRtkj6BXLeruZHA/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQ-UkXQ1FZnvwxZLaJx3i7491Jgxq6yo6hryW7SwH2jcgL9-oXHreaRbvYRpS2Vxttp7R11Hr8fUdfufcFo1BMgEEO4D5lEyqcikFwvidM01tHg-UCLT1jUmUw5I1tbiGKmVkxc5vvyw/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbdmoehRhnAoUo57sZOI_fOux_7wF9N0mAFkyUwZ5VV0kGFHd4qEi9XDVfWSeBhAo56_7X0a0fYmL8JIEhE4x7iV-H5OulybSLK94J3bMRjKc7olrIQv6F8Ox2_ilrvgQyHWS4D-mynA/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvWiRmFdlsjbPtd8oqiz_dmnInqdt-ZBqP5A31CuQH6-zT64LQ1vRfNWQBAEffRUS65hSdlaKva7Wolmc5ZHYkzl77BPq0pLmaXfSdXP2HV_BvXljek515IM9JASUKm0qMkbOqjDGqg2c/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-LTimoN19rIufFMjEgyK11txvO8S5CaA3bJbr4qPIjMCTEyccJ7cfv6lRZm8p3Woh6tjnQF1n3n8F1imIXRxpnR3vfzg1h1eHCkS7X1_HN4jnLD3zGQSnmzhEUnWh65d4bLeGXzrDlA/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9HNcxRXmHAXB_9H_PLtxTl1lAJOnrd93jpTxfFphWq4dW6_mxhGfhElG_QCdfZo0r75lQsVOmQ8Blbk5VSnbZ5yAaInFUm2hw9k0u0vlL9iklCvylLvxhDutTOscIHJsX4Y0PG9Cugg/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGW0_MlBKeybcn4D2A-6sLt9BeEXcVwE1ddKUzf6bevNzIS-MWpSaqUGIcCImESXgLEYn9GF1zntp1zkHX_nVwpkOhYdwaW_xj-lckSl08ZPFOQZe1TP_Q-r503GREs-5VJQ67NoLFWmri/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>
      Note:-
      - In Magazine Blogger Templates,there are more then two Scripts similar to <data:post.body/>,so do paste the above Script after each script.
      • Now when you paste the above script after <data:post.body/> ,take a Preview and Then Hit save Template.
      • That's it,now take a look on your blog post social sharing widget will dancing there :)

      So What's UP

      Actually this widget is the main source of many blogger to get a flood of traffic,however this widget is very easy to navigate,so it will help your readers to share your blog contents with their friends.Share your beautiful ideas with us,stay Blessed Happy Blogging :)
      2013, By: Seo Master

      seo Add jQuery Pop-up Facebook Like Box with Timer To Blogger 2013

      Seo Master present to you:
      Time To Boost Your Facebook Fan Page Likes,Now its very easy to socially force your visitors to like your Facebook Fan Page.Actually this widget has a unique feature i.e it loads very fast, New jQuery Popup Facebook Like Box along with timer is a new Blogger Widget which can help you to increase your Fan page Likes.The most beautiful thing in this widget is that you can customize it Accordingly i.e you can change the time interval of Closing or You Can also change the Text "Like us On FB" and even the text "cancel".Once You added this Widget to Blogger,it will popup when someone land to your Blog and it will Provide a cool look to the reader/visitor of Blog to socially force him for liking your Fan Page ;) 

      How To Add jQuery Pop-up Facebook Like Box with Timer To Blogger

      Before adding this Widget you need to install the jQuery Plugin,if jQuery Plugin is already installed on your Blog,then No worry just follow the below steps and install the widget,but if not,then Go To Blogger Dashboard >> Click On Template >> and Search for </Head> tag , now copy the below script and paste it above </head> tag.
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

      • After Installing the jQuery Plugin To Your Blog Follow the below steps
      • Go To Blogger Dashboard
      • Click On Layout
      • Now Click On Add a Gadget
      • Now a Box will Popup
      • Select HTML/JavaScript There
      • Now another Box will popup
      • Now Copy the below Script and make the specific changes and paste it into the HTML/JavaScript Box
      <style type='text/css'>
      #makingdifferentpopup{
      position: fixed;
      top:100px;
      z-index:9999;
      display:none;
      padding:0px;
      right:600px;
      border:10px solid rgba(82, 82, 82, 0.7);
      -webkit-background-clip: padding-box; /* for Safari */
      background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
      -webkit-border-radius:8px 8px 8px 8px;
      -moz-border-radius:8px 8px 8px 8px;
      border-radius:8px 8px 8px 8px;
      width:400px;
      height:360px;
      overflow:hidden;
      }
      #makingdifferentpopup span{
      font-size:20px !important;
      font-weight:bold !important;
      }
      #makingdifferentpopup h1{
      background:#6d84b4 url(http://www.matrixar.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
      border:1px solid #3b5998 !important;
      color:#FFFFFF !important;
      font-size:20px !important;
      font-weight:700 !important;
      padding:5px !important;
      margin:0 !important;
      font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
      overflow:hidden !important;
      }
      .htmlarea{
      font-size:12px !important;
      font-weight:normal !important;
      height:265px !important;
      padding:1px !important;
      background:#fff !important;
      border-bottom:2px solid #ddd;
      overflow:hidden !important;
      }
      #mdfooter{
      text-align:left;
      background:#F2F2F2 !important;
      height:56px !important;
      padding:10px 10px 10px 10px !important;
      overflow:hidden !important;
      }
      #mdclose{
      float:right;
      background-color:#eee !important;
      border:1px solid #ccc !important;
      color:#111 !important;
      font-weight:bold !important;
      padding:5px 8px 5px 8px !important;
      text-decoration:none !important;
      display:inline-block !important;
      font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
      outline:none !important;
      position:relative !important;
      font-size:18px !important;
      margin:1px !important;
      }
      #mdclose:active{
      top:1px;
      left:1px;
      }
      .grabthis{
      bottom:80px;
      font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
      position:absolute;
      right:6px;
      text-align:right;
      z-index: 99999;
      }
      .grabthis a{
      color: #000;
      text-decoration:none;
      }
      .grabthis a:hover{
      text-decoration:underline;
      }
      </style>
      <script type='text/javascript'>
      jQuery(document).ready(function() {
      function makingdifferent_ppopup()  {
      var sec = 10
      var timer = setInterval(function() {
         $("#mdfooter span").text(sec--);
         if (sec == 0) {
            $("#makingdifferentpopup").fadeOut("slow");
            clearInterval(timer);
         }
      },1000);
        var mdwh = jQuery(window).height();
        var mdpph = jQuery("#makingdifferentpopup").height();
        var mdfromTop = jQuery(window).scrollTop()+50;
       jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
      jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
       //alert(jQuery.cookie('sreqshown'));
       //var mdww = jQuery(window).width();
       //var mdppw = jQuery("#makingdifferentpopup").width();
       //var mdleftm = (mdww-mdppw)/2;
         var mdleftm = 500;
       //var mdwh = jQuery(window).height();
       //var mdpph = jQuery("#makingdifferentpopup").height();
       //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
       jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
           jQuery("#mdclose").click(function() {
      jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
      </script>
      <div id="makingdifferentpopup">
      <h1>Join us on Facebook</h1>
      <div class="htmlarea">
      <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fthatsblogging&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
      <div class="grabthis">
      By <a href="http://www.matrixar.com/" target="_blank">ThatsBlogging</a> / <a href="http://www.matrixar.com/" target="_blank">+Get This!</a>
      </div>
      </div>
      <div id="mdfooter">
      Please wait..<span>10</span> Seconds
      <a href="#" id="mdclose" onclick="return false;">Cancel</a>
      </div>
      </div>
      <!-- End popup -->

      Changes in The Script before installing

      • Replace thatsblogging in the script with your Own Facebook Fan page username.
      • For changing the Time Interval,Change var sec = 10 with your Own Desire time.
      • If you are interested in changing the height and width of the Box Change 250 and 400 in the Script
      • For Changing The Text "Join us on Facebook" just change the text with your Own.
      • Change The Text "Cancel" with your Desire text
      • Now Copy the Script and paste it into the box 
      • Now hit Save and that's it 
      • Script Credit Purely Goes To "MakingDifferent"
      So What's Up :- Adding this jQuery Popup will force your Readers to like your Fan page and as a result you can increase your Fan page Likes,Share your Beautiful Ideas with us,and if you have any Question ask us,stay Blessed ,Happy Blogging.
      Add jQuery Pop-up Facebook Like Box with Timer To Blogger
      Last Reviewed by Iftikhar uddinon June 24 2013
      Rating: 5
      2013, By: Seo Master

      seo Add Total Posts and Comments Widget To Blogger 2013

      Seo Master present to you:


      Its not very impressive for Pro Bloggers,but some bloggers love to show Total Posts and Comments Total Number in Blogger.Actually this widget will Show the Total No Of Comments on your Blog Articles,it fetch the total comments and Total No of Posts in your Blog.This widget is very easy to add,you can put it any where in your Blog.But the most appropriate place for adding this widget is Header or Sidebar,all you have to do is adding a Small JavaScript Code into the Layout Section.


      How To Add Total Posts and Comments Widget To Blogger

      • Go To Blogger Dashboard
      • Now Click On Layout
      • Then Click On Add a Gadget
      • A Small Box will Popup,Select HTML/JavaScript
      • And Now Copy the Below Script and Paste it over there


      <script style="text/javascript">function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><p style="font:13px Tahoma;">Total Posts: <script src="http://www.matrixar.com/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script></p><p style="font:13px Tahoma;">Total Comments: <script src="http://www.matrixar.com/feeds/comments/default?alt=json-in-script&callback=mbhTotalCount"></script></p>

      Changes in the Widget Script

      • Replace "www.matrixar.com" with your Own Blog URL
      • If you are interested in Changing the Text of "Total Posts" or "Total Comments",Simply Change the Green with your Own Text.
      • You Can Also Change the Font Size and Style in the Script.
      • After changing Copy the Above Script and paste it in HTML/JavaScript Box and hit save.
      • That's it :)
      So What's Up :- This is a common widget which is usually used for showing the total number of Posts and Comments on Blog.Share your Beautiful ideas with us,stay Blessed,Happy Blogging.
      2013, By: Seo Master
      Powered by Blogger.