Membuat Recent Post Slider Akhmusic

Selamat tahun baru 2020, sebagai ucapan terima kasih karena selalu berkunjung ke blog ini saya akan kasih tutorial cara Membuat Recent Post Slider Akhmusic, and ini adalah update pertama setelah lama tidak aktif, untuk tutorialnya silahkan simak dibawah ini...



Tutorial kali ini cukup mudah dan simple, kalian hanya perlu mengikuti step by step apa yang saya tulis, jika terjadi error atau masalah harap cek kembali tutorialnya, dan jika masih terjadi kesalahan tinggal beri komentar, nanti saya bantu memperbaikinya. Untuk pratinjau fitur ini silahkan cek pada tombol dibawah ini :



Cara Membuat Recent Post Slider Seperti Akhmusic

  1. Buka Blogger > Tema > Edit HTML
  2. Silahkan simpan/save CSS berikut kedalam <b:skin>...</b:skin> atau <style>...</style>
    /* Slider Akhmusic - Arlethdesign */
    .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}}

  3. langkah kedua, simpan javascript berikut diatas </head>
    <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>

  4. kemudian, letakkan javascript berikut diatas </body>
    <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>

  5. Jika Sudah Save/Simpan Tema
  6. Langkah terakhir, buka Tata letak > Add Widget > HTML/Javascript, lalu simpan javascript berikut kedalam widget tersebut
    <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>
Related Post
Comment Post