بسم الله الرحمان الرحيم أهلا و مرحبا متابعي مدونة احتراف المعلوميات في هذه التدوينة الجديدة التي تندرج ضمن دورة بلوجر وهذه يارفاقي هي الحلقة السادسة من دورة بلوجر التي لم أقسمها الى أجزاء بل جعلتها بدورها حلقات و كل حلقة من الحلقات سأشرح إضافة من إضافات بلوجر .
في هذه الحلقة سأشرح كيفية إضافة سلايدرشو احترافي لمدونتك فعندما كنت أبحر في النت وجدت مقالات كتيرة تتحدت عن كيفية اضافة سلايدرشو احترافي لاكن كان جلها صعبا يحتاج الى مجهود كبير لاكن في حلقتنا اليوم جئتكم بأسهل طريقة وجدت حتى الأن وهي تتطلب فقط نسخ و لصق كود بسيط فكل ماعليك أخي المدون أختي المدونة هو التوجه الى تخطيط ثم اختيار مكان السلايدرو و بعد ذالك اضغط على اضافة أداة ثم اضغط على تهيئة HTML/JavaScript
وبعد ذالك ألصق هذاالكود
<style scoped="" type="text/css">
.ei-slider{position:relative;width:100%;max-width:800px;height:400px;margin:0 auto 35px;padding:0;background-color:white}
.ei-slider-loading{width:200%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUlFRDevU7-_p6Jjz2I9_P04Vv8-LG9FlO2xhXF6EhhJkW5AZUS5X7QUfImb1H3BAgdid2LypySJC69D1WjJ7uRHHjW2ZPG1oIqt_9smzCv61HUHiDUYiJ6-o67uprk4Hk3qf8snwdNM/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}
.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #090707;border-radius:2px}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
.ei-slider-large li img{width:100%;border:0;padding:0}
.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#9E0505}
.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}
.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}
.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#090707}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
@media only screen and (max-width:479px){
.ei-slider{height:100px}
.ei-title{bottom:5%}
.ei-title h2{font-size:14px;line-height:17px}
}
</style>
<br />
<div id="autoelastic">
</div>
<script src="http://trollvlhcv.googlecode.com/svn/trunk/demo/autoelastic.min.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://ihtiraf20.blogspot.com",
MaxPost:5,
idcontaint:"#autoelastic",
ImageSize:400,
Summary:100,
animation:'center',
speed:800,
easing:'',
titlesFactor:0.60,
titlespeed:800,
titleeasing:'',
thumbMaxWidth:150,
Interval:3000,
autoplay:true,
pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
tagName:false
});
});//]]>
</script>
قم بتغير رابط مدونتي برابطك و يمكن التعديل على الأبعاد
ليست هناك تعليقات :
إرسال تعليق