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

Seo Master present to you:

 

Yahoo Buzz is a community-based news article website, just like Digg, that combines the features of social bookmarking and syndication through a user interface that allows editorial control.
Yahoo Buzz has got many different sharing buttons.
Integrating this into blogger will require some template edits.
This post explains how to add Yahoo! Buzz buttons on your every Blogger post. It's really very simple!

To add this widget to your blog, follow these instructions:

 

Step 1:
Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.



Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Square Button:
Case 1:

To place the yahoo buzz button with counter at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.
Case 2:

To place the yahoo buzz button with counter at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>
</div>

NOTE: Don't forget to save the template.
NOTE: Browse more buttons from here grab the code and replace ARTICLEURL with<data:post.url/>.
NOTE: To place the yahoo buzz button at the end of your post paste this codeafter/below it.
NOTE: You can also include the first and last line of to place the button left or right.
i.e
<div style="float:left;padding:4px;">
    |
    |
code here
    |
    |
</div>
This will put a Yahoo Buzz Button to every post. But It won't let you choose which post you want to include or exclude a button.

2013, By: Seo Master

Seo Master present to you:

Orkut has recently released orkut Share API for its users. Orkut users can now share and promote interesting content from the Internet with their orkut friends easily with just few clicks. The shared content will appear in their activity updates.
Most of the bloggers and webmasters use Facebook share option to share and promote their content on Facebook. Its one of the best methods to promote their content. It seems Orkut is following Facebook in looks and in features too.

 

To add this button go to Layout > Edit HTML and click on Expand Widget templates, copy and paste the following code above </head>

<!--orkut share starts here-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&#39;orkut.share&#39;, &#39;1&#39;);
google.setOnLoadCallback(function() {
var params = {};
params[google.orkut.share.Field.TITLE] = &#39;<data:blog.pageName/>&#39;;
params[google.orkut.share.Field.DESTINATION_URL] = &#39;<data:blog.url/>&#39;;
var connection = new google.orkut.share.Connection(params);
document.getElementById(&#39;orkut-share&#39;).onclick =
function(e) { connection.send(&#39;orkut.com&#39;, {}); };
}, true);
</script>
<!--orkut share end-->

Now search for the <data:post.body/> tag in your template and add the below code after this tag :

<b:if cond='data:blog.pageType == "item"'>
<span id="orkut-share" style="cursor:pointer; border:1px solid black">
<img src="http://code.google.com/apis/orkut/docs/images/share.gif"/>
</span>
</b:if>

If you dont find<data:post.body/> then search for <div class='post-header-line-1'> and paste the above code below this tag.
That’s all. Save your template and see the changes. If you face any problems please do add comments.


2013, By: Seo Master

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