اضافة تابعنا عبر المواقع الإجتماعية

السلام عليكم اعزائى متابعى مدونة برو ويب اليوم نقدم لكم اضافة تابعنا عبر المواقع الإجتماعية هذه الاضافة مميزة ⭐ بانها لها شكل مميز مع اشهر المواقع الاجتماعية , لها الوان احترافية ✨ وتتميز بشكلها الانيق , هذه الاضافه تستعملها اشهر المواقع والمدونات نظرا لجمالها والوانها الاحترافية , كي لا اطيل عليكم ⌚ , سوف نتوجة الى طريقة التركيب  .

شرح طريقة التركيب
اذهب الى التخطيط > ثم اضافة اداة html/javascript
وضع فيها الكود التالي

الكود

<div id="facetwittplus"><div class="socialDabourPhoneWidget" id="socialDabourPhoneWidget"><a class="facebook-box" href="https://www.facebook.com/Pro7web" id="sc-facebook" target="_blank"><span class="fa fa-facebook"></span><span class="title">تابعنا على الفيس بوك</span><span class="count">لتصلك أخر التحديثات على الفيس بوك</span> </a></div><div class="socialDabourPhoneWidget" id="socialDabourPhoneWidget"><a class="twitter-box" href="https://twitter.com/karimalielsayed" id="sc-twitter" target="_blank"><span class="fa fa-twitter"></span><span class="title">تابعنا على تويتر</span><span class="count">لتصلك أخر التحديثات على تويتر</span></a></div><div class="socialDabourPhoneWidget" id="socialDabourPhoneWidget"><a class="googleplus-box" href="https://plus.google.com/u/0/100567905522377932767" id="sc-googleplus" target="_blank"><span class="fa fa-google"></span><span class="title">تابعنا على جوجل بلس</span><span class="count">لتصلك أخر التحديثات على جوجل بلس</span></a></div></div><style>#socialDabourPhoneWidget span.fa {width: 47px;height: 47px;color:white;vertical-align: top;padding: 10px;font-size: 26px;right: 0;text-align: center;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(255,255,255,0.1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(1%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0.1)));background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=0 );}#socialDabourPhoneWidget > a {display: block;width: 100%;height: 47px;position: relative;cursor: pointer;}a.facebook-box {background-color: #506ba7;}a.twitter-box {background-color: #56A4C6;}a.googleplus-box {background-color: #BC4B37;}#socialDabourPhoneWidget > a.facebook-box:hover {box-shadow:inset 0px 0px 80px 44px #25448A;}#socialDabourPhoneWidget > a.twitter-box:hover {box-shadow:inset 0px 0px 80px 44px #25779A;}#socialDabourPhoneWidget > a.googleplus-box:hover {box-shadow:inset 0px 0px 80px 44px #963F30;}#socialDabourPhoneWidget span {display: block;position: absolute;color: #FFFFFF;right: 70px;font-size: 12px;}#socialDabourPhoneWidget .title {top: 3px;}#socialDabourPhoneWidget .count {top: 20px;}.author-social {margin-top: -8px;margin-left: -7px;}</style
>

التغييرات الأساسية

> غير المحدد باللون # برابط صفحتك على الفيسبوك
> غير المحدد باللون # برابط حسابك على تويتر
> غير المحدد باللون # برابط حسابك على جوجل بلس
لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

4 التعليقات

avatar

هذه التدوينه جميله جداً

avatar

الاجمل مرورك يا غالي لا تنسي زيارتنا دائما

avatar

شكرا لمجهوداتك

avatar

العفو اخي نورتنا

الإبتساماتالإبتسامات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة