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

صورة الاضافة

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

  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>

والسلام عليكم ورحمة الله وبركاتة اتمني ان التدوينة قد تنال اعجابكم رمضان كريم

المصدر بروتك

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top