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

إذا كان لديك موقع أو مدونة تكتب فيها مقالاتك فلابد لك من بعض الإضافات اللازمة ومن بينها أزرار المواقع الإجتماعية والتي تضفي طابعا جماليا على الموقع 

ولإضافة أزرار المواقع الإجتماعية الجديدة على شكل ميترو METRO 
إتّبع مايلي :
إضغط على التخطيط ثم إضافة أداة وإبحث عن HTML/java script وضع داخلها الكود التالي :
يمكن سحب هذه الأداة فوق رسائل المدونة أو أسفلها ويمكنك التغيير في الحجم ليتناسب مع مدونتك وهذه الأزرار خاصة بمواقع :
FACEBOOK  -  TWITER  -  FEEDBURNER  -  GOOGLE+  - LINKEDIN

الكود :

"<style>
A:link {text-decoration: none; color: }.Mbt-Social-metro {
width: 960px;
float: right;
margin: 0;
padding: 1em 0; }
.Mbt-Social-metro ul { 
margin: 0;  padding: 0;}
.Mbt-Social-metro ul li {  
list-style:none; 
list-style-type: none;   
padding: 0; text-transform: none; 
margin:0; 
float: right;
display: inline-block; width: 20%; }
.Mbt-Social-metro ul li a { 
font-size:80%;
text-align : center;
color: #fff!important;   
display:block;  }
.Mbt-Social-metro ul li a:hover {  
color: #000!important;  
background-color: #e5e5e5; 
text-decoration: none;   }
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss { 
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; 
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; 
background-size: 30px; padding: 10px 50px;}
.Mbt-Social-metro ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; 
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; 
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; 
background-size: 30px; padding: 10px 50px; }
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {    
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {     
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.Mbt-Social-metro ul li { width: 100%; }
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/kinas29'>اشترك معنا عبر الخلاصات</a></li>
<li><a class='twitter' href='https://twitter.com/kinas29'>تابعتي على تويتر twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/kinas29'>تواصل معي عبر الفيس بوك</a></li>
<li><a class='google' href=' https://plus.google.com/u/0/108510761823631656796/posts '>تابعني على جوجل بلس</a></li><li><a class='linkedin' href='http://in.linkedin.com/in/kinas29'>LinkedIn تواصل معي على </a></li>
</ul>
</div>"



لتغيير عرض الإضافة لتناسب مدونتك غيّر الرقم الملوّن بالأزرق  960px
غيّر ماباللّون الأخضر حسب مواقعك الإجتماعية
غيّر ماباللّون الأحمر حسب رغبتك

                                           بالتـــــــــوفيــــــــــــــق