هذا الشرح حصري...مقدم لمعهد خبراء بلوجر

Add Social Sharing/Bookmarking Widget With Cool Hover Effect

Here i am giving that widget and added a cool hover effect with CSS3 for you. If you like it then you can use in your blog :)

Step 1: Adding Css code

1. Login to Blogger Dashboard > Design tab > Edit Html
2. Click on Expand Template widgets ckeckbox
3. Search for ]]> tag and put below code above it!

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtpxqbku2Ppq6b-mif2A750HnEfZ3t5JZo_6X60x-K1aJxqFu-vvr4AqLJqAs-bLbwgWK_Cf1B6L_rbVT7K4uJaFVfwHRZ35IzNhERCgpFFk_EzydEFLhzTwb995OlzeRwVI9bSJHVJuO/') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }#w2b-share ul li a.twitter {background-position: -0px -0px; }#w2b-share ul li a.twitter:hover {background-position: -0px -33px; }#w2b-share ul li a.facebook {background-position: -32px -0px; }#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }#w2b-share ul li a.stumbleupon {background-position: -64px -0px; }#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }#w2b-share ul li a.digg {background-position: -192px -0px; }#w2b-share ul li a.digg:hover {background-position: -192px -33px;}#w2b-share ul li a.reddit {background-position: -160px -0px; }#w2b-share ul li a.reddit:hover {background-position: -160px -33px;}#w2b-share ul li a.google {background-position: -128px -0px; }#w2b-share ul li a.google:hover {background-position: -128px -33px;}#w2b-share ul li a.del-icio-us {background-position: -480px -0px; }#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}#w2b-share ul li a.mixx {background-position: -96px -0px; }#w2b-share ul li a.mixx:hover {background-position: -96px -33px; }#w2b-share ul li a.technorati {background-position: -416px -0px; }#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}#w2b-share ul li a.linkin {background-position: -256px -0px; }#w2b-share ul li a.linkin:hover {background-position: -256px -33px;}#w2b-share ul li a.yahoobuzz {background-position: -448px -0px; }#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}#w2b-share ul li a.myspace {background-position: -512px -0px; }#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}#w2b-share ul li a.more {background-position: -576px -0px; }#w2b-share ul li a.more:hover {background-position: -576px -33px;}

Step 2: Adding Widget Code
1. Search for tag
2. And Put Below Code immediately after it! & Save your Template

<b:if cond='data:blog.pageType == "item"'> <div id='w2b-share'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/>