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

الصفحة الرئيسية› اضافات بلوجر› بلوجر› سلايد شو› سلايدر شو› سلايدر مثبت يعرض اخر المواضيع لمدونات بلوجر

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

عبدو تكنولوجي - Abdou Technologie

12/15

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

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

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

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

شرح التركيب

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

<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>
</if>

ثانيا ابحث على </body> وضع الكود التالي فوقه مباشرة