إضافة نافذة ترحيبية بشهر رمضان المبارك لمدونات البلوجر - رمضان 2018

السلام عليكم ورحمة الله وبركاته .. كل عام ومتابعي تكنوبلوج والأمة الإسلامية والعربية بخير
بمناسبة شهر رمضان الكريم أعاده الله علينا وعليكم بالخير و اليمن و البركات ..

اليوم إن شاء الله تكنوبلوج تقدم لمتابعيها إضافة جميلة جدًا بمناسبة شهر رمضان وهي عبارة عن " رسالة ترحيبية و تهنئة بشهر رمضان المبارك "

إضافة نافذة ترحيبية بشهر رمضان المبارك لمدونات البلوجر - رمضان 2018

وهي تعمل بمجرد فتح المدونة أو الموقع أو عمل إعادة تحميل للصفحة ، بالإضافة إلي زر الخروج منها.
كما أنها غير مزعجة بالمرة بل هي محببة لدي الكثيرون لانها تعتمد علي الأنميشن والرسوم المتحركة
في ذات خلفية متحركة رائعة تلفت إنتباه الزائر وتدخل علي قلبة السرور .

نبدأ بإذن الله في الشرح مباشرة .. 

لتركيب الإضافة فقط إنتبه معي للخطوات جيدًا .. أولاً قم بحفظ نسخة من قالبك 

قم بالبحث عن وسم ]]></b:skin> في مدونتك وتقوم بوضع الأكواد التالية فوق وسم </style>

/* Pop Up Animation Ramadan */
@keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px)}}@keyframes change_color{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}@keyframes run_hari18{0%{transform:translate(0%,0);opacity:0}50%{transform:translate(100%,0);opacity:1}100%{transform:translate(100%,0);opacity:0}}@keyframes sun_movement{0%{top:50px}100%{top:50px}}@keyframes run_malam18{0%{transform:translate(-20%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(20%,0);opacity:0}100%{transform:translate(-20%,0);opacity:1}}@keyframes moon_movement{0%{transform:translate(-200%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(200%,0);opacity:0}100%{transform:translate(-200%,0);opacity:1}}
/* Pop Up Ramadan */
#arlinapuasa2018{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 19px 38px rgba(0,0,0,0.1),0 15px 12px rgba(0,0,0,0.12);z-index:99;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:change_color 7s infinite linear,flipInX 1s linear}#arlinapuasa2018 .puasa18{position:absolute;color:#fff;font-size:2rem;font-weight:400;padding:30px;z-index:99999;text-align:center;margin:auto;left:0;right:0;top:20%}#arlinapuasa2018 .puasa18 p{margin:20px auto 20px;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}#arlinapuasa2018 .puasa18 .ramadan2018{font-size:3rem;font-weight:700}#arlinapuasa2018 a.close-popup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:999999;transition:all .3s}#arlinapuasa2018 a.close-popup:hover{color:#fff}#arlinapuasa2018 a.close-popup:active{opacity:0}#arlinapuasa2018 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#arlinapuasa2018 a.close-popup:hover i{transform:rotate(360deg)}.gunung18{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px;z-index:2;left: 0;}.gunung18.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:1}.hari18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari18 7s infinite linear}.hari18 .awan18{margin:30px auto;width:150px;height:70px;display:block;background:#e7e7e7;border-radius:35px;border:10px solid #ffffff;box-shadow:inset 0 -7px 0 0 #d7d7d7;position:absolute;top:90px;left:50px}.hari18 .awan18:before{content:'';width:65px;height:35px;display:block;background:#e7e7e7;border-radius:35px 35px 0 0;border:10px solid #ffffff;border-bottom:0;position:absolute;top:-35px;left:20px}.hari18 .awan18.invert{top:60px;left:250px}.hari18 .awan18.invert:before{left:50px}.hari18 .sun{width:75px;height:75px;display:block;background:#fff297;border-radius:50%;box-shadow:inset -5px -5px 0 0 #ddc991;position:absolute;top:50px;left:0;animation:sun_movement 7s infinite linear}.malam18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam18 7s infinite linear}.malam18 .bintang18 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}.malam18 .bintang18 .star:nth-child(1){top:50px;left:50px}.malam18 .bintang18 .star:nth-child(2){top:200px;left:70px}.malam18 .bintang18 .star:nth-child(3){top:100px;left:300px}.malam18 .bintang18 .star:nth-child(4){top:50px;left:220px}.malam18 .bintang18 .star:nth-child(5){top:160px;left:320px}.malam18 .bintang18 .star:nth-child(6){top:150px;left:230px}.malam18 .bintang18 .star:nth-child(7){top:180px;left:400px}.malam18 .bintang18 .star:nth-child(8){top:50px;left:360px}.malam18 .moon{width:75px;height:75px;display:block;background:#d7d7d7;border-radius:50%;box-shadow:inset -5px -5px 0 0 #c7c7c7;position:absolute;top:50px;left:100px;animation:moon_movement 7s infinite linear}
@media (max-width:800px){#arlinapuasa2018{top:10px!important;left:10px;right:10px;min-height:250px}#arlinapuasa2018 .puasa18{font-size:1.1rem;top:0}#arlinapuasa2018 .puasa18 .ramadan2018{font-size:2.2rem}.gunung18,.hari18,.bintang18,.malam18 .moon{display:none}}
#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}#arlinablock .header{margin:0 0 15px 0}#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}#arlinablock .fixblock div{display:none}#arlinablock .fixblock div.active{display:block}#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
.arlina-nav .share-box button{border:0;background:transparent;cursor:pointer;transition:all .3s}.arlina-nav .share-box button:hover{color:#e74c3c}

الأن سوف تبحث عن هذا الوسم<body>وتقوم بوضع الكود التالى اسفله ( تحته )

 

<div id='arlinapuasa2018'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'/></a>
<div class='puasa18'>
<p>كل عام والأمة الأسلامية بخير</p>
<p><span class='ramadan2018'>رمضان كريم</span></p>
</div>
<div class='gunung18'/>
<div class='gunung18 behind'/>
<div class='hari18'>
<div class='awan18'/>
<div class='awan18 invert'/>
<div class='sun'/>
</div>
<div class='malam18'>
<div class='bintang18'>
<div class='star'/>
<div class='star'/>
<div class='star'/>
<div class='star'/>
<div class='star'/>
<div class='star'/>
<div class='star'/>
<div class='star'/>
</div>
<div class='moon'/>
</div>
</div>

ملحوظة : في الكود السابق يمكنك التحكم في العبارات الترحيبية وتغيريها .

والأن مع اخر كود وسوف تبحث عن هذا الوسم</body>وتقوم بوضع الكود التالى فوقه.

<script type='text/javascript'>
//<![CDATA[
// Ramadan
$(window).bind("load",function(){$("#arlinapuasa2018").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>

الان سوف تقوم بحفظ الكواد  في قالبك ومبروك عليك اضافة رساله ترحيبيه بشهر رمضان 2018 لمدونات بلوجر ، يمكنك مشاهد الصورة التاليه من الإضافة ايضا.

إضافة نافذة ترحيبية بشهر رمضان المبارك لمدونات البلوجر - رمضان 2018

 هذا كل شئ فى موضوع اليوم بالتوفيق للجميع  وكل عام وانتم بخير وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق ، سوف نقوم بالرد علي الجميع إن شاء الله .. تحاتي | تكنوبلوج.