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

13 websites to register your free domain

By
Register your Free Domain Now!! 1)  .tk Dot TK is a FREE domain registry for websites on the Internet. It has exactly the same power as other domain extensions, but it’s free! Because it’s free, millions of others have been using .TK domains since 2001 – which makes .TK powerful and very recognizable.  Your website will be like www.yourdomainname.tk . It is free for 1 year. It’s a ccTLD domain whixh having the abbreviation  Tokelau. To create a .tk domain, Visit   www.dot.tk 2) co.cc Co.cc is completely free domain which is mostly used by blogspot bloggers because of it’s easy to use DNS system. Creating a co.cc for blogger is simple ( for instructions- “click here”). Your website will be like www.yourdomainname.co.cc . To create a .co.cc domain, visit www.co.cc 3)   co.nr co.nr is too like co.cc. Your website will be like  www.yourdomainname.co.nr . You can add it for blogger also.. To create a .co.cc domain, vi...
Post a Comment
Read more

How to Put Google Adsense Below Post Title in Blogger?

By
Adsense is used by majority of expert bloggers for their website monetization because it is a cookie based contextual advertising system that shows targeted ads relevant to the content and reader. As bloggers are paid on per click basis, they try various ad placements on the blog to  increase the revenue  and get maximum clicks on the ad units. Well, on some blogs, you might have seen Adsense ad units placed below the post title. Do you know why? It is because the area just below the post title gets the most exposure and is the best place to put AdSense ad units to increase  Click Through Rate (CTR). Even though ads below post title work like a charm but this doesn’t mean that it will work for you as well. If you want to find out the best AdSense ads placement for your blog, try experimenting by placing ads at various locations such as header, sidebar, footer, etc. You can try other  blog monetization methods  as well to effectively monetize y...
Post a Comment
Read more

Google Sheet/Google form Script to send automated Email to users

By
Well many of us want to send especially bloggers sometimes want to send automated replies to user 's ..but as usual, not everyone is a code geek or lovers ... so this is a small guide to How to use Google form with Google sheet to make an automated reply link....so follow the steps accordingly. STEP 1: GOTO google Forms ... and create a form ... in my case I just take users email id and how do they get to my site. 1. GOTO   https://docs.google.com/forms?usp=mkt_forms 2. login with your account. now choose blank form. 3. in Form title write your forms name, for example, let say my form. 4. in Form description write the description let say  A simple form ... 5. now go to setting and in general tab, check collect email address. and  click on save 6. (optional) you can also ask some basic question 7. now goto responses tab now click on create new spreadsheet button. (that green icon ..) in select response, destination cho...
1 comment
Read more

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

How to open facebook through Uninor when it is blocked

By
Tweet Just Follow this steps . 1. Goto www.uninor.in 2. choose your circle 3.Goto  http://www.uninor.in/customer-care/Pages/customer-complaint-log.aspx 4. Now in new complaint just type your moblie number 5.now you will receive passwrod just type in and hit submit 7. NOW select as following as type as it in every box Complaint Type   -- Select --   DND Related   GPRS   Network Related   Tariff & VAS Related   Activation/ Deactivation   Barring/ Unbarring   Balance Related    Complaint Area   -- Select --   Activation / Deactivation   PC/Modem Connectivity   Usage / Charges related   GPRS issues   Non-Uninor sites   Complaint sub Area   -- Select --   Unable to browse   Unable to download   Please ensure all questions below are answe...
Post a Comment
Read more

Windows 10 English x64.iso 4.03 GB download direct (google drive) creator update 1703 ..latest windows 10

By
updated ON 1/01/2018 Windows 10 English x64.iso 4.03 GB download direct (google drive) creator update 1703 ..latest windows 10 x64  .. NEW LINK latest version fall creator 1709 update : click here Updated : 5 july 3 PM (IST) Link to the file  click here link: https://www.multcloud.com/share/7977c732-8fa3-4cb7-ae58-a6d99d66bb5b   Just goto to the following link and enter your email address and get the password delivered to you.. Password to the link is :  HERE (FOR PASSWORD OF ABOVE LINK)  OR USE THE FORM BELOW.... Loading... size : 4.03 GB  Language : ENGLISH INTERNATIONAL SYSTEM :WINDOWS 10 x64 BASED.. TYPE : DIRECT DOWNLOAD LINK ......ISO FILE> TORRENT  windows 10 creator update 1703/ 1709 iso FOR OTHER mirror 2 link goto here and enter your email address you will get a email with link to the file....
2 comments
Read more

python program to generate random strings,numbers and export them to a file

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 #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sun Mar 11 16:03:44 2018 @author: beast """ from random import * file_limit = 50000 #a file with (size) number of characters with open ( "random.txt" , "w" ) as file : for i in range (file_limit): start = choice([ 48 , 65 , 97 ]) #make choice among three group i.e whether new character should be a digit ,uppercase or lowercase character end = 0 #initialize end with 0 if start == 48 :end = 58 # deicde end point elif start == 65 :end = 91 else :end = 123 breakrnd = randint( 0 , 2 ) breakrnd2 = randint( 0 , 2 ) breakrnd3 = randint( 0 , 2 ) breakrnd4 = randint( 0 , 2 ) rand = randrange(start,end) #now select any character from given range file . write( ...
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

Solution of shortcut virus on pen drive thumb drive ,memory card ,hard disk

By
If you did not format your flash drive, then check whether the files are not in  hidden mode. Follow the following steps.  Step 1:  Click on the below link and download the file "AutorunExterminator"  http://en.kioskea.net/download/download-11613-autorun-exterminator   Extract it --> Double-click on "AutorunExterminator" --> Plug your flash drive now.  This will remove the autorun.inf files from your flash drive and also from drives.  Step 2:  Click on "Start" -->Run --> type cmd and click on OK.  Here I assume your flash drive letter as G:  Enter this command.  attrib -h -r -s /s /d g:\*.*  You can copy the above command --> Right-click in the Command Prompt and  paste it.  Note : Don't forget to replace the letter g with your flash drive letter.  Now press "Enter".  Now check for your files in Flash Drive.  Step 3:  After that, download the Malwarebytes' Anti-Malware from the belo...
Post a Comment
Read more

C++ Program to implement File Handling With Class Objects

By
Q32. Program to implement File Handling With Class Objects: Define a class to represent a bank account. Include the following members:   i) Depositor Name  ii) Account Number iii) Balance Amount Member Function   i) To Assign Initial values(opening balance Rs. 1000 by default)  ii) To deposit an amount iii) To withdraw an amount(if possible) iv) To display the current balance Write a file based program to store the records of at least ten accounts in “ACCOUNT_DETAIL” data file and perform the required manipulations- DEPOSIT, WITHDRAW & BAL_ENQUIRY using the file on a given account. The changes after each deposit and withdrawal should be updated in the given file. 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 7...
Post a Comment
Read more