اضافة نافذة منبثقة للانضمام الى متابعي المدونة

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية

الثلاثاء، 7 مارس، 2017

12:52:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
اهلا بمتابعي مدونة نكهة التقنية الكرام في درس جديد على قسم إضافات بلوجر, سنقدم لكم اليوم إضافة جديدة وحصرية طبعا وأضن انكم لاحظتم الاضافة الجديدة التي نستعملها على المدونة فهي تنبثق على المدونة عند الدخول اليها, وكانت هذه الفكرة لطالما بحث عنها العديد منكم فهي تساعد على كسب متابعين أكثر حيت يمكنك استعمالها سواءا للحصول على متابعين على مدونتك او استعمالها كآداة للحصول على معجبين على مواقع التواصل الاجتماعي كالفيسبوك وتويتر وغيرها, إذن تابعو معي الشرح 👌
شرح تركيب الآداة
اولا: عليك تحرير قالب مدونتك ثم البحث باستعمال Cntr+f عن الوسم

]]></b:skin>
ثم قم بوضع الأكواد فوقها
.nak1ha .Nak1haText {
margin: auto;
}
a.RcloseNak1ha:hover {
color: #555;
}
a.closeNak1ha {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
margin-right: 7px;
color: #888;
display: block;
}
.Nak1habox {
width: 35%;
margin: auto;
position: relative;
height: 240px;
background: #fff;
box-shadow: 0 0 19px 3px rgba(0, 0, 0, 0.33);
text-align: center;
display: flex;
flex-direction: column;
}
.nak1ha {
display: flex;
position: fixed;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.53);
z-index: 99999999;
visibility:hidden;
opacity:0;
top: 0;
}
a.Nak1halink:hover {
opacity: 0.88;
}
a.Nak1halink {
background: #243750;
display: inline-block;
color: #fff;
padding: 4px 11px;
font-size: 16px;
border-radius: 3px;
margin-top: 16px;
}
.Nak1haText h5 {
font-size: 18px;
font-weight: 500;
}
.nak1ha.show {
visibility:visible;
opacity:1;
}
.nak1ha a, .nak1ha {
transition:0.35s;
}

ثانيا: إبحث عن الوسم

<body

وضع اسفله هذه الأكواد

<div class='nak1ha'>
<div class='Nak1habox'>
<a class='closeNak1ha' href='#'><i class='fa fa-close'/></a>
<div class='Nak1haText'>
  <h5>
انضم الى متابعي المدونة الأوفياء ليصلك جديد مدونتنا !</h5>
<a class='Nak1halink' href='https://goo.gl/fIuSG5' target='_blank'><i class='fa fa-user-plus'/>
إنضم الان</a>
</div>
</div>
</div>

ثالثا: يتبقى السكريبت المسؤول عن انبثاق الإضافة وإغلاقها يكفيك البحث عن هذا الوسم

</body>

وقم بوضع هذا السكربت فوقه

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".nak1ha").delay(20000).addClass("show");
  $(".closeNak1ha").click(function(){
$(".nak1ha").removeClass("show");
});
});
//]]>
</script>

وأخيرا: عليك تغيير الرابط الملون بالأحمر في الخطوة الثانية واستبداله برابط الانضمام لمتابعة مدونتك
ومبروك عليك الإضافة

إلى هنا نكون قد وصلنا الى نهاية درسنا لهذا اليوم
😊
دمتم في أمان الله
  1. امر جميل ولكن هل من الممكن ان تساعدني فانا اريد عمل تطبيق لموقعي ارجوا ان تساعدني

    ردحذف
    الردود
    1. يمكنك عمل تطبيق لموقعك عن طريق موقع Appyet بسهولة وهناك عدة دروس وفيديوهات حول انشاء تطبيق لموقع
      يكفيك البحث عنها في اليوتيوب

      حذف
  2. الردود
    1. يمكنك استخذام cntr+c لنسخ الاكواد و Cntr+v للصق الاكواد

      حذف
  3. سلام عليكم اخي ماهو الرابط الذي استخدمة في اضافة المتابعين

    ردحذف
  4. عليك تغيير ip الموجود في الرابط الى ip الخاص بك وستجده عند فتح لوحة تحكم مدونتك كما هي موضحة في الصورة
    https://f.top4top.net/p_493lacla1.png

    ردحذف
  5. كيف اجد الرابط بالاحمر من فضلك
    مع تنبيه الاضافة تحتاج الى سكريبت اضافي للاضهار للمدونات التي لا يوجد في داخلها ذلك السكريبت

    ردحذف
    الردود
    1. بالنسبة للرابط الاحمر عند فتحه ستجد الرابط الاصلي عليك تغيير ip الموجود في ذلك الرابط الى ip الخاص بك وستجده عند فتح لوحة تحكم مدونتك كما هي موضحة في الصورة
      https://f.top4top.net/p_493lacla1.png
      ------------------------------------
      بالنسبة للسكريبت فهو شغال يمكنك ايظا وضع رابطك لنرى مشكلتك بنضرة مباشرة

      حذف

مقالات