اداة التبادل الاعلاني لمدونة بلوجر بشكل جرس متحرك احترافي حصريا

Ahmed Abdullahمنذ 3 أسابيع

0 2 دقائق

السلام عليكم ورحمة الله وبركاته مرحبًا بكم في درس جديد من دروس قسم إضافات بلوجر.
موضوع اليوم هو عن إضافة أداة التبادل الإعلاني لمدونات بلوجر بشكل احترافي.

ما هي أداة التبادل الإعلاني لبلوجر؟

أداة التبادل الإعلاني هي إحدى الوسائل الفعالة التي تساعدك على نشر مدونتك وزيادة عدد الزوار، من خلال عرض رابط مدونتك في مدونات أخرى، وعرض روابطهم في مدونتك.
كما أن هناك بعض المدونات الكبيرة التي تتيح شراء مساحات إعلانية مقابل مبلغ مالي، حيث توضع الروابط في أماكن واضحة تجذب انتباه الزائر وتدفعه للدخول إليها.

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

لمعاينة الإضافة

معاينة الإضافة

طريقة تركيب الإضافة

الدخول إلى لوحة التحكم في بلوجر.
الانتقال إلى قسم المظهر، ثم الضغط على تحرير HTML.
اضغط على Ctrl + F لفتح مربع البحث في الأكواد.
ابحث عن الوسم <head> ثم ضع الكود التالي فوقه:

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>

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

]]></b:skin>

ثم ضع كود CSS التالي فوقه:

/* by temp.kwokbal3rb.com */

#notif-wrapper {
  position: fixed;
  width: 100%;
  z-index: 999;
}
.blanternotif {
  background: #d32f2f;
  color: #FFF;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: fixed;
  bottom: 45%;
  left: 20px;
  animation: notifklik 5s infinite;
  transition: all 5s ease-in-out;
}
.blanternotif i {
  color: #FFF;
  font-size: 25px;
  margin: 11px 12px 10px 13px;
  animation: notificon 2s infinite;
  transition: all 2s ease-in-out;
}
@keyframes notifklik {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes notificon {
  0% { transform: rotate(-30deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes notifbox {
  0% {
    transform: rotateZ(-45deg);
    visibility: visible;
    opacity: 0;
    bottom: 68%;
    left: 78px;
  }
  100% {
    transform: none;
    visibility: visible;
    opacity: 1;
    bottom: 41%;
    left: 110px;
  }
}
.notifbox {
  padding: 20px;
  border-radius: 3px;
  position: fixed;
  z-index: 999;
  left: 110px;
  bottom: 41%;
  max-width: 30rem;
  background: #d32f2f;
  border: 1px solid #d32f2f;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: .4s ease-in-out;
}
.notifbox:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -0.7px;
  left: -15px;
  border-width: 8px;
  border-style: solid;
  border-color: #d32f2f #d32f2f transparent transparent;
}
#notif-wrapper.aktif .notifbox {
  animation: notifbox 1s forwards;
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 680px) {
  .notifbox:before { display: none; }
  .notifbox {
    left: 0 !important;
    bottom: 0;
  }
}

وأخيرًا، قم بإضافة هذا الكود فوق الوسم </body>:

<div id="notif-wrapper">
  <a href="javascript:;" title="إشعار" onclick="document.getElementById('notif-wrapper').classList.toggle('aktif')">
    <div class="blanternotif">
      <i class="material-icons"></i>
      <i class="material-icons"></i>
    </div>
  </a>
  <div class="notifbox">
    <p style="text-align: center;">
      <a href="https://www.hawarytv.online/#" target="_blank">مساحة إعلانية مجانية للتبادل</a><br><br>
      <a href="https://www.hawarytv.online/#" target="_blank">مساحة إعلانية مجانية للتبادل</a><br><br>
      <a href="https://www.hawarytv.online/#" target="_blank">مساحة إعلانية مجانية للتبادل</a><br><br>
      <a href="https://www.hawarytv.online/#" target="_blank">مساحة إعلانية مجانية للتبادل</a><br><br>
      <a href="https://www.hawarytv.online/#" target="_blank">مساحة إعلانية مجانية للتبادل</a>
    </p>
  </div>
</div>