منتدي اكواد
 |
 |
|
 |
 |
الملاحظات
قسم تطوير المواقع قسم تطوير مواقع الويب
أهلا وسهلا بك إلى منتدي اكواد.
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.
كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.
بلوجر اضافة رمضانية احترافية بمناسبة رمضان
بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته شرح التركيب افتح بلوجر الكود مقسم علي نصفين النصف الاول
|
|
المشاركات 264 |
+التقييم 0.15 |
تاريخ التسجيل Nov 2019 |
الاقامة في ارض الله |
نظام التشغيل ادد معرفة |
رقم العضوية 2636 |
2020-04-10, 11:45 AM
المشاركة
1
بلوجر اضافة رمضانية احترافية بمناسبة رمضان
|
|
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شرح التركيب
افتح بلوجر < قالب < تحرير html
واضف الكود التالي فوق </head>
الكود مقسم علي نصفين
النصف الاول
النصف الثاني
الخطوة الثانية
اضف الكود التالي في المكان الذي تريده
عفواً لايمكن عرض الرابط إلا بعد الرد على الموضوع
السلام عليكم ورحمة الله وبركاته
شرح التركيب
افتح بلوجر < قالب < تحرير 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 >
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: "
"
;
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; '>ادد معرفة تتمنى لكم صومًا مقبولًا </span><span style=' margin: 0 auto; text-align: center; '>و</span>
<span style=' text-align: center; '>افطارًا شهيًا</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>
عفواً لايمكن عرض الرابط إلا بعد الرد على الموضوع
رد: بلوجر اضافة رمضانية احترافية بمناسبة رمضان
« الموضوع السابق | الموضوع التالي »
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| بلوجر اضافة تأثير التحميل علي شكل قمر بمناسبة شهر رمضان الكريم | Mawdo3jded | قسم تطوير المواقع | 4 | 2024-02-05 08:26 PM |
| بلوجر اضافة اداة الترحيب بشهر رمضان الكريم | Mawdo3jded | قسم تطوير المواقع | 3 | 2020-04-27 08:09 PM |
| حصريا اضافة هيدر احترافي بخلفية رمضانية لبلوجر | Mawdo3jded | قسم تطوير المواقع | 2 | 2020-04-26 11:43 PM |
| اضافة اداة رمضان كريم لمدونات بلوجر بشكل رائع | Mawdo3jded | قسم تطوير المواقع | 1 | 2020-04-18 02:38 PM |
| [طلب] تون سيتي رمضان + مسابقات رمضان | AhmedGadd | مشكلات السيرفيرات كونكر الشخصيه | 1 | 2020-04-08 09:32 PM |
الساعة الآن 01:45 AM
Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.