حصريا اضافة رمضانية احترافية بمناسبة رمضان
صورة الاضافة
كيفية التركيب
- افتح بلوجر < قالب < تحرير html
- واضف الكود التالي فوق </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 > 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: "";
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>
الخطوة الثانية
- اضف الكود التالي في المكان الذي تريده
<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; ‘>ادد معرفة تتمنى لكم صومًا مقبولًا </span><span style=’ margin: 0 auto; text-align: center; ‘>و</span>
<span style=’ text-align: center; ‘>افطارًا شهيًا</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>