How To Customize Blogger Featured Post Widget Like Professional Blog

Google Blogger has officially released the “Featured Post” widget to promote a blog post within your blog. By using this brand new gadget, you can easily highlight your most valuable post anywhere within your blogger blog.

But, the default look of this gadget will look odd except on the top of your sidebars. So, you really need to customize it in order to implementing a featured post professionally within your blogger blog by using the Blogger Featured Post widget. You can give Blogger’ default Featured Post widget a professional look using a few simple CSS code by following a few simple steps shown below-

Making Blogger Featured Post Widget Professional;

There are a lot of things you need to customize to make your blogger featured post widget professional such as- border, background color and image width. This widget can be customized directly through Blogger Template “edit HTML” section. Now, follow the process below to complete this customizing operation successfully-

Step.1  Login into your blogger account and add a feature post anywhere within your blog using the Blogger Featured Post gadget through layout section.

Recommendation: I recommend using the featured post widget on the top of your post showcase on your home page and index pages. It’ll make your blogger blog look more professional.

Step.2 Now go to the Template > Edit HTML and find the widget ID- “FeaturePost1” using the “Jump to widget tab”. Then you can see the Blogger’s default Featured Post Widget code after expanding the widget XML code (black marker line). Exactly like this-

<b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost'>
              <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:include name='quickedit'/>
</b:includable>
              <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <p>
      <data:postSummary/>
    </p>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
  </div>

  <style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
</b:includable>
            </b:widget>

Step.3 Next, you need to customize the background color and border of your default featured post widget to highlight it properly on your blog’s home page. Here presenting the full XML/CSS code of the customized Featured Post Widget which can give your blog a more professional look. Just copy the code and replace the default code with it.

<b:widget id='FeaturedPost1' locked='false' title='featured post' type='FeaturedPost'>
              <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
<div style='text-align: center;'>
    <h2 class='title'><data:title/></h2>
    </div>
  </b:if>
  <b:include name='content'/>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
              <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/> </a></h3>
    </b:if>
    <p>
      <data:postSummary/>
    </p>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
  </div>

  <style type='text/css'>
    .image {
      width: 100%;
background:none;
    }
.post-summary {
border: 1px solid #bcbcbc;
background:#e8e8e8;
padding: 5px;
    }
  </style>
</b:includable>
            </b:widget>

Warning: Make sure that you’re replacing only the “FeaturedPost1” code during the customization process.

Step.4 After that you need to edit the red marked sections of the customized code with your own choice. Red marked sections are indicating widget title-position, image width, border color, background color and space between border and your featured post respectively. And, finally save your template to complete this customization process.

Code Summary:

a. The third line of the code (<b:if cond=’data:blog.pageType == &quot;index&quot;’>) is responsible for displaying the widget on the index pages only (Home page and labels pages).

b. Sixth line of the code (<div style=’text-align: center;’>) is responsible for positioning of your widget title (in center).

Happy blogging. Have a nice day!

Related Post: Easiest Way to Create Professional 404 Error Page for Blogger; Without CSS Coding!

© copyright 2018 – All rights reserved

Internet Business