How To Modify Blogger Default Featured Post Widget

Yesterday it was fitting that I idly installed a Featured Post widget on the trial blog, fitting to check why the shape is ...
Modify Blogger's Default Featured Post Widget

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).


Modify Blogger's Default Featured Post Widget

<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 != &quot;&quot;'>
<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 != &quot;&quot;'>
<span class='thumbb'>
<img class='image lazyload' expr:src='resizeImage(data:postFirstImage, 630, &quot;400:200&quot;)' 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 != &quot;&quot;'>
<h3>
<a expr:href='data:postUrl'>
<data:postTitle/>
</a>
</h3>
</b:if>
<b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
<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 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.


Modify Blogger's Default 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.

Words can inspire, thoughts can provoke, but only action truly brings you closer to your dreams.

Post a Comment

© Blog Faters. All rights reserved. Developed by Jago Desain