اداة تابعنا بشكل رائع واحترافي

مساء الخير عليكم حلقة جديدة من مدونة ابراهيم للمعلومات سوف نشرح طريقة اضافة اداة تابعنا بشكل رائع واحترافي الموجودة في مدونة ابراهيم للمعلومات بهذا الشكل الجميل

طريقة الاضافة
ننتقل للإضافة الاضافة يمكنك وضعها من داخل القالب او من داخل التخطيط يمكنك اضافتها في المكان الذي يعجبك

1.  من التخطيط او من داخل القالب في HTML أضف أداة Html/Javascript وضع بها كود الإضافة مع تغير كل الروابط

<style>
.tw-box{position:relative;text-align:center;overflow:hidden;height:80px;line-height:80px;background:#3da1ef;transition:opacity 0.2s}.tw-box:hover{opacity:0.9}.tw-box span{letter-spacing:1px;color:#56a1db;background-color:#fff;position:relative;z-index:1;display:inline-block;line-height:1;font-size:12px;font-family:Moussa-font;padding:.8em 1.6em;margin-right:10px;border-radius:50em;text-transform:uppercase;padding:11px 44px 11px 22px;transition:color .2s,background-color .2s}.tw-box span:hover{background-color:#328cd3;color:#fff}.tw-box a{display:block;height:100%;color:#fff;font-size:18px;font-size:1.125rem;font-family:MOussa-font;font-weight:bold;position:relative;border:none;transition:all 0.2s}.tw-box span svg{position:absolute;right:13px;top:2px;max-width:100%}.tw-box span:hover svg *{fill:#fff}@media only screen and (max-width:768px){.tw-box{height:100px;line-height:100px}.tw-box a{font-size:18px;font-size:1.125rem}}.yt-box{position:relative;text-align:center;overflow:hidden;height:80px;line-height:80px;background:#cb2027;transition:opacity 0.2s}.yt-box:hover{opacity:0.9}.yt-box span{letter-spacing:1px;color:#cb2027;background-color:#fff;position:relative;z-index:1;display:inline-block;line-height:1;font-size:12px;font-family:Moussa-font;padding:.8em 1.6em;margin-right:10px;border-radius:50em;text-transform:uppercase;padding:11px 44px 11px 22px;transition:color .2s,background-color .2s}.yt-box span:hover{background-color:#ea0e17;color:#fff}.yt-box a{display:block;height:100%;color:#fff;font-size:18px;font-size:1.125rem;font-family:MOussa-font;font-weight:bold;position:relative;border:none;transition:all 0.2s}.yt-box span svg{position:absolute;right:13px;top:2px;max-width:100%}.yt-box span:hover svg *{fill:#fff}@media only screen and (max-width:768px){.yt-box{height:100px;line-height:100px}.yt-box a{font-size:18px;font-size:1.125rem}}.fb-box{position:relative;text-align:center;overflow:hidden;height:80px;line-height:80px;background:#005292;;transition:opacity 0.2s}.fb-box:hover{opacity:0.9}.fb-box span{letter-spacing:1px;color:#005292;background-color:#fff;position:relative;z-index:1;display:inline-block;line-height:1;font-size:12px;font-family:Moussa-font;padding:.8em 1.6em;margin-right:10px;border-radius:50em;text-transform:uppercase;padding:11px 44px 11px 22px;transition:color .2s,background-color .2s}.fb-box span:hover{background-color:#348cd0;color:#fff}.fb-box a{display:block;height:100%;color:#fff;font-size:18px;font-size:1.125rem;font-family:MOussa-font;font-weight:bold;position:relative;border:none;transition:all 0.2s}.fb-box span svg{position:absolute;right:13px;top:2px;max-width:100%}.fb-box span:hover svg *{fill:#fff}@media only screen and (max-width:768px){.fb-box{height:100px;line-height:100px}.fb-box a{font-size:18px;font-size:1.125rem}}
</style>
<div class='tw-box'><a href='#' rel='nofollow' target='_blank'>تابع ابراهيم للمعلومات على التويتر <span><i aria-hidden='true' class='fa fa-twitter fa-lg'/> تابعنا الأن</span></a></div><div class='fb-box'><a href='#' rel='nofollow' target='_blank'>تابع  ابراهيم للمعلومات على الفيسبوك <span><i aria-hidden='true' class='fa fa-facebook fa-lg'></i> لايك لصفحتنا على فيسبوك</span></a></div><div class='yt-box'><a href='#' rel='nofollow' target='_blank'>تابع قناة ابراهيم للمعلومات على اليوتوب <span><i aria-hidden='true' class='fa fa-youtube fa-lg'/> إشترك الان</span></a></div>

ثم اضغط حفظ واذهب الي مدونتك لرؤيتها