مشاركات عشوائية

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


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

مميزات الإضافة:

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

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

المعاينة:

معاينة اضغط هنا

طريقة تركيب الكود: 

  • ادخل على هذا المسار:

 لوحة التحكم => قالب => تحرير 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>

التعديل عن الكود:

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