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

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

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

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

طريقة اضافة هذه الإضافة لمدونتك

1- انتقل إلى لوحة تحكم مدونتك

2- إختر "تخطيط" ثم إضافة أداة ثم اختر HTML/Javascript

3- والآن الصق داخل المستطيل الكود التالي

<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>

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

اذا أعجبتك الإضافة فلا تبخل علينا بتعليقك على الموضوع 

في أمان الله

من فضلك شارك هذا الموضوع اذا اعجبك

الموضوع من طرف: محمود عاشور

محمود عاشور ،مدون مصري أعشق البلوجر واتمنى لو أصبح مصمم مشهور, مهتم بجديد البرامج والتكنولوجيا, تابعوني: الفيسبوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم