اضافة عرض المواضيع الخاصة بعرب ويب
وهي اضافة مميزة تجعل مواضيع تظهر بطريقة أحترافية في السايد بار
فكما تلاحظون الأضافة في الصورة السابقة فهي اضافة جميلة جدا من موقع عرب ويب
الأضافة مكونة من كود HTML
جميعنا نعرف أن أكواد HTML توضع في التخطيط
للتذكير فقط يجب أن تركز جيداً بأماكن الأكواد التي سنتخدمها في التخطيط
وقبل كل شئ قم بأخذ نسخة أحتياطية للقالب لتجنب الأخطاء
الان نبدأ بكود HTML قم بنسخ هذا الكود ووضعه في التخطيط:
<style>
.item-widget-member {
max-width: 100%;
height: 268px;
position: relative;
color: #FFF;
}
.btn.btn-primary:hover {
background: rgba(68, 68, 68, 1);
color: #F4F4F4!important;
}
.item-widget-member img {
width: 100%;
height: 270px;
}
.item-widget-member .group-inside {
position: absolute;
top: 27px;
right: 0px;
padding: 20px;
}
.item-widget-member h3 {
font-size: 14px;
color: #FFFFFF;
margin: 0;
font-family: droid arabic kufi;
background: rgba(231, 76, 60, 0.87);
padding: 8px;
}
.item-widget-member p {
margin-bottom: 24px;
font-size: 12px;
line-height: 20px;
font-family: Electrolize,ge_ss_threeregular;
color: #EFEFEF;
background: #444;
padding: 4px;
opacity: .95;
}
.btn.btn-primary{
background: #E74C3C;
color: #fff!important;
font-family: droid arabic kufi;
padding: 8px;
font-size: 12px;
border-radius: 2px;
display: inline-flex;
}
</style>
<div class="item-widget-member">
<div class="thumb">
<a href="#"><img src="صورة للموضوع " /></a></div>
<!-- .thumb -->
<div class="group-inside">
<div class="info">
<h3>
عنوان الموضوع</h3>
<p>
وصف صغير للموضوع</p>
<a rel="nofollow" href="رابط الموضوع" class="btn btn-primary btn-sm" target="_blank">المزيد . . .</a> </div>
</div>
</div>
تغييرات الكود:
صورة للموضوع= صورة التي تريد عرضة (كصورة للقالب أو صورة الإضافة التي تريد عرضها)
عنوان الموضوع= عنوان الذي تريد عرضة ( كعنوان القالب او عنوان الأضافة التي تريد عرضها)
عنوان الموضوع= عنوان الذي تريد عرضة ( كعنوان القالب او عنوان الأضافة التي تريد عرضها)
وصف صغير للموضوع=وصف التي تريد عرضة (كوصف القالب أو وصف الأضافة التي تريد عرضها)
رابط الموضوع= رابط الموضوع الذي تريد عرضة(كرابط القالب أو رابط الأضافة التي تريد عرضها)
أما كلمة ( المزيد . . . ) فلا تغيرها فهي الزر الذي يضغط علية الزائر للأنتقال الى الموضوع
شكرا لك
الإبتساماتإخفاء