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

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

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

معاينة

طريقة التركيب

إبحث عن </head> وأضف الكود التالي فوقه

html<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

ثانيا إبحث عن ]]></b:skin> وأضف الكود التالي فوقه

CSS/* صندوق المتابعة والإنضمام للمدونة  */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-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}
.sosmedarl-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}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 0 0 5px}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-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 .sosmedarl-icon i{font-family:fontawesome;margin:0 0 0 3px}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-right:-50%;text-align:left;}

ثالثا إبحث عن <b:section class='sidebar' id='sidebar' preferred='yes'> وأضف الكود التالي أسفله (تحته)

html<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <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='sosmedarl-img'>
<img alt='إسم مدونك' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAyFTgxq2Frerc-kHIwDsWfuTcoX-_e9SLBhyphenhyphenQ6Vz6w9Q0EVQXf0HHibNBozsqKMYSXYO-JSW5FL52l75bVvTTgecOg6KVUjamrY1qrtDs2uXmvsLfFQd7xMjnpbFM2JzHcWGuLzZBBdVK/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>إسم مدونتك</span></h4>
<p>وصف قصير للمدونة</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='تابع أخر أخبارنا على فيس بوك'><i class='fa fa-facebook fa-fw'/>أعجبني</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='تابعنا على توتر'><i class='fa fa-twitter fa-fw'/>تابعني</a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='أضفنا إلى دوائرك في جوجل بلس'><i class='fa fa-google-plus fa-fw'/>إنضمام</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>

مع مراعاة تغيير الأسماء والروابط المشار إليها
ثم إحفظ القالب ومبرك عليك الإضافة الجديدة
هكذا يكون درسنا قد إنتهى إلى تدوينة جديدة إنشاء الله

محمد 4/09/2016

إضافات بلوجر Css