منتدي اكواد

منتدي اكواد (https://code.vpscairo.com/index.php)
-   قسم تطوير المواقع (https://code.vpscairo.com/forumdisplay.php?f=43)
-   -   بلوجر اضافة رمضانية احترافية بمناسبة رمضان (https://code.vpscairo.com/showthread.php?t=4342)

Mawdo3jded 2020-04-10 11:45 AM
بلوجر اضافة رمضانية احترافية بمناسبة رمضان
 
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
عفواً لايمكن عرض الروابط إلا بعد الرد على الموضوع

شرح التركيب


افتح بلوجر < قالب < تحرير html
واضف الكود التالي فوق </head>
الكود مقسم علي نصفين

النصف الاول
كود PHP:
          <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; 
النصف الثاني
كود PHP:
}
.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> 
الخطوة الثانية
اضف الكود التالي في المكان الذي تريده

كود PHP:
<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;ا مقبولًا </span><span style='     margin: 0 auto;     text-align: center; '>و</span>
                <span style='     text-align: center; '>افطار&#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> 
عفواً لايمكن عرض الروابط إلا بعد الرد على الموضوع

محمد ياسر 2020-04-10 10:51 PM
رد: بلوجر اضافة رمضانية احترافية بمناسبة رمضان
 
جميل جدا شكرا لهذا الموضوع الرائع


الساعة الآن 05:32 PM

مرحبا بكم في منتدي اكواد لتطوير الالعاب