Modifikasi Featured Post Bawaan Blogger di Atas Blog Post

Baca Juga

Cara Memasang, Membuat, dan Modifikasi Featured Post Bawaan Blogger untuk dipasang di atas Blog Post Homepage.

SEBELUMNYA cb sudah share tentang modifikasi widget Featured Post bawaan blogger untuk dipasang di sidebar.

Kali ini CB share tentang Cara Modifikasi Featured Post Bawaan Blogger untuk dipasang di atas Blog Post Homepage. Demonya di halaman depan blog ini, juga di homepage CB Net dan NTS Magz.

Ini penampakannya, mirip Featured Post yang cb modif untuk NWJ Series.

Seperti sebutkan Buzz Blogger, Featured Post adalah widget untuk menampilkan posting unggulan atau yang ingin ditonjolkan sebagai salah satu tulisan atau konten terbaik.

Widget Featured Post ini baru diluncurkan Blogger 11 Desember 2015. Jadi masih baru banget, belum sebulan. Cara memasannya:

1. Klik Layout > Add a Gadget > pilih Featured Post 
2. Klik salah satu judul posting yang akan ditampilkan
3. Save!
4. Anda bisa memasang Featured Post ini di sidebar dan di atas main-area (blog post).

Kelebihan Featured Post Bawaan Blogger ini adalah ia asli bawaan blogger sehingga tidak memberatkan tampilan blog dan responsive.

Modifikasi Featured Post Bawaan Blogger di Atas Blog Post

Berikut ini kode modifikasi featured post default blogger. Cara memasangnya:

1. Pasang widget Featured Post sebagaimana langkah di atas 
2. Pasang di atas kotak "Blog Post" atau Main Area.
3. Masuk ke template: Template > Edit HTML
4. Cari (Ctrl+F) kode widget Featured Post
5. Lakukan modifikasi sesuai dengan selera Anda dengan menambahkan kode "style" atau replace dulu dengan kode berikut ini:

<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- 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: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>
    <strong style='color:#F55B77;font-weight:700;'>Featured Post</strong>
    <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>

Langkah berikutnya adalah Save KPK :) Tentu saja, Save Template!

Featured Post dengan CSS Manual

Kita juga bisa pasang Featured Post secara manual, bukan memasang Featured Post bawaan blogger, tapi dengan kode tersendiri, seperti CB pasang sebelum ini.

Caranya:

1. Layout > Add a Gadget di atas Blog Post > HTML/Javascript
2. Copas kode berikut ini di kolom konten

<style type="text/css">
.slidorion {
position: relative;z-index:1;
width: 565px;
height: 191px;
padding:0px;
line-height: 20px;
        background:#eee;
box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
        margin-bottom: 15px;}
.slider {
width: 50%;
height:100%;
position: relative;
float: left;
overflow: hidden;}
.accordion {
width:50%;
height: 100%;
position: relative;
z-index:999;
overflow: hidden;
float: left;
}
.accordion .header {
padding: 8px 14px;
font-size: 14px;
font-weight: bold;
color: #333;}
.accordion .header a{color:#f65b4f}
.accordion .header a:hover{color:#48d}
.accordion .content {
height:auto;
font-weight: normal;
font-size: 14px;
line-height:20px;
margin: 0;
padding:0 15px;
border: none;
        overflow:auto;}
.accordion .content p {margin-bottom: 10px;}
</style>
<div id="slidorion" class="slidorion">
<div class="slider">
    <!-- slide images -->
<div class="slide">
<a href="http://www.contohblog.com/2015/11/10-alasan-anda-harus-tetap-ngeblog.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVAHzx7izzqoDBFZbzw8KTDU9p_2ftpp-xo1sK510PBBPuZbutiTlptudZLxq02DxXKFvaGZQcI1mOKcJSN8uhbRBLMHnqT0VYrotnYZZOiSEayfwuS7Hq7pHdMXJ3REi0shzpADl5uiL/s1600/blog+blogger+blogging.jpg" alt="Manfaat Blog" style="height:100%"/></a></div>
<!-- slide images end -->
</div>
<div class="accordion">
<!-- content -->
<div class="header">
<a href="http://www.contohblog.com/2015/11/10-alasan-anda-harus-tetap-ngeblog.html"><h4>10 Alasan Anda Harus Tetap Ngeblog</h4></a></div>
<div class="content">
<p>Kita bisa menjadikan blog sebagai sumber penghasilan (passive income). Dengan blog, kita bisa menjadi publisher Google Adsense, mengikuti program afiliasi...</p>
</div>
<!-- content end -->
</div>
</div>

Demikian Modifikasi Featured Post Bawaan Blogger di Atas Blog Post versi CB Blogger. Anda juga pastinya utak-atik juga tu widget. Good Luck & Happy Blogging! (http://www.contohblog.com/).*

Simak juga:
1. Featured Post Content Slider Image untuk Blogger
2. Featured Post ala New Johny Wuss