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

سنوافيكم اليوم باضافة لصندوق وسائل الاعلام الاجتماعية بشكل احترافي يجمع بين الأناقة والتأثيرات المختلفة، ستخدم موقعك بشكل كامل يشمل صورة (كوفر) وزر يرافقها بالإضافة الى الازرار الاجتماعية بما ان صورة التدوينة توضح الفكرة فلا ضرر من المعاينة الحية 
شرح طريقة التركيب
1. من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة

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

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

تخصيص الإضافة :المحدد بالأحمر # يغير بالرابط المحدد بالبرتقالي يغير بالكلمات المحدد بالأخضر يخص رابط الصورة