بحلول رمضان فالعديد من المدونون يبحثون على اضافات رمضان ولكن للاسف الاضافات الموجودة لحد الان كلها قديمة او غير انيقة...
اليوم و حصريا اتيت لكم باضافة رائعة لمدونات بلوجر و هي عبارة عن رسالة يمكنك تغييرها كما تشاء يعني رسالة شخصية... المميز في الاضافة هي بعض التئتيرات تلاتية الابعاد التي سيستمتع الزائع عند معاينتها.
بالمناسبة, فانا ايضا استعمل الاضافة ^_^*
- داخل القالب تحرير
html - فوق هذا الوسم
<b:skin/> نضع الكود التالي:
/*====== OuaMessage - by ha1pc.blogspot.com ====== */ .ha1pc_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} .ha1pc_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-ha1pc,.profile-ha1pc2{padding:4px} .ha1pc_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent} .profile-ha1pc { background: #2195D3; border: 1px solid transparent; border-radius: 100%; position: fixed; bottom: 10px; left: 10px; cursor: pointer; width: 50px; height: 50px; z-index: 9999; } .profile-ha1pc2 { background: #FFF; border: 5px solid transparent; border-radius: 100%; position: absolute; bottom: -240px; left: -123px; width: 199px; height: 199px; } .close_ha1pc { font-size: 40px; color: rgba(36, 202, 26, 0.91); position: absolute; top: -30px; right: -30px; cursor: pointer; } @media (max-width:800px){.ha1pc_message{width:90%!important;margin-left:-45%!important;} .profile-ha1pc2{left:50%;margin-left:-105px;} .ha1pc_message:before{left:50%;margin-left:-20px;} .close_ha1pc{color:#555;top:-16px;right:0;} } .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} } .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)} } /* end Oua-Message*/
- بعد دلك اضف الكود التالي فوق هدا الوسم
<body/>
<img alt='' class='profile-ha1pctada' height='50' onclick='openha1pcfitri()' src='https://goo.gl/cOr2jh' title='أنقر فوقي لأقول لك شيئا' width='50'/> <div class='ha1pc_layout animated flip' id='id_fitri'> <div class='ha1pc_message'> <h2>"رمضان مبارك لكل العرب"</h2> <p>بصفتي <br/> مؤسس مدونة <b>محترفي الحاسوب</b> أهنئكم واقول لكم <br/> <b>الله يتقبل صيامكم وقيامكم ومبارك عليكم الشهر </b>.</p> <img alt='' class='profile-ha1pc2' height='200' src='https://goo.gl/cOr2jh' width='200'/> <div class='close_ha1pc' onclick='closeha1pcfitri()'>X</div> </div> </div> <script> //<![CDATA[ function openha1pcfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"}; function closeha1pcfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"}; //]]> </script>
بحلول رمضان فالعديد من المدونون يبحثون على اضافات رمضان ولكن للاسف الاضافات الموجودة لحد الان كلها قديمة او غير انيقة...
اليوم و حصريا اتيت لكم باضافة رائعة لمدونات بلوجر و هي عبارة عن رسالة يمكنك تغييرها كما تشاء يعني رسالة شخصية... المميز في الاضافة هي بعض التئتيرات تلاتية الابعاد التي سيستمتع الزائع عند معاينتها.
بالمناسبة, فانا ايضا استعمل الاضافة ^_^*
- داخل القالب تحرير
html - فوق هذا الوسم
<b:skin/> نضع الكود التالي:
/*====== OuaMessage - by ha1pc.blogspot.com ====== */ .ha1pc_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} .ha1pc_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-ha1pc,.profile-ha1pc2{padding:4px} .ha1pc_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent} .profile-ha1pc { background: #2195D3; border: 1px solid transparent; border-radius: 100%; position: fixed; bottom: 10px; left: 10px; cursor: pointer; width: 50px; height: 50px; z-index: 9999; } .profile-ha1pc2 { background: #FFF; border: 5px solid transparent; border-radius: 100%; position: absolute; bottom: -240px; left: -123px; width: 199px; height: 199px; } .close_ha1pc { font-size: 40px; color: rgba(36, 202, 26, 0.91); position: absolute; top: -30px; right: -30px; cursor: pointer; } @media (max-width:800px){.ha1pc_message{width:90%!important;margin-left:-45%!important;} .profile-ha1pc2{left:50%;margin-left:-105px;} .ha1pc_message:before{left:50%;margin-left:-20px;} .close_ha1pc{color:#555;top:-16px;right:0;} } .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} } .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)} } /* end Oua-Message*/
- بعد دلك اضف الكود التالي فوق هدا الوسم
<body/>
<img alt='' class='profile-ha1pctada' height='50' onclick='openha1pcfitri()' src='https://goo.gl/cOr2jh' title='أنقر فوقي لأقول لك شيئا' width='50'/> <div class='ha1pc_layout animated flip' id='id_fitri'> <div class='ha1pc_message'> <h2>"رمضان مبارك لكل العرب"</h2> <p>بصفتي <br/> مؤسس مدونة <b>محترفي الحاسوب</b> أهنئكم واقول لكم <br/> <b>الله يتقبل صيامكم وقيامكم ومبارك عليكم الشهر </b>.</p> <img alt='' class='profile-ha1pc2' height='200' src='https://goo.gl/cOr2jh' width='200'/> <div class='close_ha1pc' onclick='closeha1pcfitri()'>X</div> </div> </div> <script> //<![CDATA[ function openha1pcfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"}; function closeha1pcfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"}; //]]> </script>
