Cara Membuat Featured Post Di Blogger

Cara Membuat Featured Post Di Blogger
Cara Membuat Featured Post Di Blogger 

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

  • 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://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/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://3.bp.blogspot.com/-ADZMmpLRh0Q/WdimNULjiRI/AAAAAAAAA40/l12f8MdQUCEMYSNV95wHA_EbQ8HLu3WAQCLcBGAs/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://3.bp.blogspot.com/-ADZMmpLRh0Q/WdimNULjiRI/AAAAAAAAA40/l12f8MdQUCEMYSNV95wHA_EbQ8HLu3WAQCLcBGAs/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://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/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 tepat di atas kode </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 = "http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/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 kode di bawah ini bebas mau di mana saja .. tapi saya 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
Cara Membuat Featured Post Di Blogger Admin Mafsyah 5 of 5
Cara Membuat Featured Post Di Blogger  Cara Membuat Featured Post Di Blogger - Tutorial  cara membuat featured post di blogger. sudah...
Cara Membuat Featured Post Di Blogger
4/ 5 stars - "Cara Membuat Featured Post Di Blogger" Cara Membuat Featured Post Di Blogger  Cara Membuat Featured Post Di Blogger - Tutorial  cara membuat featured post di blogger. sudah...
Loading

URL POSTINGAN

URL:
HTML link code:
BB (forum) link code:

Silahkan Baca Aturan Komentar Yang Baik
Peraturan:
1. Dilarang "SPAM"Apabila Spam Maka Akan Di Block Supaya Tidak Bisa Komentar Lagi
2. Dilarang "Sebar Link Di Komentar " Apabila Share Link Di Komentar Otomatis Di Hapus
3. Dilarang "Bahasa Kasar"Bahasa Kasar Atau Kotor Akan Di Hapus OLeh Admin
4. Dilarang "Bully" Apabila Ada Komentar Berbau Bully Akan Di Hapus Oleh Admin
5. Silahkan Berkomentar Sesuai Kebutuhan

Komentar Facebook
0 Komentar Blogger

0 Comments