Mamank Dzgn : Cara Menciptakan Featured Post Di Blogger

Cara Membuat Featured Post Di Blogger

Cara Membuat Featured Post Di Blogger - Tutorial cara menciptakan featured post di blogger. sudah banyak orang share tutorial perihal featured post .. dan sedikit yang masih dapat work .. sebab hampir semua blog itu hanya copas .. jadi apabila 1 mati javascript semua mati ... nah untuk kesempatan kali ini aku akan membagikan featured post keren dengan bintang yang masih work dan sangan ringan .. untuk memasang nya pun tidak memberatkan loading suatu blogger .. eksklusif saja ke tutorialnya

Masuk Ke Blogger
Template > Edit Html
Masukan css di bawah ini sempurna diatas isyarat </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/AVvXsEhMcP-AxbkVkTvio0Pb4QeSZ0DPr1cN-EYwSDIOj4PtmoVmLsuhDb3CiVkL7W3EsuDStD8rSBr4QnjmqwuXOVFEBg_oOuOUPcMaX_K4heKO0_9bG6iqS26f3Wh4PSFC9dy3S_LMNi48rqJY/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/AVvXsEgH8DQT6qCQz-3Cc2usvEjWjvxNf8q7-0YsBmYLazXYpIHBt4F4IrG8cPrFn1FyMXfCY87zkh7V6yFDsSUyn-vMBvclpJuoIlmhXN086Box6Vb2upzl9UaQypxVMzeAldYZ9oHjg0wAXsWf/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/AVvXsEgH8DQT6qCQz-3Cc2usvEjWjvxNf8q7-0YsBmYLazXYpIHBt4F4IrG8cPrFn1FyMXfCY87zkh7V6yFDsSUyn-vMBvclpJuoIlmhXN086Box6Vb2upzl9UaQypxVMzeAldYZ9oHjg0wAXsWf/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/AVvXsEhMcP-AxbkVkTvio0Pb4QeSZ0DPr1cN-EYwSDIOj4PtmoVmLsuhDb3CiVkL7W3EsuDStD8rSBr4QnjmqwuXOVFEBg_oOuOUPcMaX_K4heKO0_9bG6iqS26f3Wh4PSFC9dy3S_LMNi48rqJY/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='//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/> <script data-cfasync='false' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'/> </b:if>

Selanjutnya Simpan Kode Di bawah sempurna di atas isyarat </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/AVvXsEiLguMetPi5ONAJJ9iGAGTJOeqWTe2mTdP-u3qI2ucwPszlFb2XHGl93oahUnEOEZNH0oR-3prB018VPdUag1YxyytVlxSyivYhQFEbzxJHmyjwdXYXf8sEBHbvuOFo_gkGCvG6EMv3zpI/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>

Selanjutnya simpan isyarat 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%20Blogger"></span>]]></b:widget-setting>     </b:widget-settings>     <b:includable id='main'>   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <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>

Apabila Featured Post Tidak Tampil Silahkan Pergi ke Setelan (Setting) > Lainya > Ubah Izinkan Feed Blog Menjadi Penuh .. Lalu Simpan

Sekian Tutorial Cara Membuat Featured Post Di Blogger Semoga Bermanfaat

Demo