Featured Post Default Blogger Hasil Modifikasi
WIEGET Featured Post yakni fitur gres 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 goresan pena unggulan di blog.
Cara memasangnya ibarat menambahkan widget biasa di sidebar blog, yaitu
Cara memasangnya ibarat menambahkan widget biasa di sidebar blog, yaitu
- Layout
- Add a Gadget
- Pilih Featured Post.
Jika sudah dipasang, pindahkan widget gres itu ke atas elemen "Blog Post", kemudian Save!
Featured Post Default Blogger Hasil Modifikasi
Agar tampilan Featured Posts bawaan blogger ibarat ilustrasi di atas, lakukan langkah berikut ini: 1. Template > Edit HTML
2. Pasang aba-aba CSS dengan menyimpan aba-aba 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 aba-aba 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 != ""'> <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 != ""'> <img alt='featured post' class='image' expr:src='data:postFirstImage'/> </b:if> <strong>Featured Post</strong> <b:if cond='data:showPostTitle and data:postTitle != ""'> <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).*
Sumber https://testemplatecb.blogspot.com/
