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

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

يوجد الآن مشاهدة التعليقات : 5

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات


هل علينا رمضان المحبة و الغفران، فلا يوجد أجمل من هذا الشهر، ولتهنئة متابعينا بقدوم هذا الشهر 🌜 (رغم اننا تأخرنا 🙀) أحضرنا لكم
اضافة تهنئة برمضان لمدونات بلوجر.
للذين يرغبون في تقديم هذه الاضافة او التحية بشكل عام لمتتبعيه بالموقع فما عليكم الاّ متابعة طريقة التركيب وطبعا نذهب للمعاينة قبل كل شيء.
وجب الذكر بأن هذه الأداة من تطوير 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. ضع الكود فوقه
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 5 تعليقات:

  1. رائع استمر اخي حسام

    ردحذف
  2. عوداً حميداً

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

    ردحذف
  4. مرحبا بعودتك اخي ,
    معك اخوك من مدونة صلاح عبيد : https://salahebeed.blogspot.com
    اتمنى ان تكون بأفضل حال

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم