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

USE any TRIAL SOFTWARE FOREVER WITHOUT SERIAL NUMBER

By
USE any TRIAL SOFTWARE FOREVER WITHOUT SERIAL NUMBER(most wanted trick) Run a trial software forever now with time stopper you can run a trial software forever no need to fetch for serial numbers,activation codes,patch just DOWNLOAD TIME STOPPER now open it install it click browse select the .exe of the software or file which you want to run forever now simply click create desktop icon and now delete all its existing shortcuts now have fun enjoying software for life time
Post a Comment
Read more

C++ Program to Find HCF and LCM among 4 numbers (Easiest Logic)

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 #include <iostream> #include <math.h> using namespace std; int main () { int a,b,c,d,i,j,minimum; cout << "Enter the all four number " ; cin >> a >> b >> c >> d; if (a < b && a < c && a < d) minimum = a; else if (b < c && b < d) minimum = b; else if (c < d) minimum = c; else minimum = d; for (j = minimum;; -- j) { if (a % j == 0 && b % j == 0 && c % j == 0 && d % j == 0 ) { break ; } } for (i = 1 ;;i ++ ) { if (i % a == 0 && i % b == 0 && i % c == 0 && i % d == 0 ) break ; } cout << "Lowest Common factor=>" << i << endl; ...
Post a Comment
Read more

python program to Print Starting Series OF Indian Mobile Number for a State or operator or both

By
import requests import urllib.request import time from bs4 import BeautifulSoup as bs import re url = ' https://en.wikipedia.org/wiki/Mobile_telephone_numbering_in_India' state_to_extract = "UE" #if set to None all state is considered telecom_to_extracted = None #if set to none all operator from particular city is extracted response = requests . get(url) print (response) soup = bs(response . text, "html.parser" ) one_a_tag = soup . findAll( 'tr' )[ 35 :] lst = [] for k in one_a_tag: s = k . findAll( 'td' ) limit = len (s) i = 0 while True : if i == limit: break no = s[i] . text i += 1 if i == limit: break operator = s[i] . text i += 1 if i == limit: break state = s[i] . text i += 1 if i == limit: break res = f "{no} {operator} {state}" if state_to_extract is None : if telecom_to_extracted is None : lst . append(no) elif telecom_to_e...
2 comments
Read more

C Program to Sort Elements in Lexicographical Order (Dictionary Order)

By
#include #include int main () { int i , j ; char str [ 10 ][ 50 ], temp [ 50 ]; printf ( "Enter 10 words:\n" ); for ( i = 0 ; i < 10 ; ++ i ) scanf ( "%s[^\n]" , str [ i ]); for ( i = 0 ; i < 9 ; ++ i ) for ( j = i + 1 ; j < 10 ; ++ j ) { if ( strcmp ( str [ i ], str [ j ])> 0 ) { strcpy ( temp , str [ i ]); strcpy ( str [ i ], str [ j ]); strcpy ( str [ j ], temp ); } } printf ( "\nIn lexicographical order: \n" ); for ( i = 0 ; i < 10 ; ++ i ) { puts ( str [ i ]); } return 0 ;   }  https://www.jdoodle.com/embed/v0/c/gcc-5.3.0/6WK
Post a Comment
Read more

How to Detect Anonymous IP Addresses

By
Proxy Detection Serviceshttp = So in order to stop such online frauds, Proxy Detection has become a critical component. Today most companies, credit card merchants and websites that deal with e-commerce transactions make use of Proxy Detection Services like MaxMind and FraudLabs to detect the usage of proxy or spoofed IP from users participating online. Proxy Detection web services allow instant detection of anonymous IP addresses. Even though the use of proxy address by users is not a direct indication of fraudulent behaviour, it can often indicate the intention of the user to hide his or her real IP. In fact, some of the most used ISPs like AOL and MSN are forms of proxies and are used by both good and bad consumers. How Proxy Detection Works? Proxy detection services often rely on IP addresses to determine whether or not the IP is a proxy. Merchants can obtain the IP address of the users from the HTTP header on the order that comes into their website . This IP addr...
Post a Comment
Read more

Binary Search Tree in C++( dynamic memory based )

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 125 126 127 128 #include<bits/stdc++.h> using namespace std; struct bst { int val; bst * left, * right; }; bst * root = nullptr; void srch ( int num,bst * head) { if (head == nullptr){ cout << " \n Number is not present \a " << endl; return ; } if (head -> val == num) { cout << " \n Number is present \n\a " ; return ; } else { if (num < head -> val) srch(num,head -> left); else srch(num,head -> right); ...
6 comments
Read more

12 Tips to Maintain a Virus Free Computer

By
1. Email is one of the common ways by which your computer can catch a virus . So it is always recommended to stay away from SPAM. Open only those emails that has it’s origin from a trusted source such as those which comes from your contact list. If you are using your own private email host (other than gmail, yahoo, hotmail etc.) " then it is highly recommended that you use a good anti-spam software. And finally NEVER click on any links in the emails that comes from untrusted sources. 2. USB thumb/pen drives is another common way by which viruses spread rapidly." So it is always a good habit to perform a virus scan before copying any data onto your computer. NEVER double-click the pen drive to open it. Instead right-click on it and select the option “open”. This is a safe way to open a pen drive. 3. Be careful about using MS Outlook. Outlook is more susceptible to worms than other e-mail programs, unless you have efficient Anti-Virus programs running. Use Pegasus ...
Post a Comment
Read more