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

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

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

مثال حي للاضافه


۞ معاينه

اين يمكنني ان اضع هذه الاضافه وفي اي اتجاه تكون اجمل؟

مكان وضع الإضافة مهم جدا لإقبال الزوار عليها , فهناك اماكن لا يقترب الزائر منها ,  فالمكان الامثل لوضع هذه الإضافة
إما على اعلى المدونه (تحت الهايدر)،او اسفل المدونه (فوق الفوتر)،  وهذا لتظهر افضل نتائج للإضافة,

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


1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي


<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/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>
تخصيص الاضافه
  1- استبدال ماباللونalbaadani باسم حسابك في فيدبرنر
 2- استبدال ماباللونalbaadani1 باسم حسابك في تويتر
 3- استبدال ماباللونalb33dani باسم صفحتك في فيس بوك
 4- استبدال ماباللون115387305017738790650 باسم حسابك جوجل بلس
 5- استبدال ماباللونjalal-albaadani باسم حسابك في لينكدين
 6-  لتغيير عرض الاضافهwidth: 960px; قم بتغيير القيمه فقط

وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق 

هناك 6 تعليقات:

  1. اخى العزيز اضافه رائعه جدااااااااااااا شكرا على الشرح المفصل

    لقدر ارسلت لك رساله عن طريق نموذج التبادل الاعلانى ولكنك لم ترد على
    ارجو الرد

    ردحذف
    الردود
    1. نعم اخي ولكن ترتيب مدونتك يتعدى الـ 2 مليون في اليكسا لذى ارجو المعذره اخي

      حذف
  2. شكرا جزيلاا على الرد ومع ذلك لن ازيل اعلانك من المدونه D:

    ردحذف
  3. اخي كيف حصلت على الدومين ارجو الرد ;-(

    ردحذف
    الردود
    1. انظر الى الصوره
      http://im31.gulfup.com/b3KQ9.png

      حذف
  4. أخي ممكن مساعة اي الحجوم التي يجب تغيرها لتصغير حجمها
    http://im90.gulfup.com/os1Gvz.png

    ردحذف