Add CSS Based Social Bookmarking Widget To Blogger Blogs & Websites

This particular widget runs on the full regarding 20 Icons nevertheless amazingly it can be super-fast and lots having with seconds. We merged most 20 Icons into one particular massive graphic and used CSS Picture whipping method to produce the actual icons show up with proper roles. Fortunately that preserves many heap occasion, considering that the internet browser can heap most photographs at a time and doesn't have to contact the actual graphic server more than once for importing the actual photographs.

Screen Shot

Now Follow the Easy Steps...

Step 1: Go to Blogger>Template> Edit HTML

Step 2: Search For ]]></b:skin> 

Step 3: And Paste the Below code just Above this ]]></b:skin>

.mbt-bookmarking a { 
display:block; 
height:42px; 
width:48px; 
padding:0 9px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1FzPP2fptNaCK5B-T24rewNgoWZaTTwYrQTTJSwOXTPsWJWX8nR3QQVbe-0rVnfQeQTS2jAFOlGlActiMrzWD5QnEEOZsXy0npM29ckro3H8uKSXaDM1tZZELqgJOC8k8BwZ_B62yuv7/s1600/flapper.jpg) no-repeat; 
} 
.mbt-bookmarking a.delicious { 
background-position:0px 0px; 
} 
.mbt-bookmarking a.delicious:hover { 
background-position:0px -43px; 
} 
.mbt-bookmarking a.digg { 
background-position:0px -86px; 
} 
.mbt-bookmarking a.digg:hover { 
background-position:0px -129px; 
} 
.mbt-bookmarking a.stumbleupon { 
background-position:0px -344px; 
} 
.mbt-bookmarking a.stumbleupon:hover { 
background-position:0px -387px; 
} 
.mbt-bookmarking a.technorati { 
background-position:0px -430px; 
} 
.mbt-bookmarking a.technorati:hover { 
background-position:0px -473px; 
} 
.mbt-bookmarking a.twitter { 
background-position:0px -516px; 
} 
.mbt-bookmarking a.twitter:hover { 
background-position:0px -559px; 
} 
.mbt-bookmarking a.facebook { 
background-position:0px -172px; 
} 
.mbt-bookmarking a.facebook:hover { 
background-position:0px -215px; 
} 
.mbt-bookmarking a.reddit { 
background-position:0px -258px; 
} 
.mbt-bookmarking a.reddit:hover { 
background-position:0px -301px; 
} 
.mbt-bookmarking a.yahoo { 
background-position:0px -602px; 
} 
.mbt-bookmarking a.yahoo:hover { 
background-position:0px -645px; 
} 
.mbt-bookmarking a.rss { 
background-position:0px -774px; 
} 
.mbt-bookmarking a.rss:hover { 
background-position:0px -817px; 
}

Step 4: Now Search this piece of Code <data:post.body/>

Step 5: Copy the Following code and paste just below this <data:post.body/>

<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :&gt;'/>

<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</b:if></div>

You can replace the Bold text "Kindly Bookmark and Share it" With any Statement You like and Change the color of Statement by changing this #289728.

Now finally Save your template and view your Blog and Enjoy.. :)

Note

If You Want large icon Then paste the Following Code ]]></b:skin> Instead of Step 3.

.mbt-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:left;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl2TRqEGeDLgGPy3ro07z5okUEYgwb7sLuU6Q3CXx6G-eeMmmo9Nd1PrG9H5gyJYF3IfwTp6eRsQwbXIr8omZXwxKb381Q324jcgUJHiWl9SFXH__adiGBNTcdtpZZs6qZUmyUsGnWYe/s1600-h/flapper2.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.mbt-bookmarking a.digg {
background-position:0px -114px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -171px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.mbt-bookmarking a.technorati {
background-position:0px -570px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.mbt-bookmarking a.twitter {
background-position:0px -684px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.mbt-bookmarking a.facebook {
background-position:0px -456px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.post-bookmark a.reddit {
background-position:0px -342px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -798px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.mbt-bookmarking a.rss {
background-position:0px -912px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -969px;
}

That's all 

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: ITmaza