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

السلام عليكم ورحمة

الله وبركاته

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

بجانب المدونة

• معاينة

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

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. اذا واجهت اي مشكلة ضعها بتعليق