Recent post merupakan sebuah fitur blog yang mana akan menampilkan artikel yang baru saja dipublish.
Tutoial kali ini kita akan membuat sebuah widget recent post dengan tampilan slider. Tutorial ini sangat singkat jadi tidak perlu berlama-lama langsung saja praktik.
- Masuk ke dashboard blogger dan klik menu tema.
- Klik Edit HTML
- Copy dan pastekan kode CSS berikut diantar tag <b:skin>...</b:skin> atau <style>...</style>, gunakan CTRL + F untuk mencari lebih mudah.
/* Slider Recent post - Kenscripts */
.ct-wrapper{padding:0;position:relative;max-width:655px;width:auto;margin:0;overflow:hidden}
.owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em}
.slider-item{position:relative;height:100%}
.slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1}
a.slider-image{height:100%}
.thumb.overlay{height:200px}
.post-descript{position:absolute;left:5%;top:5%;z-index:99;padding:25px;text-align:left;transition:all .3s}
.slider-wrapp .post-inner{padding:0px;margin:auto}
.slider-item h2.post-title{max-width:350px;font-size:24px;margin:0;max-height:none;overflow:hidden;line-height:normal;white-space:nowrap;text-overflow:ellipsis;}
.slider-item h2.post-title a{color:#fff;transition:all .3s}
.slider-item h2.post-title a:hover{color:#aaa}
.slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
.slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.slider-item .post-tag a:hover{background:#000;color:#fff}
.covert{position:absolute;top:14%;right:5%;bottom:0;height:160px;width:113px;z-index:5}
.covert a{filter:none!important}
.thumb.overlay:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-image:url(https://1.bp.blogspot.com/-vFRVhXqZVvA/XcXJVS4RxCI/AAAAAAAAAWU/TPYkyD71vm4IkbiDqI_upUquEbYOd2rTgCLcBGAsYHQ/s1600/pattern.png);box-shadow:inset -300px 40px 200px 0 rgba(0,0,0,.75),0px 0 15px 5px rgba(0,0,0,.8);background-color:rgba(0,0,0,.7)}
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-dots{position:absolute;top:220px;right:0;left:0;margin:auto;overflow:hidden;text-align:center}
.owl-dots button{display:inline-block;margin:0 3px}
.owl-dots button.owl-dot.active{background-color:#f39c12}
.owl-carousel .owl-item{height:245px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)}
.owl-prev{left:20px;transform:translate(-50px,0)}
.owl-next{right:20px;transform:translate(50px,0)}
.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s}
.owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}
.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@media screen and (max-width:768px){.feature-item{width:50%;margin:0 auto 15px auto}}
@media screen and (max-width:640px){.owl-prev,.owl-next{top:18%}.owl-carousel .owl-item{height:auto}.post-descript{padding:15px 10px;left:5%;right:5%}.slider-wrapp .post-inner{padding:0 10px}.slider-item h2.post-title{font-size:16px}.feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}}
@media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" type="text/javascript"></script>
<script src='https://rawcdn.githack.com/Arleth98/Js/3c454f9faabc22348a1aee5e0da79179334fc944/slider-akhmales.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
// SliderOption
$(document).ready(function(){$(".owl_carouselle").owlCarousel({autoplay:true,loop:true,lazyLoad:true,dots:true,video:true,smartSpeed:1200,responsiveClass:true,responsive:{0:{items:1},600:{items:1},1e3:{items:1}}})});
//]]></script>
<script type='text/javascript'>//<![CDATA[
aBold=true,
summaryPost=150 //Jumlah text Deskripsi,
summaryTitle=50 //Jumlah text judul,
postnum4=4 //Jumlah Post;
//]]></script>
<script src="/feeds/posts/default?max-results=3&orderby=published&alt=json-in-script&callback=postarea4"></script>
Baca : Cara pasang recent post responsive.
Begitulah cara mudah membuat recent post dengan style slider. Sekina dari saya.