اداة تابعنا بشكل رائع واحترافي
مساء الخير عليكم حلقة جديدة من مدونة ابراهيم للمعلومات سوف نشرح طريقة اضافة اداة تابعنا بشكل رائع واحترافي الموجودة في مدونة ابراهيم للمعلومات بهذا الشكل الجميل
طريقة الاضافة
ننتقل للإضافة الاضافة يمكنك وضعها من داخل القالب او من داخل التخطيط يمكنك اضافتها في المكان الذي يعجبك
طريقة الاضافة
ننتقل للإضافة الاضافة يمكنك وضعها من داخل القالب او من داخل التخطيط يمكنك اضافتها في المكان الذي يعجبك
- من التخطيط او من داخل القالب في 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>
.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>
ثم اضغط حفظ واذهب الي مدونتك لرؤيتها
حمزة محمد
حمزة محمد : من
دولة مصر ام الدينا, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها تعليم لغات البرمجة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة تجيك تكنولوجي تعبر عما أهواه .
شكرا علي هذة الاضافة
ردحذفالعفو اخي . شكرا لمرورك
ردحذف