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

السلام عليكم ورحمة الله وبركاته

في هذه المناسبة الجميلة والرائعة اتقدم بالتهنئة القلبية الحارة للجميع بمناسبة حلول شهر رمضان الكريم .. أعاده الله علينا بالخير والمحبة وكل عام وانتم بألف خير , وتقبل الله طاعاتنا واعمالنا

أداة مرحبا يا رمضان أداة جميلة لتهنئة الزوار بشكل جميل وإحترافي تضهر على شكل أيقونة دائرية في أسفل المدونة على اليسار عند الضغط علها تنبثق لك رسالة بتأثيرات CSS جميلة (Animation) يمكنك معاينتها على مدونتنا في الأسفل على اليسار

طريقة التركيب

1. اذهب الى لوحة التحكم فى بلوجر - تسجيل الدخول
2. انتقل الى قسم قالب
3.إضغط على تحرير HTML
4.إبحث عن الوسم </head> وأضف الكود التالي فوقه

html<style>
/*<![CDATA[*/
.tech5academy{-webkit-animation:tech5academy 1s linear 1s infinite normal;animation:tech5academy 1s linear 1s infinite normal}
@-webkit-keyframes tech5academy{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tech5academy{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.tech5cademy_message{font-family:droid arabic naskh;width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;right:50%;margin-right:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-tech5academy{padding:4px}
.tech5cademy_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;right:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:40px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-tech5academy{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;right:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;left:-30px;cursor:pointer}
@media (max-width:800px){.tech5cademy_message{width:90%!important;margin-right:-45%!important;}
.profile-tech5academy{right:50%;margin-right:-105px;}
.tech5cademy_message:before{right:50%;margin-right:-20px;}
.close_idul{color:#555;top:-16px;left:0;}
}
/*]]>*/
</style>

5.إبحث عن الوسم </body> وأضف الكود التالي فوقه

JS<img class='profile-idul tech5academy' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='//lh3.googleusercontent.com/-F9t5skf9yRE/AAAAAAAAAAI/AAAAAAAABBM/i-_M0z-X9SM/s512-c/photo.jpg' title='أنقر فوقي لأقول لك شيئا' width='50'/>
<div class='idul_layout animated flip' id='id_fitri'>
  <div class='tech5cademy_message'>
    <h2>&quot;مرحبا يا رمضان&quot;</h2>

    <p>
      <br/><br/> بصفتي  <b>

</b> مشرف في مدونة <b>أكاديمية التقنية</b>
 أهنؤكم وأقول لكم :
      <br/>
   <br>
الله يتقبل صيامك وقيامك ومبارك عليك الشهر 
</br>
</p>
    <img class='profile-tech5academy' expr:alt='data:post.author' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4kmlnxl5BCC4mzSViFbVWXa3R3VYgmFxX_eJ05UK_TFTwjDlbNV7hWuLKM_pJQuOzDZ7a5rAgmxWoGBWxkyYrzepVuAPwpj77dPsNikyAOm8DFd4kcg8scC0YsSPX3eQgA16mGPNQ0LQ/w500-h498/%25D9%2585%25D8%25AD%25D9%2585%25D8%25AF.png' width='200'/>
    <div class='close_idul' onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

6. إحفظ القالب