10‏/10‏/2014

صبح Css يعمل أشياء وأشكال في منتهى الروعة والدقة واليوم سأظهر لكم قوة وروعة عمله في هذا العمل المجنون 😬 والذي أخذ من الموقع المحبوب لدي tympanus يمكنكم مشاهدة أمثلة مغايرة عما سأقدمه في هذه التدوينة من هنا, هي فقط رسالة ترحيبية أو يمكن عملها كصفحة لموقع قيد الإنشاء والذي يظهرها بشكل رائع في التصميم ، أيضا يمكنكم إستعمالها في مدونتكم أو مواقعكم الشخصية إلى أني أراها ستزعج الزائر ، لذا هي فقط تظهر في الصفحة الرئيسية وبعد تجربتها بأنفسكم في المعاينة التالية
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن : ]]></b:skin>
3. ضع الكود التالي فوقه
.sp-container {/* By Hm - http://www.ar1web.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}
.sp-content {/* By Hm - http://www.ar1web.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Hm - http://www.ar1web.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
font-family: Electrolize,ge_ss_tvbold;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Hm - http://www.ar1web.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Hm - http://www.ar1web.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Hm - http://www.ar1web.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-family: Electrolize,ge_ss_tvbold;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {
background: #85373b;/* By Hm - http://www.ar1web.com*/
color: #fff;/* By Hm - http://www.ar1web.com*/
}
/* By Hm - http://www.ar1web.com*/
@-webkit-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Hm - http://www.ar1web.com*/
@-moz-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
4. ابحث عن </head> ضع الكود الأتي فوقه
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://ar1web-com.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>
5. ابحث عن <body> ضع الكود التالي أسفله
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>إنتظر</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>مرحبا بك</span>
<span>بمدونة </span>
<span>عرب ويب</span>
</h2>
<a class='sp-link' href='#'>www.ar1web.com</a>
<a class='sp-circle-link' href='#'>إفتح</a>
</div>
</div></b:if>
صبح Css يعمل أشياء وأشكال في منتهى الروعة والدقة واليوم سأظهر لكم قوة وروعة عمله في هذا العمل المجنون 😬 والذي أخذ من الموقع المحبوب لدي tympanus يمكنكم مشاهدة أمثلة مغايرة عما سأقدمه في هذه التدوينة من هنا, هي فقط رسالة ترحيبية أو يمكن عملها كصفحة لموقع قيد الإنشاء والذي يظهرها بشكل رائع في التصميم ، أيضا يمكنكم إستعمالها في مدونتكم أو مواقعكم الشخصية إلى أني أراها ستزعج الزائر ، لذا هي فقط تظهر في الصفحة الرئيسية وبعد تجربتها بأنفسكم في المعاينة التالية
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن : ]]></b:skin>
3. ضع الكود التالي فوقه
.sp-container {/* By Hm - http://www.ar1web.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}
.sp-content {/* By Hm - http://www.ar1web.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Hm - http://www.ar1web.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
font-family: Electrolize,ge_ss_tvbold;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Hm - http://www.ar1web.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Hm - http://www.ar1web.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Hm - http://www.ar1web.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-family: Electrolize,ge_ss_tvbold;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {
background: #85373b;/* By Hm - http://www.ar1web.com*/
color: #fff;/* By Hm - http://www.ar1web.com*/
}
/* By Hm - http://www.ar1web.com*/
@-webkit-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Hm - http://www.ar1web.com*/
@-moz-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
4. ابحث عن </head> ضع الكود الأتي فوقه
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://ar1web-com.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>
5. ابحث عن <body> ضع الكود التالي أسفله
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>إنتظر</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>مرحبا بك</span>
<span>بمدونة </span>
<span>عرب ويب</span>
</h2>
<a class='sp-link' href='#'>www.ar1web.com</a>
<a class='sp-circle-link' href='#'>إفتح</a>
</div>
</div></b:if>
21 Blogger تعليقات
Disqus
21 التعليقات
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

جرب وضع الكود الثاني بدل /head ضعه فوق </body

أزال المؤلف هذا التعليق. - حذف
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

في الكود الثاني ستجد هذا الكود duration:350 الرقم غيره بنقصان أو زيادة حتى ترى الوقت المناسب لك

المشرف
avatar

أخي لم تعمل على قالب mega-mag

المشرف
avatar

قالب Mega-Mag مبني ومرتكز على أكثر من جيكويري لذا لن تشتغل
ليس لدي حل يفيد اسف

المشرف
avatar

اخي مشكل عند الضغط على كلمة فتح لا يتم الدخول الى المدونة

المشرف
avatar

في الكود الثاني الذي وضعته فوق </head> ضعه قبل فوق أكواد يعني غير مكان الكود بوضعه فوق أكثر

المشرف
avatar
Saad Sayed 1/28/2015
delete

اخى لم يظهر لى ]]> ف البحث ما العمل

المشرف
avatar
أحمد محمد 4/11/2015
delete

شكرا جدا جدا جدا جدا

المشرف
avatar

أريد أغير حجم الخطوط وأضع نص طويل ؟؟

المشرف
avatar

ابحث في الكود الأول عن font-size وغير الرقم الذي بجانبه بما يناسبك

المشرف
avatar

اخي من ابحث هذا ]]> ما يطلعلي شي

المشرف
avatar

ابحث عن Skin وستجده

المشرف
avatar

كيف أجعلها تظهر فقط فالرئيسية

المشرف
avatar

في الكود الأخير الذي وضعته أسفل <body> أحذف هذا :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
بثلاثة سطور أسفله أحذف واحد من وسم الغلق : </b:if>

المشرف
avatar

عندي مشكل الا وهو تكرار ظهور الرسالة الترحيبية كل ما ارجع الى الرئيسية بتظهر الرسالة معرفتش الحل ساعدوني الله يخليكم

لم أفهم طريقتك في شرح االحل اخي iHus sam

المشرف
avatar

ليس هنالك حل ذلك عملها تظهر في الرئيسية فقط كلما توجهت اليها

المشرف
avatar

كيف بدي اضيف اعلان ادسنس بدل انتظر ؟؟

المشرف
avatar

اخى لم اجد هذا الكود body

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة