BLANTERWISDOM101

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

الأربعاء، 12 ديسمبر 2018



  

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


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




شرح التركيب :- كما اعتندا بالخطوات سابقة ايضا توجه للتخطيط من لوحة تحكم واضف 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://1.bp.blogspot.com/-SgMP9usY17o/Vq1wQUX40FI/AAAAAAAAA5Q/OOnHGeHuOL4/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>
مشاركة المقال :
Medoz

انا محمد خالد عندي 20 سنه مدون عن التقنيه بالاخص بلوجر

0 comments