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>