اضافة صندوق مواقع التواصل الإجتماعية الشكل الأول

أهلا بكم زوار مدونة الحلم ويب اليوم وفي التدوينة الخامسة أحظرنا لكم إضافة جديدة وهي إضافة صندوق مواقع التواصل الإجتماعي ولن أطيل عليكم وطريقة التركيب :

إذهب الى لوحة التخطيط .
إختار أداة جافا سيكرة .
ضع الكود التالي :

<div id="facetwittplus"><div class="socialDabourPhoneWidget" id="socialDabourPhoneWidget"><a class="facebook-box" href="###" 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="###" 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="###" 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>

ولاتنسى تغيير ### بالرابط المناسب

-----

في أمان الله

الموضوع من قسم:

إضافات بلوجر

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