Professional Magazine Blogger Templates Read More ×

Thursday, August 20, 2015

Nicer Social icons Widget with hover effect for Blogger

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

10 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