 |
|
|
|
|
|
|||||||
 |
|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
04-25-2013, 10:27 PM
|
#1 |
|
مدون نشيط
 
تاريخ التسجيل: Apr 2013
المشاركات: 186
|
حصريا سلايدرشو اوتوماتيكي اسهل طريقة اضافتها في مدونتك
سلام عليكم اليوم قررت ان اضيف لكم سلايدر شو مثل ما نستعمله في عالم العرب صورة اضافة  لمشاهدة مثال حي اهم امتيازات المضافة في سلايدر 1 - افضل ميزة .. انسخ كود و اضعه في مدونتك بدون تعديل رابط feedburner يعني يشتغل اوتوماتيكي 2 - يمكنك تغيير الوان الخلفية سلايدر 3 - يمكنك تعديل حجم الصور داخل سلايدر الى اي حجم 4 - يمكنك تغيير حجم سلايدر بالكامل الان شرح تركيب كود تركيب بأبسط طريقة انسخ كود و قم بوضعه في Html/JavaScript واضفه في اي مكان تريد الكود <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} #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:#18B3FB;-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 #18B3FB;-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:#18B3FB;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 #ffffff transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} #buttons a#nextx::before{border-color:transparent transparent transparent #ffffff;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:"http://alam3arb.com/", MaxPost:8, idcontaint:"#featuredpost", ImageSize:300, interval:5000, autoplay:true, tagName:false }); }); //]]> </script> وسلام اتمنى ان اراكم في موضوع اخر و مفيد المصدر: عالم العرب http://www.alam3arb.com/2013/04/blog...#ixzz2RVbT8Yzz
__________________
|
|
|
|
|
05-01-2013, 07:05 PM
|
#2 |
|
مدون جديد
تاريخ التسجيل: Apr 2013
المشاركات: 16
|
رد: حصريا سلايدرشو اوتوماتيكي اسهل طريقة اضافتها في مدونتك
__________________
|
|
|
|
|
05-05-2013, 04:25 PM
|
#3 |
|
مدون جديد
تاريخ التسجيل: May 2013
المشاركات: 44
|
رد: حصريا سلايدرشو اوتوماتيكي اسهل طريقة اضافتها في مدونتك
__________________
|
|
|
|
|
| مواقع النشر (المفضلة) |
| الكلمات الدلالية (Tags) |
| اوتوماتيكي, سلايدرشو |
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه
|
||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| ▓▓▓◄شرح adf.ly بقالبه الجديد مع طريقة الربح من الروابط الخارجية في مدونتك ◄حصريا►▓▓▓ | fmaznet | الربح بطرق أخرى | 10 | 02-01-2015 03:20 AM |
| حصريا طريقة زيادة النقاط في موقع addmefast من دون اي تعب | tar-i10 | مقتطفات تدوينية | 2 | 05-17-2013 11:14 AM |
| طريقة تغيير شكل السهم في مدونتك | www.moso3te.com | إضافات وأدوات بلوجر | 4 | 12-02-2012 01:13 PM |
| طريقة إضافة مدونتك إلى alexa | bilal bel kamel | دروس بلوجر | 1 | 08-05-2012 05:59 PM |
|
الساعة الآن 03:00 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |
العرض العادي
