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

seo Beautiful Simple Blogger Email Subscription Box 2013

Seo Master present to you:

Beautiful Simple Blogger Email Subscription Box

Beautiful Simple Blogger Email Subscription Box



Emails are best source for getting traffic or visitors for blog.And also a well source of creating a good readership. I am sharing a Beautiful Simple Blogger Email Subscription Box which can be added below of every post.This email subscription box is very simple with wooden brick background and hover effect.



                                                    See Demo



Beautiful Simple Blogger Email Subscription Widget


Step No 1
  • Go to your blogger account.
  • Go to Template ==>Edit HTML
  • Now Search ]]></b:skin>
  • And paste below code above it.

/***** Subscribe widget from http://www.www.matrixar.com start*****/
.subscribe_outer4 { background: url("http://us.cdn3.123rf.com/168nwm/markusgann/markusgann1009/markusgann100900025/7697081-an-image-of-a-beautiful-old-wood-background-seamless-texture.jpg") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }.subscribe_wrapper4 { background: url("http://us.cdn3.123rf.com/168nwm/markusgann/markusgann1009/markusgann100900025/7697081-an-image-of-a-beautiful-old-wood-background-seamless-texture.jpg") repeat scroll 0 0 #333333; padding: 38px 50px 18px 38px; color: #fff; text-shadow: 0px 2px 3px #666;font-size: 16px; font-weight:bold; line-height: 20px; text-align:justify; }#avdhootEmailsub4 { display: block; clear: both; margin: 10px 0; }.emailText4 { background: url("http://i1314.photobucket.com/albums/t576/trickycafe/email_zpsba22e644.png") no-repeat scroll 10px center #fff; padding: 10px 40px; color: #444; margin: 0 0 15px; width: 70%; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0; box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); }.emailButton4 { background: #000000; background: linear-gradient(top, #000000 0%, #0c0c08 100%); background: -moz-linear-gradient(top, #000000 0%, #0c0c08 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #0c0c08)); background: -webkit-linear-gradient(top, #000000 0%, #0c0c08 100%); border: 0; color: #fff; cursor: pointer; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); font-weight:bold; width: 100%; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }.emailButton4:hover { background: #b50b42; background: linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -moz-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50b42), color-stop(100%, #cd0c4b)); background: -webkit-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); }
/***** Subscribe widget from http://www.www.matrixar.com end*****/

Step No 2
  1. Now Go to Layout ==> Add a  Html/Java script gadget. 
  2. Then Add the following code.

    /***** Subscribe widget from http://www.www.matrixar.com start*****/<div class="subscribe_outer4"><div class="subscribe_wrapper4"><h2><center><font size='5' color='white'>Subscribe Us</font></center></h2><hr width="100%" />
    <p><font size='4'>Get New Articles Straight To Your Inbox By Submitting Your Email ID Below</font></p><br/><div id="avdhootEmailsub4"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="YOURID" /><input name="loc" type="hidden" value="en_US" /><input class="emailText4" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /><br/><br/><input class="emailButton4" border='3' title="F4U ONLINE COURSES" type="submit" value="Subcribe Now" size='50px' /></form></div></div></div>/***** Subscribe widget from http://www.www.matrixar.com end*****/

    Instructions:


    1. If you want to change the color of 'Subscribe Us',kindly change yellow color code
    2. If you want to change the text written in box change the green color text.
    3. You can insert your feed burner id in the place of 'YOURID'
    4. You can insert your desired title in the place of F4U ONLINE COURSES

    Note:
    If you find any problem related to our topic 'Beautiful Simple Blogger Email Subscription Box' then feel free to comment or contact us.

    2013, By: Seo Master

    seo Beautiful Announcement Widget For Blogspot Blogger Blogs 2013

    Seo Master present to you:

    Beautiful Announcement Widget For Blogspot Blogger Blogs

    Beautiful Announcement Widget For Blogspot Blogger Blogs


    F4U release a useful blogger widget with scrolling headline links. When you hover the mouse cursor on the links the scrolling of links stop and pause and you can easily read the headlines. These headlines can be your blog or site updates, announcement or links to your featured posts or something else. You can use it in many ways. I found this script on dynamic drive and then customize these code with some more colors and images and effects to make it completely compatible with blogger blogs or site.
    It is several steps ahead of marquee effect because this widget uses some JavaScript to bring the dynamic effect. It is only a one-step installation process. 
    Please see the widget demo first,


                                      See Demo



    Add Announcement Widget to your Blog



    1. Go To Blogger > Design

    2. Choose HTML/JavaScript Widget from Layout

    3. Paste the Below code inside it,



         /* Announcement Widget by www.matrixar.com start*/
    <style type="text/css">
    #pscroller2{
    background:url(http://www.matrixar.com/-bMBExt07B5o/UZMgyKsRTXI/AAAAAAAAZss/w6W_qz8NFxg/s320/updates1.gif) no-repeat top left;
    width: 440px;
    height: 20px;
    border: 2px solid #ddd;
    padding: 3px 3px 3px 40px;
    margin:10px 0;
    }
    #pscroller2 a{
    text-decoration: none;
    color:black;
    }
    #pscroller2 a:hover{
    text-decoration: underline;
    }
    .someclass{
    }
    </style>
    <script type="text/javascript">
    var pausecontent2=new Array()
    pausecontent2[0]='<a href="#">HEADLINE </a>'
    pausecontent2[1]='<a href="#">HEADLINE </a>'
    pausecontent2[2]='<a href="#">HEADLINE </a>'
    pausecontent2[3]='<a href="#">HEADLINE </a>'                                                 </script>  
              src='https://santosh143.googlecode.com/svn/aaa'>
                </script>
                                                                                                                                                                                                                                                            <script type="text/javascript">
    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
    new pausescroller(pausecontent2, "pscroller2", "someclass", 1000)
    </script>
                <script type="text/javascript"> 
         /* Announcement Widget by www.matrixar.com end*/

    • If you want to increase the scroller width or height then edit width: 440px; and height:20px;
    • Replace HEADLINE with anything you want to write as notice,announcement and updates or anything else. Write text description you want to show.
    • Replace # with headline page url. On clicking this link the visitors will be able to see the headline page. If you don't like to link your Headlines then delete # next to each HEADLINE .
      Finally save widget and you are all done! Now see your blog/site.

    Note:
    If you find and problem regarding 'Beautiful Announcement Widget For Blogspot Blogger Blogs' then feel free to comment or contact us.
    2013, By: Seo Master

    seo Horizontal menu with sub-tabs in two columns for Blogger 2013

    Seo Master present to you: This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.
    blogger navigation menu, css menu, drop-down menu
    The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:


    Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

    STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.
    • Click on the "Add a Gadget" link just under your header image
    • From the Gadget's List, select "HTML/JavaScript" option.
    STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.
    <div id='menucol'>
    <div id='topwrapper'>
    <ul id='top'>
    <li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
    <li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
    <li><a class='submenucol' href='#'>Tab 3 Title Here</a>
    <ul>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
    </ul>
    </li>
    <li><a class='submenucol' href='#'>Tab 4 Title Here</a>
    <ul>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
    </ul>
    </li>
    <li><a class='submenucol' href='#'>Tab 5 Title Here</a>
    <ul>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
    </ul>
    </li>
    <li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

    </ul>
    <br class='clearit'/>
    </div>
    </div>
    Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

    You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:
    <li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
    <ul>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
    <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
    </ul>
    </li>
    STEP 3: Now let's go a step further and add the CSS style in our Template
    • Go to Template > Edit HTML
    • Click on the sideways arrow next to <b:skin>...</b:skin> 

    • Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:
    /* Horizontal menu with 2 columns
    ----------------------------------------------- */
    #menucol {
    width:940px;
    height:37px;
    background-image: -moz-linear-gradient(top, #666666, #000000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
    border-bottom:1px solid #666666;
    border-top:1px solid #666666;
    margin:0 auto;padding:0 auto;
    overflow:hidden;
    }
    #topwrapper {
    width:940px;
    height:40px;
    margin:0 auto;
    padding:0 auto;
    }
    .clearit {
    clear: both;
    height: 0;
    line-height: 0.0;
    font-size: 0;
    }
    #top {
    width:100%;
    }
    #top, #top ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    #top a {
    border-right:1px solid #333333;
    text-align:left;
    display: block;
    text-decoration: none;
    padding:10px 12px 11px;
    font:bold 14px Arial;
    text-transform:none;
    color:#eee;
    }
    #top a:hover {
    background:#000000;
    color:#F6F6F6;
    }
    #top a.submenucol {
    background-image: url(http://www.matrixar.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
    background-repeat: no-repeat;
    padding: 10px 24px 11px 12px;
    background-position: right center;
    }
    #top li {
    float: left;
    position: relative;
    }
    #top li {
    position: static !important;
    width: auto;
    }
    #top li ul, #top ul li {
    width:300px;
    }
    #top ul li a {
    text-align:left;
    padding: 6px 15px;
    font-size:13px;
    font-weight:normal;
    text-transform:none;
    font-family:Arial, sans-serif;
    border:none;
    }
    #top li ul {
    z-index:100;
    position: absolute;
    display: none;
    background-color:#F1F1F1;
    margin-left:-80px;
    padding:10px 0;
    border-radius: 0px 0px 6px 6px;
    box-shadow:0 2px 2px rgba(0,0,0,0.6);
    filter:alpha(opacity=87);
    opacity:.87;
    }
    #top li ul li {
    width:150px;
    float:left;
    margin:0;
    padding:0;
    }
    #top li:hover ul, #top li.hvr ul {
    display: block;
    }
    #top li:hover ul a, #top li.hvr ul a {
    color:#333;
    background-color:transparent;
    text-decoration:none;
    }
    #top ul a:hover {
    text-decoration:underline!important;
    color:#444444 !important;
    }
    • Now find (CTRL + F) this line:
    /* Tabs
    • It will also have some little lines beneath:
    /* Tabs
    ----------------------------------------------- */
    • And just below these little lines, delete the code below until you reach at:
    /* Columns
    ----------------------------------------------- */
    • Instead of the code that you have removed, add this one:
    #crosscol ul {z-index: 200; padding:0 !important;}
    #crosscol li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}
    .tabs-outer {z-index:1;}
    .tabs-inner {padding: 0 0px;}
    See this screenshot for more info:
    menu for blogger, blogger gadgets, blogger widgets
    STEP 4: The final step is to Save the Template and you are done!

    Visit your blog to see a beautiful navigation menu just below header.
    If you have any questions or need help, leave a comment below.2013, By: Seo Master

    seo How to add “Email Subscription Form” to Blogger Blogspot 2013

    Seo Master present to you:
    email subscription form, blogger blogspot, gadgets
    When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.


    To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
    Just follow the next steps:

    1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:


     2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:


     3. Paste the following code inside the empty box:
    <style>
    .hl-email{
    background:url(http://www.matrixar.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 0px 12px ;
    width:300px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }
    .hl-emailsubmit{
    background:#9B9895;
    cursor:pointer;
    color:#fff;
    border:none;
    padding:3px;
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    font:12px sans-serif;
    }
    .hl-emailsubmit:hover{
    background:#E98313;
    }
    .textarea{
    padding:2px;
    margin:6px 2px 6px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
    width:130px;
    color:#666;}
    </style>
    <div class="hl-email">
    Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
    <input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input class="hl-emailsubmit" value="Submit" type="submit" />
    </form>
    </div>

    Settings 
    • Replace the url address in green to change the email icon
    • Increase/Decrease the 130 width value for a wider text area
    • Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
    • Replace helplogger with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

    4. Now Save your widget and check your blog. Enjoy!

    2013, By: Seo Master

    seo Add Floating Social Media Sharing Buttons To Blogger 2013

    Seo Master present to you: The Floating Social Media Sharing is a very popular widget on all the top blogs, being a very good way to increase the number of times your posts get shared on Twitter, Facebook and other social networks. It has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed Icon and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you wish.

    Blogger, WordPress, Facebook, Share

    How to add the scrolling social bookmarking bar


    The code to copy-paste (updated!):

    <!-- floating share bar Start www.matrixar.com--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
    <div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
    <br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
    <br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/helplogger' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='http://www.matrixar.com/-MoGJ9Y3EdzQ/T8f4cj6LHMI/AAAAAAAACP4/VsM0eaG2EM4/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.matrixar.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>


    Customization:
    • Vertical alignment - Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
    • Horizontal alignment - Change the value in red of margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
    • Twitter setting - Replace Helplogger with your Twitter username
    • Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code: <div class='sbutton'> BUTTON CODE HERE </div>
    • RSS Feed - Change the text in blue with the url address of your RSS feed.
    Enjoy :)


    2013, By: Seo Master

    seo How To Add Social Media Icons to Blogger Header 2013

    Seo Master present to you: social media icons, facebook icons, social media icons for bloggerThis tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

    You can see a demo in this test blog.


    Adding Social Media Icons to Blogger Header

    Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

    blogger blogspot, blogger template, blogger gadgets

    Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

     /* Social icons for Blogger
    ----------------------------------------------- */

    #social-icons {
    margin-bottom:-30px;
    height:50px;
    width:100%;
    display:block;
    clear:both;
    z-index: 2;
    position: relative;
    }
    .social-media-icons {
    display:table
    }
    .social-media-icons ul {
    text-align:right;
    padding:5px 5px 0 0
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    .social-media-icons ul {
    margin-bottom:0;
    padding:0;
    float:right;
    }
    .social-media-icons li.media_icon {
    margin-left:6px;
    padding-left:0 !important;
    background:none !important;
    display:inline;
    float:left;
    }
    .social-media-icons li:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(-360deg);
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }

    Screenshot 1:


    Screenshot 2:


    Step 3. Now search for this line

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    Step 4. And just above it, add this code:

    <div class='social-media-icons' id='social-icons'>
    <ul>

    <li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://www.matrixar.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

    <li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://www.matrixar.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

    <li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://www.matrixar.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

    <li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='http://www.matrixar.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

    </ul></div>

    Customization

    - Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
    - To change the icons, just replace the urls in blue with the ones of your images.
    - You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

    <li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

    Step 5. Finally, Save the Template to apply the changes.

    The effect is done with CSS3, so this effect will not work in older browsers.2013, By: Seo Master

    seo Fading Box With Newer/Older Posts Links and Titles for Blogger 2013

    Seo Master present to you: The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.
    blogger gadgets, navigation for blogger

    You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

    This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

    How to Add Navigation Box with Newer & Older Posts on Blogger

    Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

    <b:include name='nextprev'/>

    Screenshot:

    Step 2. REPLACE the code above with this one:

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include name='nextprev'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='blog-pager-box'>
    <h4>Other posts published:</h4>
    <b:include name='nextprev'/>
    </div>
    </b:if>

    Note: you can change the "Other posts published" title with your own

    Step 3. Now add just above </head> the following code:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
    <script>
    // <![CDATA[
    $(function() {
    $('#blog-pager-box').toggle()
    .css({
    width: '520px',
    height: '150px',
    position: 'fixed',
    padding: '1em',
    bottom: 0,
    right: 0,
    background: 'url(http://www.matrixar.com/-2qUvFgMRqk4/UaD7GSA7C8I/AAAAAAAADbI/eh-qGOnAmeM/s1600/paper.jpg)'
    });

    $(window).scroll(function() {
    if($(this).scrollTop() > 100) {
    $('#blog-pager-box').fadeIn();
    } else {
    $('#blog-pager-box').fadeOut();
    }
    });
    });
    $(document).ready(function(){
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    $(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
    });
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link").text();
    $(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
    });
    });
    // ]]>
    </script>

    <style type='text/css'>
    <!--
    #blog-pager-box {
    box-shadow: 0 0 3px #AEAEAE;
    z-index:9;
    }

    #blog-pager-box h4 {
    margin:0;
    padding:0;
    color:#4898B9; /* Widget's title color */
    font-size:16px; /* Title font size */
    }

    #blog-pager-newer-link {float:left;clear:both;line-height:30px;}
    #blog-pager-older-link {float:left;clear:both;line-height:30px;}
    .home-link {display:none;}
    .blog-pager-older-link, .blog-pager-newer-link {
    background-color: transparent !important;
    background-image: none !important;
    border:0 !important;
    color: #4B4B4B !important; /* Color of the links */
    float: left;
    width: 500px;
    clear:both;
    }

    a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
    text-decoration:none !important;
    }
     
    a.blog-pager-newer-link:before {
    content: url(http://www.matrixar.com/-2hKXB7FANlI/UaD_wh_InyI/AAAAAAAADbs/S0H4hok2te0/s1600/back.png);
    float:left;
    }
    a.blog-pager-older-link:before {
    content: url(http://www.matrixar.com/-VPxzgLQCgrM/UaD_tGXPfnI/AAAAAAAADbk/owLQci4BaYY/s1600/forward.png);
    float:left;
    }
    #blog-pager {
    width:500px;
    background-color: transparent !important;
    background-image: none !important;
    border:0 !important;
    text-align:left;
    }
     
    #blog-pager div {
    color:#0577AB; /* Color for the "Newer Posts" and "Older Posts" text */
    font-weight:bold;
    margin-bottom: -5px;
    }
    a#blog-pager div:hover {
    text-decoration:none !important;
    color:#4898B9; /* Color for the "Newer Posts" and "Older Posts" text */
    }
    -->
    </style>
    </b:if>

    Note that this gadget uses jQuery, so try to have only one version.


    Customization:


    - There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
    - In green you can see where to change the text colors.
    - The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

    Step 4. Now, Save the Template and that's it!

    You can also change the "Older Posts" and "Newer Posts" links with posts titles or images. 2013, By: Seo Master

    seo New Blogger Widget: Contact form - Change Style & Install in a Static Page 2013

    Seo Master present to you: Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text.

    The contact form for Blogger has the following features:
    • Field for the user name
    • Field for email
    • Field for the message (textarea)
    • Submit Button
    Screenshot
    contact form, blogger gadgets, static page
     The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.

    How to Add Contact Form to Blogger

    To add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget.


    blogger gadgets, blogger widgets, contact form

    Styling Contact Form


    As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:

    /* Contact Form Container */
    .contact-form-widget {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    background: #F8F8F8;
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    }

    /* Fields and submit button */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    }

    /* Submit button style */
    .contact-form-button-submit {
    border-color: #C1C1C1;
    background: #E3E3E3;
    color: #585858;
    width: 20%;
    max-width: 20%;
    margin-bottom: 10px;
    }

    /* Submit button on mouseover */
    .contact-form-button-submit:hover{
    background: #4C8EF9;
    color: #ffffff;
    border: 1px solid #FAFAFA;
    }

    This is how it will look like after applying the style:
    contact form, blogger gadgets, contact form for blogger

    To add this style, go to Template > Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (press CTRL + F to find it):


    How To Add Contact Form In A Static Page


    First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

    Part to be removed:

      <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
        <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='contact-form-widget'>
        <div class='form'>
          <form name='contact-form'>
            <p/>
            <data:contactFormNameMsg/>
            <br/>
            <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
            <p/>
            <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
            <br/>
            <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
            <p/>
            <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
            <br/>
            <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
            <p/>
            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
            <p/>
            <div style='text-align: center; max-width: 222px; width: 100%'>
              <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
              <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
            </div>
          </form>
        </div>
      </div>
      <b:include name='quickedit'/>

    </b:includable>
      </b:widget>

    After you have saved the template, go to Pages and paste the following code into a new blank page with the title you want:

     <div class='widget ContactForm' id='ContactForm1'>
      <div class='contact-form-widget'>
        <div class='form'>
          <form name='contact-form'>
            <p>Name<p>
            <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
            <p>E-mail *</p>
            <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
            <p>Message *</p>
            <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
            <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
            <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
            <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
          </form>
        </div>
      </div>
    </div>

    Messages will be sent to the same email that you have registered in Blogger.

    Here's a demo page where you can test it (it is an account that I don't use, so don't expect reply).


    That's it! If you have any questions or comments please post below.2013, By: Seo Master

    seo Add Facemoods Emoticons To Your Blogger Comments 2013

    Seo Master present to you: Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know how to add them, just follow the next steps:

    emoticons, smileys, blogger, tricks

    Step 1.

    Go to Dashboard - Template - Edit HTML - Proceed


    ...and select Expand Widget Template (don't forget to make a backup)

      Step 2. Search (using CTRL + F) for this code:

      • For previous commenting system: 
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      • For threaded comments:
      <div class='post-footer-line post-footer-line-3'>

      Step 3. Add the below code just above it

      (for threaded comments, add the code after):

      <b:if cond='data:blog.pageType == "item"'>
      <div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
      <img border='0' src='http://www.matrixar.com/-zY65UBxSl6w/T67AajI_U6I/AAAAAAAACIc/fCV19C1627Q/s1600/www.matrixar.com(1).gif'/> :a
      &#160;
      <img border='0' src='http://www.matrixar.com/-M8aBZtLjGqY/T67Ai2d8eAI/AAAAAAAACIk/PrDerObloAw/s1600/www.matrixar.com+(2).gif'/> :b
      &#160;
      <img border='0' src='http://www.matrixar.com/-HfIjCWOuxwo/T67Ar7HZiHI/AAAAAAAACIs/RgwvdPP4JSc/s1600/www.matrixar.com(3).gif'/> :c
      &#160;
      <img border='0' src='http://www.matrixar.com/-98YuuiC8MIc/T67AzJ3Xf0I/AAAAAAAACI0/UtaFpgTb_PM/s1600/www.matrixar.com(4).gif'/> :d
      &#160;
      <img border='0' src='http://www.matrixar.com/-ikCFMFesIrE/T67BAtTQGhI/AAAAAAAACI8/AisqU7R--Yc/s1600/www.matrixar.com(5).gif'/> :e
      &#160;
      <img border='0' src='http://www.matrixar.com/-VSY5nbsSEIs/T67BK3G-B6I/AAAAAAAACJE/n_fhk-2Ihqc/s1600/www.matrixar.com(6).gif'/> :f
      &#160;
      <img border='0' src='http://www.matrixar.com/-e9hytPNLXeY/T67BSj27JJI/AAAAAAAACJM/Rwonrid9oiQ/s1600/www.matrixar.com(7).gif'/> :g
      &#160;
      <img border='0' src='http://www.matrixar.com/-mT-nqGFvXec/T67BZDPxvxI/AAAAAAAACJU/fgTPtQNxMK8/s1600/www.matrixar.com(8).gif'/> :h
      &#160;
      <img border='0' src='http://www.matrixar.com/-xcMDAiCizIE/T67BfnBeWSI/AAAAAAAACJc/_OqmXLGhjLg/s1600/www.matrixar.com(9).gif'/> :i
      &#160;
      <img border='0' src='http://www.matrixar.com/-XJUn74vJTwo/T67BrafHO3I/AAAAAAAACJk/B40nJjxUxNE/s1600/www.matrixar.com(10).gif'/> :j
      &#160;
      <img border='0' src='http://www.matrixar.com/-JgARtAx7IHo/T67B2Db6LjI/AAAAAAAACJs/U1EWgczqOYY/s1600/www.matrixar.com(11).gif'/> :k
      &#160;
      <img border='0' src='http://www.matrixar.com/--K1Z6RvN57w/T67CCzlaGcI/AAAAAAAACJ0/iF2-osmFALE/s1600/www.matrixar.com(12).gif'/> :l
      &#160;
      <img border='0' src='http://www.matrixar.com/-c0DJDg4M2n4/T67CTf-xShI/AAAAAAAACJ8/BqUmJYoDBLI/s1600/www.matrixar.com(13).gif'/> :m
      &#160;
      <img border='0' src='http://www.matrixar.com/-zrvYy6caFXM/T67CZi7etnI/AAAAAAAACKE/iPJsX_duWjE/s1600/www.matrixar.com(15).gif'/> :n
      &#160;
      <img border='0' src='http://www.matrixar.com/-F2LUTd1hG_o/T67CfNLnIlI/AAAAAAAACKM/UHuPyigCX24/s1600/www.matrixar.com(16).gif'/> :o
      &#160;
      <img border='0' src='http://www.matrixar.com/-Vd6U_2eq_Gk/T67CosaWm8I/AAAAAAAACKU/JgnYMS4AJOc/s1600/www.matrixar.com(14).gif'/> :p
      &#160;
      <img border='0' src='http://www.matrixar.com/-faDYi6E_d6E/T67CybEuj1I/AAAAAAAACKc/nHxSH7KMSwY/s1600/www.matrixar.com(17).gif'/> :q
      &#160;
      <img border='0' src='http://www.matrixar.com/-2QiwXpJ7gxk/T67C41ItlCI/AAAAAAAACKk/8sba1I9fZOY/s1600/www.matrixar.com(18).gif'/> :r
      &#160;
      <img border='0' src='http://www.matrixar.com/-KUlSaDVWqW8/T67C_4ITH-I/AAAAAAAACKs/e6N7K2jJvl8/s1600/www.matrixar.com(19).gif'/> :s
      &#160;
      <img border='0' src='http://www.matrixar.com/-UC_5gE8LgaQ/T67DGU12FBI/AAAAAAAACK0/oHA628PaDhk/s1600/www.matrixar.com(20).gif'/> :t   <a href='http://www.matrixar.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
      </div></b:if>

      Step 4. Now search for this piece of code:

      </body>

      Step 5. And add the following code immediately above it:

      • For previous commenting system:
      <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/>
      • For threaded comments: 
      <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

      Step 6. Save the Template. Now, enjoy your comments!

      2013, By: Seo Master

      seo Recent Posts Widget with Thumbnails for Blogger/Blogspot 2013

      Seo Master present to you: A few days ago, I've posted a tutorial about How To Add A Simple Recent Posts Widget but today I want to present to you a very nice Recent Posts widget that comes along with posts thumbnails and post summary as well. If you want to know how to add this Recent Posts widget/gadget to your Blogger blog, then follow the steps below:

      recent posts, blogger widgets

      How to Add the Recent Posts Widget to Blogger

      Step 1. Go To Blogger > Layout and click on "Add a Gadget" link


      Step 2. From the pop-up window, scroll down and choose HTML/JavaScript


      Step 3. Paste inside the empty box, the following code:

      <div class="eggTray">
      <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
      "pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
      "hideHeader":"false","height":"500","count": 8 }</script>
      <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.matrixar.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.matrixar.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
      <style type=text/css>
      .eggTray {margin:10px 0px;padding:0px;}
      .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
      .pipesTitle {padding-top:0px;}
      .pipesDescription {display:true;}
      .ycdr {background:transparent url(http://www.matrixar.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
      .ycdr, .ycdr a {color:#999999;}
      .widget .popular-posts ul {padding-left:0;}
      </style>

      Step 4. Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://www.matrixar.com) and look to have no forward slash symbol "/" at the end of your url

      Note:
      • To disable the scroll bar, remove the number 500
      • By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
      • if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10

      Step 5. Save your widget. And you're done!

      If you need more help, leave your comment below.

      2013, By: Seo Master

      seo How To Add A Tabbed Navigation Widget to Blogger 2013

      Seo Master present to you: The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs.
      Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script.
      To add this widget to your blog, just follow the steps below:

      Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button

      Step 2. Expand the style of the template, by clicking on the sideways arrow before <b:skin> ... </b:skin>


      Step 3. Search using CTRL + F for the following tag:

      ]]></b:skin>




      Step 4. Just above it, add the following code:

      /* 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;
      }

      Step 5. Find the </head> tag and just above it, paste this script:

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

      Step 6. Finally, look for this line:

      <div class='column-right-inner'>

      Or if you use an old template of Blogger, search this line:

      <div id='sidebar-wrapper'>

      Step 7. Paste below one of these two lines, this code:

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

      Step 8. Save changes, and go to Layout and there you will see the new areas to add gadgets.


      You just have to click on Add a Gadget to add the gadget to the tab that corresponds, or drag a gadget you already have to that section.

      If you want to add more tabs, then just add before the last </div> a line like this:

      <b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>

      Note that each line you add should have a different ID, for example Tab5, Tab6, etc..

      You can add multiple tabs, just repeat the last step and likewise remember to change the name of the IDs.

      Remember that if your sidebar is too narrow, then you should not put a lot of tabs, or tab titles that are very long.

      You should also note that this gadget does not speed up the loading speed of the blog, is only to group gadgets into one, even, depending on the blog-may take a while to load the tabview.2013, By: Seo Master
      Powered by Blogger.