Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

DEMO widget featured post ada di halaman depan. Featured Post ini termasuk fitur baru blogger. Dirilis 10 Desember 2015 secara resmi oleh Google Blogger dengan judul posting Highlight the posts that matter the most.

"As bloggers, we all know how important it is to post frequently in order to encourage readers to come back. Of course, the more you post, the more quickly your posts slip down into the archives, making it harder for your readers to discover everything you’ve posted that they might be interested in."

"To help make it easier to showcase the posts you want your readers to see, we’ve created a new gadget called Featured Post. With Featured Post, you can choose posts you’ve shared on your blog and highlight them wherever you’d like."

Demikian kata Google. Intinya, widget featured post ini untuk menampilkan posting unggulan di blog kita. Cara memasangnya seperti pasang widget biasa, yaitu Add a Gadget > Pilih Featured Post.

Step 1Log in to the Blogger dashboard. Click the drop-down arrow next to the "Post lists" icon. Click "Layout" on the list.

Step 2Click "Add a Gadget" on the sidebar where you want to insert featured posts. In the "Basics" section, scroll down and click "HTML/Javascript." This adds a gadget where you can insert HTML tags or Javascript.

Step 3Type "Featured Posts" or any heading you like in the "Title" field.

Jika sudah dipasang, pindahkan widget baru itu ke atas elemen "Blog Post". Save!

Kini masuk ke template: Template > Edit HTML

CSS Code 
Simpan di atas </head>

<style>
.post-summary .image {width: 50%;
    height: 160px;
    margin: 0 15px 0 0;
    position: relative;
    float: left;}
    .post-summary {
width: 92%;
    background: #fafafc;
    padding: 15px 15px 2px 15px;
    margin: 12px 0 0;}
.post-summary h3{margin:0;font-size:18px;padding:10px;font-weight:700;line-height:normal}
.post-summary strong {color:#F55B77;font-weight:700;}
.post-summary p{font-size:13.5px;line-height:19px;margin-bottom:20px}
 @media screen and (max-width:600px){
.post-summary {
    width: 98%;
    background: #fafafc;
        padding: 15px 15px 2px 15px;
    margin: 15px 0 0px;}
.post-summary .image {
    width: 100%;
    height: 185px;
    margin: 0 15px 15px 0;
    position: relative;
    float: left;}
.post-summary h3 {
margin: 0;
    font-size: 18px;
    padding: 10px 0;
    font-weight: 700;
    line-height: normal;}
}
</style>

Ganti Kode Widget Featured Posts
Temukan kode <b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'> ... </widget> 

GANTI dengan ini:

   <b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'>
     <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 alt='featured post' class='image' expr:src='data:postFirstImage'/>
    </b:if>
    <strong>Featured Post</strong>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <p><data:postSummary/></p>
  </div>
</b:includable>
   </b:widget>

SAVE!

Kini Widget Featured Post Default Blogger Hasil Modifikasi - Responsive sudah terpasang. Lakukan modifikasi sesuai de