طريقة إضافة رسالة ترحيبية للزائر بمناسبة شهر رمضان على مدونتك في بلوجر

طريقة اضافة رسالة ترحيبية على مدونة بلوجر

مرحبا بكم متابعينا الكرام

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

معاينة الاضافة اضغط هنا

لتركيب الاضافة على المدونة نحتاج بعض الأكود وإتباع هذه الخطوات فقط:

1- نبحث عن هذا الوسم في القالب:

]]></b:skin> 

  

ونقوم بوضع الكود التالي  فوقه مباشرة:

/* 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}  

  

• 2- نبحث الآن عن هذا الوسم: <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>  

  

ملاحظة: يمكن تغيير الكلمات الملونة بالأحمر الى ما تشاء في الكود الذي فوق

• 3- نقوم بالبحث عن هذا الوسم الأخير </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> 

  

وقم بحفظ القالب ومبروك عليك الإضافة المميزة وتقبل الله منا ومنكم صالح الأعمال

تعديل المقال