Add Square Popular Posts Widget with Rotating Effect in Blogger

Popular posts is a widget offered by blog writer which reveals a list of most considered content from your blog site.We have already distributed three hacks about popular posts widget. Popular Post is show’s the top click Post’s by the Visitor’s.Here i share a Stylish popular Publish Gadget for your blog site writer blog.this Icons Helps to Entice the People by Fashionable and Amazing look in your blogger Sidebars. this widget when any user hover on the image thumbnail of popular posts the spinning effect activated and rotates the thumbnail until the customer moves out from it.We will add this Technique with using genuine CSS3 i.e this will not impact the the loading speed of your blog.

Popular Posts is a widget which every good blog writer uses. From small weblogs to all big weblogs you can see Well-known Content gadget. It allows to reduce jump rate of your blog. The most read posts are displayed to let visitors know about other interesting posts or subjects they might like. This will let guests stay on your weblog site more time. This gadget is type of different from other popular widget, because it doesn’t only shows the popular post, but as well rotate when hovered on any of the pictures. There are many gadget designer personalize this gadget in different way. But the main problem is about popular post image. Because If you want to resize the image size then it will become cloud. So the remedy is JavaScript with CSS programming. Now you can able to increase your popular post image in any size. This widget created by Times of Blogging. You can easy to add this widget on your blog or site. Please follow this post and install it on your blog. 

Square Popular Posts Widget with Rotating Effect in Blogger

Step-1 Go To Blogger Dashboard.

Step-2 Click on Layout.

Step-3 Click on Add Gadget.

Step-4 Select Popular Posts Widget.

Step-5 Check Mark Show thumbnail option.

Step-6 After Save Widget.

Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.

Step-8 Find ]]></b:skin> tag.

Step-9 Paste the below given code just above ]]></b:skin>

.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
}
.PopularPosts .item-thumbnail {
margin: 0 8px !important;
}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}

Step-10 Now Save template and You are Done.

Gray Color Popular Posts Widget for Blogger

The Popular Posts Widget is one of Blogger's official widgets and it is very easy to add this to your Blog. Here is a simple tutorial for creating beautiful Popular Posts Widgets for your Blog using CSS. They are disgusting because either they are not working on the principle of most considered material or if you discover one like the affliate brand's it will not get combined into your material very much. Blog writer doesn’t provide options to add different plugins as per the requirement, hence we need to perform with the HTML requirements to personalize our concept. Automated Numbering Popular Posts Widget for Blogger is created by changing the default CSS to something that provides results as proven in the picture. The standard popular publish gadget offered by blog writer, works ideal but it looks little old fashioned and dull. So in today's tutorial, we will learn how could you give a professional touch into the widget by adding some simple CSS coding in your template.

Blogger’s Built-in Popular posts widget is not that much attention-grabbing with regards to developing and showing. Therefore, if you wish to help Popular Posts widget into a work of art then, you have to depend on CSS Style linens. Your weblog site audience may find one article which is beneficial or informative to them after navigating blog posts from your popular posts widget and subscribe to your blog for your upcoming posts. This stylish popular post widget can be the most popular posts within 7days, a month or of all time. In order to advertise your weblog site and enhance its design, it would be useful for you to use this Fashionable Popular Publish Gadget in your blogger. This method actually uses the Blogger Popular Posts widget with a few tweaks. So if you're already using the gadget, no need to give up deliver. And if you're not already using the gadget, now's sufficient time to add it to your blog.

Add Gray Color Popular Posts Widget for Blogger

Step-1 Go To Blogger Dashboard.

Step-2 Click on Layout.

Step-3 Click on Add Gadget.

Step-4 Select Popular Posts Widget.

Step-5 After you have unchecked image thumbnail and snippet box.

Step-6 After Save Template.

Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.

Step-8 Find ]]></b:skin> tag.

Step-9 Paste the below given code just above ]]></b:skin>

/* Popular Post Customization by hackpower.org */
.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Popular Post Customization by hackpower.org */

Step-10 Now Save template and Done.

Add Social Icons with Tooltip Hover Effect in Blogger

Social Media plays a vital role in engaging more readership to your blog, thus indirectly helps you to increase the traffic of your blog. These amazing Social Symbols with Tooltip Float Impact, designed simply by CSS, without any image or javascript in it. This widget is perfect designed and simply to customize and install. The goal was to slowly fade-in and fade-out the opacity modifying, and animate the place of the tooltip a little bit. With that in thoughts, I was able to make a beautiful social media icons display using CSS3. Social bookmarking widgets helps you to boost traffic on your blog. Today I am sharing an amazing social bookmarking widget which comes with wonderful cartoon tooltips,when any customer moves on the public symbols the tooltip comes out also it is applicable a opacity effect to these social icons,this effect increase beauty of this widget. Now a days people spend more time on social websites as compared to other websites so by properly placing social media symbols on your web page you can  obtain new guests and increase achieve of your top quality material.  So now,  we are going to create simple social media icons which upon hover changes its color.

There are four social icons in which you can add your own desired URL. On hovering over these buttons one can see tooltip appearing with the help of transition and convert CSS. These symbols are really eye-catching and have a eye-catching look. These symbols consist of all the Social icons connecting your account together. So these could be used in order to get more followers or subscribers on your channel. You can use these buttons for your blogger blog to share your blog posts straight on individuals. Public discussing helps you very much for your SEO. Customers can straight discuss your content links on social sites and it will gain you more readers to your blog. All social media sites have been spreading day by day and which is the best source to promote and drive traffic to blog/website as we have also later published on stylishfacebook pop-up like box but this one is different from all other icons on However the below tutorial will explain how to add animated social sharing tooltips plugin in blogger.

Add Social Icons with Tooltip Hover Effect in Blogger

Step 1: Go to Blogger Dashboard.

Step 2: Click on Layout.

Step 3: Click on Add Widget.

Step 4: Select HTML/JavaScript.

Step 5: Paste code HTML/JavaScript in box below.

<div class="container">

<ul class="action-bar clearfix">

<li>

<a href="http://twitter.com/TwitterUSERNAME" class="like">

<span class="zocial-twitter"></span>

<span class="tooltip">Follow</span>

</a>

</li>

<li>

<a href="https://plus.google.com/GoogleplusID" class="favourite">

<span class="zocial-googleplus"></span>

<span class="tooltip">Circle us</span>

</a>

</li>

<li>

<a href="https://www.facebook.com/FacebookID" class="comment">

<span class="zocial-facebook"></span>

<span class="tooltip">Like us</span>

</a>

</li>

<li>

<a href="http://yoursite.blogspot.com/feeds/posts/default" class="share">

<span class="zocial-rss"></span>

<span class="tooltip">Subscribe</span>

</a>

</li>

</ul>

</div>

<style>

@charset "utf-8";

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */

[class*="zocial-"]:before {

  font-family: 'zocial', sans-serif;

}

/* ---------- GENERAL ---------- */

a { text-decoration: none; }

ul {

list-style: none;

margin: 0;

padding: 0;

}

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after {

content: "";

display: table; }

.clearfix:after { clear: both; }

.container {

display: block;

height: 64px;

position: relative;

width: 256px;

}

/* ---------- Action Bar ---------- */

.action-bar li {

float: left;

}

.action-bar a {

-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

color: #e7e7e7;

display: block;

font-size: 32px;

height: 64px;

line-height: 64px;

position: relative;

text-align: center;

-webkit-transition: background .3s;

-moz-transition: background .3s;

-ms-transition: background .3s;

-o-transition: background .3s;

transition: background .3s;

width: 64px;

}

.action-bar a:hover .tooltip {

margin-top: 16px;

opacity: 1;

}

.tooltip {

border-radius: 3px;

font-size: 14px;

height: 28px;

left: 50%;

line-height: 28px;

margin: 0 0 0 -50px;

opacity: 0;

position: absolute;

top: 100%;

-webkit-transition: margin-top .3s, opacity .3s;

-moz-transition: margin-top .3s, opacity .3s;

-ms-transition: margin-top .3s, opacity .3s;

-o-transition: margin-top .3s, opacity .3s;

transition: margin-top .3s, opacity .3s;

width: 100px;

}

.tooltip:before {

content: "";

height: 8px;

left: 50%;

margin: -4px 0 0 -4px;

position: absolute;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

width: 8px;

}

.like,

.like .tooltip,

.like .tooltip:before { background: #65B1F8; }

.like:hover { background: #65B1F8; }

.favourite,

.favourite .tooltip,

.favourite .tooltip:before { background: #c93037; }

.favourite:hover { background: #b02b32; }

.comment,

.comment .tooltip,

.comment .tooltip:before { background: #43438e; }

.comment:hover { background: #393978; }

.share,

.share .tooltip,

.share .tooltip:before { background: #FF8000; }

.share:hover { background: #FF8000; }

</style>

Step 6: Now Change the text in Blue with your desired URLs.

Step 7: Now Finally Save widget and Done.

Add CSS Elegant Share buttons for Blogger

If you want to share something with the world, it's a wise decision if people also quickly fall upon the discuss control buttons. I am fairly sure there is a important connection between visibility of share buttons and actual shares of your posts. The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The gadget contains four public discussing control buttons – Facebook or myspace, Tweets, Google+.  There is a close key too to close down the floating share buttons. you can add more if you like or remove the one you do not want and add yours. All you need to have is fair knowledge of HTML and CSS. You can get the program code of any public networking share button from the well known public networking platform's website.

Blogger is now testing out a new Social Sharing icon set made up of E-mail, Blog writer,Twitter,Facebook and Search engines hype control buttons. The set looks simple and stylish with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard. These control buttons are created of genuine CSS and look incredibly stylish. They have awesome float impact and are very light too. You can add these buttons under every post of your blog and increase the user interaction in your blog. Social media share buttons help us to get our well-written content shared on different public networking systems quickly. When a part of material get distributed more and more times on different social media platforms, it helps our content to get more links, free traffic and social signals which increase the value of our content in search engines. 

Add CSS Elegant Share buttons for Blogger

Step-1 Login to Your Blogger Dashboard.

Step-2 Go to Template > Edit HTML.

Step-3 Find  the tag.

 ]]></b:skin>

Step-4 Paste below given code just above ]]></b:skin>.

@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font: 2.5em/2em 'zocial', sans-serif;
  color: white;
  line-height: 2.2;
}
.post-social .facebook {
  background: #3B5998;
}
.post-social .twitter {
  background: #4099FF;
}
.post-social .googleplus {
  background: #db5a3c;
}
.post-social .social {
  float: left;
}
.post-social .zocial-facebook {
  margin: 0 15px;
}
.post-social .zocial-twitter {
  margin: 0 25px;
}
.post-social .zocial-googleplus {
  margin: 0 25px;
}
.post-social li {
  min-width: 180px;
  width: 210px;
  height: 80px;
  cursor: pointer;
  list-style: none;
  text-align: left;
  float: left;
}
.post-social li:hover [class*="zocial-"]:before {
  opacity: 0.5;
  text-align: right;
}
.post-social li:hover iframe {
  opacity: 1;
}
.post-social li iframe {
  margin-top: 30px !important;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
  margin: 30px 20px !important;
}

Step-5 After search for <data:post.body/> code.

Step-6 Paste the below given code just below <data:post.body/>.

* You show more than one <data:post.body/> so make sure that you have selected the right code.

<ul class="post-social">

  <li class="facebook">

      <span class="social zocial-facebook"></span>

    <div class="fb-like" data-send="false" data-layout="button_count" data-width="250" data-show-faces="true"></div>

  </li>

  <li class="twitter">

      <span class="social zocial-twitter"></span>

    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips">Tweet</a>

  </li>

  <li class="googleplus">

        <span class="social zocial-googleplus"></span>

    <g:plusone size="medium"></g:plusone>

  </li>

</ul>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Step-7 After save template and you are done.

CSS Hello Bar Clone widget for Blogger

Hello bar is one of the best notification bar for WordPress and also for any web posting system. I really liked their idea and individually that inspired me to create Mintbar an opensource notification bar. Hello Bar is still just HTML and CSS on your website, you can use CSS to management its exposure. Merge this with WordPress customized publish meta and you can management where on your website your Hello Bar shows up on a per-page basis. By default this code snippet will display your Hello Bar enabling you to set a Customized Area value on those webpages you want to cover up your Hello Bar.

This plugins helps you to get a lot of visitors to one desired page. If you are internet hosting service any competition or free gift, this bar will help you get a lot of traffic on that particular page. The Hello Bar looks like it has some really cool features onto it, but to be honest, I can’t imagine myself taking advantage of the split testing options too much on the particular website I was operating on. As I was looking at the bar I really believed, this factor could be quickly regenerated. We have designed a clone of this plugin but without using any JavaScript it is purely based on HTML and CSS. The plugin has many features such as Beautiful Design, Shadow effect, Compacted dimension to get quicker fill time etc. In situation the bar irritates any of your guest, it can be closed just by clicking on a single button. The awesome “Hello Bars” on tons of websites before and always wanted to play with it. The other day I had a scenario where I required it for a website I was operating on so I searched on over to hellobar and to my dismay I saw I needed to pay for it, a monthly fee per impression.

Demo Image:

CSS Hello Bar Clone widget for Blogger

Step-1 Go to Blogger dashboard. 

Step-2 Go to Layout.

Step-3 Click on Add Widget.

Step-4 Select HTML/JavaScript.

Step-5 Paste the below code in the HTML/JavaScript box.

<style type="text/css">
/* Hello Bar Clone For Blogger by hackpower.org */
#tob-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#tob-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#tob-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#tob-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#tob-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.tob-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.tob-hotsblock{background-color:#CC5200;height:10px;width:8px}
.tob-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="tob-hotsmain" >
<center id="tob-hotsshow" onmouseup="document.getElementById('tob-hots').style.display='block'"><div class="tob-hotsblock"></div><div class="tob-hotsdownarrow"></div></center>
<div id="tob-hots" >
<center id="tob-hotshide" onmouseup="document.getElementById('tob-hots').style.display='none'"><div class="tob-hotsuparrow"></div><div class="tob-hotsblock"></div></center>
<center id="tob-hotsdata" >
Add your Text/Links here in HTML Format
</center>
</div>
</div>

Step-6 Change Add your Text/Links here in HTML Format with your desired text/link and remember that you should add it in HTML format.

Step-7 Now Save widget and you are done.

Happy Blogging with Enjoy .............