كود سلايد شو, Slideshow 2013

[محب الرسول]

السلام عليكم ورحمة الله وبركاته
طريقة سهلة جدا لإضافة أداة سلايد الى مدونات blogger التي تقوم بعرض مواضيع
او المنتدى بشكل الي ومميز مثلما نراه تماما في مواقع الأخبار الكبيرة والتي تعطي طابعا احترافي للمنتدى او للمدونه.
طريقه التركيب في المنتدى
من لوحة الادآره الذهآب الى
الاستيالات والقوالب
البحث عن قآلب

كود PHP:

                       ad_header_end 


والصق الكود فيه واحفظ طبعا من مرعآة المتغيرات لانها يدويه تآبع الشرح معي

شرح للمودونه
من لوحة التحكم للمدونة نختار التخطيط ثم نختار اضافة أداة ثم نختار اداة HtmlJavaScript
نقوم بلصق الكود التالي

كود PHP:

 <style type="****/css"> 


 /* JavaScript Image Slider By http://mdonti-n.blogspot.com/ */ 


#mcis { 
 display: none; 
} 


#sliderFrame { 
 position: relative; 
 width: 468px; 
 margin: 0 auto; 
        border:3px solid #E1E0E2; 
} 


#ribbon { 
 width: 111px; 
 height: 111px; 
 position: absolute; 
 top: -4px; 
 right: -4px; 
} 


#slider { 
 width: 468px; 
 height: 260px; 
 background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%; 
 position: relative; 
 margin: 0 auto; 
 box-shadow: 0px 1px 5px 010007; 
} 


#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: #0066CC; 
} 


div.mc-caption { 
 font: bold 25px/21px traditional arabic ; 
 color:  #0000; 
 z-index: 4; 
 padding: 10px 0; 
 ****-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://lh3.googleusercontent.com/-XpmNmet2gQE/T_9iZTdKsgI/AAAAAAAAC9U/e5Hto1X5zKc/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); 
 -***kit-transform: translate3d(0,0,0); 
} 
 </style>  


<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="****/javascript"></script> 
 

<div id="sliderFrame"> 
     <div id="ribbon"></div> 
            <div id="slider"> 


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a> 


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a> 


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a> 


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a> 


<a href="xxxxxx"><img src="ppppp"alt=" ttttt"/></a> 
                </div></div> 


ملآحظه
قبل الحفظ نقوم باضافة المواضيع التي نود ظهورها على السلايد شو كمايلي :
نضع مكان الرمز xxxxx رابط الموضوع
نضع مكان الرمز ppppp رابط الصورة
نضع مكان الرمز ttttt عنوان الموضوع
وليكن المواضيع المميزه او الحصريه
ثم نقوم بحفظ الكود
تعديل الإضافة بما يتناسب مع منتداك او مدونتك
1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

كود PHP:

                        <a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a> 


اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو
(Slideshow ).
2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :

كود PHP:

#slider { 
 width: 468px; 
 height: 260px 


لتغيير عرض الأداة width
لتغيير ارتفاع الأداة height
3- تغيير لون السلايدشو الصغيرة
(التي يتم بها عرض عنوان الموضوع )
نبحث عن الكود التالي

كود PHP:

                       background-color: #0066CC; 


ونقوم بتغيير الرمز 0066cc
(للحصول على الألوان بصيغة html انتقل للصفحة التالية )من هنــــــآ
4- تغيير حجم ولون خط عنوان الموضوع (عناوين المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي

كود PHP:

                       font: bold 25px/21px traditional arabic ; 


الرمز traditional arabic لإستبدال نوع الخط
الرمز 25px حجم الخط .
/
حمل الكود من المرفقآت
وبكذا خلصنا ومبروك عليك
عملت لكم موقت المثآل من
انتى وانا ملك الاحساس

الكود منقول اتمنى لكم الفآئدة

الملفات المرفقة كود سلاشيو.txt (2.6 كيلوبايت,

من مواضيع محب الرسول

» قصيدة توديع الخيام باسم الكربلائي 2023 حصريا
» قصيدة سفره الى الله للرادود حيدر البياتي 2022
» هوسات مكتوبة للامام العباس عليه السلام
» قصيدة مو فرات الرادود باسم الكربلائي محرم 2021
» حصريا لحظات تسجيل اصدار محرم 2021 باسم الكربلائي

[خادمة فضه]

جزاك الله كل خير

التوقيع :

من مواضيع خادمة فضه

» من دعا بهذا الدعاء غفر الله ذنوبه
» زيارة النبي صلى الله عليه وآله من بعد
» صلاة شهر جمادي الآخر للحفظ ودفع البلاء
» تعرض الاعمال كل يوم
» في ثواب المريض

[محـب الحسين]

مشكور ياغالي وحياك الله ... نرتقب جديدك بشغف ... تقديري

التوقيع :

من مواضيع محـب الحسين

» الفرق بين الصوم والصيام
» قصيدة موسى بن جعفر على الجسر قوموا نشيعه
» زيارة الإمام الحسين عليه السلام في النصف من رجب مكتوبة
» قصيدة في رثاء الشهيد ابي مهدي المهندس(( جمال العراقيين ))
» سقراط والنوم المتأخر