Modifikasi Widget Featured Post Bawaan Blogger
Snippet Tips Blogger
Kemudian saya coba untuk memodifikasi tampilan basic yang berantakan tersebut dengan menambahkan CSS dan markup yang diperlukan, untuk hasilnya bisa sobat lihat di halaman utama blog ini. Nah, bagi sobat yang ingin memasang Modifikasi Widget Featured Post Bawaan Blogger bisa ikuti langkah mudah di bawah ini.
Modifikasi Widget Featured Post Bawaan Blogger
Buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian tambahkan kode di bawah ini diantara kode pembuka <body> dan kode penutup </body> Contohnya di sini saya menambahkan kodenya di bawah kode <div id='main-wrapper'> (sesuaikan dengan tema blog sobat).
<b:if cond='data:view.isHomepage'>
<b:section class='feature section' id='FeaturedPost' maxwidgets='1' showaddelement='yes'>
<b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost' version='1'>
<b:widget-settings>
<b:widget-setting name='showSnippet'>true</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='postId'>2488345024379290588</b:widget-setting>
<b:widget-setting name='showFirstImage'>true</b:widget-setting>
<b:widget-setting name='useMostRecentPost'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- Only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='post-summary'>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<span class='thumbb'>
<img class='image lazyload' expr:src='resizeImage(data:postFirstImage, 630, "400:200")' height='320' width='630'/>
<span class='label-feature'>
<span class='label-featurez'>
<svg style='width:16px;height:16px' viewBox='0 0 24 24'>
<path d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' fill='#222'/>
</svg>
Recommended
</span>
</span>
</span>
</b:if>
<div class='feature-wrapp'>
<b:if cond='data:showPostTitle and data:postTitle != ""'>
<h3>
<a expr:href='data:postUrl'>
<data:postTitle/>
</a>
</h3>
</b:if>
<b:if cond='data:showSnippet and data:postSummary != ""'>
<p>
<data:postSummary/>
</p>
</b:if>
<div class='button-feature'>
<a expr:href='data:postUrl'>
Read more
<svg viewBox='0 0 24 24'>
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg>
</a>
</div>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>Kemudian tambahkan kode di bawah ini sebelum kode </head>
<b:if cond='data:view.isHomepage'>
<style>
/* Featured Post */
#FeaturedPost1 h2{display:none}#FeaturedPost1{background:#fff;position:relative;overflow:hidden;border-radius:8px;margin:20px;border:1px solid rgba(0,0,0,0.05)}#FeaturedPost1 .thumbb{position:relative;display:inline-block}#FeaturedPost1 .thumbb img{object-fit:cover;border-radius:8px;transition:all .3s}#FeaturedPost1 .feature-wrapp{padding:30px 20px 20px 20px}#FeaturedPost1 .feature-wrapp h3{font-size:20px}#FeaturedPost1 .feature-wrapp h3 a{color:#222}#FeaturedPost1 .feature-wrapp h3 a:hover{color:#999}#FeaturedPost1 .feature-wrapp p{font-size:14px;margin:0 auto;color:#767676;line-height:1.5}#FeaturedPost1 .button-feature{overflow:hidden}#FeaturedPost1 .button-feature a{text-align:center;margin:20px auto 0 auto;outline:none;display:inline-block;position:relative;overflow:hidden;font-size:14px;padding:6px 14px;background:#f2f9ff;color:#2e87e7;border:1px solid;border-radius:99em;font-weight:500;transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}#FeaturedPost1 .button-feature a:hover{background:#fff}#FeaturedPost1 .button-feature a svg{width:16px;height:16px;margin:0 0 0 2px;transform:rotate(180deg)}#FeaturedPost1 .button-feature a svg path{fill:#2e87e7}#FeaturedPost1 .button-feature a:hover svg path{fill:#2e87e7}#FeaturedPost1 .label-feature{position:absolute;bottom:-10px;left:0;display:inline-block;clear:both;z-index:2;font-size:0}#FeaturedPost1 .label-feature .label-featurez{background:#feca57;color:#222;text-decoration:none;overflow:hidden;margin-right:8px;font-weight:500;border:0;padding:3px 14px 3px 10px;border-radius:0 99em 99em 0;font-size:13px;box-shadow:0 2px 6px -2px rgba(0,0,0,0.15)}#FeaturedPost1 .label-feature .label-featurez svg{margin:0 3px 3px 0}svg{vertical-align:middle}
@media screen and (max-width:640px){
#FeaturedPost1 .feature-wrapp h3{font-size:16px}#FeaturedPost1 .feature-wrapp{background:#f7f9f8}#FeaturedPost1 .button-feature a{background:#fff;color:#222;border-color:transparent;margin:10px auto 0 auto;padding:6px 14px;font-size:13px;box-shadow:0 2px 6px -2px rgba(0,0,0,0.15)}#FeaturedPost1 .button-feature a svg{width:14px;height:14px}#FeaturedPost1 .button-feature a svg path{fill:#222}#FeaturedPost1 .feature-wrapp p{display:none}}
</style>
</b:if>Edit kembali kode CSS di atas sesuai kebutuhan
Klik tombol Simpan tema > Refresh halaman > Sekarang klik menu Tata letak atau Layout > Klik Edit pada widget Featured Post dan pilih postingan apa yang ingin dimunculkan di widget Featured Post.
Kemudian klik tombol Simpan dan selesai. Lihat hasilnya di blog sobat.
Itulah Modifikasi Widget Featured Post Bawaan Blogger yang bisa Arlina Code bagikan pada kesempatan kali ini. Selamat mencoba dan wassalam.