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

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

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

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

شرح التركيب 

• اولا ابحث على </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>

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

<b:if cond='data:view.isHomepage'><b:tag name='srcipt' type='text/javascript'>var text_month = ["يناير","فبراير","مارس","أبريل","مايو","يونيو"," يوليو"," أغسطس","سبتمبر","أكتوبر","نوفمبر"," ديسمبر"], noimg= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1p9_t1JpQ0sREKH55ZWf3QO081aapbZ-uNvOV2iliQgyrV8VSNeJcYMC-7nUVAZ5ayAr676xzXw7FiuYoBALwQ79GOGqhZiyNkZhBGzXqCz5ZdEOf7zBRBKV3oi9FvPDHqmGT62pz0nD/s1600/noimg.png"; </b:tag><srcipt src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/slider-fixed.js' type='text/javascript'/></b:if>

• الان في الخطوة الاخيرة انسخ الكود التالي وضعه في المكان الذي تريد ضهور فيه السلايدر

<b:if cond='data:view.isHomepage'><div class="container"><div class="slidershow d-none d-lg-block" id="slider_home"></div></div></b:if>


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

شارك الموضوع عبر :



free-blogger