إضافة نافذة ترحيبية بشهر رمضان المبارك لمدونات البلوجر - رمضان 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

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

ربح المال عن طريق اضافة عداد زمني قبل الدخول الي الروابط و الصفحات الخارجية

بسم الله الرحمن الرحيم ، والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين.

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

السبب : 

ويرجع السبب فى ذلك أن الزائر بمجرد أن يجد رابط التحميل يخرج من الصفحة دون أن يهتم بقراءة المحتوى،

الطريقة الأولى : 

عرض عداد تنازلى قبل ظهور الرابط مع رسالة "إنتظر قليلا قبل ظهور الرابط"

الطريقة الثانية  :

وهى ظهور العداد الزمنى بعد الضغط على الرابط  وقبل التوجه إلى الصفحة الخارجية مع ظهور رسالة "إنتظر قليلا قبل التوجه إلى الصفحة" .

الإضافة مناسبة لجميع مواقع و صفحات الويب Html بما فيها مدونات بلوجر .

تابع شرح تركيب الكود لمدونات بلوجر:

 كيفية تركيب عداد تنازلى يؤخر الخروج من الموقع لمدونات بلوجر

. إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب ( قم بالإحتفاظ بنسخة إحتياطية من القالب).
** سواء كنت ستستخدم الطريقة الأولى أو الثانية أضف  الكود الأول قبل الوسوم </head>

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

إذهب إلى صفحة المشاركة التى تريد إضافة الرابط الخارجى أو رابط التحميل بها ثم أضف الكود الثاني داخل تبويب HTML للمشاركة علي حسب طريقة ظهور المؤقت الزمنى.

 ملاحظات:

لا تنسى إستبدال الرابط https://www.tknobloog.com  برابط التحميل أو الرابط الخارجى الخاص بك.

إذا أردت تغيير العداد التنازلى قم بتغيير رقم 5 الموجود بالكود.
الآن الشرح فيديو إن أعجبك نتمني الإشتراك في القناة وتفعيل الجرس ليصلك كل جديد

الآن تحميل الأكواد

تحميل

إذا أعجبك الشرح الرجاء دعمنا مادياً من خلال الضغط علي أي إعلان شكراً لك