إضافة أداة مرحبا يا رمضان 2 لمدونات بلوجر |
السلام عليكم ورحمة الله وبركاته عدنا إليكم من جديد , وصممنا لكم نسخة ثانية جديدة وحصرية من إضافة أداة مرحبا يا رمضان الإضافة نالت إعجاب الكثير من المدونين لذالك قررنا إضافة نسخة جديدة بالكامل حيث غيرنا مكان الصورة لون الإضافة والثأثير أيضا
النسخة الأولى : أداة مرحبا يا رمضان لمدونات بلوجر
يمكنك المعاينة من خلال المدونة أيضا !
طريقة التركيب
1. إبحث عن </head> ثم أضف الكود التالي فوقه
<style>
/*<![CDATA[*/
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.idul_layout{text-align:center;position:fixed;top:0;right:0;bottom:0;left:0;background:#3498db;z-index:99999;display:none}
.idul_message{font-family:droid arabic kufi;width:50%;background:rgba(33, 149, 242, 0);font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#fff;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-idul2{padding:4px}
.idul_message:before{content: "";
height: 0;
width: 0px;
position: absolute;
right: 283px;
border: 20px solid #ffffff;
border-color:rgba(32, 149, 243, 0) rgba(33, 150, 242, 0) #ffffff;
bottom: -45px;
}
.profile-idul{background:#FFC107;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:40px;cursor:pointer;width:100px;height:100px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;right:200px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;left:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-right:-45%!important;}
.profile-idul2{right:50%;margin-right:-105px;}
..idul_message:before{right:50%;margin-right:-20px;}
.close_idul{color:#555;top:-16px;left:0;}
}
.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)}
}
/*]]>*/
</style>
2.الخطوة الثانية والأخير إبحث عن الوسم </body> ثم أضف الكواد التالية فوقهه
<img class='profile-idul tada' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='https://blogger.googleusercontent.com/img/proxy/AVvXsEiJPNl1sJLRFUVeQeesQih-4idDy1McdQxVfHGZSCEzQkQ-uMcbsXxSBhc3dweGpLIPLfIlwS3S3u3qnSGsAMVEhyv82bt0l8yxb4cFbfFQ3pvCRKG-fdrHzF_DQI3VrE6HIqzlx1cfjPVK8NsS-D-jIzRGQJKAEY__=s90-p' title='إضغط لأقول لك شيئا!' width='50'/>
<div class='idul_layout animated fadeInDown' id='tech5academy-blogspot-com'>
<div class='idul_message'>
<h2>"مرحبا يا رمضان"</h2>
<p>
<br/><br/> بصفتي <b>
</b> مشرف في مدونة <b>أكاديمية التقنية</b>
أهنؤكم وأقول لكم :
<br/>
<br>
الله يتقبل صيامك وقيامك ومبارك عليك الشهر
</br>
</p>
<img class='profile-idul2' 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()'>&times</div>
</div>
</div>
<script>
//<![CDATA[
var _0xf212=["\x37\x20\x63\x28\x29\x7B\x35\x20\x30\x3D\x36\x2E\x61\x28\x22\x62\x2D\x38\x2D\x39\x22\x29\x3B\x22\x33\x22\x21\x3D\x3D\x30\x2E\x32\x2E\x31\x3F\x30\x2E\x32\x2E\x31\x3D\x22\x33\x22\x3A\x30\x2E\x32\x2E\x31\x3D\x22\x34\x22\x7D\x3B\x37\x20\x64\x28\x29\x7B\x35\x20\x30\x3D\x36\x2E\x61\x28\x22\x62\x2D\x38\x2D\x39\x22\x29\x3B\x22\x34\x22\x21\x3D\x3D\x30\x2E\x32\x2E\x31\x3F\x30\x2E\x32\x2E\x31\x3D\x22\x34\x22\x3A\x30\x2E\x32\x2E\x31\x3D\x22\x33\x22\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x65\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x73\x74\x79\x6C\x65\x7C\x62\x6C\x6F\x63\x6B\x7C\x6E\x6F\x6E\x65\x7C\x76\x61\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x7C\x63\x6F\x6D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x74\x65\x63\x68\x35\x61\x63\x61\x64\x65\x6D\x79\x7C\x6F\x70\x65\x6E\x49\x64\x75\x6C\x66\x69\x74\x72\x69\x7C\x63\x6C\x6F\x73\x65\x49\x64\x75\x6C\x66\x69\x74\x72\x69","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x953dx1,_0x953dx2,_0x953dx3,_0x953dx4,_0x953dx5,_0x953dx6){_0x953dx5= function(_0x953dx3){return _0x953dx3.toString(36)};if(!_0xf212[5][_0xf212[4]](/^/,String)){while(_0x953dx3--){_0x953dx6[_0x953dx3.toString(_0x953dx2)]= _0x953dx4[_0x953dx3]|| _0x953dx3.toString(_0x953dx2)};_0x953dx4= [function(_0x953dx5){return _0x953dx6[_0x953dx5]}];_0x953dx5= function(){return _0xf212[6]};_0x953dx3= 1};while(_0x953dx3--){if(_0x953dx4[_0x953dx3]){_0x953dx1= _0x953dx1[_0xf212[4]]( new RegExp(_0xf212[7]+ _0x953dx5(_0x953dx3)+ _0xf212[7],_0xf212[8]),_0x953dx4[_0x953dx3])}};return _0x953dx1}(_0xf212[0],14,14,_0xf212[3][_0xf212[2]](_0xf212[1]),0,{}))
//]]>
</script>
5.إحفظ القالب
إذا أعجبتك الإضافة وتريد نسخ أخرى (هناك الكثير) شارك التدوينة مع أصدقائك
ولاتنسى التعليق