اضافة صندوق ثابت بصور

اضافة صندوق ثابت بصور

يوجد الآن مشاهدة التعليقات : 9

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

السلام عليكم اخواني اخواتي في موضوع اليوم سأشارككم اضافة رائعة مثل التي بالمدونة في الأعلى وهي قريبة لسلايدر إلا أنها بصور ثابتة من أربع خانات متفرقة ، تتميز بالبساطة والأنقة ، وأنصح كل من يود أن يستعملها فل يحاول أن يضع بكل خانة شيئ مغاير يعني لا تضع مقالات سبق وأن طرحتها بمدونتك أو موقعك فوضيفتها أن تضع شيئ يجذب الزائر أو تضع موضوع معين .. سنبدأ على بركة الله
شرح طريقة التركيب
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😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 9 تعليقات:

  1. شكرا اضافة رائعة

    ردحذف
  2. يشرفني ان اعلق على مثل هذه المواضيع

    احسنت الى الامام يا بطل

    ردحذف
  3. شكراً لك رائعة جداً لكن لدي مشكلة أخي الخطوط في الإضافة غير متناسقة بمعنى أنها غير جيدة إنظر إليها في موقعي www.Ebda2.net

    أرجوا إرشادي إلى كيفية تميز العنوان مثل قريباً , قريباً قريباً , قريباً في موقعي بخط أكبر و أوضح من الخط الأسفله شكراً لك عزيزي

    ردحذف
    الردود
    1. ابحث عن : .detail-work .titre-work
      ستجد تحتها : font-family: ges
      غير : ges إلى خط مدونتك وهو : droidkufi-bold,tahoma
      ثم إبحث عن :.detail-work
      وغير الخط .
      موفق

      حذف
  4. أخي الغالي كيف غير الهوفر ، إلى شكل العين مثل موقعك ممكن الكود لكي أستبدله بالحالي ؟!

    كيف أقوم بتعريض مستطيل النصوص ؟! شاهد في الموقع هي صغيرة أصغر من عرض الصورة ! كيف أقوم بتعريض الصندوق ؟! إلى عرض الصورة .

    وكيف أتحكم بالمسافة الفاصلية بين الهيدر والمربعات وبين المربعات ورسائل المدونة ؟!

    ردحذف
    الردود
    1. ابحث عن : .list-works a.work:hover .hover-pic
      ستجد رابط الصورة وهو الأول غيره بـــ الصورة التالية :
      http://1.bp.blogspot.com/-y5LtgxiDcC0/U4YwDt-qrSI/AAAAAAAADSk/y49RCT68mcA/s1600/eye.png

      بالنسبة لمقاس الصورة ضع أي صورة حتى لو كانت كبيرة فهي تأخد المقاس تلقائيا

      حذف
  5. اخي ممكن
    كيف بدي احط صورة في HTML/JAVASCRIPT و اربطها برابط
    لو سمحت اخي

    ردحذف
    الردود
    1. لقد حضرته لك ما عليك إلا وضعه وتغيير الكتابة بالمطلوب :
      <a href="رابط الصفحة" rel="nofollow" target="_blank" title="عنوان"><img border="0" src="رابط الصورة" /></a>

      حذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم