18 يناير، 2016

مدون محترف اضافات بلوجر إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر

إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر

الكثير من المدونين يقومون بإضافة صندوق إعجاب الفيسبوك، صندوق المُتابعة عبر تويتر، صندوق المتابعة عبر جوجل بلس.
وكُثرة هذه الإضافات تقوم بجعل المدونة بطيئة وهذا الأمر خاطئ لإن مُحركات البحث أصبحت تُدقق على كل شيء بسبب الخوارزميات الجديدة
مِنها السرعة، سيو  المدونة، توافق الموقع مع الهواتف النقالة.
 كل هذه العوامل تؤثر على ترتيب وظهور المدونة او الموقع في محركات البحث.

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

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


إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر


  1. ادخل لوحة تحكم بلوجر
  2. انقر على خانة قالب
  3. اضغط على تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* About Me */
#HTML68 .aboutind-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.aboutind-img{position:relative;max-height:140px;overflow:hidden}
.aboutind-img img {max-width:100%;width:100%;transition:all .6s;}
.aboutind-img:hover img{transform:scale(1.2) rotate(-10deg)}
.aboutind-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.aboutind-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.aboutind-float{text-align:center;display:table;width:100%;height:100%}
.aboutind-float a{background:rgba(243,156,18,.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s}
.aboutind-float:hover a{background:#404040;color:#fff;}
.aboutind-float a i{font-weight:normal;margin:0 0 0 5px}
.aboutind-wrpicon{display:block;margin:15px auto;position:relative;}
.aboutind-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .aboutind-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .aboutind-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .aboutind-icon i{font-family:fontawesome;margin:0 0 0 3px}
.aboutind-icon.fbl a{background:#3b5998}
.aboutind-icon.twitt a{background:#19bfe5}
.aboutind-icon.crcl a{background:#d64136}
.aboutind-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040}
.extender .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;}
.aboutind-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.aboutind-info p{margin:5px 0}
.aboutind-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.aboutind-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.aboutind-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.aboutind-info h4:before {margin-right:-50%;text-align:left;}

ابحث عن الوسم <div id='sidebar-wrapper'>; و اضف الكود التالي تحته
          <b:widget id='HTML68' locked='false' mobile='no' title='إنضم إلينا' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='aboutind-img'>
<img alt='ايجي جيك' class='img-responsive' height='auto' src='http://1.bp.blogspot.com/-xNYUFY4sK8k/VpU28DzbGfI/AAAAAAAAOuI/tTKqhxP2HVg/s1600/indz.jpg' title='Indzign' width='300'/>
<div class='aboutfloat-img'><span class='aboutind-float'><a href='https://www.blogger.com/follow-blog.g?blogID=6023018209771894916' rel='nofollow' target='_blank' title='انضم لأصدقاء الموقع'><i class='fa fa-user'/> انضم لأصدقاء الموقع</a></span></div>
</div>
</div>
<div class='aboutind-info'>
<h4><span>ايجي جيك</span></h4>
<p>مدونة تهتم بعالم التقنية&#1548; وأخبار الإنترنت</p>
</div>
<div class='aboutind-wrpicon'>
<ul class='extender'>
<li class='aboutind-icon fbl'><a href='//www.facebook.com/aegygeek' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook fa-fw'/> أعجبني</a></li>
<li class='aboutind-icon twitt'><a href='//twitter.com/mudwnp' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter fa-fw'/> متابعة</a></li>
<li class='aboutind-icon crcl'><a href='//plus.google.com/u/0/112703182151814934586' rel='nofollow' target='_blank' title='انضم لنا على جوجل+'><i class='fa fa-google-plus fa-fw'/> إنضمام</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
          </b:widget>

إعدادات الكود

إستبدل الرابط الذي باللون الأزرق برابط صفحتك على فيسبوك
إستبدل الرابط الذي باللون الأزرق الفاتح برابط صفحتك على تويتر
إستبدل الرابط الذي باللون البرتقالي برابط صفحتك على جوجل بلس
وإستبدل الرابط الذي باللون الاحمر بالـ ID الخاصة بمدونتك
والكلمات العربية إستبدلها بما تجده مناسب لك

أتمنى أن تُعجِبكم الإضافة. من يواجه مشاكل في تركيبها أترك تعليق وسوف يتم الرد عليك بالحل

مواضيع ذات صلة
إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر
4 / 5
بواسطة

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

  1. شكرا علي الموضوع الرائع ممكن تقول ازاي اعرف id بلوجر

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      من لوحة التحكم في بلوجر فوق في الرابط سوف تجد blogID=4831512163046809118
      خذ الرقم الخاص بك واستبدله بالرقم الموجود في الإضافة

      حذف
    2. لا شُكر على واجب صديقي =r

      حذف
  2. السلام عليكم اخى هل ممكن اضافة الكود الثانى من التخطيط بدلا من صفحةة التعديل

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله
      تستطيع إضافته من التخطيط ولكن يجب ان تمسح اول 7 اكواد من فوق
      واخر وسمين من اخر الكود
      جرب وردلي خبر
      ولكن لو تم إضافتها من صفحة التعديل افضل
      فيمكنك إضافتها تحت المشاركات الشائعة او اي مكان في السايدبار

      حذف
  3. المعاينة لاتعمل وممكن التواصل معك عبر الفيس بوك =u

    ردحذف
    الردود
    1. أصبحت المُعاينة تعمل، يُمكنك التجربة الآن
      بالنسبة لفيسبوك يُمكنك التواصل معي عبر صفحتنا
      اكتب في فيسبوك مدون محترف =q

      حذف
    2. أزال أحد مشرفي المدونة هذا التعليق.

      حذف
    3. يُمكنك التواصل معي عبر صفحتي صديقي
      ونعتذر لمسح التعليق بسبب الرابط

      حذف
  4. ممكن كود لوضع الاضافة في التخطيط =q

    ردحذف
    الردود
    1. تستطيع إضافته من التخطيط ولكن يجب ان تمسح اول 6 اكواد من فوق
      واخر وسمين من اخر الكود
      جرب وردلي خبر
      ولكن لو تم إضافتها من صفحة التعديل افضل
      فيمكنك إضافتها تحت المشاركات الشائعة او اي مكان في السايدبار

      حذف
  5. اضافة رائعة أخي الكريم =q _ حملة شاركنا لندعمك

    ردحذف
    الردود
    1. مرورك الرائع اخي الكريم
      ولكن الهاشتاغ لا يتم نشره في المواضيع فقط في موضوع الحملة

      حذف
  6. لا تعمل برجاء وضع الكود التحطيط بلتوينه x=

    ردحذف
    الردود
    1. المشكلة إذا عدلنا على الموضوع سوف يتم إعتباره على إنه جديد
      جرب إضافة الكود كاملاً في التخطيط

      حذف
  7. اخي لم استطيع ايجاد وسم div id='sidebar-wrappe
    هل لديك حل ؟

    ردحذف
    الردود
    1. قد يختلف الكود من قالب لاخر
      ابحث عن sidebar فقط

      حذف
  8. انا لم اجد الوسم الثاني

    ردحذف
    الردود
    1. الوسم الثاني يختلف من قالب لأخر
      حاول ان تبحث عن بدايته

      حذف
  9. اخى ارجوك حول تغير اخر كواد خاليه الى التخطيط لانى ابحث عن اخر كود لا اجده

    ردحذف
    الردود
    1. اهلًا صديقي
      يفضل إضافتها من القالب نفسه
      ابحث عن sidebar ولا تبحث عن الكود بالكامل

      حذف
    2. اوكى شكرا اخى سوف احوال =q

      حذف
  10. اخى انا لا اجده ارجو الرد او المساعده x=

    ردحذف
    الردود
    1. ممكن وضع رابط مدونتك

      حذف
    2. أزال أحد مشرفي المدونة هذا التعليق.

      حذف
    3. ابحث عن <aside id='side-kanan'>
      واضف كود الإضافة تحتها جرب وردلي خبر

      حذف
    4. لم ينج يزهالى هذه الرساله

      تعديل النموذجمعاينة النموذج الرجوع إلى الإعدادات الافتراضية لقوالب عناصر واجهة المستخدم التراجع عن التغييرات تنسيق النموذج
      The widget with id HTML68 is not within a section (actual parent element is: aside.) Every widget should be in a section.

      حذف
    5. هذا لأنه يوجد اضافة في مدونتك تحمل نفس وسم الاضافة هذه وهو HTML68
      قم بتغيير رقم 68 إلى أي رقم تحت الـ 100

      حذف
    6. اخى بيجيلى نفس الرسالة وغيرت الرقم كذا مرة ونفس الرساله بتجيلى ؟

      حذف
    7. قم بوضعها فوق آداة المشاركات الشائعة إذا عملت
      هذا معناه ان مكان الكود خطأ

      حذف
  11. وبالنسبه اللى ملاقش الكود التانى فيه ممكن أستبدله بكود أخر أنا بستخدم قالب Revoltify موجود عند حضرتك معلشى اخى بتثاقل عليك :)

    ردحذف
  12. ولا يهمك صديقي
    تفضل أبحث عن id='sidebar-wrapper
    وأضف الكود الخاصة بالصندوق تحته

    ردحذف
  13. الردود
    1. لا شكر على واجب صديقي
      بالتوفيق

      حذف
  14. انا ببحث ولكن مبيجليش نتاااااااااااااااااااائج

    ردحذف
    الردود
    1. قد يكون معرف السايدبار عندك مُختلف

      حذف
  15. ممكن تحطلي الكود جاهز لوضعة في التخطيط

    ردحذف
    الردود
    1. يُفضل وضعه كما هو مذكور في الموضوع
      لأنه سوف يُعتبر كأداة في التخطيط

      حذف
  16. الكود الاخير لم اجده فى القالب الخاص بى وهو invison ارجو ان حضرتك تقولى حل

    ردحذف
    الردود
    1. صديقي يوجد ملف شرح في القالب قم بمراجعته

      حذف
    2. أخى اخر كود انا مش لاقية ادينى الكود الاخير فى هذا القال invison عشان انا مش لاقيه فى الشرح

      حذف
    3. هو بيبعتلى الرسالة دى لما باجى أحفظ
      The widget with id HTML68 is not within a section (actual parent element is: div.) Every widget should be in a section
      ارجو حل

      حذف
    4. غير رقم HTML68
      وقم بوضع الكود فوق آداة المشاركات الشائعة

      حذف
    5. أغيرة لكام اصل باغيرة لاى رقم بردو يبعتلى نفس الرسالة بس مغير الرقم

      حذف
    6. لو فضل يظهر خطأ معناها مكان الإضافة خاطيء

      حذف
  17. الردود
    1. لا شكر على واجب صديقي
      بالتوفيق =e

      حذف
  18. تمت لكن اخى الصفحة بقت تروح شمال ويمين بتتحرك فمسحت الاضافة بس قولى ماهو الحل

    ردحذف
    الردود
    1. صديقي هذا لأن مكان تركيب الإضافة خاطيء
      قد تكون وضعتها بداخل إضافة المشاركات الشائعة
      حاول أن تفضل بين نهاية وبداية كل كود

      حذف
  19. هل توجد لديكم قناة على اليوتيوب

    ردحذف
    الردود
    1. يوجد لدينا قناة ولكنّ لا نستخدمها للأسف

      حذف
  20. الردود
    1. الكود الثاني يختلف من قالب لآخر
      انت قم بوضعه فوق آداة المشاركات الشائعة
      او فوق آول أداة في السايدبار

      حذف
  21. اخي هل يمكن تبديل الصورة
    ارجو الرد

    ردحذف
    الردود
    1. ابحث عن
      http://1.bp.blogspot.com/-xNYUFY4sK8k/VpU28DzbGfI/AAAAAAAAOuI/tTKqhxP2HVg/s1600/indz.jpg
      واسبتدلها

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r