Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

WIDGET Featured Post dirilis 10 Desember 2015 secara resmi oleh Google Blogger, dengan judul posting Highlight the posts that matter the most.

Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

"Sebagai blogger, kita semua tahu betapa pentingnya memposting secara berkala untuk mendorong pembaca untuk kembali. Tentu saja, semakin banyak Anda memposting, semakin cepat posting Anda masuk ke dalam arsip, membuatnya semakin sulit bagi pembaca Anda untuk menemukan semua yang Anda poskan yang mungkin menarik bagi mereka," demikian kata Google.

"Untuk membantu memudahkan menampilkan pos yang ingin dilihat pembaca Anda, kami telah membuat gadget baru yang disebut Featured Post. Dengan Featured Post, Anda dapat memilih posting yang telah Anda bagikan di blog Anda dan menyorotnya ke mana pun Anda mau. seperti."

Demikian kata Google. Intinya, widget featured post ini untuk menampilkan posting unggulan di blog kita.

Cara memasangnya seperti pasang widget biasa:

1. Klik "Layout" > "Add a Gadget"
2. Klik "Featured Posts" 


Widget Featured Post Default Blogger


Widget Featured Post Default Blogger


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

Save!

Kini masuk ke template: Tema > 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 dengan desain blog Anda, misalnya warna dan lebar-tinggi, di bagian kode CSS di atas.*

Thanks for reading Widget Featured Post Default Blogger Hasil Modifikasi - Responsive | Labels: Desain Blog edit this post
0 Komentar untuk "Widget Featured Post Default Blogger Hasil Modifikasi - Responsive"

Contact Form

Name

Email *

Message *