الاثنين، 17 سبتمبر 2012
سلايدشو SlideShow لمدونات البلوجر
سلايدشو SlideShow لمدونات البلوجر بأستخدام الجافا 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;
height: 218px;
وهي محدد بلون الأخضر
width: العرض;
height: الطول;
height: الطول;

... نهاية الشرح ...

اقرا ايضا :
اضافة اداة كاتب الموضوع وصورته
تتغير خلفية مدونتك بشكل متكرر ومع كل ضغطة Refresh
ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل
تتغير خلفية مدونتك بشكل متكرر ومع كل ضغطة Refresh
ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل
التسميات:
اضافات Jquery,
blogger,
Java جافا

بقلم : Abda3Design
لخدمات التصميم والبرمجة
إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية كما تتميز مؤسسة "ابداع ديزاين" . بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة
ضع تعليقك
2 التعليقات:
يا سلام عليك شرح موووفق
صحبي السلايد بيحمل وخلاص ومو راضي يشتغل شو الحل
إرسال تعليق