إضافة رسالة تهنئة رمضان كريم بتصميم رائع إلي مدونتك !

Shady M. Ali 3:23 م بلوجر

الكثير يريد تهنئة متابعيه في مدونته ولا يعرف كيف !

هذه الاضافة جميلة وممتعة وتصميمها بسيط جداََ

كل ماعليك فعله هو إضافة بعض الأكواد إلي القالب ثم إستمتع بشكل جميل في مدونتك

كيفية الإضافة

قم بأخذ نسخة إحتياطية للقالب لتجنب أي مشاكل
إذهب إلي المظهر ثم تحرير Html
إبحث عن الوسم </head> بإستعمال Ctrl + F
قم بنسخ هذا الكود وضعه فوقه مباشرة

<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>

إبحث عن وسم <body
ضع هذا الكود أسفله مباشرة

يمكنك تغيير الكلمات المكتوبة داخل الكود ويمكنك تغيير الخلفية كما شِئت

اّخر خطوة قم بالبحث عن الوسم </body> و ضع هذا الكود فوقه مباشرة

وهذا هو كل شئ في هذا الشرح البسيط نتمني ان ينال إعجابكم

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

الاشتراك في: تعليقات الرسالة ( Atom )