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

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

يوجد الآن مشاهدة التعليقات : 19

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 19 تعليقًا:

  1. مرحبًا بعودتك أخ حسام، باركك الله على الإضافة الجميلة. مبدع كالعادة ماشاء الله :)

    ردحذف
  2. جميل.... :/ ليست جميلة حقا :/

    ردحذف
  3. مبدع كالعادة :) :D

    ردحذف
  4. جزاك الله خيرا ، هي نفس ااضافة التي كانت في قالب تواصل :) هي جد احترافية ...

    عندي مشكل اخي حسام في قالب bluetheme و هو اختفاء السلايدر بعد مدة رغم اني لم اعدل عليه ابدا !
    هل ربما السبب هو بعض الاضافات الجديدة التي تضاف الى القالب ؟

    ردحذف
  5. شكرا جزيلا على مروركم هذا اخواني الكرام

    ردحذف
  6. اتمنى تنزل شرح لطريقة اضافة خاصية ظهور الصور مع النزول لأسفل بصفحات بلوجر , كما فى قالب " تواصل "

    ردحذف
  7. غير معرف5/14/2016

    عايزين قوالب جديدة :)

    ردحذف
  8. غير معرف5/16/2016

    أخي لما لا تظهر عندي fa-user انضم لموقعنا?

    ردحذف
  9. لماذا حذفتم السكربتات الخاصة بالاضافات و المواقع -_-

    ردحذف
  10. هذا ما كنت ابحث عنه
    جزاك الله كل خير اخي حسااام ولا تحرمنا من جديد
    موفق اخي

    ردحذف
  11. شكرا انها اضافه جميله حقا لاكن لماذا عندما اضغط على الفيسبوك او تويتر يظهر اللينك هكذا https://3rbey.blogspot.com/www.fb.com/3rbey

    ردحذف
  12. رجاء طلب منك اخي حسام انا مع قالب مدونتك عرب واريد حذف كود منع النسخ رجاء رد عليه بعد اذنك اخي

    ردحذف
  13. السلام عليكم اخي شكرن على الاضافة المميزة لكن غيرت الروابط ولم تعمل لماذا وكيف اضيف الروابط صحيحة

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

    ردحذف
  15. كل احترامي لهذه المدونة صرااحة خبرةةةةة

    ردحذف
  16. شكرا على الموضوع لكن فيه مشكلة لا اجد لها حلا.الايقونات لا تظهرلى

    ردحذف
  17. برك الله فيك

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم