المرجو الانتظار قليلا سوف يتم توجيهـك الى المدونة الجديدة وشكرا المرجو الانتظار قليلا سوف يتم توجيهـك الى المدونة الجديدة وشكرا

اسهل طريقة لعمل سلايد شو متطور ورائع

http://www.fudahospital.net/images/news/photo-gallery-icon.jpg 
ما هو السلايد شو
-السلايد شو هو من اكثر الاجزاء التى تستخدم في التصميمات العصرية والحديثة للمدونات .. حيث اصبح من اهم الاجزاء التى تلفت انتباه الزائر للمواضيع ذات الاهمية 
فيم يستخدم السلايد شو
-السلايد شو يستخدم في جميع المجالات .. حيث يمكن استخدامه في مجال الالعاب او الرياضة او الاخبار او حتى الافلام
تابعوا معى هذه الخطوات لتركيب السلايد شو :
توجه إلى تخطيط .. ثم اضف اداة واختار HTML/JavaScript ويفضل ان يكون فوق رسائل المدونة الاليكترونية .. حتى يكون بهذا الشكل :


قم بلصق هذا الكود في الاداة : 

<style type="text/css"> /* JavaScript Image Slider By http://e7tarif.com/*/ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; right: -4px; } #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyx_GKdODm7jdeXvoGxHzcqx-uhyXN4AUuABC74536_Y1Pu4KzTs7AprtP-51u_VjGf1DrP6xrfs-V6YtEwPuKMdVVoQ7FNQY9B1_IfeU19hhG5McJhGHzgutkRZW1u6rY0RuyYRiyAw/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/AVvXsEjC5QBDBtRSx1XDCUkFgvuPNWHVK-wZzYUcz-rY240QeotG1EtlRBy767LqbZX5xlZnVJuX0zJHi4bQ6E2HLZdZv_buspe3AsjRj8FgnI4q3_IhdcYveSeKg38G8dHH9_R9YjmxQb-2dg/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="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4anHZMyttsVBcAPa6pHZDYPTntceX3TvzytMg9PR-Sn0LTUr0jXk4VL4sYSuqmJsBiVK6X_HZsvwtf7PJM77U2b776IMAQ5kpk7EUh1-JtdWcda1UbI17RIwMliVg7A5mAUcOzYC0lg/s1600/mdonti-n.blogspot.com-1.jpg" alt="عنوان التدوين1"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgmWkXUAQHM7oxRS9PSwsgtq5Shnk4roORq99t_KN4fuq1AVTzqWEpj6CTt37OZFwi3gtIrsoo9XW1S_zTzzT_IVgKdKY-rLS50Hmk8QSNH1y8OZGEBrcGLS3n9RasSZEKfIg79qb9Q/s1600/mdonti-n.blogspot.com-2.jpg" alt="عنوان التدوين2"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKt4XP8_k4ZiUkCjxEgmFPUZemWlz3tdf0T5zkPz2Vm6cWCOHeXpphefC4b4mtnxry2e76Ftqu5M_BNERFZN7mQuFP3q_8DXAGg9plaGBGjHhv92TQys_AjqF_sbzZAGvyh5UIaDv8g/s1600/mdonti-n.blogspot.com-3.jpg" alt="عنوان التدوين3"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwsVeAzWYIi6qsm2hD3pKHim2QTMHiQAZXhyy04mfFapwrFdYtuMx5WRhyphenhyphenrxbFS8_lNOzHEuSd9q1QmrPCUpurmX8_nDj8xQXTZZsaKxi-H3ImqDLXBSnpA04gXfO4TVzXldFOyflYQ/s1600/mdonti-n.blogspot.com-4.jpg" alt="عنوان التدوين4"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQnQ5xgwkwkvtJxG8IYub1VWZgW-G5N8Y4ut-dcyZQWVH3uAu1GRr6m4U_4g_E3NULkCdO-i7vP_rRU-FBzDEL7QkallCvfhRhme4S8o5pcehfiYi4WJ6nV57M2jF95pWMowIB3tnXQ/s1600/mdonti-n.blogspot.com-5.jpg" alt="عنوان التدوين5"/></a> </div></div>

 
  • الاحمر لتعديل رابط الموضوع .
  • الازرق لتعديل ابعاد الصورة
  • البرتقالي لتعديل رابط الصورة .
  • لتعديل عنوان الموضوع .
 ملاحظة: يجب ان تكون ابعاد الصورة >> 500 PX في العرض × 210 PX في الارتفاع.

الآن إضغط حفظ، ولأي إستفسار المرجو ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل.

عن الكاتب :

TeKo TeKo

بقلم TeKo هوايتى التقنية والجرافيكس وأحببت أن أدون كل ما تعلمته فى هذه المدونة للإفادة فى أعمال هادفة

‹ التدوينة السابقة التدوينة التالية ›

تدوينات ذات صلة

ليست هناك تعليقات :

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)