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

[محب الرسول]

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

                       ad_header_end 

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

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

 <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- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

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

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

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

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

                       background-color: #0066CC; 

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

                       font: bold 25px/21px traditional arabic ; 

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

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

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

[خادمة فضه]

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

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

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