السلام عليكم ورحمة الله و بركاته متتبعي برامج انترنت و اخبارك نت أهلا بكم في هذا الموضوع الذي يخص.....
اظافة رائعة لصندوق ازرار التواصل الاجتماعي
سنقوم
بشرح لكم كيفية باضافة صندوق ازرار التواصل الاجتماعية بشكل احترافي , و الذي
يعتبر انيق و ذو تأثيرات المختلفة، حيث يستخدم موقعك بشكل كامل و يشمل صورة جذابة يرافقها بالإضافة الى الازرار الاجتماعية كما في
الصورة اعلاه صورة التي توضح الفكرة.
نبدا الشرح في كيفية تركيب هذه الاظافة الرائعة.... من خلال اتباع الخطوات
التالية....
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/AVvXsEjAgrtMciuEwCpgiLI49Ueudlzv2I5D49wkI17A2oLji3YU07qsydue9370YYYUiLuh0e8EKdUDVuBjUSWUcK5KfXHHnRlypZJ_zCsBdeDh9C_zjnvldvzOHsA2PR7Sn-MCf-vylVw7gKm4/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>
التعديل على حسب مدونتك:
-
قم مكان الرمز # بوضع الرابط
الخاص بموقعك او بصفحة فايسبوك الخاصة بك او تويتر ....
-
اللون الاخضر هو خاص بالصورة يمكنك ان
تغير الصورة بتغيير رابط الموجود.
-------------------------------------
حمل كتاب من
هنا
الى هنا نكون قد قدمنا لكم هذا
الوضوع ليكون اضافة في سرح المعرفة اتمنى ان يكون في متناول الجميع ....
اذا واجهتك أي مشكل او تسائل
ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
ان اعجبك الموضوع لا تنسى بمتابعتنا
بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في برامج
انترنت و اخبارك نت
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو المواقع التالية
|
|
|
|
|
|
|
|
|
ليست هناك تعليقات