Cara Menciptakan Featured Slider Post Di Blogger
29 Mar 2019
langsung saja ke tutorialnya
1. Masuk Ke Blogger
2. Template > Edit Html
3. Masukan css di bawah ini sempurna diatas aba-aba </head>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <style> .box-tag a{padding:2px 8px;background-color:#3cbd1b;color:#fff!important;font-size:11px;z-index:999;font-weight:400;margin-bottom:5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.2)}.recent-slider .carousel{position:relative;margin:30px 0 25px!important;padding:0;overflow:visible;height:auto;display:block;clear:both}.recent-slider .carousel h2{display:none}.main-carousel{overflow:hidden}.carousel-abdoutech{padding:0!important;position:relative;overflow:hidden;list-style:none}.carousel-thumb{width:100%;height:380px;position:relative;display:block}.carousel-abdoutech .box-image{width:100%;height:100%;position:relative;display:block}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7k_UO7FiAn9ZBQbmoBRWAQK_FyoL68tsdG1VIaAVjNH_szyElCuHAQ5YVDdItVxGkhnToiV6ydgE_knCmgyF8njtKL3ujBGQGNbyuXGdrev8hbBREdhrzsJeJcHUjD4U6rQtO1piFNzyE/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-content,.featured .post-panel{transition:all .35s;box-sizing:border-box}.boxes ul li:hover .box-image:after,.bx-first:hover .bf-thumb:after,.carousel-abdoutech:hover .box-image:after{opacity:.2}.carousel-content{position:absolute;bottom:0;background:rgba(0,0,0,.31);width:100%;z-index:2;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;padding:15px;text-align:right}.main-carousel .owl-dots,.owl-carousel .owl-item:hover .carousel-content{bottom:10px}.carousel-abdoutech .recent-title{margin:10px 0 3px;font-size:18px;font-weight:600}.carousel-abdoutech .recent-title a{color:#fff;display:inline-block;line-height:1.2em;text-shadow:0 .5px .5px rgba(34,34,34,.3)}.carousel-abdoutech .recent-date{color:#ccc}.carousel-tag a{padding:2px 8px;background-color:red;color:#fff!important;font-size:11px;z-index:999;font-weight:400;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.3)}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;font-size:25px;line-height:40px;position:absolute;top:170px;width:47px;height:47px;cursor:pointer;z-index:999}.main-carousel .owl-prev{right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkBQ17i-ovN-n7ZE6oFLnNOI2-5h76e3qEDT3a8o2FpTtjBdtm5Le4LIhjuCYuJqnnjWPtPKPUZRuqIMLk82oPWcp8v_QvheQo3hKByRm8eeoWKtM-Vd_PpNIfMAAqQW7zkK6qlujGI_m/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkBQ17i-ovN-n7ZE6oFLnNOI2-5h76e3qEDT3a8o2FpTtjBdtm5Le4LIhjuCYuJqnnjWPtPKPUZRuqIMLk82oPWcp8v_QvheQo3hKByRm8eeoWKtM-Vd_PpNIfMAAqQW7zkK6qlujGI_m/s1600/next.png) no-repeat}.main-carousel:hover .owl-next{left:-1px}.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}.featured-date:before,.recent-date:before{content:'\f017';font-family:fontawesome;margin-left:5px}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:right;-webkit-backface-visibility:visible;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-dots,.owl-next,.owl-prev{position:absolute;text-align:center}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-next,.owl-prev{top:0;color:#1c1c1c;background-color:rgba(255,255,255,.8);font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden}.owl-prev{right:0}.owl-next{left:0}.owl-dots{bottom:1px;width:33.33%;right:0;left:0;margin:auto}.star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)}li.carousel-abdoutech .star_rating .fa:nth-child(1){color:red}li.carousel-abdoutech .star_rating .fa:nth-child(2){color:#f50}li.carousel-abdoutech .star_rating .fa:nth-child(3){color:#fa0}li.carousel-abdoutech .star_rating .fa:nth-child(4){color:#3cbd1b}li.carousel-abdoutech .star_rating .fa:nth-child(5){color:#127adb}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7k_UO7FiAn9ZBQbmoBRWAQK_FyoL68tsdG1VIaAVjNH_szyElCuHAQ5YVDdItVxGkhnToiV6ydgE_knCmgyF8njtKL3ujBGQGNbyuXGdrev8hbBREdhrzsJeJcHUjD4U6rQtO1piFNzyE/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-abdoutech .box-image:after{content:'';opacity:.8;transition:all .35s;right:0;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s}.carousel-abdoutech:hover .box-image:after{opacity:.2} </style> <link href='//raw.githack.com/arlinadsign/saflink/master/owl.carousel.css' rel='stylesheet'/> <script data-cfasync='false' src='//raw.githack.com/arlinadsign/saflink/master/OwlCarousel.js' type='text/javascript'/> </b:if>4. Selanjutnya Simpan Kode Di bawah sempurna di atas aba-aba </body>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <script type='text/javascript'> //<![CDATA[ var MONTH_FORMAT= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGCnIrqucGbD758ueEUvPCaPmWJpqNYRvnDBjrZbEAS0NHJWHmtZlEbfoePsZe6wgwuk5-Mz-CT6BIt3EGOVXo1rBwo99oqRmBoAdqrGgX99YnkAQGbIpk_d7m7qsiB0FBOn9EVXhveg/s1600-r/nth.png"; var CAROUSEL_NUM = 6; var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_star1.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript); //]]> </script> </b:if>5. Selanjutnya simpan aba-aba di bawah ini bebas mau di mana saja .. tapi aku sarankan dibawah <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='recent-slider' id='recent-slider'> <div class='container'> <b:section class='box-sec' id='box-sec' showaddelement='yes'> <b:widget id='HTML655' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<span id="carousel" data-label="Tips Blogger"></span>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <!--b:include name='quickedit'/--> </b:includable> </b:widget> </b:section> </div> </div> </b:if>yang aku tandai warna merah itu diganti sesuai dengan ke inginan anda
Apabila Featured Post Tidak Tampil Silahkan Pergi ke Setelan (Setting) > Lainya > Ubah Izinkan Feed Blog Menjadi Penuh .. Lalu Simpan