السلام عليكم و رحمة الله تعالى و بركاته اليوم إنشاء الله سأقدم لكم الأداة الرائعة للمتتبعين على الفايسبوك و تويتر و اليوتوب و كذلك جوجل +
تتميز هذه الأداة بشكلها الرائع و الجذاب , ستبهر زائري مدونتك و ستجذبهم , لا أريد أن أطيل عليكم لذلك تابعو معي الشرح التالي
1 - الذهاب إلى مدونتك ثم التخطيط بعد ذالك اختر المكان الذي تريد أن تضع فيها الأداة ثم اضغط على إضافة أداة جديدة ثم HTML/JAVA-SCRIPT و أخيرا أضف الكود التالي كاملا
غير الروابط الحمراء بروابطك
<!-- ____ __ _ _ _ _ _ _ __ _ __ _ _ FACEBOOK_ _ _ ____ _ _ _ _ _ _ _ _ _ _ _ _ -->
<div id="social">
<ul>
<li class="fb">
<p>إنضم لمعجب واحد عبر صفحتنا على الفيسبوك.</p>
<a class="p1" href="https://www.facebook.com/agrouryas" target="_blank">
<i class="fa fa-facebook"/>
</i></a>
</li>
<!-- ____ __ _ _ _ _ _ _ __ _ __ _ _+ GOOGLE _ _ _ ____ _ _ _ _ _ _ _ _ _ _ _ _ -->
<li class="ggl">
<p>إنضم إلينا عبر جوجل + حيث أكثر من 33 ألف يتابعنا.</p>
<a class="p2" href="https://www.facebook.com/agrouryas" target="_blank">
<i class="fa fa-google-plus"/>
</i></a>
</li>
<!-- ____ __ _ _ _ _ _ _ __ _ __ _ _ TWITTER_ _ _ ____ _ _ _ _ _ _ _ _ _ _ _ _ -->
<li class="twt">
<p>إنضم لأزيد من 40 ألف متابع لنا عبر تويتر.</p>
<a class="p3" href="https://www.facebook.com/agrouryas" target="_blank">
<i class="fa fa-twitter"/>
</i></a>
<!-- ____ __ _ _ _ _ _ _ __ _ __ _ _ YouTube_ _ _ ____ _ _ _ _ _ _ _ _ _ _ _ _ -->
</li>
<li class="ytb">
<p>تابعنا على يوتيوب حيث أكثر من مليون متابع لفيدوهاتنا.</p>
<a class="p4" href="https://www.facebook.com/agrouryas" target="_blank">
<i class="fa fa-youtube"/>
</i></a>
</li>
</ul>
</div>
2- اذهب إلى قالب ثم ابحث عن الوسم ]]></b:skin> و ضع الكود التالي فوقه مباشرة
ul#social-top{ float:right}
#social ul li{float:right; width:25%; padding:13px 0; padding-bottom:20px}
#social ul li p{ display:block; padding:10px 15px; transition:0.4s; color:#fff; font-size:19px; text-align:center}
#social ul li a{ display:block; background:#1f376c; padding:8px 0; transition:0.4s; width:100px; color:#fff; margin:0px auto; font-size:16px; text-align:center}
li.fb{ background:#366299 !important}
li.ggl{ background:#CB2027 !important}
li.twt{ background:#4099FF !important}
li.ytb{ background:#D1252A !important}
.p1{ background:#2F5686 !important}
.p2{ background:#AF1A20 !important}
.p3{ background:#3A8DEC !important}
.p4{ background:#BB1E23 !important}
div#social{ overflow:hidden; margin:3px auto}
#social li a:hover i{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
#social i{ width:30px; height:30px; background:rgba(0,0,0,0.13); line-height:30px; border-radius:50%; margin-left:2px; font-size:15px}
#social ul li p{ font-size:16px}
#social ul li{ float:right; width:25%; padding:20px 0 !important}
