Modify Default Featured Post Widget On Blogger
Yesterday it was fitting that I idly installed a Featured Post widget on the trial blog, fitting to check why the shape is messy, huh? I just remembered it's because the theme used is already optimized by eliminating the built-in JS and CSS bundles of Blogger. Automatic Featured Post widgets whose notes are blogger's built-in widgets look not like when using blogger's built-in theme.
Then I try to modify the basic look of the mess by adding the CSS and markup needed, for the results you can see on the main page of this blog. Well, for those of you who want to install Blogger's Built-in Featured Post Widget, Modifications can follow the easy steps below.
Blogger's Built-in Featured Post Widget Modification
Open Blogger > Click the Theme Menu > Click Edit HTML > Then add the code below between the opening code <body> and the closing code </body>For example here I add the code under the code <div id='main-wrapper'> (adjust to the theme of your blog).
Then add the code below before the code </head><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>
<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>
Re-edit the CSS code above as needed
Click on the button Save Theme > Refresh page > Now click on the Layout or Layout menu > Click on Edit on the Featured Post widget and select what posts you want to appear in the Featured Post widget.
Then click the Save Button and you are done. See the results on your blog.
That's the Blogger Default Featured Post Widget Modification that Blog Faters can share on this occasion. Good luck and greetings.