إضافة مرحبا يا رمضان

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية

الأحد، 28 مايو، 2017

10:17:00 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم ورحمة الله تعالى وبركاته, اليوم في أول تدوينة لنا في شهر رمضان قررنا ان ننشر لكم اضافة رمضانية جديدة وحصرية على شكل هيدر يوضع اعلى المدونة لتظهر للزائر خلال دخوله للمدونة مباشرة, فكرت في هذه الاضافة عند طلب الكثير من المتتبعين عن نشر اضافات رمضانية لتزيين مدوناتنا ومن هنا أتت هذه الفكرة نتمنى ان تنال اعجابكم.
معاينة حية للاضافة 
معاينة 
طريقة التركيب
  1. أولا عليك الانتقال الى لوحة تحكم قالب مدونتك
  2. ثم الى المظهر  --> تحرير Html
  3. ثم قم بالبحث عن الوسم </head> باستعمال Ctrl+F
  4. وضع اكواد Css التالية فوقه مباشرة
<style type='text/css'>
/*<![CDATA[*/
.parallax {
  background: url(https://e.top4top.net/p_5132bbkx1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height:100vh;
  width:100%;
  position:relative;
  z-index:9999;
}
.parallax h2 {
  text-align: center;
  padding: 70vh 0 0;
  font-size: 4em;
  line-height:1;
  color: white;
  margin:0;
text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.35);
}
.parallax p {
  text-align: center;
  padding: 20px 50px 0;
  margin:0;
  font-size: 2em;
  color: white;
text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.35);
}
.parallax .arrow_down{
  position:absolute;
  width:60px;
  height:60px;
  bottom:20px;
  left:50%;
  margin-left:-30px;
  font-size:24px;
  color:#fff;
}
.parallax .close_parallax{
  position:absolute;
  width:20px;
  height:20px;
  top:20px;
  right:25px;
  font-size:34px;
  line-height:1;
  color:#fff;
  cursor:pointer;
}
.parallax .bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  }
  @-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
  }
  }
@media screen and (max-width:1024px){.parallax h2 {
  padding: 60vh 0 0;
  font-size: 2em;
}
.parallax p {
  font-size: 1em;
}
}
@media screen and (max-width:375px){.parallax h2 {
  padding: 50vh 0 0;
}
}
/*]]>*/
</style>

  1. الآن ابحث عن الوسم <body
  2. وضع اكواد Html التالية اسفله مباشرة

<section class='parallax' id='parallax'>
    <h2>مرحبا يا رمضان</h2>
    <p>نكهة التقنية تتمنى لكل متابعيها رمضان مبارك سعيد وكل عام وانتم لله اقرب</p>
    <div class='arrow_down bounce'><img alt='down' height='60' src='https://3.bp.blogspot.com/-HJTeFvBoI8Y/WRwS6wxAnKI/AAAAAAAArIc/-QlF5qgEi7AKTZxNnm2TRpTnfx4VKKOEQCLcB/s1600/chevron-double-down%2B%25281%2529.png' width='60'/></div>
    <div class='close_parallax' onclick='hideParallax()' title='Close'>&amp;times;</div>
  </section>

  1. وأخيرا ابحث عن الوسم </body> وضع كود الجافا سكريبت هذا فوقه مباشرة
 <script type='text/javascript'>
//<![CDATA[
var parallax= document.querySelector(".parallax");
window.addEventListener("scroll", function() {
   var scrolledHeight= window.pageYOffset,
                limit= parallax.offsetTop+ parallax.offsetHeight;            
  if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit) {
    parallax.style.backgroundPositionY=  (scrolledHeight - parallax.offsetTop) /1.5+ "px";
    } else {
     parallax.style.backgroundPositionY=  "0";
    }
     });
function hideParallax() {
document.getElementById("parallax").style.display = "none";
};
//]]>
</script>

وأخيرا تقوم بحفض القالب ومبروك عليك الاضافة, الى هنا نكون وصلنا الى نهاية هذا الموضوع نتمنى ان تنال الاضافة اعجابكم ورمضان مبارك..
  1. الردود
    1. على الرحي صديقي, شكرا لزيارتك

      حذف
  2. اخي ممكن تعمل شرح على القالب المستعمل في هدا الشرح و ايضا القاب يكون متوافق و شكرا

    ردحذف

مقالات