|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
10-06-2013, 06:51 AM | #1 |
مدون جديد
تاريخ التسجيل: Jul 2013
المشاركات: 7
|
طريقة إضافة Slideshow تلقائي و غاية في الروعة
السلام عليكم ورحمة الله وبركاته.. اليكم كود للسلايدر شو مميزاته 1 - سلايدر شو تلقائي 2 - جميل ذو منظر مذهل 3 - سهل التركيب 4 - يتناسق تلقائباً مع اي قالب كود الاضافة التخطيط اضافة اداه 4. ضع الكود التالي داخل مستطيل الأكواد الخاصة بالأداة: <style type="text/css"> #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:250px} #slides li{width:49.9%;height:100%;position:absolute;displ ay:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block} <script type="text/javascript"><!-- google_ad_client = "ca-pub-4490967901683424"; /* وسط الموضوع */ google_ad_slot = "8792178190"; google_ad_width = 336; google_ad_height = 280; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%} #slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%} #slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%} #slides a{display:block;width:100%;height:100%;overflow:hi dden} #slides img{display:block;width:100%;height:100%;border:0; padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #slides .overlayx{width:100%;height:100%;position:absolute ;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg....d-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal} #slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px} #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none} #slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out} #slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} #buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;} #buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative} #buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} #buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:49.8%} #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8% } #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:2 4.8%} #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%} } </style> <div id="featuredpost"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"ضع رابط مدونتك هنا", MaxPost:8, idcontaint:"#featuredpost", ImageSize:300, interval:5000, autoplay:true, tagName:false }); }); //]]> </script> المصدر : http://www.ahmad-web.com/2013/10/slideshow.html الرجاء زيارة مدونتي http://www.ahmad-web.com
__________________
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
تلقائي, slideshow, إضافة, طريقة |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
قالب مدونة الخبراء للبرامج في غاية الروعة والجمال | hanna | قوالب بلوجر عربية ومعربة | 1 | 01-11-2014 12:26 PM |
قالب البث الحي أو البث المباشر للمباريات للبلوجر غاية في الروعة | cybersamir95 | قوالب بلوجر عربية ومعربة | 1 | 12-26-2013 01:35 PM |
قالب بلوجر غاية في الروعة ,,,,,,,, | abdsamad | قوالب بلوجر عربية ومعربة | 1 | 12-24-2013 04:29 PM |
قالب غاية في الروعة 2014........ | youssefrca | قوالب بلوجر عربية ومعربة | 1 | 07-14-2013 06:50 AM |
قالب بلوجر غاية في الروعة والبساطة | REDA | قوالب بلوجر عربية ومعربة | 5 | 07-11-2012 09:47 PM |
الساعة الآن 07:43 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |