Skip to content Skip to sidebar Skip to footer

Cara Membuat Featured Post Terbaru Di Blogger




BAHASTUTORIAL.COM - Tutorial kali ini kita bakal bahas tentang "Cara Membuat Featured Post Di Blogger".
Featured post yang kita bahas cukup unik. Unik dari segi tampilan dan perpaduan warna. disini featured post yang kita bahas sangat responsive dan mobile friendly. Jadi tidak perlu khawatir featured post nya bisa di tampilkan di versi mobile. Dan featured post nya sangat ringan tidak memberatkan loading blogger.

Langsung saja ke tutorial ya ..

1. Masuk ke edit html
2. Kode pada table css simpan di atas kode </b:skin> atau </style>
3. Kode pada table html simpan di area yang kalian inginkan. (contoh di bawah kode <body>)
4. Lalu Simpan



 
 
/*--- STARS FEATURED POST BAHAS TUTORIAL ---*/
.ribbon {
    position: relative;
    top: 0;
    right: 0;
}

.ribbon a {
    color: #fff;
    text-decoration: none;
}

.ribbon .banner {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    display: block;
    float: right;
    position: relative;
    right: -14px;
    top: 22px;
    width: 100px;
}

.featured-post-banner .banner {
    right: -8px;
    top: 15px;
    width: 150px;
    left: 35px;
}

.ribbon .banner::after,
.ribbon .banner::before {
    content: '';
    display: block;
    height: 12px;
    position: absolute;
    width: 30px;
}

.featured-post-banner .banner::after,
.featured-post-banner .banner::before {
    height: 6px;
    width: 20px;
}

.ribbon .banner::before {
    -webkit-transform: skewY(-45deg) translate(50%, 15px);
    -moz-transform: skewY(-45deg) translate(50%, 15px);
    -ms-transform: skewY(-45deg) translate(50%, 15px);
    -o-transform: skewY(-45deg) translate(50%, 15px);
    -webkit-transform-origin: 100% center;
    -moz-transform-origin: 100% center;
    -ms-transform-origin: 100% center;
    -o-transform-origin: 100% center;
    left: -45px;
}

.featured-post-banner .banner::before {
    top: -5px;
    left: -30px;
}

.ribbon .banner::after {
    -webkit-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
    -moz-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
    -ms-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
    -o-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
    -webkit-transform-origin: 0 center;
    -moz-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    -o-transform-origin: 0 center;
    right: -17px;
}

.featured-post-banner .banner::after {
    top: 18px;
    right: -12px;
}

.ribbon .text {
    position: relative;
    z-index: 2;
    padding: 6px 0;
    font-size: 12px;
    font-weight: bold;
    min-height: 18px;
    line-height: 18px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);
    white-space: nowrap;
    text-overflow: ellipsis;
}




.featured-post-banner .text {
    padding: 3px 0;
    font-size: 8px;
    min-height: 14px;
    line-height: 14px;
}

.ribbon .text::before,
.ribbon .text::after {
    content: '';
    display: block;
    height: 30px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}




.ribbon.featured-post-banner .text::before,
.ribbon.featured-post-banner .text::after {
    height: 20px;
}

.ribbon .text::before {
    -webkit-transform: translateX(-15%) skewX(-45deg);
    -moz-transform: translateX(-15%) skewX(-45deg);
    -ms-transform: translateX(-15%) skewX(-45deg);
    -o-transform: translateX(-15%) skewX(-45deg);
}

.ribbon .text::after {
    -webkit-transform: translateX(15%) skewX(45deg);
    -moz-transform: translateX(15%) skewX(45deg);
    -ms-transform: translateX(15%) skewX(45deg);
    -o-transform: translateX(15%) skewX(45deg);
}




.ribbon-color .banner::after,
.ribbon-color .banner::before {
    background-color: #5BC3EE;
}

.ribbon-color .text::before,
.ribbon-color .text::after,
.ribbon-color .text {
    background-color: #5BC3EE;
}
/*--- END FEATURED POST BAHAS TUTORIAL ---*/



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ribbon featured-post-banner ribbon-color'>
    <div class='banner'>
        <div class='text'>Featured Post</div>
    </div>

</div>
</b:if>

<div style='background:white;padding:10px;margin-top:10px;border-left:5px solid #5BC3EE; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.38);'>

  <div class='featured-inner'>
        <b:section class='News-Ticker' id='NewsTicker' maxwidgets='1'>
          <b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1'>
            <b:widget-settings>
              <b:widget-setting name='showSnippet'>true</b:widget-setting>
              <b:widget-setting name='showPostTitle'>true</b:widget-setting>
              <b:widget-setting name='showFirstImage'>true</b:widget-setting>
              <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:title != &quot;&quot;'>

  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 style='display:none'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
</b:if>
</b:if>
</b:if>
</b:includable>
            <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
   
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><div style='font-size:18px;padding:10px;font-weight:700;line-height:normal;'>
  <data:postTitle/></div></a></h3>
    </b:if>
    <p style='font-size:13.5px;line-height:19px;margin-bottom:20px'>
      <data:postSummary/>
    </p>
  </div>
  <style type='text/css'>
    .image {width:45%;height:150px;margin:1px 15px 5px 0;position:relative;float:left;}
    .post-summary {width:92%;min-height:175px;background:#fafafc;padding:15px 15px 0 15px;margin:12px 0}
  </style>
</b:includable>
          </b:widget>
        </b:section>      
</div>

</div>


Notes

- Semua tutorial yang ada di website bahastutorial.com sudah di coba dan hasilnya berjalan dengan baik.
- Kalian ganti kode post body di atas dengan kode post body kalian.
Bagaimana tutorial diatas apakah sudah jelas atau masih ada yang kurang jelas.
Jika ada yang masih kurang paham kalian bisa tanyakan langsung di kolom komentar.
Admin akan merespon dan memberikan solusi agar kalian bisa menjalankanya dengan benar.

Jangan lupa share artikel ini ke media sosial kalian yah. Semoga Bermanfaat ..

BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

Post a Comment for "Cara Membuat Featured Post Terbaru Di Blogger"