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

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

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

معاينة

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

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AkwQLZ9Uc__194MIVCG0PxbleiGYLoOfDOuwj8mBmWTpsJNx0lyjTNH83alXcBELAUj-LqA0jmqCKiAxVkc2gGk-p4WTWbCAt1oZ6LXH7H2GDjyzIdj1oRSOx5QZzubysPT0taz0NQ3z/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 الخاصة بمدونتك
والكلمات العربية إستبدلها بما تجده مناسب لك

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