اسهل طريقه للتركيب سلايد شو Slidershow للبولوحر

ركب سلايد شو Slidershow   دلوقتى سهل التركيب مش محتاج حاجه
سهل التكريب

تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript ,
مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة
انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله

 

كيفية اضافة هذه الاداه الى مدوناتك

انتقل إلى لوحة تحكم مدونتك
HTML/Javascript إختر "تخطيط" ثم إضافة أداة ثم اختر
والآن الصق داخل المستطيل الكود التالي

كود بلغة HTML:

 

 

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
     background:transparent  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvd10Gh3Jz5P9Mod75oL9K0olpgaT5cwzVV_-dkS7KhHM-tx8IhTU8O3UUW8Jilx05a4xYv3LW1dztGAQDwSRxwB9V7U2gDnwswQrJySRMOn2cNN4mpCMd8gnkxKGLCto2GuRZWt69b_53/s1600/bullet.png)  no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>

مايجب عليك تغييره

• عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.
• رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
  # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو.
  700px : لتغيير عرض السلايد شو .
  306px: استبدلها برابط الموضوع المراد عرضه بالسلايد شو.
  
  وبالاخير قم بحفظ الاداه ومبروك عليك السلايدشو