Fortunately, at that spot are lots of ways to personalize your Blogger blog, as well as 1 of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it inwards your spider web log easy.
Adding the Popular Posts Widget for Blogger
Just click on your spider web log title, access the "Layout" menu, click "Add a Gadget" as well as select "Popular Posts". H5N1 window volition appear squall for you lot to configure the widget past times choosing which posts you'll characteristic (e.g. those that were virtually viewed inwards the past times vii days or xxx days or from the outset of your blog). You'll every bit good live asked to select how many posts you'll characteristic inwards your Popular Posts department as well as select if you'll present the ship service championship entirely or along amongst the epitome thumbnail and/or the snippet. (Remember that each widget agency has dissimilar requirements, as well as therefore follow the styles as well as instructions carefully to respect out if you lot demand the snippet as well as epitome thumbnail or not).
Once you've followed these instructions, you'll larn to meet the basic version of the Popular Posts Widget for Blogger inwards your blog. You tin stick amongst this if it matches your spider web log pattern but, if it sticks out similar a sore pollex or doesn't adjust your taste, there's no demand to fret since you lot tin personalize it. You tin select from the next styles - meet the demo blog:
Popular Posts Style 1 - Box within a box
This is an interesting widget agency since it uses your snippet as well as epitome thumbnail inwards a unique way. Your snippet is written inwards opaque text as well as 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 smashing choice if you lot desire to brighten upwards your spider web log as well as 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 enterprise rgba(0, 0, 0, 0.1);border-bottom:6px enterprise 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 two - Large thumbnails amongst small-scale ship 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 agency is eye-catching because it focuses on pictures, which don't entirely summarize the posts' content but every bit good add together visual drama to the entire page. This is peculiarly useful for blogs that focus on clothes, makeup, fine art as well as other topics that highly depend on visual presentation to meliorate 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 enterprise #fff;border-left:29px enterprise transparent;border-right:29px enterprise 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 enterprise #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 iii - Colorful boxes
If your spider web log needs a pop of color, this is the correct choice for you. This widget agency presents your Popular Posts inwards several boxes that characteristic a thumbnail epitome as well as accept bright, eye-catching shades similar lite green, ocher xanthous as well as vivid orange. Each box has a dissimilar color, as well as you lot tin add together upwards 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 enterprise #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 first-class choice if you lot desire to showcase your pictures or if your spider web log depends on visual information. However, the championship of your posts won't live included inwards the layout, as well as therefore readers volition accept 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 you lot beloved numbered lists, or if you'd similar to brand your spider web log 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 as well as volition characteristic clean, minimalistic boxes that include your snippet as well as epitome thumbnail.
CSS code:
<style type='text/css'>These are merely to a greater extent than or less of the widget styles you lot tin select from. When you've picked a agency you lot want, brand certain to re-create its CSS code. Once you lot exercise so, move to your blog, click "Theme" on the left side as well as 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 adjacent codes demand to live pasted inwards a higher house the "</head>" or "</body>" tags, as well as therefore banking company check the pedagogy to know just where you lot demand to set the code.
Adding the CSS
When the template editor has opened, click anywhere within the code expanse as well as striking CTRL + F or Command F to search the next tag:</head>Just ABOVE the </head> tag, copy-paste the CSS code of 1 of the styles above.
Important: If the Popular Posts widget is located inwards the footer of your blog, take away the .sidebar bird industrial plant life inwards the CSS code inwards gild to larn inwards work.
Please Federal Reserve annotation that virtually of the styles are using the 'Oswald' font which you lot demand to add together to your template's code every bit well.
So, search for this tag:
<head>... as well as 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 every bit good require using a script inwards gild to resize the pop posts epitome / thumbnail as well as cut the ship service snippet as well as title. To add together the JavaScript code, search the </body> tag as well as 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 you lot accept already the jQuery library inwards your template, take away 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 you lot accept added all the codes inwards the correct place, press the "Save theme" push clit to relieve the changes.
That's it!
The v Popular Posts widgets for Blogger featured today are all smashing solutions for adding a pop ship service department to your blog. They all accept dissimilar appearance for determining what makes a ship service popular, but the destination trial is the same: visitors are ever 1 click away from your best content. Try to a greater extent than or less of these styles, respect your favorite, as well as meet how it impacts the functioning of your blog.
Comments