الاثنين، 17 سبتمبر 2012

سلايدشو SlideShow لمدونات البلوجر

سلايدشو SlideShow لمدونات البلوجر بأستخدام الجافا Java


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


abda3design ابداع ديزاين Slideshow for java

أضفط هنا 
طريقة تركيب الأضافة 
1-لوحة التحكم 
2-تصميم
3-أضافا أداة
4- أختار
تهيئة HTML/JavaScript
ثم أضف الكود التالي داخل الصندوق

<style type="text/css">
 /* JavaScript Image Slider By http://abda3design.blogspot.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/AVvXsEjoereAcC8rDMrQ3voJRDbgrWxYHvZ28zk2pgTabTV5CGyKxMclYuv7GhBAGsBmyiaaDkTB3FlRIKQfCDlTfbUGYcfXQ6bA0wF92auBD_Oz2f2SALyKDbzD6Ag8ixlWDIwJ2O4QnWTrpg/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/AVvXsEjqQG-iCk6-W10GENZw5yljNSdfjdDbP45_bANadJ3IdCS9DVHWcyotYM4AGuoj0sGLBN8SQA1YRO7Ol8aB5ja7UCUv6TLeSHkA6hEy-Y1f9F0GVXxvuhQH4D7GZulL9ba6MSZN00VNjw/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/AVvXsEgA6QU8FgMaB5r7_ioG99cENwyGtYfawFSibfAreYQUzBFRKMlNuuCv_qsDyDPSuw8Ut8DlwESRg6WStYoQhfKmqXTsObDPf7mHHlmJBFOpV18_ZBu7jvPiQ7eWPlPYB76DUqphMCwP6Q/s1600/mdonti-n.blogspot.com-1.jpg" alt="عارض الصور من مدونتي نت "/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuX064YZHdCgLmbYlDiyOPnwf8p7IZpKVhCz-SDSyRcnms7PWHc5Y6RMb7eOuSw7ZIOeHKqT2ytI8MXSd4uM_zgzt3_UlZSRhLC3hwGSrAlO4cuuesNwT_9X_5MH_ug5wUR2xDg0NUw/s1600/mdonti-n.blogspot.com-2.jpg" alt="معرض الصور المنزلقةhttp://mdonti-n.blogspot.com"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGRlsEZYHNQPAJuujp7so22ajCU7ccPl4FNX0Dz4HB8kXixcq2OC-wCRwWrFu_SxKsYIE5Pp3DML7up6-sHT7sUcno969Nljn82lzqqel7iFmasRNqYooD44MvZ4jNmpDcsKitzSrNg/s1600/mdonti-n.blogspot.com-3.jpg" alt="سلايد للصور مدونتي نت"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZC6die_qFdBoH2Q7Te59cK8DrAFW4UhBkZvfezwJ3JpPEysJM1Ke6ju7zybvIxNz26SRSy6YXex48BK6rm3_8vg9gwhzuQtu74Pj1UIo3zhqvd22EniBN5EINVTD6IFFGID_KXrC8Gw/s1600/mdonti-n.blogspot.com-4.jpg" alt="نقية جافا سكريبت. لا jQuery. لا فلاش."/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIt1UlpWGMOFNZkKBRcLqMRp8eE8OvPl-cbh4rwlNoh1-dPbyCb9BUO6ERZpTW5Ik2Nkikb9IpoHes_6OyiOrY6QVmSOLnOW71cvUWOw3CmNNJ1XWWdHoWrfIevjZgRhbgcDNZi-DTw/s1600/mdonti-n.blogspot.com-5.jpg" alt="مدونتي نت"/></a>
                </div></div>
 كيف يمكنك التعديل على الراوبط والصور والعناوين؟؟
الروابط المشار لها بلون الأحمر هي روابط الصور
الكتابة المشار لها بلون الأزرق هي العناوين
والمربع # المشار لها بالأزرق الفاتح ضع مكانها روابط المواضيع
طريقة زيادة عدد العرض في السلايدشو عارض الصور؟؟
في الاكواد الخاص بروابط المواضيع وصور أضف في أخر الكود أي بعد 
</a>
الكود التالي


<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIt1UlpWGMOFNZkKBRcLqMRp8eE8OvPl-cbh4rwlNoh1-dPbyCb9BUO6ERZpTW5Ik2Nkikb9IpoHes_6OyiOrY6QVmSOLnOW71cvUWOw3CmNNJ1XWWdHoWrfIevjZgRhbgcDNZi-DTw/s1600/mdonti-n.blogspot.com-5.jpg" alt="مدونتي نت"/></a>
 كيف يمكنك التحكم في حجم السلايد  ؟؟
في أول الكود السابق سوف تجد
 width: 500px;
 height: 218px;
وهي محدد بلون الأخضر
 width: العرض;
 height: الطول;
غيرها كما تشاء وبما يتوافق مع مدونتك

معاينة "أي لغة برمجة أقوى أو أفضل ?!" |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجة
... نهاية الشرح ...
معاينة "أي لغة برمجة أقوى أو أفضل ?!" |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجة

اقرا ايضا :

  اضافة اداة كاتب الموضوع وصورته   
  تتغير خلفية مدونتك بشكل متكرر ومع كل ضغطة Refresh  

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلمعاينة "أي لغة برمجة أقوى أو أفضل ?!" |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجة
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل


ضع تعليقك

2 التعليقات:

Mahmoud Al-shadli يقول...

يا سلام عليك شرح موووفق

Space Games يقول...

صحبي السلايد بيحمل وخلاص ومو راضي يشتغل شو الحل

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

استثمارا للخبرات العالية والإمكانات التقنية المتميزة والطاقات البشرية الكبيرة التي تتميز بها "ابداع" أنشأت المؤسسة إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية تتمكن الشركات والمتاجر من ترويج منتجاتها في كافة أنحاء العالم وتزويد مواقعها بإمكانية البيع عبر الإنترنت وتشمل خدمة بناء مواقع الإنترنت عدة مراحل بدأ من عملية التصميم المبدئي للموقع، وحتى الانتهاء منه، والقيام بتحديث الموقع كلما تطلب الأمر كما تتميز مؤسسة "ابداع" بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة في العمل لذلك نحمد الله العلي العظيم على منحنا تلك القدرة