Popular Posts Widgets For Blogger
If you are using Blogger because of the platform for your personal or business weblog, you are most likely searching for ways to customize it and build it your own. This way, you may build your webpages unique and attention-grabbing and guarantee they will stand out from the numerous different pages on the net. you may additionally grab the eye of your target market, encourage them to browse through your weblog and become your loyal readers and followers. Popular Posts Widgets For Blogger
Fortunately, there are countless ways to personalize your Blogger weblog, and one among these is to customize your Popular Posts Widgets For Blogger. Haven’t you put in this yet? don’t be concerned since putt it in your weblog simple.
Also, Read: Instant Approval Blog Commenting Sites List
Adding the Popular Posts Widget for Blogger
Just click on your weblog title, access the “Layout” menu, click “Add a Gadget” and select “Popular Posts“. A window can seem to ask you to assemble the widget by selecting that posts you may feature (e.g. those who were most viewed within the past seven days or thirty days or from the start of your blog). you may even be asked to settle on what percentage posts you may feature in your popular Posts section and choose if you may show the post title solely or at the side of the image thumbnail and/or the snip.
(Remember that every widget vogue has totally different necessities, thus follow the designs and directions fastidiously to search out out if you would like the snip and image thumbnail or not) Popular Posts Widgets For Blogger
Once you’ve got followed these directions, you will get to check the fundamental version of the favored Posts widget for Blogger in your weblog. you’ll follow this if it matches your weblog style, however, if it stands proud sort of a sore thumb or does not fit your style, there isn’t any have to be compelled to fret since you’ll individualize it. you’ll choose between the subsequent designs
Popular Posts Style 1 – Box within a box
This is an interesting widget style since it uses your snip and image thumbnail during a distinctive approach. Your snip is written in opaque text and placed during a little clear box. This, in turn, is placed during a larger rectangular box, whereby your image thumbnail is employed as a background. selecting this popular Posts widget for Blogger is often an excellent possibility if you wish to decorate up your weblog and grab the eye of readers along with your colorful photos. Popular Posts Widgets For Blogger
CSS Coad:
<style type='text/css'>
.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}
.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}
</style>Popular Posts Style 2 – Large thumbnails with small post titles underneath
This uses an equivalent code because of the basic Blogger widespread Posts widget with many tweaks. Popularized by well-known blogs, this vogue is conspicuous as a result of it focuses on photos, that do not solely summarize the posts’ content however additionally add visual drama to the whole page. this can be notably helpful for blogs that concentrate on garments, makeup, art and different topics that extremely rely upon visual presentation to higher categorical ideas.
CSS Coad:
<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:"";height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px "Times New Roman",Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px 'Oswald', sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px "Times New Roman",Times,FreeSerif,serif;}
</style>Popular Posts Style 3 – Colorful boxes
If your weblog wants a pop of color, this can be the correct alternative for you. This widget vogue presents your widespread Posts in many boxes that feature a thumbnail image and have bright, conspicuous shades like light-weight inexperienced, ocher yellow and vivid orange. every box encompasses a totally different color, and you’ll add up to four boxes. Popular Posts Widgets For Blogger
CSS Coad:
<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}
</style>Popular Posts Style 4 – Grid layout
Just like the large-picture widget vogue, the grid layout is a superb possibility if you wish to showcase your photos or if your weblog depends on visual info. However, the title of your posts will not be enclosed within the layout, thus browsers can be got to hover their mouses on the pictures to read the titles.
CSS Coad:
<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px 'Oswald', sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}
</style>Popular Posts Style 5 – Numbered posts
If you like numbered lists, or if you would like to form your weblog a lot of organized, this will be the right possibility. By victimization the code for this widgets vogue, your widespread Posts are going to be mechanically numbered and can feature clean, minimalistic boxes that embody your snip and image thumbnail.
CSS Coad:
<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px 'Oswald', sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:"";height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
</style>These are some of the widget designs you’ll choose between. once you’ve got picked a mode you wish, check that to repeat its CSS code. Once you are doing this, visit your weblog, click “Theme” on the left aspect and choose “Edit HTML” beneath the example preview.
These next codes have to be compelled to be glued on top of the “</head>” or “</body>” tags, thus check the instruction to grasp precisely wherever you would like to place the code.
Adding the CSS
When the example editor has opened, click anyplace within the code space and hit CTRL + F or Command F to go looking the following tag:
</head>Just ABOVE the </head> tag, copy-paste the CSS code of one of the styles above.
Important: If the favored Posts widget is found within the footer of your weblog, remove the .sidebar category found within the CSS code so as to form it works.
Please note that almost all of the designs are victimization the ‘Oswald’ font that you would like to feature to your template’s code further. Popular Posts Widgets For Blogger
So, search for this tag
<head>… and just below it, add this line:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>Adding the JavaScript
These designs additionally need using a script so as to size the popular posts image/thumbnail and trim the post snip and title. to feature the JavaScript code, search the </body> tag and paste the subsequent script simply on above it:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>Note: if you have got already the jQuery library in your example, take away the road in red.
After you have got extra all the codes within the right place, press the “Save theme” button to avoid wasting the changes.
That’s it!
The 5 popular Posts widgets for Blogger featured these days ar all nice solutions for adding a preferred post section to your weblog. all of them have a totally different look for determinative what makes a post widespread, however, the top result’s the same: guests are perpetually one click faraway from your best content. strive a number of these designs, realize your favorite, and see however it impacts the performance of your weblog. Popular Posts Widgets For Blogger