السلام عليكم اخواني اخواتي في موضوع اليوم سأشارككم اضافة رائعة مثل التي بالمدونة في الأعلى وهي قريبة لسلايدر إلا أنها بصور ثابتة من أربع خانات متفرقة ، تتميز بالبساطة والأنقة ، وأنصح كل من يود أن يستعملها فل يحاول أن يضع بكل خانة شيئ مغاير يعني لا تضع مقالات سبق وأن طرحتها بمدونتك أو موقعك فوضيفتها أن تضع شيئ يجذب الزائر أو تضع موضوع معين .. سنبدأ على بركة الله
شرح طريقة التركيب
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. غير الكلمات والصور بما يخصك وضع رابط الموضوع بدل #