الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
السلام عليكم اخواني اخواتي في موضوع اليوم سأشارككم اضافة رائعة مثل التي بالمدونة في الأعلى وهي قريبة لسلايدر إلا أنها بصور ثابتة من أربع خانات متفرقة ، تتميز بالبساطة والأنقة ، وأنصح كل من يود أن يستعملها فل يحاول أن يضع بكل خانة شيئ مغاير يعني لا تضع مقالات سبق وأن طرحتها بمدونتك أو موقعك فوضيفتها أن تضع شيئ يجذب الزائر أو تضع موضوع معين .. سنبدأ على بركة الله
شرح طريقة التركيب
1. توجه إلى التخطيط وأضف أداة HTML/JAVASCRIPT وضع بها الكود
1. توجه إلى التخطيط وأضف أداة HTML/JAVASCRIPT وضع بها الكود
<style>
.works{
position:relative;
display:block;
width:940px;
height:240px;
overflow:hidden;
margin:18px auto 18px;
}
.works .slide-works{
width:972px;
}
.works h2{
display: inline-block;
height: 20px;
font-family: JFR,"gesstolight" ,Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
font-weight: normal;
line-height: 20px;
padding-right: 15px;
border-right: 3px solid #e71a1f;
float: right;
background: #332F2F;
}
#nav-work{
position:absolute;
left:0; top:0;
z-index:999;
width:38px;
height:18px;
}
#nav-work #prev{ width:18px; height:18px; float:left; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0; }
#nav-work #prev:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0; }
#nav-work #next{ width:18px; height:18px; float:right; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
#nav-work #next:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
.list-works{
width:972px;
height:210px;
margin-top:45px;
}
.list-works .work{
position:relative;
display:block;
width:210px;
height:200px;
float:right;
margin-left:33px;
text-decoration:none;
}
.list-works .work .pic{
display: table-caption;
width:210px;
height:140px;
overflow:hidden;
background:#F9F8F8;
text-align:center;
vertical-align:middle;
}
.list-works .work .hover-pic{
position:absolute;
left:0; top:0;
z-index:99;
display: block;
width:210px;
height:140px;
overflow:hidden;
transition: all 0.5s ease-out;
}
.list-works a.work:hover .hover-pic{ background:url(http://khadamatplus.com/wp-content/themes/alwan/img/hover_work.png) center no-repeat, url(http://khadamatplus.com/wp-content/themes/alwan/img/b-work2.png);}
.list-works a.work:hover .detail-work{ background:#505050;}
.list-works a.work:hover .detail-work .titre-work{ color:#fff;}
.detail-work{
display:block;
width:200px;
height:50px;
padding:5px;
background: #FFFFFF;
margin-top:3px;
font-family:ges;
font-size:12px;
line-height:11px;
text-align:center;
transition: all 0.5s ease-out;
}
.detail-work .titre-work{
font-family:ges;
font-size:15px;
color:#575757;
font-weight:normal;
line-height:26px;
text-align:center;
transition: all 0.5s ease-out;
width: 100%;
display: table;
}
.works2 { display:none; width:748px;}
.works2 .list-works{width: 804px; }
.works2 .list-works .slide-works {width: 804px;}
.works2 .list-works .work{ margin-left:58px;}
</style>
<div class='works'>
<div id='nav-work'>
</div>
<div class='list-works' id='works'>
<div class='slide-works'>
<a class='work fancybox' href='#' title=' شارك وربح قالب خيالي '>
<span class='pic'>
<img alt='8' class='attachment-list-work wp-post-image' height='140' src='http://im43.gulfup.com/fEw5QB.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>المسابقة الأولى </span>
شارك وربح قالب احترافي </span>
</a>
<a class='work fancybox' href='#' title='المفاجئة الكبرى ترقبوها قريبا'>
<span class='pic'>
<img alt='7' class='attachment-list-work wp-post-image' height='140' src='http://im74.gulfup.com/jVjpuf.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'> قريبا</span>
المفاجئة الكبرى </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='6' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/BDMi5f.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
قيد التطوير </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='5' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/swdeNw.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
قيد التطوير </span>
</a>
</div>
</div>
</div>
2. غير الكلمات والصور بما يخصك وضع رابط الموضوع بدل #
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
شكرا اضافة رائعة
ردحذفالعفو اخي
حذفيشرفني ان اعلق على مثل هذه المواضيع
ردحذفاحسنت الى الامام يا بطل
شكراً لك رائعة جداً لكن لدي مشكلة أخي الخطوط في الإضافة غير متناسقة بمعنى أنها غير جيدة إنظر إليها في موقعي www.Ebda2.net
ردحذفأرجوا إرشادي إلى كيفية تميز العنوان مثل قريباً , قريباً قريباً , قريباً في موقعي بخط أكبر و أوضح من الخط الأسفله شكراً لك عزيزي
ابحث عن : .detail-work .titre-work
حذفستجد تحتها : font-family: ges
غير : ges إلى خط مدونتك وهو : droidkufi-bold,tahoma
ثم إبحث عن :.detail-work
وغير الخط .
موفق
أخي الغالي كيف غير الهوفر ، إلى شكل العين مثل موقعك ممكن الكود لكي أستبدله بالحالي ؟!
ردحذفكيف أقوم بتعريض مستطيل النصوص ؟! شاهد في الموقع هي صغيرة أصغر من عرض الصورة ! كيف أقوم بتعريض الصندوق ؟! إلى عرض الصورة .
وكيف أتحكم بالمسافة الفاصلية بين الهيدر والمربعات وبين المربعات ورسائل المدونة ؟!
ابحث عن : .list-works a.work:hover .hover-pic
حذفستجد رابط الصورة وهو الأول غيره بـــ الصورة التالية :
http://1.bp.blogspot.com/-y5LtgxiDcC0/U4YwDt-qrSI/AAAAAAAADSk/y49RCT68mcA/s1600/eye.png
بالنسبة لمقاس الصورة ضع أي صورة حتى لو كانت كبيرة فهي تأخد المقاس تلقائيا
اخي ممكن
ردحذفكيف بدي احط صورة في HTML/JAVASCRIPT و اربطها برابط
لو سمحت اخي
لقد حضرته لك ما عليك إلا وضعه وتغيير الكتابة بالمطلوب :
حذف<a href="رابط الصفحة" rel="nofollow" target="_blank" title="عنوان"><img border="0" src="رابط الصورة" /></a>