احصائياتى

الردود
1

المشاهدات
455
 
الصورة الرمزية Mawdo3jded
Mawdo3jded
.:: عضو مميز ::.

المشاركات
419

+التقييم
0.17

تاريخ التسجيل
Nov 2019

الاقامة
في ارض الله

نظام التشغيل
ادد معرفة

رقم العضوية
2636
2020-04-10, 11:45 AM
المشاركة 1
2020-04-10, 11:45 AM
المشاركة 1
Distinctive بلوجر اضافة رمضانية احترافية بمناسبة رمضان
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته


شرح التركيب


افتح بلوجر < قالب < تحرير 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 &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> 

الخطوة الثانية
اضف الكود التالي في المكان الذي تريده


كود:
<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> 

عفواً لايمكن عرض الرابط إلا بعد الرد على الموضوع


التعديل الأخير تم بواسطة Hazem ; 2020-04-11 الساعة 12:45 PM
قديم 2020-04-10, 10:51 PM
المشاركة 2
الصورة الرمزية Hazem
Hazem
.:: المدير العام::.
  • غير متواجد
افتراضي رد: بلوجر اضافة رمضانية احترافية بمناسبة رمضان
جميل جدا شكرا لهذا الموضوع الرائع

اضافة رد

العلامات المرجعية

الكلمات الدلالية (Tags)

« الموضوع السابق | الموضوع التالي »


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

الانتقال السريع

المواضيع المتشابهه للموضوع: بلوجر اضافة رمضانية احترافية بمناسبة رمضان
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
صفحة سورس ألكيس سوريان بمناسبة العيد virus7x صفحات التسجيل كونكر اونلاين 113 2021-09-17 12:11 AM
يله كل حاجات رمضان اهي ElSaher تطوير سيرفرات كونكر 39 2021-01-17 05:17 AM
فكره جديد بمناسبة انتهاء الامتحانات Hazem تطوير سيرفرات كونكر 8 2020-09-15 01:02 PM
[طلب] تون سيتي رمضان + مسابقات رمضان AhmedGadd مشكلات السيرفيرات كونكر الشخصيه 1 2020-04-08 09:32 PM
بمناسبة اني بقالي كتير مش نشرت حاجا في المنتدا ElSaher تطوير سيرفرات كونكر 0 2019-08-27 09:28 PM

يمنع منعاً باتاً مخالفة قوانين المنتدي وان اي مخالفه تحصل سوف يتم التعامل معه بدون تهاون لحفظ انتظام واستمرار المنتدي
إن مشرفي ومدراء منتدي كونكر عرب بالرغم من محاولتهم المستمرة لمنع جميع المخالفات إلا أنه ليس بوسعهم إستعراض جميع المشاركات المدرجة ولا يتحمل المنتدى أي مسؤولية قانونية عن محتوى تلك المشاركات .
المنتدي غير مسئول عن أي اتفاق تجاري أو تعاوني بين الأعضاء فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه.

الساعة الآن 11:06 PM

الاتصال بنا - منتدي كونكر عرب - الأرشيف - الأعلى