اضافة تهنئة بحلول شهر رمضان المبارك

اضافة تهنئة بحلول شهر رمضان المبارك

هل علينا رمضان المحبة و الغفران، فلا يوجد أجمل من هذا الشهر، ولتهنئة متابعينا بقدوم هذا الشهر 🌜 (رغم اننا تأخرنا 🙀) أحضرنا لكم
اضافة تهنئة برمضان لمدونات بلوجر.
للذين يرغبون في تقديم هذه الاضافة او التحية بشكل عام لمتتبعيه بالموقع فما عليكم الاّ متابعة طريقة التركيب وطبعا نذهب للمعاينة قبل كل شيء.
وجب الذكر بأن هذه الأداة من تطوير Arlinadzgn فكل الشكر لها

• معاينة

جميلة، اليست كذلك؟ طريقة التركيب جد سهلة تابع معي :
شرح طريقة التركيب
1. من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='ar1webramdan2018'>
<a class='close-popup' href='#' title='وداعا'><i class='fa fa-times'></i></a>
<div class='ramdan18'>
   <p>هل هلالك يا رمضان ونور بيتنا وبيتكم</p>
   <p><span class='ramadan2018'>كل عام وأنتم بخير 1439 </span></p>
</div>
<div class='karim18'></div>
<div class='karim18 behind'></div>
<div class='hari18'>
<div class='hjrya18'></div>
<div class='hjrya18 invert'></div>
<div class='sun'></div>
</div>
<div class='malam18'>
<div class='bintang18'>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
   <div class='star'></div>
   </div>
   <div class='moon'></div>
   </div>
</div>
<style>
@import url("https://fonts.googleapis.com/css?family=Aref+Ruqaa|Harmattan");

/* Pop Up Animation Ramadan */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes change_color {
  0% {
    background: #5ac7da;
  }
  33.33% {
    background: #3173bd;
  }
  66.66% {
    background: #0d4a8d;
  }
  100% {
    background: #5ac7da;
  }
}
@keyframes run_hari18 {
  0% {
    transform: translate(0%, 0);
    opacity: 0;
  }
  50% {
    transform: translate(100%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0);
    opacity: 0;
  }
}
@keyframes sun_movement {
  0% {
    top: 50px;
  }
  100% {
    top: 50px;
  }
}
@keyframes run_malam18 {
  0% {
    transform: translate(-20%, 0);
    opacity: 0;
  }
  49.99% {
    transform: translate(0%, 0);
    opacity: 1;
  }
  99.99% {
    transform: translate(20%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-20%, 0);
    opacity: 1;
  }
}
@keyframes moon_movement {
  0% {
    transform: translate(-200%, 0);
    opacity: 0;
  }
  49.99% {
    transform: translate(0%, 0);
    opacity: 1;
  }
  99.99% {
    transform: translate(200%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-200%, 0);
    opacity: 1;
  }
}
/* Pop Up Ramadan */
#ar1webramdan2018 {
  font-family: 'Aref Ruqaa', serif;
  display: block;
  background: #fff;
  position: fixed;
  top: 25%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  max-width: 660px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.1), 0 15px 12px rgba(0, 0, 0, 0.12);
  z-index: 99;
  min-height: 350px;
  padding: 20px;
  overflow: hidden;
  border-radius: 10px;
  animation: change_color 7s infinite linear, slideDown 2s;
}
#ar1webramdan2018 .ramdan18 {
  position: absolute;
  color: #fff;
  font-size: 2rem;
  font-weight: 400;
  padding: 30px;
  z-index: 99999;
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
  top: 20%;
}
#ar1webramdan2018 .ramdan18 p {
  margin: 20px auto;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
#ar1webramdan2018 .ramdan18 .ramadan2018 {
  font-size: 3rem;
  font-weight: 700;
}
#ar1webramdan2018 a.close-popup {
  position: absolute;
  bottom: 15px;
  right: 20px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
  cursor: pointer;
  z-index: 99;
  transition: all 0.3s;
}
#ar1webramdan2018 a.close-popup:hover {
  color: #fff;
}
#ar1webramdan2018 a.close-popup:active {
  opacity: 0;
}
#ar1webramdan2018 a.close-popup i {
  font-family: fontawesome;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  transform: rotate(270deg);
  transition: all 0.3s;
}
#ar1webramdan2018 a.close-popup:hover i {
  transform: rotate(360deg);
}
.karim18 {
  width: 400px;
  height: 300px;
  display: block;
  background: #4aad52;
  position: absolute;
  bottom: -150px;
  transform: rotate(45deg);
  border-radius: 50px;
  z-index: 2;
}
.karim18.behind {
  background: #42a54a;
  right: -120px;
  bottom: -180px;
  z-index: 1;
}
.hari18 {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  animation: run_hari18 7s infinite linear;
}
.hari18 .hjrya18 {
  margin: 30px auto;
  width: 150px;
  height: 70px;
  display: block;
  background: #e7e7e7;
  border-radius: 35px;
  border: 10px solid #ffffff;
  box-shadow: inset 0 -7px 0 0 #d7d7d7;
  position: absolute;
  top: 90px;
  left: 50px;
}
.hari18 .hjrya18:before {
  content: "";
  width: 65px;
  height: 35px;
  display: block;
  background: #e7e7e7;
  border-radius: 35px 35px 0 0;
  border: 10px solid #ffffff;
  border-bottom: 0;
  position: absolute;
  top: -35px;
  left: 20px;
}
.hari18 .hjrya18.invert {
  top: 60px;
  left: 250px;
}
.hari18 .hjrya18.invert:before {
  left: 50px;
}
.hari18 .sun {
  width: 75px;
  height: 75px;
  display: block;
  background: #fff297;
  border-radius: 50%;
  box-shadow: inset -5px -5px 0 0 #ddc991;
  position: absolute;
  top: 50px;
  left: 0;
  animation: sun_movement 7s infinite linear;
}
.malam18 {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  animation: run_malam18 7s infinite linear;
}
.malam18 .bintang18 .star {
  width: 5px;
  height: 5px;
  display: block;
  background: #f7f7f7;
  border-radius: 50%;
  position: absolute;
}
.malam18 .bintang18 .star:nth-child(1) {
  top: 50px;
  left: 50px;
}
.malam18 .bintang18 .star:nth-child(2) {
  top: 200px;
  left: 70px;
}
.malam18 .bintang18 .star:nth-child(3) {
  top: 100px;
  left: 300px;
}
.malam18 .bintang18 .star:nth-child(4) {
  top: 50px;
  left: 220px;
}
.malam18 .bintang18 .star:nth-child(5) {
  top: 160px;
  left: 320px;
}
.malam18 .bintang18 .star:nth-child(6) {
  top: 150px;
  left: 230px;
}
.malam18 .bintang18 .star:nth-child(7) {
  top: 180px;
  left: 400px;
}
.malam18 .bintang18 .star:nth-child(8) {
  top: 50px;
  left: 360px;
}
.malam18 .moon {
  width: 75px;
  height: 75px;
  display: block;
  background: #d7d7d7;
  border-radius: 50%;
  box-shadow: inset -5px -5px 0 0 #c7c7c7;
  position: absolute;
  top: 50px;
  left: 100px;
  animation: moon_movement 7s infinite linear;
}
@media (max-width: 800px) {
  #ar1webramdan2018 {
    top: 10px !important;
    left: 10px;
    right: 10px;
    min-height: 250px;
  }
  #ar1webramdan2018 .ramdan18 {
    font-size: 1.1rem;
    top: 0;
  }
  #ar1webramdan2018 .ramdan18 .ramadan2018 {
    font-size: 2.2rem;
  }
  .karim18,
  .hari18,
  .bintang18,
  .malam18 .moon {
    display: none;
  }
}
</style>
<script>
$(window).bind("load",function(){$("#ar1webramdan2018").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script></b:if>

تخصيص الإضافة
اظهار الأداة في الصفحة الرئيسية فقط
1. من القالب >> تحرير
2. ابحث عن </body>
3. ضع الكود فوقه