اضافة اداة رائعة جدا بمناسبة شهر رمضان المبارك

<

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

صورة الإضافة

معاينة الإضافة

يمكنك معاينتها عن طريق الدخول الي هذا الرابط

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

1.قم بالذهاب الي لوحة التحكم
2.قم بالانتقال الي قسم قالب
3.اضغط علي تحرير HTML

الخطوة الأولي

قم بالبحث عن
</head>

وأضف الكود التالي فوقه

<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:px;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>

ملاحظة

 left:px هذا الكود المسؤل عن مكان الاضافة فهي جهه اليمين
اذا كنت تريد جعل الاضافة في اليسار قم بوضع رقم 8 بعد :  left:8px

bottom:10px هذا الكود مسؤل عن ارتفاع الاضافة اذا كنت تريد جعلها في اسفل الصفحة اتركه كما هو
اذا كنت تريد جعل الاضافة اعلي الصفحة قم بتغيير الرقم 10 الي 610 bottom:610px

width:50px ; height:50px هذا الكودان مسؤلان عن حجم الصورة المتحركة لجعلها أكبر قم بتغيير قيمة 50 الي 100 في الكودين ليصبحا بهذا الشكل width:100px ; height:100px  و انصحك بألا تزيد رقم 100 حتي لا تصبح الصورة كبيرة فـتزعج الزوار 

الخطوة الثانية

 ابحث عن الوسم
</body>

واضف كود الأداة الذي سيناسبك فوقه 

صور الإضافة

كود الإضافة

<img class='profile-idul tech5academy' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='http://www.3rbz.com/uploads/550b00f349291.png' 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> Alsabh 4 Download </b>
 نهنأكم بحلول شهر رمضان المبارك ونود أن نقول لكم :
      <br/>
   <br>
الله يتقبل صيامكم وقيامكم و مبارك عليكم الشهر وكل عام وأنتم بخير 
</br>
</p>


    <img class='profile-tech5academy' expr:alt='data:post.author' height='200' src='http://upload.3dlat.net/uploads/3dlat.net_13_15_f321_f7ecc44931f2df5bfe4574ecb3c09cac.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>

صور الإضافة

كود الإضافة

<img class='profile-idul tech5academy' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='http://www.3rbz.com/uploads/550b00f349291.png' 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> Alsabh 4 Download </b>
 نهنأكم بحلول شهر رمضان المبارك ونود أن نقول لكم :
      <br/>
   <br>
الله يتقبل صيامكم وقيامكم و مبارك عليكم الشهر وكل عام وأنتم بخير 
</br>
</p>

<br>
  <b>أرجو تشغيل الأنشودة ستنال اعجابكم</b>
</br>
<br/>
<center>
<object data='https://sites.google.com/site/cmudawin/flash/player.swf' height='24' id='audioplayer1' type='application/x-shockwave-flash' width='275'> <param name='movie' value='https://sites.google.com/site/cmudawin/flash/player.swf'/> <param name='FlashVars' value='playerID=audioplayer1&amp;bg=0xBAE2FB&amp;leftbg=0x74F36B&amp;lefticon=0xffffff&amp;rightbg=0x07C011&amp;rightbghover=0x5AE165&amp;righticon=0xffffff&amp;righticonhover=0xffffff&amp;text=0xffffff&amp;slider=0x003B73&amp;track=0x333333&amp;border=0x292929&amp;loader=0x00CD63&amp;loop=yes&amp;autostart=yes&amp;soundFile=http://s2.3lbh.com/s/14NX98QP.mp3'/> <param name='quality' value='high'/> <param name='menu' value='false'/> <param name='wmode' value='transparent'/> </object>
</center>
<br/>




    <img class='profile-tech5academy' expr:alt='data:post.author' height='200' src='http://upload.3dlat.net/uploads/3dlat.net_13_15_f321_f7ecc44931f2df5bfe4574ecb3c09cac.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>

قم بتغيير هذا الرابطhttp://s2.3lbh.com/s/14NX98QP.mp3  برابط الأغنية الMp3 التي تريدها ولكن من رأي ان تضع
اغنية او انشودة مناسبة لاننا في شهر رمضان المبارك

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

ثم إضغط كليك يمين علي المستطيل الاسود المشار به واختر
inspect كما بالصورة


تنبثق لك من أسفل هذه النافذه ويوجد بها رابط ازرق مكتوب بنهايته mp3
وهو رابط الاغنية

 
الي الأن تم تركيب الاضافة مبروك عليك ^_^

ملاحظة

أنا لست مصمم هذه الأداة ولكني أسعي كـــي أتعلم هذه اللغة وشكرا

الخاتمة

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

شاهد أيضا

تركيب مشغل Mp3 لمدونات بلوجر: إضغط هنا

<

10:02 ص