اقدم لكم اضافة رائعة جدا و مميزة
رسالة ترحبية في بداية الدخول للمدونة
رسالة ترحبية في بداية الدخول للمدونة
اذا اردت اضافة مميزة و احترافية و لكي تظهر للزائر اهتما
خاص به يكنك استخدام هذه الاضافة التي سيجده الزائر بشكل جميل و لا ينزعج منها
هي اضافة رسالة ترحيبية تظهر للزائر بدون اي ازعاج
عند الدخول للمدونة بشكل مميز و احترافي
يمكن تركيبها بعدة خطوات و بدون اي تعيدات
لتعرف طريقة التركيب تابع معنا الشرح التالي للحصول على نتيجة صحيحة
خاص به يكنك استخدام هذه الاضافة التي سيجده الزائر بشكل جميل و لا ينزعج منها
هي اضافة رسالة ترحيبية تظهر للزائر بدون اي ازعاج
عند الدخول للمدونة بشكل مميز و احترافي
يمكن تركيبها بعدة خطوات و بدون اي تعيدات
لتعرف طريقة التركيب تابع معنا الشرح التالي للحصول على نتيجة صحيحة
تركيب الأضافة
المظهر
إضغط Ctrl + f
ثم نبحث عن ]]></b:skin>
واضف هذا كود فوقة مباشره
.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);}}
ثم ابحث عن هذا كود </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;$(".sp-circle-link").click(function(){$(this).blur();if ($curtainopen == false){$(this).stop().animate({bottom: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});$(".sp-container").stop().animate({top:'-2200px'}, 2000 );$curtainopen = true;}else{$(this).stop().animate({bottom: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});$(".sp-container").stop().animate({top:'-2200px'}, 2000 );$curtainopen = false;}return false;});});</script></b:if>
ثم ابحث عن هذا كود <body> واضف هذا كود فوقة
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:blog.pageType != "static_page"'><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>
و غير ما تراه مناسب
و شكرا
شكرًا لوقتكم واهتمامكم بقراءة موضوع رسالة ترحبية في بداية الدخول للمدونة بشكل رائع و مميز . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
