Add 4 custom popular posts widgets to blogger

Popular posts widget is one of the most commonly used widgets on each and every blog. Blogger has its own default popular posts widget for its blogs but this widget is not very attractive. It displays a simple list of popular posts without any customization in it.. For this reason it looks very ugly and effects the whole design of the blog. But one good thing about this widget is that it can be easily customized by using CSS code. In this post we will discuss 4 different styles for customizing default popular posts widget in blogger 

Add popular posts widget to blogger:
1.Go to your blogger dashboard.
2. Select Template option.
3.Select Edit HTML.
4.In the template code find ]]></b:skin>
5.Just above it paste code of one of the following popular posts widget and save the template

Style 1:

Code:

.popular-posts ul{padding-left:0px;} .popular-posts ul li { list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dddddd; -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:1px 1px 2px #dcdcdc; border-radius:5px; background: rgb(44,83,158); /* Old browsers */ background: -moz-linear-gradient(top, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */ } .popular-posts ul li:hover { -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:2px 2px 4px #333333; border:1px solid #333333; color:#fff; } .popular-posts ul li a { text-decoration:none; font:16px Georgia, verdana; color:#ffffff; } .popular-posts ul li a:hover { text-decoration:none; }

Style 2:

Code:

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #ffffff no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dddddd; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; } .popular-posts ul li:hover { border:1px solid #555555; } .popular-posts ul li a { text-decoration:none; font:16px Georgia, verdana; color:#333333; } .popular-posts ul li a:hover { text-decoration:none; color:#555555; }

Style 3:

Code:

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dcdcdc; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { background:#FF8040; } .popular-posts ul li a { text-decoration:none; font:14px Georgia, verdana; color:#222222; } .popular-posts ul li a:hover { text-decoration:none; color:#fff; }

Style 4:

Code:

.popular-posts ul { padding-left:0px; -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:1px 1px 2px #dcdcdc; border: 1px solid #dcdcdc; } .popular-posts ul li { list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border-bottom:1px dashed #dcdcdc; background:#ffffff; } .popular-posts ul li a { text-decoration:none; font:16px georgia,verdana; color:#3d87c4; } .popular-posts ul li a:hover { text-decoration:none; color:#333333; }

Posted By: Doe Man on 16.4.15

0

Read More

Awesome Feedburner Newsletter Subscribe Box Widget

using this box you can easily get more readers to subscribe to your Feedburner newsletter which will automatically deliver every post you publish on your blog right to their email address. Now just check below steps and add this widget to your blog.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for  ]]>b:skin> tag & paste below code above it.

#sidebar-subscribe-box{background:url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}

3.Now visit Blogger > Layout > Add Gadget >HTML/JavaScript.

4.Now add below code into it and Save it.

<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=hackinguniversity
" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/mhisT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="HackingUniversity" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)" required="required"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

5.You can give it a name but I recommend to leave it blank.
6.Now just change the Feedburner username with your’s & Save it.
7.That’s it now refresh your blog and see this awesome subscribe box rolling !

Posted By: Doe Man on 14.4.15

1

Read More