Moh'd S Hammoudeh
..
الجنس : 
تاريخ التسجيل : 03/02/2010
العمر : 33
بطاقة الشخصية
احترام القوانين:
    (3/3)
 |  موضوع: لاحلى منتدى وللمدونات اليكم الان وحصريا سلايد شو slide show لاخر مواضيعك او المواضيع الاكثر مشاهدة بشكل رائع جدا الثلاثاء مايو 14, 2013 10:58 am | |
|
السلام عليكم
دائما نأتيكم بالأفضل وكل ما هو جديد ,,, اليوم اتينا لكم بسلايد شو slide show أكثر من رائع وفريد من نوعه
في عالم احلى منتدى ويمكن ان تضيفه لمدونتك او منتديات الفي بي
اليكم صورة للسلايد شو
اليكم مثال من هنا
http://www.algantel.com/h115-page
الان انت ممكن تسأل نفسك انا ماذا ممكن ان استفيد من هذا السلايد ؟!!
اولا يمكنك مثلا وضع فيه المواضيع الاكثر مشاهدة
ثانيا ممكن انت تعمل مثلا مسابقات او مثلا افضل المواضيع لهذا الاسبوع
ثالثا الكود جافا ويمتاز بالسرعة والتحرك الاجمل
وانت وافكارك
الان طريقة وضع الكود
نذهب الى لوحة الادارة ثم عناصر اضافية ثم إدارة صفحات ال html
ثم تلصق هذا الكود فيها
- اقتباس :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</div>
<style type="text/css">
/* JavaScript Image Slider By http://www.algantel.com/ */
#mcis {
display: none;
}
#sliderFrame {
position: absolute;
width: 500px;
margin: 0 auto;
border:3px solid #E1E0E2;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
right: -4px;
}
#slider {
width: 500px;
height: 280px;
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: 30px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: #000000;
}
div.mc-caption {
font: bold 25px/21px traditional arabic ;
color: #ffffff;
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: 290px;
right: 180px;
width: 350px;
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);
-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="الاحمر" alt=" شاهد بالصور اصعب 10 مواقف قد تتعرض لها في حياتك "/></a>
<a href="الاخضر"><img src="الاحمر" alt=" هل تعلم ان هناك خمسون موقع لن تتمكن من الوصل اليهم عبر جوجل ايرث "/></a>
<a href="الاخضر"><img src="الاحمر" alt="اجمل 10 اماكن رومانسية للعشاق ... بالصور Top 10 Romantic Destinations"/></a>
<a href="الاخضر"><img src="الاحمر" alt="اختصارات وابتسامات جديدة لشات الفيس بوك ,,, احصل عليها الان وكن الاول "/></a>
<a href="الاخضر"><img src="الاحمر"alt=" حصريا بمعنى الكلمة ... كود جافا رائع جدا ضيف لديك اعلانات او بنرات تتبدل تلقائيا وبشكل رائع اتحدى اذا شاهدته من قبل ... "/></a>
</div></div>
/* JavaScript Image Slider By http://www.algantel.com/ */
الان من الكود السابق نستبدل اللون الاحمر برابط الصورة واللون الاخضر بالرابط الذي تريد الانتقال له عند النقر واللون الازرق بالنص الذي تريد ان يظهر
الان نحفظ هذه الصفحة ال html ونسميها مثلا "أخر المواضيع" وبعد هذه الخطوة إعمل معاينة
للصفحة , يعني افتحها وشاهد ما النتيجة ,,, والان من فوق قم بنسخ الرابط الخاص بالصفحة الي انشأناها ووضعنا فيها الكود السابق واحتفظ به.
والان نروح المكان الي انت تريد ان يظهر بها السلايد ,, طبعا تقدر تضعها في اعلانات الادارة او في البوابة او في اي مكان يقبل لغة html
,,, وتضع فيه الكود التالي
- اقتباس :
<iframe marginwidth="0"
src="هنا ضع رابط الصفحة السابقة"
marginheight="0" frameborder="0" height="310" scrolling="no"
width="510"></iframe>
والان قم بتغيير اللون الاحمر الى رابط صفحة ال html الي قمنا بإنشائها واعمل حفظ ومبروك عليك السلايد شو
الاحترافي ...
وبالتوفيق اذا احببت النقل فالرجاء ذكر المصدر موقع جنتل الاردن وشكرا www.algantel.com
| |
|
