في هده التدوينة بإذن الله سأشارككم إضافة غاية في الروعة تجمع بين الاناقة و الاحترافية و التأتيرات الساحرة بإختصار هي صندوق بازرار التواصل الاجتماعي توضع في السايدبار (العمود الجانبي للمدونة) تسهل على الزائر عملية التواصل مع الصفحات الخاصة بالمدونة
صورة الإضافة
طريقة التركيب
قم بالذهاب الى التخطيط قم بإضافة ادات جديدة Html/Javascript و ضع بها الكود التالي
<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-Qawalib-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-Qawalib-img{position:relative;max-height:140px;overflow:hidden}
.about-Qawalib-img img {max-width:100%;width:100%;transition:all .6s;}
.about-Qawalib-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-Qawalib-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-Qawalib-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-Qawalib-float{text-align:center;display:table;width:100%;height:100%}
.about-Qawalib-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-Qawalib-float:hover a{background:#fff; color: #444!important;}
.about-Qawalib-float a i{font-weight:normal;margin-left:5px}
.about-Qawalib-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px; margin: 15px!important;}
.extender .about-Qawalib-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-Qawalib-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-Qawalib-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-Qawalib-icon.fbl a{background:#3b5998}
.about-Qawalib-icon.twitt a{background:#19bfe5}
.about-Qawalib-icon.crcl a{background:#d64136}
.about-Qawalib-icon.fbl a:hover,.about-Qawalib-icon.twitt a:hover,.about-Qawalib-icon.crcl a:hover{background:#313B42}
.extender .about-Qawalib-icon:hover a,.extender .about-Qawalib-icon a:hover{color:#fff;}
.about-Qawalib-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-Qawalib-info p{margin:5px 0;font: 12px Droid Arabic Naskh; color: #444;}
.about-Qawalib-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-Qawalib-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-Qawalib-info h4:before,.about-Qawalib-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-Qawalib-info h4:before {margin-right:-50%;text-align:left;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-Qawalib-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxdIOATKQ7NjJr__2qQczuBl8ybu3rzO9fvhXkc8kOrmHA4KU_WT_4ftz08g5QE9A41AbyqLNdcZ1__Irr60OcofEw2WkqlHU2TBfkOLzj_Y_oOri3EgDpgdW3u_XnB5vdMYepepChR8S/s1600/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" />
<div class="aboutfloat-img">
<span class="about-Qawalib-float"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user"></i> انضم لموقعنا</a></span></div>
</div>
</div>
<div class="about-Qawalib-info">
<h4>
تابعنا جديد موقعنا</h4>
تميز بلا حدود</div>
<div class="about-Qawalib-wrpicon">
<ul class="extender">
<li class="about-Qawalib-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>
<li class="about-Qawalib-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>
<li class="about-Qawalib-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> جوجل</a></li>
</ul>
</div>
</div>
تخصيص الإضافة
- لتغيير الصورة الموجودة بالإضافة قم بتغير الرابط باللون الاصفر
- قم بتغيير ما باللون الاحمر بالرابط الخاصة بحساباتك في مواقع التواصل الاجتماعي
اتمنى ان تنال الإضافة إعجابكم