Skip to main content

5 Best Popular Posts Widgets For Blogger

By

Adding the Popular Posts Widget for Blogger

Just click on your blog title, access the "Layout" menu, click "Add a Gadget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the styles and instructions carefully to find out if you need the snippet and image thumbnail or not).

Configuring Popular Posts Widget for Blogger

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.
CSS code:

Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.

CSS code:

Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

popular posts widget for blogger

CSS code:

Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

popular posts widget for blogger

CSS code: 

Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

popular posts widget for blogger

CSS code:
These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Theme" on the left side and select "Edit HTML" under the template preview.

These next codes need to be pasted above the "
" or "" tags, so check the instruction to know exactly where you need to put the code.


Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:
Just ABOVE the  tag, copy-paste the CSS code of one of the styles above.


Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work.

Please note that most of the styles are using the 'Oswald' font which you need to add to your template's code as well.

So, search for this tag:
... and just BELOW it, add this line:

Adding the JavaScript

These styles also require using a script in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript code, search the  tag and paste the following script just above it:
Note: if you have already the jQuery library in your template, remove the line in red.

After you have added all the codes in the right place, press the "Save theme" button to save the changes.


Labels:

Comments

Post a Comment

share your thoughts ....

Popular posts from this blog

Download pocket tank delux with 295 weapons free total 295 weapons version 1.6

By
Download Pocket Tanks Deluxe Full Version Free With 295 Weapons Pack | Size: 30MB UPDATED 2019 /19/april Description: Pocket Tanks is a 1-2 player computer game for Windows and Mac OS X, created by Blitwise Productions, developer of Super DX-Ball and Neon Wars. Adapted from Michael Welch's earlier Amiga game Scorched Tanks, this newer version features modified physics, dozens of weapons ranging from simple explosive shells to homing missiles, and the ability to move the tank. It supports several expansion packs. At the moment, players can have up to 295 different weapons total. Pocket Tanks is often abbreviated as PTanks. Have Fun! NOTE: FILE NAME IS SCRAMBLED FOR AVOIDING HARD DETECTION & FILE TAKEN DOWN . How to Play: Best with 2 players on the same computer at school or at work. UPDATED LINK https://mirr.re/d/u1Y https://nl26.seedr.cc/ff_get/447027537/ptd16.295.exe?st=lUp-PbRp4YOwToHIOGwStQ&e=1555747979 http://www.uploadmagnet.com/7gfzhbyfe...
9 comments
Read more

20 Windows Keyboard Shortcuts You Might Not Know

By
Global Windows Shortcuts Win+1, 2, 3, 4, etc. will launch each program in your taskbar. It is helpful then to keep your most used programs at the beginning of your task bar so you can open them one right after another. This also works in Windows Vista for the quick launch icons. Win+Alt+1, 2, 3, etc. will open the jump list for each program in the taskbar. You can then use your arrows to select which jump list option you want to open. Win+T will cycle through taskbar programs. This is similar to just hovering over the item with your mouse but you can launch the program with Space or Enter. Win+Home minimizes all programs except current the window. This is similar to the Aero shake and can be disabled with the same registry key. Win+B selects the system tray which isn’t always useful but can come in very handy if your mouse stops working. Win+Up/Down maximizes and restores down the current window so long as that window has the option to be maximized. It is exactly t...
Post a Comment
Read more

sms spoofing sites

By
What is SMS Spoofing? SMS Spoofing allows you to change the name or number text messages appear to come from. The Story Behind SMSspoofing.com SMSspoofing.com initially was a service that launched in August 2005 allowing users to spoof SMS text messages. However, the service only lasted a few days due to legal threats from around the world. Pressure was put on us by our bulk text messaging provider because mobile carriers around the world were complaining that they were responsible for thousands of spoofed SMS messages. The plug was pulled and we were forced to stop offering our SMS spoofing service. In a matter of days over 250,000 people had visited this site and over 25,000 users from around the world, mostly in Europe (specifically the Czech Republic, where we were prominently featured by the media), had signed up for our service. This website has pretty much been abandoned until we decided to turn this site into an information site in June 2008! Now we're back a...
Post a Comment
Read more

HOw to hack face book real working By hackingloop.com{shared by me}

By
Requirement to hack someone's Facebook account: 1. Victim (whose  Facebook account password  you wanna hack) should be on Facebook. 2. Create four to five fake  Facebook accounts (three are sufficient but one more for bonus). I will advice you that create accounts with girl names and put an awesome girls photograph. Fill the basic profile.. Why i am saying create account with Girl names is just because Hungry boys accepts girls  friend  request without any delay. And if you know the person personally then create account with names of his near ones and say that you have created new profile so add you as a friend. Note all the three to four fake accounts should not be  friends  or any relationship with each other. 3. Most important requirement you need to add all above three account to the friends list of victim whose  Facebook account  you want to hack. Above method will be helpful for that :P. 3. ...
Post a Comment
Read more

JAVA program to Calculate Factorial using Function Interface (involve lambdas )

By
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import java.util.Scanner ; import java.util.function.Function ; public class fact { public static void main ( String [] args ) { Function < Integer , String > fact =( n )-> { String res = "Factorial of " + n + " is=" ; double a = 1 ; for ( int i = 1 ; i <= n ; i ++) a *= i ; return res + a ; }; Scanner in = new Scanner ( System . in ); System . out . print ( "Enter the number :" ); int num = in . nextInt (); System . out . println ( fact . apply ( num )); } }
Post a Comment
Read more

Binary Search Tree in Java implementation (reference based, dynamic memory)

By
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 import java.util.Scanner ; class BST { static BST . Node root = null ; public void insert ( int num ) { if ( root == null ) { root = new BST . Node ( num ); } else { // root node is not empty BST . Node temp = root ; while ( temp != null ) { if ( num <= temp . getVal ()) { if ( temp . getLeft () != null ) temp = temp . getLeft (); ...
4 comments
Read more

Google's Tips and tricks and secreats

By
  Google SSL SSL stands for Secure Socket Layer This is the new and in beta feature from Google. Google SSL is secure connection between your computer and Google server. Any third party can't your search queries and information. The main advantage of this service is, your search visits doesn't leave any referrer links to the visited URL 2  Google search to check Flight status     Syntax:    3  Search Mp3 of a particular singer/artist/album/song You can easily find an MP3 song on the Internet easily by narrowing the search by using the syntax: ?intitle:index.of? mp3 Try searching for Eminem space bound: ?intitle:index.of? mp3 Eminem    4  All the Google Logos in one page by Google  Try it..  5  Google dedication to Mothers all over the world   6.  Google Timeline Know the Google history with their milestones in an Interactive Timeline manner on Google Timeline.    Chec...
2 comments
Read more

Python program to extract all possible Substring from a given String

By
1 2 3 4 5 6 7 8 9 10 s = input ("Enter the String->") subs = [] for i in range ( 1 , len (s) + 1 ): for k in range ( 1 ,i + 1 ): j = 0 while (j + k) <= len (s): if s[j:k + j] not in subs: subs . append(s[j:k + j]) j += 1 print (subs) Input: vastgk Output: ['v', 'a', 's', 't', 'g', 'k', 'va', 'as', 'st', 'tg', 'gk', 'vas', 'ast', 'stg', 'tgk', 'vast', 'astg', 'stgk', 'vastg', 'astgk', 'vastgk']
Post a Comment
Read more