اضافة صندوق الكاتب في الشريط الجانبي sidebar

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

اضافة صندوق الكاتب في الشريط الجانبي sidebar

صورة للاضافة 'صندوق الكاتب في الشريط الجانبي sidebar' :

طريقة التركيب  صندوق الكاتب في الشريط الجانبي sidebar

إبحث عن </head> وأضف الكود التالي فوقه
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

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

/* صندوق المتابعة والإنضمام للمدونة  */
#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'> وأضف الكود التالي أسفله (تحته)

<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='_0aQ/W18//s1600/Boss-3-icon.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='https://www.facebook.com/almohtarif.arabic/' target='_blank' title='تابع أخر أخبارنا على فيس بوك'><i class='fa fa-facebook fa-fw'/>أعجبني</a></li>
<li class='sosmedarl-icon twitt'><a href='https://www.twitter.com/pro_arabic' target='_blank' title='تابعنا على توتر'><i class='fa fa-twitter fa-fw'/>تابعني</a></li>
<li class='sosmedarl-icon crcl'><a href='https://plus.google.com/+proarabic' rel='nofollow' target='_blank' title='أضفنا إلى دوائرك في جوجل بلس'><i class='fa fa-google-plus fa-fw'/>إنضمام</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>
مع مراعاة تغيير الأسماء والروابط المشار إليها ثم إحفظ القالب ومبرك عليك الإضافة الجديدة.

انضم الى فريق العمل و احصل على ميزات خاصة انضمام

احمد العربي

مدون معلوماتي متخصص في امن و حماية

اسمك هنا

معلومات عنك بعد انضمام الى فريق العمل

اسمك هنا

معلومات عنك بعد انضمام الى فريق العمل

صديقي. إذا أعجبك الموضوع رجاءً قم بإضافة تعليق لتشجيعنا علي إضافة المزيد ..

عدد التعليقات : 0