اضافة صندوق ثابت بصور مثل عرب ويب

اضافة صندوق ثابت بصور مثل عرب ويب

السلام عليكم اخواني اخواتي في موضوع اليوم سأشارككم اضافة رائعة مثل التي بالمدونة في الأعلى وهي قريبة لسلايدر إلا أنها بصور ثابتة من أربع خانات متفرقة ، تتميز بالبساطة والأنقة ، وأنصح كل من يود أن يستعملها فل يحاول أن يضع بكل خانة شيئ مغاير يعني لا تضع مقالات سبق وأن طرحتها بمدونتك أو موقعك فوضيفتها أن تضع شيئ يجذب الزائر أو تضع موضوع معين .. سنبدأ على بركة الله 

شرح طريقة التركيب

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

.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;}

4.يمكنك وضع الكود اما بإضافة أداة من التخطيط HTML/JAVASCRIPT  أو تبحث في القالب عن hedaer ولكن ذلك يختلف حسب القوالب لمن يجد صعوبة في التركيب فنحن رهن الإشارة

<div class='works'>

<div id='nav-work'>
</div>
<div class='list-works' id='works'>
<div class='slide-works'>
<a class='work fancybox' href='http://www.ar1web.com/p/blog-page_1.html' 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>

5. غير الكلمات والصور بما يخصك

6 .قم بالحفظ

المصدر: مدونة عـرب ويب 
اضــــــــــــــــــــــــــــــغط 
لترى الموضــوع الأصـلي