حصرياتالمزيد

الثلاثاء، 17 يوليو 2018

احصل على هذة الاداة من هنا

اضافة شريط اعلاني منبثق للبلوجر



السلام عليكم ورحمة
الله وبركاته


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





طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    1. ابحث عن </head> وضع فوقه الكود التالي
<style type='text/css'>
.overlay-ribbon {
  position: absolute;
  width: 13em;
  height: 14em;
  z-index: 9999;
  top: 0;
  right: 2%;
  background: #34495e;
  padding: 5px 0;
  /* IE10 Consumer Preview */
  
  background-image: -ms-radial-gradient(center top, circle farthest-side, #34495e 0%, #34495e 100%);
  /* Mozilla Firefox */
  
  background-image: -moz-radial-gradient(center top, circle farthest-side, #34495e 0%, #34495e 100%);
  /* Opera */
  
  background-image: -o-radial-gradient(center top, circle farthest-side, #34495e 0%, #34495e 100%);
  /* Webkit (Safari/Chrome 10) */
  
  background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #34495e), color-stop(1, #34495e));
  /* Webkit (Chrome 11+) */
  
  background-image: -webkit-radial-gradient(center top, circle farthest-side, #34495e 0%, #34495e 100%);
  /* W3C Markup, IE10 Release Preview */
  
  background-image: radial-gradient(circle farthest-side at center top, #34495e 0%, #34495e 100%);
  -webkit-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
  box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  
  animation: slidein 3s ease-in-out forwards;
}

.ribbon-content {
  z-index: 99999;
  position: relative;
  margin: 0 5px;
}

.ribbon-content h3 {
  margin: 0;
  padding: 5px 0 5px 0;
  line-height: 16px;
  font-family: 'Hammersmith One', sans-serif;
  color: #fff;
  text-align: center;
}

.ribbon-content > p,
.ribbon-content > p span {
  color: #FFF;
  margin: 0;
  padding: 0;
}

.ribbon-content p span {
  display: block;
}

.close-x {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 99;
}

.close-x a:link,
.close-x a:visited {
  background: #2ec4b6;
  color: #fff;
  padding: 0 4px;
  font-weight: normal;
  text-decoration: none;
}

.close-x a:hover {
  background: #ff9f1c;
}

.overlay-ribbon:before {
  content: "";
  position: absolute;
  bottom: -9em;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10em solid #34495e;
  border-right: 10em solid transparent;
  z-index: 997;
}

.overlay-ribbon:after {
  content: "";
  position: absolute;
  bottom: -9em;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10em solid #34495e;
  border-left: 10em solid transparent;
  z-index: 998;
}

.slideout {
  animation: slideout 1s ease-in-out forwards;
}

@-webkit-keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@-o-keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@-moz-keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@-webkit-keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

@-o-keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

@-moz-keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

@keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}
</style>



    1. ابحث عن </body> وضع فوقه الكود التالي
<div class="overlay-ribbon">
  <div class="ribbon-content">
    <span id="close" class="close-x"><a href="#">x</a></span>
    <div class="img-container"><img src="https://gdj.graphicdesignjunction.com/wp-content/uploads/2013/10/beautiful-vector-illustration-5.jpg" width="171" height="135" alt="" /></div>
    <h3>عصام ويب</h3>
    <p>هذا النص هو مثال لنص يمكن استبداله بنص اخر يسمح للقارئ باستخدام النص ...</p>
  </div>
<script type='text/javascript'>
$(function() {
  $("#close").click(function() {
    $('.overlay-ribbon').addClass("slideout");
  });

});
</script>
</div>




    1. اذا واجهت اي مشكلة ضعها بتعليق




هناك 3 تعليقات

  1. اضافة مميزة و جديدة
    شكرا لك

    ردحذف
    الردود
    1. شكرا لك على المرور الجميل يا محمود ^_^

      حذف
  2. لماذا لم تعد تنشر قوالب مثل السابق

    ردحذف


EmoticonEmoticon