معهد خبراء بلوجر - اضافة احدث التدوينات بشكل متحرك

السلام عليكم ورحمة الله وبركاته

اقدم لكم اضافة اجدث التدوينات لبلوجر بشكل متحرك لمدونتك لتعطيها الجمال مع اضافات بلوجر

الشرح :

اذهب الي صفحة التخطيط واضافة اداة جديدة HTML واضف بها الكود التالي :

كود PHP:

<style scoped="" type="text/css"> /*trickstoo modified widget of abt slider widget*/ ul.abt-sidebar-slider *{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } ul.abt-sidebar-slider{ font:normal normal 11px embria } ul.abt-sidebar-slider,ul.abt-sidebar-slider li{ margin:0; padding:0; list-style:none; position:relative } ul.abt-sidebar-slider{ width:100%; height:500px } ul.abt-sidebar-slider li{ height:24.5%; position:absolute; padding:0; width:49.5%; float:left; overflow:hidden; display:none } ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){ display:block } ul.abt-sidebar-slider img{ border:0; width:100%; height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%; height:49.5%; margin:0 0 2px; left:0;top:0 } ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%} ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%} ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%} ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider 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.abt-sidebar-slider .overlayx{ width:100%; height:100%; position:absolute; z-index:2; left:0; top:0; background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png); background-position:50% 50%; background-repeat:repeat-x } ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{ border:4px solid black; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px } ul.abt-sidebar-slider li:nth-child(1) .overlayx{ background-position:50% 25% } ul.abt-sidebar-slider .overlayx:hover{ -ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)"; filter:alpha(opacity=10);-khtml-opacity:0.1; -moz-opacity:0.1;opacity:0.1 } ul.abt-sidebar-slider h4{ position:absolute; bottom:30px; z-index:2; color:white; margin:0; width:100%; padding:0 10px; line-height:1.5em; font:embria; font-weight:normal } ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{ font-size:150% } ul.abt-sidebar-slider .label_text{ position:absolute; bottom:10px; left:10px; z-index:2; color:white; font-size:90%} ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{ 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:-10px; left:50% } .buttons a.nextx::before{ border-color:transparent transparent transparent #535353; margin-left:-3px } </style> <div id="featuredpostside"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"رابط مدونتك", MaxPost:10, idcontaint:"#featuredpostside", ImageSize:300, interval:6000, autoplay:true, tagName:false }); //]]> </script> <a href="http://tools.bloggerexp.com/">إضافة بلوجر</a>

ضع رابط مدونتك واحفظ العمل