Modify Blogger Default Featured Post Widget
Open Blogger
Click the menu
Theme
Click, Edit HTML
Then add the code below between the unlock code <body> and closing code </body>. For example here I add the code below the code <div id='main-wrapper'> (adjust to your blog's theme).
<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>
Then add the code below before the code<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>
Re-edit the CSS code above as needed
Click the button-Save theme-Refresh the page-Then click menu-Layout-Click Edit- on the Featured Post widget and select what posts to appear in the Featured Post widget.
Then click the button and Save and you're done. See the results on your blog.
We Love Hearing from You!
Thank you for reading our post! Your thoughts and opinions are important to us. Please leave a comment below to share your feedback, ask questions, or start a discussion. We look forward to engaging with you!
Note: Comments are moderated to ensure a respectful and positive environment.