إضافة صندوق به أزرار التواصل الاجتماعي والمتابعة بشكل احترافي

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

شرح طريقة التركيب:
أولا سنذهب إلى التخطيط ثم إلى إضافة أداة Html/Javascript وضع بها الكود التالي:

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

تخصيص الإضافة :

1.  غير هذا الرابط https://goo.gl/54oV0H برابط الانضمام لموقعك.
2.  غير هذا الرابط https://www.facebook.com/info24tagliout برابط صفحتك على الفيسبوك.
3.  غير هذا الرابط https://twitter.com/tagliout برابط صفحتك على تويتر.
4.  غير هذا الرابط https://plus.google.com/u/0/115179754862668273653 برابط صفحتك على جوجل+.
5.  غير هذا الرابط https://goo.gl/5in1sR برابط الصورة التي تريدها.
6.  يبقى لك تغيير الكلام إذا أردت تبديله .

• ومبروك عليك الإضافة

• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)