Opacity Effect

Adding Opacity Effect to any image or social icon is good and easy as compare to other things. It just become bright when you hover the mouse on them. Hover the mouse on the below Twitter Icon to See Live Example of Opacity Effect on Social Icon.

It looks nice, You can also add a delay in this effect like the example below, Hover the mouse on below example to see the opacity effect with a delay of 1 second.

Both looks nice, It's your decision that which you want to use. Let's start with the simple one.
The image that I am using is given below.

It's a dark red twitter icon.

Step 1: Get any image or any social icon.

Step 2: Upload your image to any site and get it's image url.

Step 3: Now place your image link in the code below.

.twitteropacity {
background:url('IMAGE LINK');
width:86px;
height:71px;
display:inline-block;
margin:3px;
opacity:0.5;
cursor:pointer;
}
.twitteropacity:hover {
opacity:1;
}

Step 4: After placing your image link in the above code, Now you have to put the Width & Height of your image. My Image's width is 86px and height is 71px, That's why I have used 86 as width and 71 as height. You have to replace it with your image's width and height.

If you want to add it in Blogger.
Go to Template, Click on Edit Html, And paste the code just above the ]]></b:skin>.
To Add In Wordpress, Add the code in your theme stylesheet.

HTML Code

<a class="twitteropacity" href="LINK HERE"></a>

Step 5: Replace LINK HERE with the link of your social media account.

You can add that Html Code in your blog posts, or in your HTML Template or HTML Gadget.

Why this CSS Code is giving a nice opacity effect?
Carefully see the CSS code, You will see opacity:0.5; and on the hover part, You will see opacity:1.
It tells that when the mouse is not over the image the opacity of the image will be 0.5, Default opacity is always 1, And when the mouse will come over the image, It will go to it's default opacity that is 1.


Opacity Effect With Delay
To add a delay in your opacity effect, Add the following code in your CSS Code.

-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;

And Your CSS Code with become like this

.twitteropacity {
background:url('IMAGE LINK');
width:86px;
height:71px;
display:inline-block;
margin:3px;
opacity:0.5;
-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
cursor:pointer;
}
.twitteropacity:hover {
opacity:1;
}

The Html Code will remain same.

I hope you guys understand that how you can simply add opacity effects to your Images/Social Icons and make them look beautiful.

Add Slide Effect To Any Social Icon With CSS

If you have no idea about what I am talking about. See the live example below. Hover the mouse on twitter icon and see what happens.

It looks nice, Isn't It?.
Today i will tell you how to add this effect to any social icon. There Is one more way to Display A image on hover through HTML. But it requires two images and it is slow as compared  to this method.
The Image That i am using for this tutorial is

You can see that one of the image is colored and one is not colored. As shown in the example above, When you will hover mouse on the Grey image, it will slide to show the colored image.

If you do not want slide like the example below:

If you do not want slide, and you only want to display like the above example, I will tell you that way too. Let's Start.

Step 1: First Get any image (Social Icon), and place the colored one at the upper side, and the grey one at down side. You can also place the grey one up and colored one down. But i'm using Grey one down in this tutorial that why i am saying, so that you can better understand it.
Note: You Should keep both (Colored and Grey One) Width & Height same. You can create it in Photoshop.

Step 2: After Creating the image in Photoshop, Make sure You have equal width and height for both images. Then upload it to any site and get the IMAGE URL.

Step 3: Now you have to place your Image Link in the code Below.

.twittersocialicon {
background:url('PLACE IMAGE LINK HERE') bottom;
width:86px;
height:69px;
display:inline-block;
margin:3px;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
cursor:pointer;
}
.twittersocialicon:hover {
background-position:0 0;
}

My each image Width=86px & Height=69px. As you can see in code, That's why i have used WIDTH=86px and Height=69px. If your images width is 100 for example, You can replace the width with 100 and same for height.

This Code is for the images that will slide. If you want to add it in Blogger.
Go to Template, Click on Edit Html, And paste the code just above the ]]></b:skin>.
To Add In Wordpress, Add the code in your theme stylesheet.

HTML CODE

<a class="twittersocialicon" href="LINK OF YOUR TWITTER"></a>

Step 4: You can add that Html Code in your blog posts, or in your HTML Template or HTML Gadget.


Why Image is sliding?
The image is sliding, because we have added Transition effects in the code, If you don't know about Transition effect. Search on Google and you will come to know about the magic of Transition.


Simple Hover Image
Simple Hover Image, that i showed you in the second example above, It will not Rollover. It will simply Change it colors immediately.
You can get Simple Hover just by removing these transition lines below from the CSS.

-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;

And the Code will look like this:

.twittersocialicon {
background:url('http://1.bp.blogspot.com/-bYV7TuD0kko/UpBSKMJb8qI/AAAAAAAAA_0/GpLHwrbYbGQ/s1600/Twitter-MYBN-TUT.png') bottom;
width:86px;
height:69px;
display:inline-block;
margin:3px;
cursor:pointer;
}
.twittersocialicon:hover {
background-position:0 0;
}

It will not slide, It will simply change it's color.


I hope you learned that how you can add hover effect to any Social Icon.
In this tutorial i use the single image, which only have Twitter Icons, You can use multiple images in a single image, like next to the Colored Twitter Icon there will be a colored Facebook icon. But To do this you have to make all the images width and size equal and margin between them too.
Then you can just use background-position to Display Them.
I will soon write a topic on CSS Offsets ( background-positioning ).

Social Media Icons
Social Media Icons are the icons, that you usually see on websites-blog etc. If you have your own website/blog, and you also want Social Media Icons then this post is best for you. The following social media icons are beautiful,stylish and attractive. If a social media icon is attractive, then there are more than 90% chance that the visitor will click on them. Social Media Icons are linked with your social media profiles, When someone will click. He/She will be taken to your social media profile.

Why You Need Social Media Icons?
Social Media Icons are very important, because almost every person uses social media like Facebook, Twitter and other. They are not every time present on your website/blog, and if you add some new stuff to your website/blog, How would your visitor know that you added some new stuff. For this social media icons are used. When you will add new stuff, You will surely promote them with your Social Media Profiles, and those who have liked your facebook page or have followed you on twitter, They will come to know that you have added this stuff to your website, and they will come to check it.

The following list of social icons is not created by me, I just collect it from the internet and share them on one place. So you guys can easily use them. To Download these social media icons, Simply click on the image or the title of every icon list.


Long Shadow Social Media Icons

Stained and Faded Social Media Icons

Stained and Faded Social Media Icons Vol.2

Stained and Faded Social Media Icons Vol.3

Square Mono Social Media Icons

Cute Social Media Icons

Polygon Social Media Icons

Social and Media Icons Pack

Social Media Sleek Icons pack

Glowing Social Media Icons

Bubblicons

Free Hand Switch Social Bookmarking Icon

Round Social Icons

Store Social Media Icons

Cloud Social Media Icons

Egg Shaped Social Media Icons

To Download, Simply click on image or the title of each icon, and in a new tab you will be taken to the Icon's Owner website, from where you can download it.
Tell us through comments, that which social media icons you like the most from the above list. :)

Social Media Icons
Social Media Icons on your blog/website are a great way to get traffic. When any visitor will come, He/she will click on media icons and he will sent to your Facebook-Twitter etc, and they can like or follow you.

Spinning Social Media Icons
Spinning Social Media Icons are beautiful. I also have added Hover Effect + Opacity to them. So when you will hover mouse on them, They will spin in a very beautiful style and will become bright. Click on Live Preview button to see live demo of Spinning Social Media Icons.

Live Preview

I will provide CSS/HTML code for these icons, and will also tell how to add them in Blogger.

CSS Code

.curvedsocialicons li {
display:inline-block;
cursor:pointer;
width:48px;
height:48px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77iP-F95HMv_BovZ6vx8AugUYQ3yHmCPUphocd_t3MZx0ZtKyxgCYRhz_6U_f72MQ8nCXCHRlSNci78wqf2iqR9ixwsQMhiGhR25kCNnFxZhPp8aGrTf3ARMgBXWv-IjSmHNH8RIlJBU/s1600/All+Social+Icons+PNG.png');
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
margin-right:1px;
margin-bottom:2px;
opacity:0.5;
}
.curvedsocialicons li:hover {
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
opacity:1;
}
.curvedsocialicons li.facebook {
background-position:0 0;
}
.curvedsocialicons li.facebook:hover {
background-position:0 0;
}
.curvedsocialicons li.twitter {
background-position: -48px 0;
}
.curvedsocialicons li.twitter:hover {
background-position: -48px 0;
} .curvedsocialicons li.rss {
background-position: -96px 0;
}
.curvedsocialicons li.rss:hover {
background-position: -96px 0px;
}
.curvedsocialicons li.google {
background-position:-144px 0;
}
.curvedsocialicons li.google:hover {
background-position:-144px 0;
}
.curvedsocialicons li.linkedin {
background-position: -192px 0;
}
.curvedsocialicons li.linkedin:hover {
background-position: -192px 0;
}
.curvedsocialicons li.pinterest {
background-position: -240px 0;
}
.curvedsocialicons li.pinterest:hover {
background-position: -240px 0;
}
.curvedsocialicons li.stumbleupon {
background-position: -288px 0;
}
.curvedsocialicons li.stumbleupon:hover {
background-position: -288px 0;
}
.curvedsocialicons li.reditt {
background-position: -336px 0;
}
.curvedsocialicons li.reditt:hover {
background-position: -336px 0;
}
.curvedsocialicons li.instagram {
background-position: -384px 0;
}
.curvedsocialicons li.instagram:hover {
background-position: -384px 0;
}
.curvedsocialicons li.tumblr {
background-position: -432px 0;
}
.curvedsocialicons li.tumblr:hover {
background-position: -432px 0;
}

HTML Code

<div class="curvedsocialicons">
<ul>
<li class="facebook"><a href="FACEBOOK LINK" target="_blank"></a></li>
<li class="twitter"><a href="TWITTER LINK" target="_blank"></a></li>
<li class="rss"<a href="RSS LINK" target="_blank"></a></li>
<li class="google"<a href="GOOGLE LINK"target="_blank"></a></li>
<li class="linkedin"><a href="LINKED IN" target="_blank"></a></li>
<li class="pinterest"><a href="PINTEREST" target="_blank"></a></li>
<li class="stumbleupon"><a href="STUMBLE UPON" target="_blank"></a></li>
<li class="reditt"><a href="REDITT" target="_blank"></a></li>
<li class="instagram"><a href="INSTAGRAM" target="_blank"></a></li>
<li class="tumblr"><a href="TUMBLR" target="_blank"></a></li>
</ul>
</div>

Replace LINKS with your social profile links.

Add Spinning Social Media Icons To Blogger

Step 1: Go to Blogger, and log in to your account.
Step 2: Go to Layout.
Step 3: Click on Add a Gadget.
Step 4: Choose HTML/Javascript.
Step 5: Leave the title box empty, and paste the following code in the Content Area.

<style>
.curvedsocialicons li {
display:inline-block;
padding:0;
cursor:pointer;
width:48px;
height:48px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77iP-F95HMv_BovZ6vx8AugUYQ3yHmCPUphocd_t3MZx0ZtKyxgCYRhz_6U_f72MQ8nCXCHRlSNci78wqf2iqR9ixwsQMhiGhR25kCNnFxZhPp8aGrTf3ARMgBXWv-IjSmHNH8RIlJBU/s1600/All+Social+Icons+PNG.png');
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
margin-right:1px;
margin-bottom:2px;
opacity:0.5;
}
.curvedsocialicons li:hover {
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
transition: all .8s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
opacity:1;
}
.curvedsocialicons li.facebook {
background-position:0 0;
}
.curvedsocialicons li.facebook:hover {
background-position:0 0;
}
.curvedsocialicons li.twitter {
background-position: -48px 0;
}
.curvedsocialicons li.twitter:hover {
background-position: -48px 0;
}
.curvedsocialicons li.rss {
background-position: -96px 0;
}
.curvedsocialicons li.rss:hover {
background-position: -96px 0px;
}
.curvedsocialicons li.google {
background-position:-144px 0;
}
.curvedsocialicons li.google:hover {
background-position:-144px 0;
}
.curvedsocialicons li.linkedin {
background-position: -192px 0;
}
.curvedsocialicons li.linkedin:hover {
background-position: -192px 0;
}
.curvedsocialicons li.pinterest {
background-position: -240px 0;
}
.curvedsocialicons li.pinterest:hover {
background-position: -240px 0;
}
.curvedsocialicons li.stumbleupon {
background-position: -288px 0;
}
.curvedsocialicons li.stumbleupon:hover {
background-position: -288px 0;
}
.curvedsocialicons li.reditt {
background-position: -336px 0;
}
.curvedsocialicons li.reditt:hover {
background-position: -336px 0;
}
.curvedsocialicons li.instagram {
background-position: -384px 0;
}
.curvedsocialicons li.instagram:hover {
background-position: -384px 0;
}
.curvedsocialicons li.tumblr {
background-position: -432px 0;
}
.curvedsocialicons li.tumblr:hover {
background-position: -432px 0;
}
</style>
<div class="curvedsocialicons">
<ul>
<li class="facebook"><a href="FACEBOOK LINK" target="_blank"></a></li>
<li class="twitter"><a href="TWITTER LINK" target="_blank"></a></li>
<li class="rss"><a href="RSS LINK" target="_blank"></a></li>
<li class="google"><a href="GOOGLE LINK" target="_blank"></a></li>
<li class="linkedin"><a href="LINKED IN" target="_blank"></a></li>
<li class="pinterest"><a href="PINTEREST" target="_blank"></a></li>
<li class="stumbleupon"><a href="STUMBLE UPON" target="_blank"></a></li>
<li class="reditt"><a href="REDITT" target="_blank"></a></li>
<li class="instagram"><a href="INSTAGRAM" target="_blank"></a></li>
<li class="tumblr"><a href="TUMBLR" target="_blank"></a></li>
</ul>
</div>

Change LINKS in the code with your Social Profile Links.


These are made with CSS Code, I've used background-property to display each icon. If you want to remove any icon, Just Remove it from HTML Code. Example: You want to remove TUMBLR just remove 
<li class="tumblr"><a href="TUMBLR" target="_blank"></a></li>
from the code and it will not display.

You can change 360deg in the code, with any value. Like 120deg or -360deg, and the Icons will spin in a new style.

Rollover Social Media Icons

Rollover Social Media Icons looks great, These are fully made by CSS, I will provide the code for both Rollover Slide Social Media Icons & Rollover Spinning Social Media Icons. Both has it's own attraction. If you want to see the live demo of both of these type of icons, Click on Live Preview button below.

Live Preview

Rollover Slide Social Media Icons
When we will hover the mouse on Slide Social Media Icons, They will become colored in a very beautiful style.
Following Code is for Rollover Slide Social Media Icons.

CSS Code

.slidesocialicons li {
padding:0;
cursor:pointer;
display:inline-block;
width:48px;
height:48px;
background-image:url('http://4.bp.blogspot.com/-f87EvEUWQsk/Un8u2CZzBQI/AAAAAAAAA8Q/cXRy19Y1920/s1600/Slide+Social+Icons+-+MYBN.png');
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right:1px;

} .slidesocialicons li:hover {
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

.slidesocialicons li.facebook {
background-position:0 0; }
.slidesocialicons li.facebook:hover {
background-position:0 -48px;
}
.slidesocialicons li.twitter {
background-position: -48px 0;
}
.slidesocialicons li.twitter:hover {
background-position: -48px -48px;
}
.slidesocialicons li.rss {
background-position: -96px 0;
}
.slidesocialicons li.rss:hover {
background-position: -96px -48px;
}
.slidesocialicons li.google {
background-position:-144px 0;
}
.slidesocialicons li.google:hover {
background-position:-144px -48px;
}
.slidesocialicons li.linkedin {
background-position: -192px 0;
}
.slidesocialicons li.linkedin:hover {
background-position: -192px -48px;
}
.slidesocialicons li.pinterest {
background-position: -240px 0;
}
.slidesocialicons li.pinterest:hover {
background-position: -240px -48px;
}
.slidesocialicons li.stumbleupon {
background-position: -288px 0;
}
.slidesocialicons li.stumbleupon:hover {
background-position: -288px -48px;
}
.slidesocialicons li.reditt {
background-position: -336px 0;
}
.slidesocialicons li.reditt:hover {
background-position: -336px -48px;
}
.slidesocialicons li.instagram {
background-position: -384px 0;
}
.slidesocialicons li.instagram:hover {
background-position: -384px -48px;
}
.slidesocialicons li.tumblr {
background-position: -432px 0;
}
.slidesocialicons li.tumblr:hover {
background-position: -432px -48px;
}

I've used background-property to display all icons, instead of pasting all the links of images again and again in Html Code.

HTML CODE

<div class="slidesocialicons">
<ul>
<li class="facebook"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="twitter"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="rss"<a href="https://www.google.com/" target="_blank"></a></li>
<li class="google"<a href="https://www.google.com/"target="_blank"></a></li>
<li class="linkedin"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="pinterest"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="stumbleupon"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="reditt"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="instagram"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="tumblr"><a href="https://www.google.com/" target="_blank"></a></li>
</ul> </div>

Now if we want to display any icon, We will just use the above code and if we don't want to display any icon. We will simply remove it from html.


Rollover Spinning Social Media Icons
When we will hover the mouse on these, They will change their color with spinning effect. You can see on the demo by clicking on Live Preview button above.

Following Code For Rollover Spinning Social Media Icons

CSS Code

.spinsocialicons li {
padding:0;
cursor:pointer;
display:inline-block;
width:48px;
height:48px;
background-image:url('http://4.bp.blogspot.com/-f87EvEUWQsk/Un8u2CZzBQI/AAAAAAAAA8Q/cXRy19Y1920/s1600/spin+Social+Icons+-+MYBN.png');
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.spinsocialicons li:hover {
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.spinsocialicons li.facebook {
background-position:0 0;
}
.spinsocialicons li.facebook:hover {
background-position:0 -48px;
}
.spinsocialicons li.twitter {
background-position: -48px 0;
}
.spinsocialicons li.twitter:hover {
background-position: -48px -48px;
}
.spinsocialicons li.rss {
background-position: -96px 0;
}
.spinsocialicons li.rss:hover {
background-position: -96px -48px;
}
.spinsocialicons li.google {
background-position:-144px 0;
}
.spinsocialicons li.google:hover {
background-position:-144px -48px;
}
.spinsocialicons li.linkedin {
background-position: -192px 0;
}
.spinsocialicons li.linkedin:hover {
background-position: -192px -48px;
}
.spinsocialicons li.pinterest {
background-position: -240px 0;
}
.spinsocialicons li.pinterest:hover {
background-position: -240px -48px;
}
.spinsocialicons li.stumbleupon {
background-position: -288px 0;
}
.spinsocialicons li.stumbleupon:hover {
background-position: -288px -48px;
}
.spinsocialicons li.reditt {
background-position: -336px 0;
}
.spinsocialicons li.reditt:hover {
background-position: -336px -48px;
}
.spinsocialicons li.instagram {
background-position: -384px 0;
}
.spinsocialicons li.instagram:hover {
background-position: -384px -48px;
}
.spinsocialicons li.tumblr {
background-position: -432px 0;
}
.spinsocialicons li.tumblr:hover {
background-position: -432px -48px;
}

HTML CODE

<div class="spinsocialicons">
<ul>
<li class="facebook"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="twitter"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="rss"<a href="https://www.google.com/" target="_blank"></a></li>
<li class="google"<a href="https://www.google.com/"target="_blank"></a></li>
<li class="linkedin"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="pinterest"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="stumbleupon"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="reditt"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="instagram"><a href="https://www.google.com/" target="_blank"></a></li>
<li class="tumblr"><a href="https://www.google.com/" target="_blank"></a></li>
</ul>
</div>

Removing Any Icon
If you want to remove any icon from all icons. For example, You want to remove pinterest icon or any other. You will simply remove the following code
  <li class="linkedin"><a href="https://www.google.com/" target="_blank"></a></li>
And Pinterest Icon will be removed.



If you also want to make your own icons with this hover effect, Stay Tuned with us. We Will soon make a tutorial on Making these type of icons using background-property.

Text Selection Color

Well if you don't know about Text Selection Color then let me tell you what is it?. Try to copy line, Just click and select it. Amazed? You see Orange Color. That orange color is my text selection color. The Default selection color is Blue, which is very old now. If you change your text selection color to the color of your template then it will look great.

How To Change Text Selection Color

Step 1: Go to Blogger, and log in to your account.

Step 2: Go to Template and click on Edit HTML.

Step 3: Now click anywhere on the code and press CTRL+F, and you will see a small search box.

Step 4: Type ]]></b:skin> in the search box and press Enter.

Step 5: Now paste the following code, just above ]]></b:skin>.

/* MYBN SELECTION COLOR */
::selection {
background: #F8A42E;
}
::-moz-selection {
background: #F8A42E;
}
/* Selection Color Ends */

Step 7: Change #F8A42E with the color of your own choice, and click on Save Template.



Enjoy Your New Text Selection Color.

How To Add/Install Google Web Fonts in Blogger

In this post, I will show you "How To install Google Web Fonts in Blogger". Google Fonts are free, beautiful and easy to install. They have more than 629 fonts right now and they keep adding more. If you're fed up of old fonts available in blogger like Arial, Courier, Georgia etc and you want some new fonts which are stylish then this post is best for you.


Adding Google Web Font To Blogger

Step 1: Go to Google Fonts.

Step 2: Type the name of the font in Search Box or keep surfing their site and you will find any good one for your blog.

Step 3: As you will choose which is best for your blog, Click on Quick Use button as show in the picture below. You can also add them in your collection by clicking on Add to Collection.

Step 4: Now you will be asked to choose Font Stlye. Bold-Italic-Underline and many other styles.

Step 5: After selecting your font styles, Scroll down until you see 3.Add This Code To Your Website.

Step 6: Copy the code that is given in Standard Tab.

Example: The Font Bree Serif code looks like the below code.

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'/>

Step 7: Now go to Blogger, and log in to your blogger account.
Step 8: Click on Template at left side and then Click on Edit Html.
Step 9: Hover your cursor on the code and press CTRL+F and a small search box will appear.
Step 10: Type </head> in the search box and press enter.
Step 11: Paste your font's code just above the </head> tag.

NOTE: Before pasting the code there, just type a / before the > in your code as shown in the code below.

Original Code:

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>

Code After Placing / :

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'/>

Step 12: After placing a / paste the code above the </head> tag.
Step 13: You will also see that Google Fonts will also provide you a CSS Code For your font.

Step 14: Now it's up to you that where you want to use it. In Post Titles, Post Body, or Specific Text.

Add the font name to your CSS styles just as you'd do normally with any other font.

h1 { font-family: 'FONT NAME'; font-weight: 400; }

For Post Titles You will use this CSS Code:

.post-title {font-family: 'FONT NAME'; }

For Post Body You will use this CSS Code:

.post-body {font-family: 'FONT NAME'; }

For Specific Text in Blog Posts: If you don't want to use that Font for all Body Posts and you only want to use that font on some text, not on whole, So you can use this CSS Code in your Blogger Post Editor.

<span style="font-family: FONT NAME;">Type Your Text Here</span>

Enjoy Using Your New Font.
If you didn't understand any part, Ask us Through Comments.

Add Mini Flip Social Icons To Blogger

Mini Flip Social Icons looks great, and if any of your visitor likes them. He/She will surely hover the mouse on it and as he/she will hover the mouse on these icons, These icons will change to their original color very neatly and beautifully.

Click on the Live Preview button to see the live demo of Mini Flip Social Icons.

Live Preview

How To Add these in Blogger?

Step 1: Go to Blogger, and log in to your account.

Step 2: Go to your blog's Dashboard.

Step 3: Click on the Layout Tab at the left side.

Step 4: Click on Add a Gadget, and choose HTML/Javascript.

Step 5: Leave the title area blank, and Paste the following code in Content Area.

The Code:

<ul class="socialwidget"> <li class="facebook"> <a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook"> </a></li> <li class="googleplus"> <a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"> </a></li> <li class="pinterest"> <a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"> </a></li> <li class="twitter"> <a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"> </a></li> <li class="rss"> <a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"> </a></li> <li class="skype"> <a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"> </a></li> <li class="vimeo"> <a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"> </a></li> <li class="dribbble"> <a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"> </a></li> <li class="flickr"> <a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"> </a></li> <li class="linkedin"> <a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin"> </a></li> <li class="youtube"> <a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"> </a></li> </ul> <style> ul.socialwidget {float:right;} ul.socialwidget li {float:left;list-style: none outside none;border:none;} ul.socialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyoe0u0NJDIj_yx918hFLDdvWJyjq8RyuxPQXQwSj4IXR_K7URJStBhcdixrgisCFNW1Yz1caI18Bq5ubTqiNrcZd0VSSy5LSiOb38FCpTEgs-tK0vxNkpU73XbEk8OQEzDlxlZIpHDuD/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.socialwidget li a, .ie8 ul.socialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyoe0u0NJDIj_yx918hFLDdvWJyjq8RyuxPQXQwSj4IXR_K7URJStBhcdixrgisCFNW1Yz1caI18Bq5ubTqiNrcZd0VSSy5LSiOb38FCpTEgs-tK0vxNkpU73XbEk8OQEzDlxlZIpHDuD/s1600/spice-social-gadget-sprite.png' )} ul.socialwidget li.facebook a{ background-position:0 0} ul.socialwidget li.flickr a{ background-position:-32px 0} ul.socialwidget li.dribbble a{ background-position:-64px 0} ul.socialwidget li.googleplus a{ background-position:-96px 0} ul.socialwidget li.linkedin a{ background-position:-128px 0} ul.socialwidget li.pinterest a{ background-position:-160px 0} ul.socialwidget li.rss a{ background-position:-192px 0} ul.socialwidget li.skype a{ background-position:-224px 0} ul.socialwidget li.twitter a{ background-position:-256px 0} ul.socialwidget li.vimeo a{ background-position:-288px 0} ul.socialwidget li.youtube a{ background-position:-320px 0} ul.socialwidget li.facebook a:hover, #sidebar ul.socialwidget li.facebook a:hover{ background-position:0 -32px} ul.socialwidget li.flickr a:hover, #sidebar ul.socialwidget li.flickr a:hover{ background-position:-32px -32px} ul.socialwidget li.dribbble a:hover, #sidebar ul.socialwidget li.dribbble a:hover{ background-position:-64px -32px} ul.socialwidget li.googleplus a:hover, #sidebar ul.socialwidget li.googleplus a:hover{ background-position:-96px -32px} ul.socialwidget li.linkedin a:hover, #sidebar ul.socialwidget li.linkedin a:hover{ background-position:-128px -32px} ul.socialwidget li.pinterest a:hover, #sidebar ul.socialwidget li.pinterest a:hover{ background-position:-160px -32px} ul.socialwidget li.rss a:hover, #sidebar ul.socialwidget li.rss a:hover{ background-position:-192px -32px} ul.socialwidget li.skype a:hover, #sidebar ul.socialwidget li.skype a:hover{ background-position:-224px -32px} ul.socialwidget li.twitter a:hover, #sidebar ul.socialwidget li.twitter a:hover{ background-position:-256px -32px} ul.socialwidget li.vimeo a:hover, #sidebar ul.socialwidget li.vimeo a:hover{ background-position:-288px -32px} ul.socialwidget li.youtube a:hover, #sidebar ul.socialwidget li.youtube a:hover{ background-position:-320px -32px} </style>

Step 6: Change the links which are highlighted with red color in the code with your social profile links.

Step 7: Click on Save and you're done.

Enjoy your new Mini Flip Social Icons.