MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you:

 

The widgets on a Wordpress Blogs surely are well designed and coded but they look even better when they are bloggerized and made compatible to work in Blogger.  Last year we created Advanced Multi Tabbed Widget that was well appreciated by everyone and today we have yet another but far improved multi tabbed widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.

 

How To Add this Multi Tabbed Widget To Blogger?

I have divided the tutorial in three parts which are,

1. Adding the JQuery and JavaScript to your Blogger templates
2. Adding the CSS
3. Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Just below it paste the following code –> MBT Menu Tabs JavaScript
5. Save your template
6. Done!

2- Adding the CSS

1. Inside your template search for ]]></b:skin> again
2. Just above it paste the code below,

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Simply replace #A46F38 with the HexaDecimal Colour code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML

1. Now Search for <div id='sidebar-wrapper'>
2. Make sure the widgets box is unchecked.
3. Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                     
</div>   

<div style='clear:both;'/>                      
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                       
</div>   

<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>

</div>
<div style='clear:both;'/>

Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.

   4.  Now Go To Page Elements. You will see something like this,

Start adding your widgets and after you have added all your widgets then simply view your blog to see it in action. Done! :-)

2013, By: Seo Master

Seo Master present to you:

 

recently Facebook combined the Like and send button into a single plugin, making it more easy to add both the buttons with a single code. Further the like button is equipped with an additional comment functionality i.e. The visitors can comment on what they liked just under the button. Lets add this beautiful plugin to blogger.

 

 

Add The Facebook Like and Send Button To Blogger

 

1. Go To Blogger > Design > Edit HTML

2. Backup your template

3. Click Expand widgets templates box

4. Search for <data:post.body/>

5. and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

  6.  Hit save and you are done!

2013, By: Seo Master

Seo Master present to you:

 

LinkedIn is a social networking site for business purposes. It is counted amongst the top 30 websites. It was founded in 2002 and today it has around 100 Million active users. This counter is often not added by bloggers and is often under estimated but with LinkedIn's 47.6 Million monthly unique  visitors, make sure you are not missing a great blog and web Traffic source. To add LinkedIn counters to your blogger or blogspot blogs, kindly follow the steps below,

 

 

Add LinkedIn Share Count Buttons  To Your Blogs

 

1. Go To Blogger > Design > Edit HTML

2. Backup your template

3. Click "Expand widget templates" box

4. Search for this,

<data:post.body/>

To add the counter just below post titles then add anyone of the following codes above the code in Step#4 and if you wish to add the counter button to the bottom of posts then add any of the given codes below just below the code in step#4

Vertical Count

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

Horizontal Count

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>

No Count

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>

   5. Save your templates and you are done!

View your blogs to see it hanging. Have Fun! :)

2013, By: Seo Master