إضافة أزرار المشاركة العائمة على يمين كل موضوع أو صفحة للبلوجر

   يبدو أن أزاز المشاركة أصبح لها الدور الكبير في نشر المعلومات، الأخبار، والمقالات بالمواقع الاجتماعية، لذى فكل المواقع الاجتماعية خصصت وقتا ومجهودا لتحصيص وتطوير هذه الأزرار، للتسهيل المشاركة على المستخدمين، وفي الجانب الأخر، يقوم المبرمجون والشركات الأخرى والمستخدمون العاديون بتطوير سبل لجمع هذه الأزرار في تلاحم لتسهل أكثر عملية المشاركة، وقد بادرت العديد من المواقع في هذا التطوير،  ومن ضمنها addthis.com و shareaholic.com واللذان يعتبران من أكثر المواقع التي استقطبت العديد من مستخدمي أزرارها. لكني مع ذلك فضلت نوعا أخر من الأزرار التي لا توفرها هذه المواقع حتى وإن كانت بسيطة، إلا أنها أكثر مرونة مع المدونة.

   وقد حاولت البحث عن أسهل الطرق لإضافة هذه الأزرار، لتسهيل الحصول عليها بالنسبة للمستخدم المبتدئ، وهي عبارة عن كود يمكن التعديل عليه حسب رغبات المستخدم، في إعداده ليتناسق مع مدونتك، إذ يمكنك تغير لون الخلفية، إضافة أو إزالة الأزرار التي تريد، إعادة ترتيبها، وتغيير مكانها على الصفحة.

26-07-2011 19-44-51

  • 1- مميزات هذه الأزرار:
  1. سهلة التعديل والتركيب
  2. قابلية إضافة أزرار جديدة أو إزالتها
  3. المرونة، التلاؤم والتناسق مع المدون
  • طريقة التثبيت بمدونات بلوجر:

أعمل على الشرح بإستخدام منصة بلوجر الجديدة. الرابط

  1. تسجيل الدخول لحسابك لدى Blogger
  2. إختر المدونة التي ترغب في تركيب الإضافة بها
  3. إنتقل للتبويب : التخطيط
  4. إضغط زر أضف أداة أيما شئت ( الأزرار لا تتأثر بكان إضافتها )
  5. أنسخ الكود التالي ( كود معدل ) … تم إضافة الشبكة ( ثبت )
    <!-- floating page sharers Start amsomr.blogspot.com-->
    <style type="text/css">
    #pageshare {position:fixed; bottom:45%; right:100px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#F4F4F4;padding:0 0 2px 0;z-index:10;}
    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
    .fb_share_count_top {width:48px !important;}
    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
    </style>
    <div id='pageshare' title="Get this from amsomr.blogspot.com">
    <div class='sbutton' id='tb'>
    <script src="http://thabbet.com/stframe/"></script>
    </div>
    <div class='sbutton' id='fb'>
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </div>
    <div class='sbutton' id='rt'>
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="amsomr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
    <div class='sbutton' id='gplusone'>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="tall"></g:plusone>
    </div>
    <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.amsomr.blogspot.com/">widget</a></div>
    </div>
    <!-- floating page sharers End -->



  6. احفظ الأداة ثم الترتيب، وانتقل للمدونة لمشاهدة التغييرات 




  • 2- تخصيص الإضافة:




  1. المحاذاة العمودية:  لتغيير القيم الأصلية للكود عليك بتغيير bottom، قيمة الرمز متعلقة بنسبة بعد الإضافة عن أسفل الصفحة، يمكن التغيير عليها كما تشاء لتتناسب مع تنسيق الصفحة.


  2. المحاذاة الأفقية: يمكنك تغيير قيمة margin-left الموجودة بالسطر الثالث، وذلك بتغيير القيمة المعطاة لقيمة  سالبة أو موجبة حسب رغبتك إما لظهور الإضافة إما على الجانب الأيمنأو الأيسر للمدونة.


  3. إضافة أو تغيير الأزرار: يمكنك إضافة أو إزالة أي رز أعجبك وذلك بإستعمال الكود التالي، حيث يمكنك من إضافتها بسهولة تامة. حيث يمكن



    <div class='sbutton'>
    الكود الخاص بالزر الذي تريدك يكون هنا
    </div>





  • 3- أسئلة وإستفسارات:



يمكنني الإجابة عن أي أسئلة منكم هنا بالرد عليها تحت كل رد، ولأي إضافات يرجى طرحها بالرد وسأقوم بإضافتها هنا، شكرا على تفهمكم…