سلايدر مثبت يعرض اخر المواضيع لمدونات بلوجر

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي اقدم لكم سلايدر بشكل اخر وشبيه بسلايدر الخاص بمدونتي

ما يميز هذا سلايدر انه بسيط جدا وانيق

يمكنك معاينة الاضافة من هنا

شرح التركيب

اولا ابحث على </head> وضع الكود التالي فوقه

<b:if cond='data:view.isHomepage'>
<style type="text/css">
    /*<![CDATA[*/
.slidershow{position:relative;overflow:hidden;padding-top:4%}
.slidershow .slider{position:relative;width:50%;height:250px;float:right}
.slidershow .slider:nth-child(1){width:50%;float:right;height:500px}
.slidershow .slider .slidepost{height:100%;padding:2%}
.slidershow .slider .slidepost:after{content:"";position:absolute;height:175px;width:96%;bottom:10px;opacity:1;transition:all .2s linear 0;-webkit-transition:all .2s linear 0;-moz-transition:all .2s linear 0;background-color:rgba(255,255,255,0);background-image:-moz-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:-o-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:-webkit-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:-ms-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:linear-gradient(to top,rgba(0,1,1,0.9) 0%,transparent 100%)}
.slidershow .slider .slidepost .background-image{width:100%;height:100%;background-position:center;background-size:cover}
.slidershow .slider .slidepost .article-content{position:absolute;bottom:2%;right:2%;padding:4%;color:#fff;z-index:1}
.slidershow .slider .slidepost .article-content .post-date{color:#ececec}
.slidershow .slider .slidepost .article-content .art-title{margin:0;line-height:1.5;padding:10px 0}
.slidershow .slider .slidepost .article-content .art-title a{color:#fff}
.slidershow .slider .slidepost .article-content .art-title a:hover{color:#65bb6a}
.slidershow .slider .slidepost .article-content .meta{padding:5px 0}
.slidershow .slider .slidepost .article-content .meta span{display:inline-block;margin-left:10px}
.slidershow .slider .slidepost .article-content .meta span a{color:#fff}
.slidershow .slider .slidepost .article-content .meta span i{margin-left:5px;color:#65bb6a}
.d-none {display: none!important;}
@media (min-width: 750px){.d-lg-block {display: block!important;}}
/*]]>*/
</style>
</b:if>