اضافة صندوق انضام مع ازرار مواقع تواصل الاكثر جاذبية

  

اضافة صندوق انضام مع ازرار مواقع تواصل الاكثر جاذبية 

حقيقية تعتبر هذه الاضافة نوعا ما مهمه للمدونة فائدتها تعرض روابط صفحات بالفيسبوك وجول بلس والخ..... وايضا زر الانضمام الذي عندما يقوم زائر ما في طلب انضام سيصبح من اعضاء متابعين مدونتك ورغم ذلك فهي متجاوبة مع هواتف بالنسبة لشكلها والالوان الرائعه خاص بها 

شرح التركيب :- كما اعتندا بالخطوات سابقة ايضا توجه للتخطيط من لوحة تحكم واضف HTML/JavaScript والصق كود بها

<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-Pro7web-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-Pro7web-img{position:relative;max-height:140px;overflow:hidden}
.about-Pro7web-img img {max-width:100%;width:100%;transition:all .6s;}
.about-Pro7web-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-Pro7web-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}
.about-Pro7web-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}
.about-Pro7web-float{text-align:center;display:table;width:100%;height:100%}
.about-Pro7web-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}
.about-Pro7web-float:hover a{background:#fff; color: #444!important;}
.about-Pro7web-float a i{font-weight:normal;margin-left:5px}
.about-Pro7web-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px;    margin: 15px!important;}
.extender .about-Pro7web-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-Pro7web-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}
.extender .about-Pro7web-icon i{font-family:fontawesome;margin:10px 3px 0 0}
.about-Pro7web-icon.fbl a{background:#3b5998}
.about-Pro7web-icon.twitt a{background:#19bfe5}
.about-Pro7web-icon.crcl a{background:#d64136}
.about-Pro7web-icon.fbl a:hover,.about-Pro7web-icon.twitt a:hover,.about-Pro7web-icon.crcl a:hover{background:#313B42}
.extender .about-Pro7web-icon:hover a,.extender .about-Pro7web-icon a:hover{color:#fff;}
.about-Pro7web-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-Pro7web-info p{margin:5px 0;font: 12px Droid Arabic Naskh;    color: #444;}
.about-Pro7web-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-Pro7web-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-Pro7web-info h4:before,.about-Pro7web-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-Pro7web-info h4:before {margin-right:-50%;text-align:left;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-Pro7web-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJgtSjSn3cuKhrnrcMnJPMqyzZPTwCg7JZrKTHOZMgX4yneGDtUbbHt6PTQfvN8X_K6iiajxMmz5DDYrW1QhQsqqK9iyo4BwixayxNSKoAQZa50Zn1tBkJn7JuW3HofS-l-0V3QozPxSG/s1600/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" />

<div class="aboutfloat-img">
<span class="about-Pro7web-float"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user"></i>حسابي الشخصي</a></span></div>
</div>
</div>
<div class="about-Pro7web-info">
<h4>
انضم الينا</h4>
مواقع التواصل الاجتماعي</div>
<div class="about-Pro7web-wrpicon">
<ul class="extender">
<li class="about-Pro7web-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> facebook</a></li>
<li class="about-Pro7web-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i>twitter</a></li>
<li class="about-Pro7web-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> plus</a></li>
</ul>
</div>
</div>