Featured Post Default Blogger Hasil Modifikasi

Baca Juga

Featured Posts Default Blogger Hasil Modifikasi: Responsive

WIEGET Featured Post adalah fitur baru blogger yang dirilis 10 Desember 2015.

Google Blogger mempublikasikan di blog resminya dengan judul  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. Widget featured post disediakan untuk menampilkan konten atau tulisan unggulan di blog.

Cara memasangnya seperti menambahkan widget biasa di sidebar blog, yaitu

1. Layout
2. Add a Gadget 
3. Pilih Featured Post.

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

Featured Post Default Blogger Hasil Modifikasi

Agar tampilan Featured Posts bawaan blogger seperti ilustrasi di atas, lakukan langkah berikut ini:

1. Template > Edit HTML
2. Pasang kode CSS dengan menyimpan kode berikut ini di atas kode </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>

3. Ganti Kode Widget Featured Posts
Temukan kode

<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'> ... </widget> 

4. GANTI dengan kode berikut 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>

5. Save Template!

Pemasangan dan modifikasi Featured Post bawaan blogger selesai. (CB Blogger).*