Mawdo3jded
2020-04-10, 11:45 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
عفواً لايمكن عرض الروابط في الإرشيف %2B%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2 586%25D9%258A%25D8%25A9%2B%25D8%25A7%25D8%25AD%25D 8%25AA%25D8%25B1%25D8%25A7%25D9%2581%25D9%258A%25D 8%25A9%2B%25D8%25A8%25D9%2585%25D9%2586%25D8%25A7% 25D8%25B3%25D8%25A8%25D8%25A9%2B%25D8%25B1%25D9%25 85%25D8%25B6%25D8%25A7%25D9%2586.png
شرح التركيب
افتح بلوجر < قالب < تحرير html
واضف الكود التالي فوق </head>
الكود مقسم علي نصفين
النصف الاول
<style> .ramadan-banner {
padding: 0px;
height: 95px;
margin-bottom: 10px;
background-color: rgba(239, 83, 80, 0.92) !important;
background: url(عفواً لايمكن عرض الروابط في الإرشيف) 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(عفواً لايمكن عرض الروابط في الإرشيف) 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(عفواً لايمكن عرض الروابط في الإرشيف);
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(عفواً لايمكن عرض الروابط في الإرشيف) 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='عفواً لايمكن عرض الروابط في الإرشيف' />
</div>
</div>
</div>
</div>
لتحميل الكود
اضغط هنا (عفواً لايمكن عرض الروابط في الإرشيف)
السلام عليكم ورحمة الله وبركاته
عفواً لايمكن عرض الروابط في الإرشيف %2B%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2 586%25D9%258A%25D8%25A9%2B%25D8%25A7%25D8%25AD%25D 8%25AA%25D8%25B1%25D8%25A7%25D9%2581%25D9%258A%25D 8%25A9%2B%25D8%25A8%25D9%2585%25D9%2586%25D8%25A7% 25D8%25B3%25D8%25A8%25D8%25A9%2B%25D8%25B1%25D9%25 85%25D8%25B6%25D8%25A7%25D9%2586.png
شرح التركيب
افتح بلوجر < قالب < تحرير html
واضف الكود التالي فوق </head>
الكود مقسم علي نصفين
النصف الاول
<style> .ramadan-banner {
padding: 0px;
height: 95px;
margin-bottom: 10px;
background-color: rgba(239, 83, 80, 0.92) !important;
background: url(عفواً لايمكن عرض الروابط في الإرشيف) 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(عفواً لايمكن عرض الروابط في الإرشيف) 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(عفواً لايمكن عرض الروابط في الإرشيف);
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(عفواً لايمكن عرض الروابط في الإرشيف) 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='عفواً لايمكن عرض الروابط في الإرشيف' />
</div>
</div>
</div>
</div>
لتحميل الكود
اضغط هنا (عفواً لايمكن عرض الروابط في الإرشيف)