اضافة شريط المتابعه عبرالمواقع الاجتماعيه بشكل انيق وجذاب


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


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



۞ معاينه

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


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


<div id='social-sidebar'>
<ul><li>
<a class='entypo-twitter' href='https://twitter.com/albaadani1' target='_blank'>
<span>Twitter</span>
</a></li><li>
<a class='entypo-gplus' href='https://plus.google.com/u/0/b/115387305017738790650' target='_blank'>
<span>google+</span>
</a></li><li>
<a class='entypo-tumblr' href='http://www.tumblr.net/albaadani' target='_blank'>
<span>tumblr</span>
</a></li><li>
<a class='entypo-facebook' href='http://www.facebook.net/alb33dani' target='_blank'>
<span>facebook</span>
</a></li><li>
<a class='entypo-rss' href='http://feeds.feedburner.com/albaadani' target='_blank'>
<span>feedburner</span>
</a></li></ul></div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : /---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>


تخصيص الاضافه

   1- استبدال ماباللونalbaadani باسم حسابك في فيدبرنر
 2- استبدال ماباللونalbaadani1 باسم حسابك في تويتر
 3- استبدال ماباللونalb33dani باسم صفحتك في فيس بوك
 4- استبدال ماباللون115387305017738790650 باسم حسابك جوجل بلس
 5- استبدال ماباللونalbaadani باسم حسابك في تمبلر
وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق

هناك 31 تعليقًا:

  1. الردود
    1. العفو اخي شكرا لمرورك العطر تشرفت بزيارتك لمدونتي $-)

      حذف
  2. شكرا لك ,, لكن كيف اغيير مكان الاضافه ؟؟

    ردحذف
    الردود
    1. العفو اخي ,, اذا اردت تغيير مكان الاضافه فقم بتغيير كلمة left الموجوده في كود الاضافه الى right علما بان كلمة left مكرره لاكثر من خمس مرات قم بتغييرها بالكامل

      حذف
  3. الردود
    1. العفو اخي نورت المدونه

      حذف
  4. غير معرف25/10/13 13:50

    مشكور على الموضوع الرئع ده بس عايز أسألك إزي أقدر أبدل ( الحساب في فيدبرنر ) بحساب اليوتيوب .
    مشكور مرة تانية :-)

    ردحذف
    الردود
    1. قم بالبحث عن الرابط التالي
      http://feeds.feedburner.com/albaadani
      واستبدله برابط قناتك على اليوتيوب
      وايضا قم بالبحث عن الكود التالي
      <span>feedburner</span>
      وقم باستبدال كلمة feedburner بكلمة يوتيوب حسب رغبتك

      حذف
  5. في حال اريد ان اضيف يوتيوب ... (لقد ضفتها بالفعل) لكن لا يوجد ايقونة :/
    كيف يمكنني ان اضيف ايقونة ؟؟؟
    جزيل الشكر لك :)

    ردحذف
  6. الردود
    1. العفو ,, شكرا لمرورك العطر اخي

      حذف
  7. السلام عليكم أخي
    سؤالي أنه فجأة احتفت الأيقونات عندي
    ليش ؟

    ردحذف
  8. فجأة قمت بالإختفاء يا جلال ما السبب أتمنى أن تكون بخير و تعود للتدوين و الإبداع من جديد

    ردحذف
    الردود
    1. بعض الانشغالات اخي ولكن ان شاء الله ساعود قريبا

      حذف
  9. ابداع اخوي يسلموا على المواضيع المفيدة منتظرين الجديد تحية من عدن (h)

    ردحذف
    الردود
    1. اهلا بك اخي محمد , الابداع يكمن بمرورع العطر ,,, نورت المدونه (f)

      حذف
  10. اخ جلال كيف يمكنني تغيير لونها الاسود

    ردحذف
    الردود
    1. هي اصلا باللون الاسود اخي

      حذف
  11. انت فين من زمان ؟؟ انت ملك الويب من هذي اللحظة ... ياجلال انت نورت موقعي .... ربي يسعدك .... ويفرحك دووووم مثل مافرحتني .. انا سعيدة اني عرفتك ... متابعيتك دائما وشكرا لك جزيلا يا عسل ^_^

    ردحذف
    الردود
    1. الله يرضى عليكي اختي (f) (f) (f) (f) شكرا طيب كلامك ,,اسعدني كلامك ومرورك العطر

      حذف
  12. أنت ملك الإنترنيت شكرا لك مجهود رائع أخي جلال الكريم

    ردحذف
    الردود
    1. شكرا لك اخي اسعدني جدا كلامي

      حذف
  13. نتمنى منك المزيد ومشكوووووووووووووور اخي جلال

    ردحذف
    الردود
    1. ان شاء الله في القريب العاجل

      حذف
  14. ila kont baghi nhaid hadik lktba achno ghadin dir

    ردحذف
  15. ما شاء الله مدونتك في غاية السحر والترتيب الجميل
    كل التوفيق لك ياصديقي

    ردحذف
  16. انا قمت بعملة الاضافة وهي جميلة وتبعت شرحك ممتاز وخرجت من مدونتك كمرور الكرام بدون تعليق . نسيت ان اقول كلمة وبعدها تذكرتك دكرك الله بالشهادة
    اشكرك جزيل الشكر بارك الله فيك واصل وتميز

    ردحذف
  17. اخي كيف اضيف معهم زر لليوتيوب

    ردحذف