طلب كود من ....

يوجد شبيه له تفضل
يوضع تشكيلات عامه

الكود:


<script src="http://foryamany1.googlecode.com/svn/trunk/4egy/bdayh.js" type="text/javascript"></script>
  <script src="http://foryamany1.googlecode.com/svn/trunk/4egy/custom.js" type="text/javascript"></script>
  <script src="http://foryamany1.googlecode.com/svn/trunk/4egy/easing.js" type="text/javascript"></script>
<style>
.slideset {
  width: 960px;
  height: 167px;
  margin: auto;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
.slideset .next {
  position: absolute;
  right: 0px;
  top: 72px;
  background: url(http://www.imzaj.com/wp-content/themes/iMzaj/iMzaj/images/next_prev.png) no-repeat -6px -5px;
  width: 18px;
  height: 21px;
  overflow: hidden;
  text-indent: -555px;
}
.slideset .prev {
  position: absolute;
  left: 0px;
  top: 72px;
  background: url(http://www.imzaj.com/wp-content/themes/iMzaj/iMzaj/images/next_prev.png) no-repeat -6px -35px;
  width: 18px;
  height: 21px;
  overflow: hidden;
  text-indent: -555px;
}
.slideset .slidesetCont {
  width: 905px;
  margin: auto;
  position: relative;
  background: #000;
}
.slidesetCont ul {
  float: right;
  width: 100%;
}
.slidesetCont ul > li { float: left; }
.slidesetCont ul > li a {
  display: block;
  width: 200px;
  height: 145px;
  padding: 6px;
  overflow: hidden;
  background: #FFF;
  border: 1px #d2d2d2 solid;
  margin: 0 7px;
}
.slidesetCont ul > li a img {
  background: #EEE;
  width: 200px !important;
  height: 145px !important;
  display: block;
}
ul, li, ol {
  list-style: none;
  outline: 0px;
}
</style>
 <script src="http://www.imzaj.com/wp-content/themes/iMzaj/iMzaj/js/ads.js" type="text/javascript"></script><div class="slideset"> <a class="next" href="#">التالي</a> <a class="prev" href="#">السابق</a>
  <div class="slidesetCont">
      <ul class="set1">
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/349757-150x150.jpeg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/microsoft-surface-tablets-the-differences-between-rt-and-window-150x150.jpg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/nexus7-150x150.jpeg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/C710-2605-Chromebook-150x150.jpg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/Screen-Shot-2012-12-12-at-4.53.39-PM-150x150.png" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                        </ul>
  </div>
</div>
<!--//slideset-->
<! --- code prog by www.4egy.net --->  

وهذا ايطار على صور الكود وضع في ورقة css

الكود:

.slidesetCont ul > li a img {
        border-style:  solid;
    border-color:#3366FF;

}

يمعود هاذا تلقائي الحركه على الصوره اتفقت وياك لكن كن اقلب بالصور اريده صوره صوره مو على السريع يرجع للجهه اليمنه اذاكان باليسرى

اخي اريد الكود يقلب صوره صوره اوكي مثل الي بالمنتدى روح شوفه

اختر من الاكواد هذه مايناسبك

الكود:

<!-- Style -->
<style type="text/css">
.slider_specialoffer_content {position:relative;display:block;width:691px;height:239px;}
.slider {width:691px;height:239px;position:absolute;
background:url(http://www.bdayh.com/wp-content/themes/bdayh/assets/images/slider_bg.png) no-repeat center center;}
.box_skitter_large {width:691px!important;height:237px!important;}
.slider img {width:691px;height:237px;margin:6px 9px;}
.slider .next_button,.slider .prev_button {position:absolute;top:40%;width:43px;height:45px;
overflow:hidden;z-index:999;text-indent:-9999px;}
.slider .next_button {right:30px;
background:url(http://www.bdayh.com/wp-content/themes/bdayh/assets/images/slider_next.png) no-repeat;}
.slider .prev_button {left:30px;
background:url(http://www.bdayh.com/wp-content/themes/bdayh/assets/images/slider_prev.png) no-repeat;}
</style>

<!-- Links & Scripts -->
<link href="http://www.bdayh.com/wp-content/themes/bdayh/assets/style/skitter.styles.css" media="all" rel="stylesheet" type="text/css">
<script src="http://www.bdayh.com/wp-content/themes/bdayh/assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.bdayh.com/wp-content/themes/bdayh/assets/js/scripts.js" type="text/javascript"></script>
<script src="http://www.bdayh.com/wp-content/themes/bdayh/assets/js/jquery.skitter.min.js" type="text/javascript"></script>
<script src="http://www.bdayh.com/wp-content/themes/bdayh/assets/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.bdayh.com/wp-content/themes/bdayh/assets/js/bdayh.addons.js" type="text/javascript"></script>
<script src="http://www.bdayh.com/wp-content/themes/bdayh/assets/js/jquery.gridnav.js" type="text/javascript"></script>
<script type="text/javascript" src="http://foryamany2.googlecode.com/svn/trunk/4egyslide.js
"></script>

  <div class="slider_specialoffer_content">
    <div class="slider">
  <!--<a href="#" class="next_button">next</a> <a href="#" class="prev_button">prev</a> -->
      <div class="box_skitter box_skitter_large">
  <ul>
    <li><a href="رابط1"><img alt="Mizo-Slide" src="صورة1"></a></li>
    <li><a href="رابط2"><img alt="Mizo-Slide" src="صورة2"></a></li>
    <li><a href="رابط3"><img alt="Mizo-Slide" src="صورة3"></a></li>
    <li><a href="رابط4"><img alt="Mizo-Slide" src="صورة4"></a></li>
    <li><a href="رابط5"><img alt="Mizo-Slide" src="صورة5"></a></li>
    <li><a href="رابط6"><img alt="Mizo-Slide" src="صورة6"></a></li>
    <li><a href="رابط7"><img alt="Mizo-Slide" src="صورة7"></a></li>
    <li><a href="رابط8"><img alt="Mizo-Slide" src="صورة8"></a></li>
    <li><a href="رابط9"><img alt="Mizo-Slide" src="صورة9"></a></li>
  </ul>
      </div>
    </div>
  </div>


وهذا

الكود:

<link rel="stylesheet" href="http://cutecat.p2h.info/hawetk/style.css" type="text/css" media="screen"><script type="text/javascript" src="http://cutecat.p2h.info/scripts/jquery-1.4.3.min.js"></script><script type="text/javascript" src="http://cutecat.p2h.info/scripts/jquery.aes.js"></script><script type="text/javascript" src="http://cutecat.p2h.info/scripts/jquery.aes2.js"></script> <link rel="stylesheet" href="http://cutecat.p2h.info/hawetk/style.css" type="text/css"> <script type="text/javascript" src="http://cutecat.p2h.info/hawetk/custom.js"></script><script type="text/javascript" src="http://cutecat.p2h.info/hawetk/tabcontent.js"></script><script type="text/javascript" src="http://cutecat.p2h.info/hawetk/styleswitch.js"></script><script type="text/javascript" src="http://cutecat.p2h.info/hawetk/jquery.tipsy.js"></script><script type="text/javascript" src="http://cutecat.p2h.info/hawetk/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://cutecat.p2h.info/hawetk/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://cutecat.p2h.info/hawetk/jquery.carouFredSel-5.5.0.js"></script>
<div style="width:750px;margin:0px auto;">
<div class="image_carousel">
<div style="text-align: center; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 726px; height: 170px; margin: 0px; overflow: hidden;" class="caroufredsel_wrapper"><div style="text-align: left; float: none; position: absolute; top: 0px; left: 0px; margin: 0px; width: 6050px; height: 170px; right: auto; bottom: auto; opacity: 0.330616;" id="foo4">
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
<a href="رابط الموضوع"><img src="http://download.mrkzy.com/u/0714_51bd555385091.jpg" alt="وصف "></a>
 </div></div>
 <div class="clearfix">
 </div>
 <a style="display: block;" class="prev" id="foo4_prev" href="#"><span>prev</span></a> <a style="display: block;" class="next" id="foo4_next" href="#"><span>next</span></a>
<div style="display: block;" class="pagination" id="foo4_pag">
 
<a class="selected" href="#"><span>1</span></a><a class="" href="#"><span>2</span></a><a class="" href="#"><span>3</span></a><a href="#"><span>4</span></a></div>
 
</div>
</div>


وهذا ايضا

الكود:

<style type="text/css" id="vbulletin_css">
.head_ads_s { width:980px; margin:0 auto 0 auto;}
#wrapper_work {
    width: 980px;
  margin:0 auto 0 auto;position: relative;
}

.image_carousel {
    padding: 15px 0 15px 10px;
    position: relative;
}
.image_carousel a {
display: block;
float: left;
}
.image_carousel img {
    border: 1px solid #ccc;
    background-color:#fff;
    padding: 9px;
    margin: 7px 11px 7px 10px;
    display: block;
    float: left;
}

.image_carousel img:hover {
    border: 1px solid #DDD;
    -moz-box-shadow: 0 1px 5px #555;
    -webkit-box-shadow: 0 1px 5px #555;
    box-shadow: 0px 1px 5px #555;

}
a.prev, a.next {
    background: url(http://i11.servimg.com/u/f11/16/75/43/85/miscel10.png) no-repeat transparent;
    width: 45px;
    height: 50px;
    display: block;
    position: absolute;
    top: 85px;
}
a.prev {            left: -18px;
                    background-position: 0 0; }
a.prev:hover {        background-position: 0 -50px; }
a.prev.disabled {    background-position: 0 -100px !important;  }
a.next {            right: -27px;
                    background-position: -50px 0; }
a.next:hover {        background-position: -50px -50px; }
a.next.disabled {    background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
    cursor: default;
}

a.prev span, a.next span {
    display: none;
}
.pagination {
    text-align: center;

}
.pagination a {
    background: url(http://i11.servimg.com/u/f11/16/75/43/85/miscel11.png) 0 -300px no-repeat transparent;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    display: inline-block;float:none;
}
.pagination a.selected {
    background-position: -25px -300px;
    cursor: default;
}
.pagination a span {
    display: none;
}

</style>




<script type="text/javascript" src="http://a7la7ekaya.googlecode.com/files/jquery.carouFredSel-5.5.0.js"></script>
<script type="text/javascript" src="http://a7la7ekaya.googlecode.com/files/custom.js"></script>
<script type="text/javascript" src="http://a7la7ekaya.googlecode.com/files/jquery.easing.1.3.js"></script>



<div class="head_ads_s">
    <div id="wrapper_work">
        <div class="image_carousel">
    <div id="foo4">
 
      <a href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13560410.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/zwe2t10.jpg" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13562310.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/owwg110.jpg" alt="578 احلى
 حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/pexx210.jpg" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13561910.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/56ar110.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/mangab10.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/70049210.png" alt="احلى
حكاية" width="201" height="127" /></a>

        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/j8we111.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13277810.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/efpl310.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/bcda410.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/55775210.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/1dnvq10.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/omil210.png" alt="احلى
حكاية" width="201" height="127" /></a>

             
<a href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/0d334c10.png" alt="احلى
حكاية" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/68550010.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/g8e2nb10.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/jd4d110.png" alt="احلى
حكاية" width="201" height="127" /></a>
    </div>
    <div class="clearfix"></div>
    <a class="prev" id="foo4_prev" href="#"><span>prev</span></a>
    <a class="next" id="foo4_next" href="#"><span>next</span></a>
    <div class="pagination" id="foo4_pag"></div>
</div>


    </div>
</div>


===============
يجب وضع روابطك به وكذلك روابط الصور
وروابط التوجيه وقت اضغط على الصورة
تذهب لموقع اخر او صفحة

ما ريد كافي

الكود:

<style type="text/css" id="vbulletin_css">
.head_ads_s { width:980px; margin:0 auto 0 auto;}
#wrapper_work {
    width: 980px;
  margin:0 auto 0 auto;position: relative;
}

.image_carousel {
    padding: 15px 0 15px 10px;
    position: relative;
}
.image_carousel a {
display: block;
float: left;
}
.image_carousel img {
    border: 1px solid #ccc;
    background-color:#fff;
    padding: 9px;
    margin: 7px 11px 7px 10px;
    display: block;
    float: left;
}

.image_carousel img:hover {
    border: 1px solid #DDD;
    -moz-box-shadow: 0 1px 5px #555;
    -webkit-box-shadow: 0 1px 5px #555;
    box-shadow: 0px 1px 5px #555;

}
a.prev, a.next {
    background: url(http://i11.servimg.com/u/f11/16/75/43/85/miscel10.png) no-repeat transparent;
    width: 45px;
    height: 50px;
    display: block;
    position: absolute;
    top: 85px;
}
a.prev {            left: -18px;
                    background-position: 0 0; }
a.prev:hover {        background-position: 0 -50px; }
a.prev.disabled {    background-position: 0 -100px !important;  }
a.next {            right: -27px;
                    background-position: -50px 0; }
a.next:hover {        background-position: -50px -50px; }
a.next.disabled {    background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
    cursor: default;
}

a.prev span, a.next span {
    display: none;
}
.pagination {
    text-align: center;

}
.pagination a {
    background: url(http://i11.servimg.com/u/f11/16/75/43/85/miscel11.png) 0 -300px no-repeat transparent;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    display: inline-block;float:none;
}
.pagination a.selected {
    background-position: -25px -300px;
    cursor: default;
}
.pagination a span {
    display: none;
}

</style>




<script type="text/javascript" src="http://a7la7ekaya.googlecode.com/files/jquery.carouFredSel-5.5.0.js"></script>
<script type="text/javascript" src="http://a7la7ekaya.googlecode.com/files/custom.js"></script>
<script type="text/javascript" src="http://a7la7ekaya.googlecode.com/files/jquery.easing.1.3.js"></script>



<div class="head_ads_s">
    <div id="wrapper_work">
        <div class="image_carousel">
    <div id="foo4">
 
      <a href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13560410.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/zwe2t10.jpg" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13562310.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/owwg110.jpg" alt="578 احلى
 حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/pexx210.jpg" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13561910.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/56ar110.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/mangab10.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/70049210.png" alt="احلى
حكاية" width="201" height="127" /></a>

        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/j8we111.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/13277810.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/efpl310.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/bcda410.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/55775210.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/1dnvq10.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/omil210.png" alt="احلى
حكاية" width="201" height="127" /></a>

              
<a href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/0d334c10.png" alt="احلى
حكاية" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/68550010.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/g8e2nb10.png" alt="احلى
حكاية" width="201" height="127" /></a>
        <a
href="http://www.a7la-7ekaya.com/**"><img
src="http://i11.servimg.com/u/f11/16/75/43/85/jd4d110.png" alt="احلى
حكاية" width="201" height="127" /></a>
    </div>
    <div class="clearfix"></div>
    <a class="prev" id="foo4_prev" href="#"><span>prev</span></a>
    <a class="next" id="foo4_next" href="#"><span>next</span></a>
    <div class="pagination" id="foo4_pag"></div>
</div>


    </div>
</div>

اريد اخلي على البوابه ممكن تشرحولي اشلون اركبه على البوابه وشكرااااااا

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