إضافة أزرار تابعني على يوتيوب وفيسبوك وتويتر وجوجل والخلاصة ، تتغير عند المرور عليها

السلام عليكم ورحمة الله وبركاته :
كنا قد شرحنا إضافة  تابعني "متحركة صعودا وهبوطا مع حركة الزائر" الخاصة بمواقع التواصل الإجتماعية 
واليوم ان شاء الله سنشرح إضافة سهلة جدا وبسيطة لكنها مختلفة تجزب انتباه الزائر عندما يمر عليها الماوس

ادخل الى لوحة التحكم في مدونتك
اذهب الى التخطيط واختار اضافة أداة javascript/html بدون عنوان ثم قم بوضع هذا الكود داخلها.

<style>
/*--------B2W Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>

<div class='touchme'>
<!--RSS-->
<a class='rss' href="ضع هنا رابط الخلاصة" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="ضع هنا رابط جوجل بلس" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="ضع هنا رابط الفيسبوك" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="ضع هنا رابط تويتر" rel='nofollow' target='_blank' ></a>
</div>

ثم قم بوضع الروابط الخاصة بك - واخيرا اضغط على حفظ 

مبروك الاضافة الجديدة

أتمنى تكون الإضافة عجبتكم.