سلايدر من مدونة بلوجر توب التلقائي وشكل مميز

سلايدر من مدونة بلوجر توب التلقائي وشكل مميز




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


معاينــة


طريقة التركيب


اذهب الى لوحه التحكم فى مدونتك


ثم التخطيط


ثم أضافه أداة


اختار




HTML/JavaScript






وأضف الكود التالى

كود HTML:

#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;display: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:hidden}#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(https://lh5.googleusercontent.com/-kIw4J9c3gOk/UV-PVX1TkII/AAAAAAAAJD8/PgK5RVMruoQ/s320/bloggerheroe.com-fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #1BA1E2;-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:#1BA1E2;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:24.8%} #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}}
//