إضافة أزرار المواقع الإجتماعية على شكل ميترو 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/ali29'>اشترك معنا عبر الخلاصات</a></li>
<li><a class='twitter' href='https://twitter.com/ali29'>تابعتي على تويتر twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/ali29'>تواصل معي عبر الفيس بوك</a></li>
<li><a class='google' href=' https://plus.google.com/u/0/108510/posts '>تابعني على جوجل بلس</a></li><li><a class='linkedin' href='http://in.linkedin.com/in/ali29'>LinkedIn تواصل معي على </a></li>
</ul>
</div>"



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

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