سلايدر خفيف وانيق تلقائي

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

---

الان كيفيه التركيب

1. اذهب لتخطيط ثم اضافه اداه Html/JavaScript ثم ضع هذا الكود

   ---

   
   

   <style> /* Css Slider Posts */ #featured-wrap {position: relative;height: 175px;margin: 0 auto;border-radius: 4px;} #featured {border: 0;outline: none;position: relative;width: 890px;height: 150px;overflow: hidden;top: 10px;margin: 0 auto;} .datex {display: none;} #featured ul{width:9999px} #featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden} #featured li {width: 150px;display: inline-block;float: left;height: 150px;background: #fff;} .thumb-featured {width: 130px;height: 100px;margin: 5px auto;border: 1px solid #fff;} .thumb-featured img {display: block;width: 134px;height: 94px;border: 1px solid #ddd;padding: 2px;cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirg_aSKJJCLcpDT9RI7HZo3bnknV-TLHCaOnfQBA5Pzb9Rj4oG3zCE0dXL6BMSwZ8jiK5F1HGm1qRQ26VEYl5oRApdAWnWXWyccT8SZTxhLy38iRyc5tZHnRoK3eQWhTyypSo9ioLsOLk/s1600/Untitled-2.png),pointer;-moz-transition: all .3s ease 0s;} .title-featured {text-align: center;position: relative;margin: 0 4px;font: 10px Electrolize,ge_dinar_oneregular;} .title-featured a {color: #555;} .title-featured h4{overflow:hidden} .arrow {position: absolute;display: block;width: 32px;height: 32px;top: 60px;text-indent: -9999px;} .arrow.back {left: 13px;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5ZlfdwBfvtYpcTWpJYC9KmmQ0zyLwz2pV2BdIyvE-7386L_xnhWRCEBJB5MJBpHy_GQMu0vJxPhkx2XHoX43zaFmHTqHlniIpkrbLka53mFFBHshfcfj7tknNs1vq_FFV5YnztetE8o7/s1600/lefthm.png)no-repeat;} .arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWYbTJgfGXWd3c-bzf6O1iqKkoLl8Mv20IHqClK507mEImsXpzStHVzrYxQx54HLWYk0NdUBwlMjd94DBocNyEB5-QPYQhIzIL6TYrAIQHLKf2rmAB2Rv1xqOZKWxQyBVLC_qiC1k4YlW7/s1600/righthm.png)no-repeat;} span.slideloading{text-indent:-9999px;margin:50px auto;font-family:Electrolize,ge_dinar_tworegular} </style> <div id='featured-wrap'> <div id='featured'> <span class='slideloading'>جاري التحميل ...</span> </div> </div> <script src='https://ar1web-com.googlecode.com/svn/Hm/slider-iHussam.js'/>

    عدل عليهم left:13px -- right:10px  إذا ظهرت الأسهم بشكل متقارب ففي الكود المحدد بالأحمر كودين باللون الأبيض خاصيين بالأسهم 
   

   واتمنى ان تكون افدتكم التدوينة ولاتنسو عمل لايك وشير لتعم الفائده على الجميع