طريقة إضافة سلايد شو للمدونه بأسهل طرق

السلام عليكم 

لدينا اليوم درس بسيط جدا ً و هو إضافة سلايد شو للمدونه مثل الموجود في مدونتي .

يحتوي على خمس صور مع رابط أثني الضغط على الصوره .

ممكن تعدل حجم الصور .

و الان مع طريقة الإضافة : 

1 ) الان اذهب الى عناصر الصفحة ومن هناك اختر اضافة اداة ثم اختر اضافة HTML/JavaScript كما في الصورة

 

2 ) الان إلصق هذا الكود

<style type="text/css"> /* JavaScript Image Slider By http://konozblog.blogspot.com/*/ #mcis { display: none; } #sliderFrame { position: relative; width: 650px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; right: -4px; } #slider { width: 650px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWIobWDorfXCtWmf38WKbP8glmHpXfNIA8BKQMLU9goxW5gVkxGLUYBfW3vZI7uPGocu9TpOWdocV4FhxzrEbu0BzB8BtZn9wZjVr0pM3_E29_YaB5RvyFGwvIZak85gmo-UuOpZ7-_w/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; right: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; right: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 15px/21px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 250px; right: 190px; width: 150px; background: none; padding-right: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXIfINrI0CqzZmWgfXuIsizN0mie_oEGz_550B4Dp58qPP8ZcPb6gFcLObMGqERbdGAI_DEQyRp_xweZygcsYR6gDljyagVNaXp3MbQfkQPKUUDl9Gx-GZNYT_WCItnv4KSL7_czKsQ/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0; float: right; overflow: hidden; vertical-align: middle; cursor: pointer; margin-left: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider"> <a href="http://bloggerplayers.blogspot.com"><img src="http://im87.gulfup.com/JVLy9.png" alt="Tittle"/></a> <a href="http://bloggerplayers.blogspot.com"><img src="http://im87.gulfup.com/4e44a.png" alt="Tittle"/></a> <a href="http://bloggerplayers.blogspot.com"><img src="http://im87.gulfup.com/4Vf7u.png" alt="Tittle"/></a> <a href="http://bloggerplayers.blogspot.com"><img src="http://store1.up-00.com/2014-02/1392437057442.png" alt="Tittle"/></a> <a href="http://bloggerplayers.blogspot.com"><img src="http://store1.up-00.com/2014-02/1392437057614.png" alt="Tittle"/></a> </div></div>

عليك تغير بعض الأشياء قبل الحفظ

الروابط بالون الاحمر خاص بالروابط

http://bloggerplayers.blogspot.com 

الروابط بالون الاصفر خاص بالصور

http://im87.gulfup.com/JVLy9.png

الروابط بالون الازرق خاص بالعناوين

Tittle 

لتغّير عرض الصوره عدل في الارقام الخاص بالعرض فقط و لا تغّير في الطول

width: 650px

غيّر في الاثنين في بداية الكود

3) الان حفظ ومبروك عليك الكود .

نمنى ان تكونوا قد إستفدتم من الشرح و اي إستفسار عليكم كتابته في التعليقات و سنرد في أقرب وقت إن شاء الله.

و نراكم في وقت اخر. 

و السلام عليكم .