إضافة أداة انضمام ومتابعة للمدونة بشكل احترافي

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

تركيب الإضافة 

 قم بالبحث فى قالب مدونتك على الوسم

 </head> وقم بوضع فوقه الكود التالى قبلة 

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

قم بالبحث عن الوسم ]]></b:skin> 

وقم بوضع فوقه الكود التالى قبله

/* Sosial Media Widget */
.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;left:0;right: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%;left: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 5px 0 0}
.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: 'Droid Arabic Kufi',serif;margin:0 3px 0 0;margin-top: 10px;text-decoration: none;}
.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;text-decoration: none;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0;font-family: 'Droid Arabic Kufi',serif;}
.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;font-family: 'Droid Arabic Kufi',serif;}
.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-left:-50%;text-align:right;}

 الأن الكود الأخير فى الإضافة وهذا الكود يتم وضعه

 فى أداة HTML/JavaScript من التخطيط

<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data: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='Judul Blog' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjULgeL9jIYudKqBzXQKW11igQYkX4aPgp6DkwCepfoaVPSM4KqsziY6ZILDd7osSZcGWqXTROforL2Ud04qrvNTyUi8TclzT9zbIdTMdOX57x0tky5z83ESYdV7VAnh-k2M_nv2jPYC9/s1600/1.jpeg' 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'/> الأنضمام لأعضاء المدونة</i></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='فيسبوك'/>فيسبوك</i></a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='تابعنا على تويتر'><i class='تويتر'/>تويتر</i></a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل بلس'><i class='جوجل بلس'/>جوجل بلس</i></a></li>
</ul>
</div>
</div>
</div>

يمكن التعديل على الكلمات التى فى الإضافة بالذى تريدها 

اللون الأخضر الخلفية

اللون الأزرق رابط الفيس بوك

اللون البني رابط التويتر

اللون الأحمر رابط جوجل بليس

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