منتـدى تيم اكسور - TeamXor
منتـدى تيم اكسور | TeamXor |
ad ad ad
ad ad ad
ad ad ad

[ شــرح ] اضافة مرحبا يا رمضان بلوجر

احصائياتى
الردود
0
المشاهدات
31

HouseM3rfa

[ عـضــو جـديــد ]
معلومات HouseM3rfa
إنضم
25 مارس 2020
المشاركات
8
مستوى التفاعل
0
النقاط
1
الإقامة
مصر
اضافة مرحبا يا رمضان بلوجر
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته



ليس لديك الصلاحية لمشاهدة الرابط سجل دخولك أو قم بالتسجيل الآن.

  • اضافة مرحبا يا رمضان بلوجر​

  1. أولا عليك الانتقال الى لوحة تحكم قالب مدونتك​
  2. ثم الى المظهر --> تحرير Html​
  3. ثم قم بالبحث عن الوسم </head> باستعمال Ctrl+F​
  4. وضع اكواد Css التالية فوقه مباشرة​
<style type='text/css'>
/<![CDATA[/
.parallax {
background: url(
ليس لديك الصلاحية لمشاهدة الرابط سجل دخولك أو قم بالتسجيل الآن.

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 التالية اسفله مباشرة​

<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>
  • ثم قم بالبحث عن الوسم </head> وضع الكواد التالي تحته​

<section class='parallax' id='parallax'>
<h2>مرحبا يا رمضان</h2>
<p>ادد معرفة تتمنى لكل متابعيها رمضان مبارك سعيد وكل عام وانتم لله اقرب</p>
<div class='arrow_down bounce'><img alt='down' height='60' src='
ليس لديك الصلاحية لمشاهدة الرابط سجل دخولك أو قم بالتسجيل الآن.
' width='60'/></div>
<div class='close_parallax' onclick='hideParallax()' title='Close'>&amp;times;</div>
</section>​
  • مع تغير كلمة ادد معرفة باسم موقعك​
 
التعديل الأخير بواسطة المشرف:

Users Who Are Viewing This الموضوع (Users: 0, Guests: 1)

من نحن ؟؟

منتـدى تيم اكسور - TeamXor : منتدى عربي يقدم شروحات حصرية لتطوير المواقع و تعليم التصميم والبرمجه و يهتم بتطوير لعبة كونكر. ..

أعلى