إضافة رمضان مبارك كريم بشكل رائع وجذاب لمدونات بلوجر

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

رابط الموقع

كيفية تركيب إضافة رمضان مبارك لمدونات بلوجر 

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

أولا قم بالتوجه إلى لوحة تحكم بلوجر تم قم بالتوجه إلى خانة قالب بعدها تحرير HTML

قم بأخد نسخة إحتياطية لقالب مدونتك تفاديا لأي أخطاء تقوم بها 

الأن قم بالظغط على Ctrl+F في لوحة المفاتيح سيظهر أمامك مستطيل البحت 

قم بالبحث عن الوسم </head> و أسفله مباشرة قم بوضع الأكواد التالية :

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan by technical-dose.blogspot.com */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#tech-dose{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;left:0;right:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#tech-dose .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;right:0;left:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#tech-dose .puasa19 p{margin:10px auto;font-style:italic}#tech-dose .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#tech-dose a.close-popup{background:#428bca;position:absolute;bottom:20px;left:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#tech-dose a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#tech-dose a.close-popup:active{opacity:.9}
.ketupat{position:absolute;right:0;left:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#tech-dose .puasa19{font-size:1rem}#tech-dose .puasa19 .ramadhan2020{font-size:1.5rem}#tech-dose{min-height:260px;right:20px;left:20px}}
</style>
</b:if>

وهذه صورة توضيحية لمن لم يستوعب الأمر

الآن و بعد وضع الأكواد الأولى في مكانها الصحيح
قم بالحث عن </body> و ضع الأكواد التالية فوقه مباشرة 

<b:if cond='data:view.isHomepage'>
<div id='tech-dose'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>اغلاق</a>
<div class='puasa19'>
   <p>رمضان مبارك سعيد</p>
   <p><span class='ramadhan2020'>رمضان 1440 هجرية</span></p>
   <p>اسال الله ان يبلغنا رمضان ونحن في احسن حال</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#tech-dose").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

ليصبح على هذا النحو

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

ختاما إن واجهتك أي مشاكل أثتاء تركيب الإضافة فقط قم بمراسلتنا عبر التعليقات لنحل لك المشكل إنشاء الله