سلايد شو جديد اتوماتيكي احترافي

مرحبا اصدقائي دائما هنا نقدم لكم الجديد في كل زوايا التقنية ونحاول نقدم الامثل وأفضل وبطرق مضمونة واحترافية وجديدنا لهذا اليوم هذي إضافة الرائعة  "سلايد شو" القطعة الجانبية المحبوبة بمظهر أخر مطور

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

بلوجر / التخطيط / اضافة اداة > HTML/JavaScript  

      استبدلة برابط موقعك
      نوع الخط  

<style type="text/css">ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}ul.drdsr-feat-posts{width:350px;height:550px}ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}ul.drdsr-feat-posts img{border:0;width:100%;height:100%}ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}ul.drdsr-feat-posts  .overlayx,ul.drdsr-feat-posts 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}ul.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000; color: #fff; -moz-opacity: .5; -khtml-opacity: .5; opacity: .2; text-align:justify;background-position:100% 50%;background-repeat:repeat-x}ul.drdsr-feat-posts ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%} ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
 

ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:"GESSTwoMediumRegular",Verdana,"Trebuchet MS",Times,"Times New Roman";font-weight:normal}

 ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;} ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:230%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}ul.drdsr-feat-posts li:nth-child(4) h4{font-size:170%}li:nth-child(2) h4{font-size:120%}li:nth-child(3) h4{font-size:120%}ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}.label_text .autname{color:#fff;right:2px;padding:2px;} ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}li:nth-child(4) .label_text{display:none}.buttons{margin:5px 0 0}.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:124px;left:50%}.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}</style><div id="featuredpostside"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript" data="cfasync"></script><script src="http://feat-posts.googlecode.com/svn/widgetjs"></script><script type="text/javascript">//<![CDATA[FeaturedPostSide({blogURL:"http://tech7yatak.blogspot.com/",MaxPost:8,idcontaint:"#featuredpostside",ImageSize:200,interval:5000,autoplay:true,tagName:false});//]]></script>

في ختام نتمنى لكم اوقات ممتعة بارك الله فيك واسعدنا واياكم ^^