معهد خبراء بلوجر - اضافة تابعني عبر المواقع الاجتماعيه على شكل قائمة مترو Metro

السلام عليكم ورحمة الله وبركاته
سوف نقوم بإضافة " قائمه المتابعه عبر المواقع الاجتماعيه على شكل Metro " لمدونات بلوجر بشكل جديد بل بأشكال جديدة وبعدة ألوان مصممة حسب ذوقكم والتي تظفي جمالية أكثر لمدونات بلوجروتزيدها احترافيه , تحتوي هذه الاضافه على قائمه افقيه متعددة الالوان تشمل اشهر مواقع التواصل الاجتماعي twitter ,Facebook ,Google+,feedburner, LinkedIn والذي بدورها تساهم في توسع مدونتك وزيادة متابعيها وزوارها
http://2.bp.blogspot.com/-CtKHB5un95...600/ljvvvv.png
أنصحكم بوضع هذه الإضافة إما في أعلى المدونة أو أسفلها لكي يراها الزائر وتلفت انتباهه
طريقة اضافة هذه الإضافة لمدونتك
1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اختر HTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي

كود بلغة HTML:

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

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

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

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

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

</ul>

</div>

مع تغيير روابط الإضافة بحسب ما يناسب مدونتك
اذا أعجبتك الإضافة فلا تبخل علينا بتعليقك على الموضوع
المصدر أرجو الدخول طلباً وليس أمراً