إضافة قائمه المتابعه عبر المواقع الاجتماعيه على شكل Metro

السلام عليكم ورحمة الله وبركاته
سوف نقوم بإضافة  قائمه المتابعه عبر المواقع الاجتماعيه على شكل Metro لمدونات بلوجر بشكل جديد وبعدة ألوان مصممة حسب ذوقكم والتي تظفي جمالية أكثر لمدونات بلوجروتزيدها احترافيه , تحتوي هذه الاضافه على قائمه افقيه متعددة الالوان تشمل اشهر مواقع التواصل الاجتماعي twitter ,Facebook ,Google+,feedburner, LinkedIn والذي بدورها تساهم في توسع مدونتك وزيادة متابعيها وزوارها

أنصحكم بوضع هذه الإضافة إما في أعلى المدونة أو أسفلها لكي يراها الزائر وتلفت انتباهه

كيفية اضافة الاداة : 

انتقل إلى لوح تحكم مدونتك: 

إختر "تخطيط" 

ثم إضافة أداة .

ثم اختر  HTML/Javascript

الآن الصق الكود التالي 

<style>

.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/'>اشترك معنا عبر الخلاصات</a></li>

<li><a class='twitter' href='https://twitter.com/'>تابعتي على تويتر twitter</a></li>

<li><a class='facebook' href='https://www.facebook.com/'>تواصل معي عبر فيس بوك</a></li>

<li><a class='google' href='https://plus.google.com/'>تابعني على جوجل بلس</a></li>

<li><a class='linkedin' href='http://in.linkedin.com/'>LinkedIn تواصل مع على </a></li>

</ul>

</div>

ابحث عن :
http://feeds.feedburner.com
و
https://www.facebook.com
و

http://in.linkedin.com/

و
https://plus.google.com
و
https://twitter.com

مع تغيير روابط الإضافة بحسب ما يناسب مدونتك

تم قم بحفض الاضافة ومبروك عليك مع تحيات ابراهيم شكري من مدونة محبي المعلوميات