إضافة أزرار للمواقع الاجتماعية

بسم الله الرحمن الرحيم.

والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة والسلام. 

السلام عليكم ورحمة الله تعالي وبركاته. 

اليوم اقدم لكم أضافة لـ بلوجر وهي إضافة أزرار للمواقع الاجتماعية.
اليوم سوف اقدم لكم إضافة جميلة لبلوجر وهي اضافة الاجتماعية بتأتير CSS للمواقع الأجتماعية تفيدك هذه الاضافة بالمنح لزوارك من متابعة مدونتك و التواصل بكل جديد ... تابعوا معي :

شرح التركيب :

• اذهب الي "لوحة التحكم".
• 
  
• ثم نختر "التخطيط".
• 
  
• ثم نختر "أضافة اداة".
• 
  
• ثم نختر "HTML/JavaScript".  

<ul id='jocial'>

<li><a class='icon facebook' href='#'/></a></li>

<li><a class='icon twitter' href='#'/></a></li>

<li><a class='icon googleplus' href='#'/></a></li>

<li><a class='icon rss' href='#'/></a></li>

</ul>
<style>
#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("http://im78.gulfup.com/N7YIVk.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://im78.gulfup.com/b5tjAo.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://im78.gulfup.com/K8sqNh.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("http://im78.gulfup.com/ICMVij.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://im78.gulfup.com/b5tjAo.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://im78.gulfup.com/K8sqNh.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("http://im78.gulfup.com/ICMVij.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

التعديلات علي الكود : 

غير "#" بالرابط المناسب.

من فضلك اضغظ لايك لمشاهدة لينك التحميل