Cara Membuat Featured Post Di Blogger
Cara Membuat Featured Post Di Blogger |
- Masuk Ke Blogger
- Template > Edit Html
- Masukan css di bawah ini tepat diatas kode </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/AVvXsEgBktGukn4oSqvVLsWD05J9FESn-LOv0FUAzO__ueInpMiSzOW0t9vwngdOi_j_mEjQRl_IFgzTxC7lxmXiR-O_GjIrvYPybaRJbnjO-harUyRLAYyeczyAEA9UMYHhmii1d6EiCwVL0fgx/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/AVvXsEj7aDzsgWtM_3mRBZA9tqiFOlu0guqURaCIeaJ7lmHpEvVuFueoINgkkpfTbVbCJQiqqvpg2e_rwT_Q2jRia9WtqA9mDVi3ZS-CmBSF9qcaVoX4bSGhL2T98_WlksR7tpdJKGLYUgFmLOfL/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/AVvXsEj7aDzsgWtM_3mRBZA9tqiFOlu0guqURaCIeaJ7lmHpEvVuFueoINgkkpfTbVbCJQiqqvpg2e_rwT_Q2jRia9WtqA9mDVi3ZS-CmBSF9qcaVoX4bSGhL2T98_WlksR7tpdJKGLYUgFmLOfL/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/AVvXsEgBktGukn4oSqvVLsWD05J9FESn-LOv0FUAzO__ueInpMiSzOW0t9vwngdOi_j_mEjQRl_IFgzTxC7lxmXiR-O_GjIrvYPybaRJbnjO-harUyRLAYyeczyAEA9UMYHhmii1d6EiCwVL0fgx/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>
<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/AVvXsEh9zPtvkSMpKv3FQXCY43gz75HZ0c5DuiSusujq-M0E1Mfv0uGnC-Q6WNNPODk7YVAlLnMpbI0M4tsQ4eE8G__2dY2ZvZqn6JIPVN8tiUgfYqM_4ux68_PUMMF3FQyuniJwIjXRhPaQCtI/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>
<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 != ""'> <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
interesting. sudah follow semua steps di atas, tapi tidak muncul-muncul feature postnya. Perincikan step terakhir atau modified supaya boleh letakkan dalam javascript layout blogger.
BalasHapusKeren
BalasHapus