Connect with us

Blogger Widget – How To Show Recent And Specific Label Posts Horizontally & Vertically

How To Show Recent And Specific Label Posts Horizontally & Vertically

Blogger

Blogger Widget – How To Show Recent And Specific Label Posts Horizontally & Vertically

Do you want to display recent blog posts or specific label posts on your Blogger blog with quality thumbnails? You’re in the right place. We will guide you step-by-step on how to display posts(recent & specific label) vertically & horizontally with quality thumbnails, by adding the all-in-one Most Recent Posts & Specific Label Posts widget.

Though Blogger provides you with the Most Popular Posts widget, but it doesn’t provide important widgets like Specific Label Posts widget, Most Recent Posts widget, Related Post widget, etc.

There are lot of customized widgets which show Specific Label Posts and Most Recent Posts, but with poor quality thumbnails. So to solve this problem there is an all-in-one widget that shows Most Recent Posts & Specific Label Posts with high quality thumbnails.

Following topics will be covered step-by-step:

  • Configuration
  • How To Add A Gadget
  • Display Posts Horizontally
  • Display Posts Vertically

 

Configuration

It is simple to configure this widget. The configuration will be same for both the vertical and horizontal posts widgets. These all are configuration variables. In code, these variables are located below the line <script type=”text/javascript”>. Type ‘true’ if you want to show a property and type ‘false’ if you don’t want to show a property.

  • var bcd140526_show_thumbnail = true; /* To Show Thumbnail of Posts*/
  • var bcd140526_show_label = false; /* To Show A Label Or Not, Like How To, Tech, Sports */
  • var bcd140526_show_comment_numbers = false; /* To Show The Numbers Of Comments */
  • var bcd140526_show_date = true; /* To Show Date */
  • var bcd140526_show_author_name = false; /* To Show Author Name */
  • var bcd140526_show_readmore = false; /* To Show Readmore Link Or Button */
  • var bcd140526_show_snippet = false; /* To Show Snippet. Snippet is the starting lines of post  */
  • var bcd140526_snippet_length = 0; /* Snippet Length. */
  • var bcd140526_post_count = 5; /* Enter Number Of Posts To Show */
  • var bcd140526_thumbnail_size = 300; /* Leave This Size As It Is */
  • var bcd140526_sort_by = ‘latest’; /*  Sort Posts By ‘latest’ Or ‘random’  */
  • var bcd140526_index_label = ‘Sports’; /* Enter A Label Name To Show Posts Of Specific Label Or Leave It Empty To Show Most Recent Or Latest Posts Like var bcd140526_index_label = ‘ ‘;  */
  • var bcd140526_design_style = ‘list’; /* Leave It List */
  • var bcd140526_date_format = ‘mm/dd/yyyy’; /* Date Format */
  • var lang_readmore = ‘Readmore’; /* Readmore Button Text */
  • var HOST = ”; /* Leave it empty */

 

Blogger Templates

 

How To Add A Widget/Gadget

  • Open Layout.
  • Click Add a Gadget.
  • Add HTML/JavaScript Widget.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 1
  • Enter the Title. Leave empty if you don’t want to enter a title.
  • Paste the code into the large box.
  • Click Save.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 2

 

Find The ID Of Your Widget

Once you will add the widget, you need to find the ID of your widget and replace the ID in code because if you don’t change the ID the CSS will not be applied to your widget. Follow the steps to find the ID of your widget.

  • Right-click on the heading of widget.
  • Click Inspect.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 3
  • You can see that ID for widget STARTUPS is HTML18.
  • Now replace the ID in code with the ID that you will find like for instance if in code the ID is #HTML1, replace all the occurrences of  #HTML1 with the actual ID like here it is #HTML18.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 4

 

Like this:

#HTML18 .widget h2 a
{

}

#HTML18 h3
{
color: black !important;
position: relative;
padding: 7px;
font-size: 46px;
text-align:center;
font-weight:900;
}

 

How To Download The ZIP File.

  • Click the ZIP File link in below steps.
  • At your top-right corner click the Download Arrow.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 5
  • Choose Save File.
  • Click OK. It will be download in your computer.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 6

 

Display Posts Horizontally

  • Download the ZIP File. As we have shown above.
  • Extract the ZIP file. There will be a Notepad File.
  • Copy the code from Notepad file and Paste into your Widget as we have shown above.
  • Make sure to Configure the necessary variables as we have shown above in the Configuration step.
  • This is how your horizontal post widget will look like.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 7

 

Display Posts Vertically

  • Download the ZIP File. As we have shown above.
  • Extract the ZIP file. There will be a Notepad File.
  • Copy the code from Notepad file and Paste into your Widget as we have shown above.
  • Make sure to Configure the necessary variables as we have shown above in the Configuration step.

 

Make sure to adjust(increase or decrease if needed) the height of the widget. At top of the code you can find the height property.

#HTML3
{
border-top:none!important;
height: 736px !important;
width: 300px !important;
margin-bottom: 10px;
margin-top: -28px;
}

  • This is how your vertical post widget will look like.
Blogger Widget - How To Show Recent And Specific Label Posts Horizontally & Vertically 8
  • That’s it. You’re done. Now you can show blog posts with quality thumbnails.
  • Get all the Blogger Tutorials here.
  • If this post helps you, don’t forget to share with other people. Share your feedback in the comments section below.

 

RECOMMENDED POSTS

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

4 Comments

4 Comments

  1. rainny00girl

    February 13, 2022 at 9:14 am

    Thank you for your sharing.
    Thumbnail specific label posts is blurry. please help me

    I’m sorry for troubling you.

    • Meer Basit

      February 13, 2022 at 5:12 pm

      You’re most welcome. Sorry, I can’t help you to remove blurry issue. This issue occurred after a Blogger update last year. You can go for some other professional news & magazine Blogger template that provides builtin Specific Label Post widget. You can find here: https://1.envato.market/5rOKD .

  2. baltarom

    March 17, 2022 at 2:04 pm

    hello I was trying the code that you shared with me and I fixed the blurred image but I wanted to know how
    make it appear
    2 or more labels. the function seems to be encrypted, could you please share the unencrypted code? I will try to improve it a little more with new more modern and adaptable styles, so that you can publish it here on your website, this is my e-mail: m.g.baltazar.art@gmail.com

    • Meer Basit

      March 17, 2022 at 7:12 pm

      Sorry! Unencrypted code is not available.

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Blogger

To Top