حصريا اضافة رمضانية احترافية بمناسبة رمضان


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

صورة الاضافة

كيفية التركيب

  1. افتح بلوجر < قالب < تحرير html
  2. واضف الكود التالي فوق </head>
<style>
.ramadan-banner {
padding: 0px;
height: 95px;
margin-bottom: 10px;
background-color: rgba(239, 83, 80, 0.92) !important;
background: url(https://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/s1600/tr.png) no-repeat;
margin-bottom: 10px;
}
.ramadan-banner .ramadan-wrapper { width: 1024px; margin: auto; } .ramadan-banner .ramadan-wrapper &gt; div { float: left; } .ramadan-banner .ramadan-wrapper .ramadan-time, .ramadan-banner .ramadan-wrapper .ramadan-counter {
margin-top: 4px;
width: 300px;
height: 88px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #e83431 !important;
background: url(https://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/s1600/tr.png) no-repeat;
}
.ramadan-banner .ramadan-wrapper .ramadan-time { position: relative; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon { position: absolute; right: 10px; left: initial; top: 50%; transform: translateY(-50%); } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap {
position: relative;
background: #000;
width: 60px;
height: 60px;
margin: 0 auto;
border-radius: 50px;
overflow: hidden;
} .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon { background: url(https://olxegstatic-a.akamaihd.net/75862d2-785/packed/img/2f44c58e9207fffdb9704e0ead2f07499d.png); width: 60px; height: 60px; background-size: contain; display: block; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask:before {
content: &quot;&quot;;
background: #372b2b;
width: 60px;
height: 60px;
display: block;
position: absolute;
top: 50%;
left: 40%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50px;
transition: all ease 0.3s;
border: 1px solid;
} .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day1:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day2:before { left: 30%; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day3:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day4:before { left: 20%; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day5:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day6:before { left: 25%; top: 35%; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day7:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day8:before { border-radius: 130px; width: 130px; height: 130px; left: -30px; top: 10px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day9:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day10:before { left: -40%; width: 100px; height: 100px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day11:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day12:before { left: -70%; width: 100px; height: 100px; top: 20px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day13:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day14:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day15:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day16:before { left: -50%; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day17:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day18:before { left: 140%; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day19:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day20:before { left: 130%; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day21:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day22:before { border-radius: 130px; width: 130px; height: 130px; left: 100px; top: 10px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day23:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day24:before { border-radius: 130px; width: 130px; height: 130px; left: 90px; top: 10px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day25:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day26:before { border-radius: 130px; width: 130px; height: 130px; left: 80px; top: 10px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day27:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day28:before { left: 60%; top: 25px; } .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day29:before, .ramadan-banner .ramadan-wrapper .ramadan-time-moon .moon-wrap .moon-mask.day30:before { left: 55%; top: 29px; } .ramadan-banner .ramadan-wrapper .ramadan-time-prayer { float: left; color: white; font-size: 16px; padding: 10px; height: calc( 100% - 20px); width: calc( 100% - 20px); text-align: left; } .ramadan-banner .ramadan-wrapper .ramadan-time-prayer-item { margin-bottom: 5px; } .ramadan-banner .ramadan-wrapper .ramadan-time .prayer-name {
width: 145px;
text-align: left;
font-size: 13px;
font-weight: bold;
} .ramadan-banner .ramadan-wrapper .ramadan-time .prayer-time { font-weight: bold; } .ramadan-banner .ramadan-wrapper .ramadan-kareem { height: 80px; width: 424px; background: url(https://olxegstatic-a.akamaihd.net/75862d2-785/packed/img/2fc3dbff3a7146a5a48162fdcf22234c1e.png) top center; background-repeat: no-repeat; } .ramadan-banner .ramadan-wrapper .ramadan-counter { text-align: left; color: #fff; } .ramadan-banner .ramadan-wrapper .ramadan-counter-time { text-align: left; font-size: 16px; font-weight: bold; padding: 15px 25px 0 25px; float: left; } .ramadan-banner .ramadan-wrapper .ramadan-counter-time span {
display: block;
font-size: 14px;
line-height: 18px;
} .ramadan-banner .ramadan-wrapper .ramadan-counter-cannon{
float: right;
width: 2pc;
}
</style>

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

  1. اضف الكود التالي في المكان الذي تريده
<div class='ramadan-banner' data-fajr-time='2017-06-02T03:10:00+02:00' data-maghrib-time='2017-06-02T18:52:00+02:00' data-next-fajr='2017-06-03T03:10:00+02:00' data-ramadan-day='7 رمضان 1438'>
<div class='ramadan-wrapper'>
<div class='ramadan-time'>
<div class='ramadan-time-moon'>
<div class='moon-wrap'>
<div class='moon-mask clip-circle'>
<div class='moon'/>
</div>
</div>
</div>
<div class='ramadan-time-prayer'>
<div class='ramadan-day'>القاهرة: 7 رمضان 1438</div>
<div class='ramadan-time-prayer-item'><span class='prayer-name'>وقت الفجر  </span><span class='prayer-name'> 03:10 </span>
<span class='prayer-time'>--</span><span class='prayer-name'> وقت المغرب </span><span class='prayer-name'> 06:52 </span></div>
</div>
</div>
<div class='ramadan-kareem'/>
<div class='ramadan-counter'>
<div class='ramadan-counter-time'>
<strong class='ramadan-prayer-name'/>
<span style='     text-align: center; '>بروتك تتمنى لكم صوم&#1611;ا مقبول&#1611;ا </span><span style='     margin: 0 auto;     text-align: center; '>و</span>
<span style='     text-align: center; '>افطار&#1611;ا شهي&#1611;ا</span>
</div>
<div class='ramadan-counter-cannon'>
<img src='https://olxegstatic-a.akamaihd.net/75862d2-785/naspersclassifieds-regional/olxmena-atlas-web/static//img/ramadan/cannon.png'/>
</div>
</div>
</div>
</div>

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

شارك المقال :

إرسال تعليق

 
جميع الحقوق محفوظة عالم المطور | اكتشف |طريق العلم والتقنيه|g10u|Developerworld & تصميم OddThemes & تعريب وتطوير : عالم المدون