Nicer Social icons Widget with hover effect for Blogger

Nicer Social icons Widget with hover effect for Blogger

Blogger social icons with hover effect

Social icons are most important part of any blog now-a-days. We see any where any website and any apps, they promote their social media links with attractive social icons. In this tutorial, we take a look of creating a beautiful and simple social icons widget with hover effect for Blogspot Blogger. I already named this widget: Nicer Social Icons Widget with hover effect for Blogger.


 Also Read: Flat Social Share Button for Blogger


This is an easiest way to promote your social media links with your targeted users. If you make widget in top with these social icons, then a user see these social icons easily. If you can connect your targeted users with your social links, like: Facebook, Twitter, Google plus then you should easily increase your visitors.

Nicer Social icons widget is a simple blogger gadget to show your social media links in sidebar. The icons are Facebook, google plus and Twitter widget. 





Marking Up Nicer Icons


People have different ways of structuring how an icon should exist in the markup. In this tutorial, the icons actually link to somewhere else, so I'll be using the a tag to house the icons. For presentational icon markup (like icons before headings and such), I've seen a lot of people use the i tag. Even though it's not semantic, it is very performant as it's a one-lettered tag. For this tutorial, we're going to use icons that link elsewhere, because links are associated with hover states. The most common set of icons around the web that act as familiar links are social icons. I'll use the following 5 so that we can see different icons in action for each of the demos:
  • Facebook
  • Twitter
  • Google plus

Now lets start this tutorial. Before starting this tutorial take a backup of your template.
Now Go to Blogger Dashboard > Template > Edit HTML and past the below CSS Code before </style>
 .icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 92px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  background-color: #404040;
}

.icon-border {
  position: relative;
}

.icon-border::before,
.icon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: &quot;&quot;;
}

.icon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}

.icon-border::after {
  z-index: 2;
  background: url(&quot;http://i.imgur.com/gOZiqfy.png&quot;);
  background-image: url(&quot;http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg&quot;), none;
}

/* facebook */
.icon-border.facebook::before {
  box-shadow: inset 0 0 0 48px #3b5998;
}

.icon-border.facebook:hover::before {
  box-shadow: inset 0 0 0 4px #3b5998;
}

.icon-border.facebook::after {
  background-position: 0 0;
}

/* twitter */
.icon-border.twitter::before {
  box-shadow: inset 0 0 0 48px #4099ff;
}

.icon-border.twitter:hover::before {
  box-shadow: inset 0 0 0 4px #4099ff;
}

.icon-border.twitter::after {
  background-position: -96px 0;
}

/* google plus */
.icon-border.googleplus::before {
  box-shadow: inset 0 0 0 48px #d34836;
}

.icon-border.googleplus:hover::before {
  box-shadow: inset 0 0 0 4px #d34836;
}

.icon-border.googleplus::after {
  background-position: -192px 0;
} 


Now Save Template.

After that, Go to Layout> Add a gadget > HTML/Javascript past below code and edit all # tag with your social links.
<a href="#" class="icon icon-border facebook">facebook</a>
<a href="#" class="icon icon-border twitter">twitter</a>
<a href="#" class="icon icon-border googleplus">google+</a> 




Reference: http://callmenick.com/post/nicer-icon-hover-effects-with-css3-transitions
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

11 comments:

  1. Awesome tutorial... অনেক ভালো হয়েছে উইডগেটটা...

    ReplyDelete
  2. Thanks. Its Great Widget . http://www.e-priceinbd.com/

    ReplyDelete
  3. এই উইজেট টি ব্লগের হেডারে থাকে না কি ফুটারে?

    ReplyDelete
    Replies
    1. আপনি Right Sidebar থেকে Add a gadget > HTML/Javascript এ HTML কোড গুলো বসাবেন। আপনি চাইলে Footer Widget এ ও বসাতে পারন।

      Delete
  4. I cant Find style In My Blog's HTML

    ReplyDelete
  5. I can change Google Plus for Instagram in the widget? The icon is change?

    ReplyDelete