5 Best Pop Posts Widgets For Blogger
Monday, January 25, 2016
Edit
If you're using Blogger every bit the platform for your personal or work concern blog, you're in all likelihood looking for ways to customize it in addition to locomote far your own. This way, you'll brand your webpages unique in addition to eye-catching in addition to ensure they'll stand upward out from the many other pages on the internet. You'll likewise grab the attending of your target market, encourage them to browse through your weblog in addition to locomote your loyal readers in addition to followers.
Fortunately, in that location are lots of ways to personalize your Blogger blog, in addition to i of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it inwards your weblog easy.
Once you've followed these instructions, you'll learn to encounter the basic version of the Popular Posts Widget for Blogger inwards your blog. You tin stick amongst this if it matches your weblog blueprint but, if it sticks out similar a sore pollex or doesn't adjust your taste, there's no demand to fret since yous tin personalize it. You tin select from the next styles - encounter the demo blog:
CSS code:
CSS code:
CSS code:
CSS code:
CSS code:
These side past times side codes demand to live pasted inwards a higher house the "</head>" or "</body>" tags, then banking concern check the teaching to know precisely where yous demand to pose the code.
Important: If the Popular Posts widget is located inwards the footer of your blog, take the .sidebar cast constitute inwards the CSS code inwards club to locomote far work.
Please banking concern annotation that nigh of the styles are using the 'Oswald' font which yous demand to add together to your template's code every bit well.
So, search for this tag:
After yous bring added all the codes inwards the correct place, press the "Save theme" push clitoris to salve the changes.
That's it!
The 5 Popular Posts widgets for Blogger featured today are all keen solutions for adding a pop post service department to your blog. They all bring unlike appearance for determining what makes a post service popular, but the destination effect is the same: visitors are ever i click away from your best content. Try roughly of these styles, honour your favorite, in addition to encounter how it impacts the surgery of your blog.
Fortunately, in that location are lots of ways to personalize your Blogger blog, in addition to i of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it inwards your weblog easy.
Adding the Popular Posts Widget for Blogger
Just click on your weblog title, access the "Layout" menu, click "Add a Gadget" in addition to select "Popular Posts". H5N1 window volition appear shout for yous to configure the widget past times choosing which posts you'll characteristic (e.g. those that were nigh viewed inwards the past times seven days or xxx days or from the showtime of your blog). You'll likewise live asked to select how many posts you'll characteristic inwards your Popular Posts department in addition to select if you'll demonstrate the post service championship exclusively or along amongst the epitome thumbnail and/or the snippet. (Remember that each widget fashion has unlike requirements, then follow the styles in addition to instructions carefully to honour out if yous demand the snippet in addition to epitome thumbnail or not).Once you've followed these instructions, you'll learn to encounter the basic version of the Popular Posts Widget for Blogger inwards your blog. You tin stick amongst this if it matches your weblog blueprint but, if it sticks out similar a sore pollex or doesn't adjust your taste, there's no demand to fret since yous tin personalize it. You tin select from the next styles - encounter the demo blog:
Popular Posts Style 1 - Box within a box
This is an interesting widget fashion since it uses your snippet in addition to epitome thumbnail inwards a unique way. Your snippet is written inwards opaque text in addition to placed inwards a small-scale transparent box. This, inwards turn, is placed inwards a bigger rectangular box, wherein your epitome thumbnail is used every bit a background. Choosing this Popular Posts Widget for Blogger tin live a keen alternative if yous desire to brighten upward your weblog in addition to grab the attending of readers amongst your colorful photos.CSS code:
<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 corporation rgba(0, 0, 0, 0.1);border-bottom:6px corporation 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 ii - Large thumbnails amongst small-scale post service titles underneath
This uses the same code every bit the basic Blogger Popular Posts Widget amongst a few tweaks. Popularized past times well-known blogs, this fashion is eye-catching because it focuses on pictures, which don't exclusively summarize the posts' content but likewise add together visual drama to the entire page. This is peculiarly useful for blogs that focus on clothes, makeup, fine art in addition to other topics that highly depend on visual presentation to amend limited ideas.<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 corporation #fff;border-left:29px corporation transparent;border-right:29px corporation 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 corporation #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 three - Colorful boxes
If your weblog needs a pop of color, this is the correct alternative for you. This widget fashion presents your Popular Posts inwards several boxes that characteristic a thumbnail epitome in addition to bring bright, eye-catching shades similar calorie-free green, ocher yellowish in addition to vivid orange. Each box has a unlike color, in addition to yous tin add together upward to 4 boxes.CSS code:
<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 corporation #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 similar the large-picture widget style, the grid layout is an fantabulous alternative if yous desire to showcase your pictures or if your weblog depends on visual information. However, the championship of your posts won't live included inwards the layout, then readers volition bring to hover their mouses on the images to read the titles.CSS code:
<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 yous beloved numbered lists, or if you'd similar to brand your weblog to a greater extent than organized, this tin live the perfect option. By using the code for this widget style, your Popular Posts volition live automatically numbered in addition to volition characteristic clean, minimalistic boxes that include your snippet in addition to epitome thumbnail.CSS code:
<style type='text/css'>These are merely roughly of the widget styles yous tin select from. When you've picked a fashion yous want, brand certain to re-create its CSS code. Once yous practise so, locomote to your blog, click "Theme" on the left side in addition to select "Edit HTML" nether the template preview.
.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 side past times side codes demand to live pasted inwards a higher house the "</head>" or "</body>" tags, then banking concern check the teaching to know precisely where yous demand to pose the code.
Adding the CSS
When the template editor has opened, click anywhere within the code surface area in addition to hitting CTRL + F or Command F to search the next tag:</head>Just ABOVE the </head> tag, copy-paste the CSS code of i of the styles above.
Important: If the Popular Posts widget is located inwards the footer of your blog, take the .sidebar cast constitute inwards the CSS code inwards club to locomote far work.
Please banking concern annotation that nigh of the styles are using the 'Oswald' font which yous demand to add together to your template's code every bit well.
So, search for this tag:
<head>... in addition to merely BELOW it, add together this line:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
Adding the JavaScript
These styles likewise require using a script inwards club to resize the pop posts epitome / thumbnail in addition to cut the post service snippet in addition to title. To add together the JavaScript code, search the </body> tag in addition to glue the next script merely inwards a higher house it:<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>Note: if yous bring already the jQuery library inwards your template, take the draw inwards red.
<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>
After yous bring added all the codes inwards the correct place, press the "Save theme" push clitoris to salve the changes.
That's it!
The 5 Popular Posts widgets for Blogger featured today are all keen solutions for adding a pop post service department to your blog. They all bring unlike appearance for determining what makes a post service popular, but the destination effect is the same: visitors are ever i click away from your best content. Try roughly of these styles, honour your favorite, in addition to encounter how it impacts the surgery of your blog.