How to Create a Follow us Buttons for Google Blogger

Hello Friends,
Today My Topic is "HOW TO CREATE A FOLLOW US (ME) BUTTONS FOR GOOGLE BLOGGER AND OTHER WEBSITES"

1.

Copy This HTML CODE and Paste in <body>Pase Here</body>
and After Replace URL with Your Social ID URL(Highlight with blue Color)

<a href='http://twitter.com/' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png' title='Twitter'/></a>
<a href='http://facebook.com/' target='_blank'><img alt='Facebook' src='http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png' title='Facebook'/></a>
<a href='https://plus.google.com/' target='_blank'><img alt='Google Plus' src='http://3.bp.blogspot.com/-NbS3DZVbHU0/To9NnX6odTI/AAAAAAAAEJY/SvIFghHPw-k/s1600/gplus.png' title='Google Plus'/></a>
<a href='http://www.linkedin.com/' target='_blank'><img alt='LinkedIn' src='http://3.bp.blogspot.com/-bzutYp7uln0/To9Nn2z36jI/AAAAAAAAEJc/-_kgc1MkEB4/s1600/linkedin.png' title='LinkedIn'/></a>
<a href='https://rss.com/' target="_blank"><img alt='RSS Feed' src='http://1.bp.blogspot.com/-SLbNOLbWhs0/To9NoZ-cOHI/AAAAAAAAEJg/uRl444L2fyg/s1600/rss.png' title='RSS Feed'/></a>
<a href='mailto:your@email.com' target='_blank'><img alt='Email' src='http://1.bp.blogspot.com/-zyZkki5OJqE/To9Nmf1xb8I/AAAAAAAAEJQ/dlUOxjZ0H5U/s1600/email.png' title='Email'/></a>

2.

For This Digine
First Copy Blow CSS Code or Paste <head>Paste Here</head> Section.....

<style> */http://www.softechnogeek.com*/ .rr-mod.module-rightrail-social-widget{margin:0 0 10px 0 !important;}#rr-social-widget-chiclets div{width:40px;height:32px;display:inline-block;margin:0 4px 0 0;}#rr-social-widget-chiclets a{width:32px;height:32px;display:block;background:url(http://3.bp.blogspot.com/-xl5U9JSHLTM/UNxNmOxJ9qI/AAAAAAAAB6Q/cuSzXh2aD-M/s1600/rr-social-icons.png) no-repeat;}@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:4/3), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5){#rr-social-widget-chiclets a{background-image:url(http://3.bp.blogspot.com/-xl5U9JSHLTM/UNxNmOxJ9qI/AAAAAAAAB6Q/cuSzXh2aD-M/s1600/rr-social-icons.png);background-size:248px 32px;}}#rr-social-widget-chiclets-facebook a{background-position:0 0;}#rr-social-widget-chiclets-twitter a{background-position:-36px 0;}#rr-social-widget-chiclets-googleplus a{background-position:-72px 0;}#rr-social-widget-chiclets-linkedin a{background-position:-108px 0;}#rr-social-widget-chiclets-stumbleupon a{background-position:-144px 0;}#rr-social-widget-chiclets-youtube a{background-position:-180px 0;}#rr-social-widget-chiclets-rss a{background-position:-216px 0;} </style>

After Paste This code............
Copy Below HTML CODE or Paste in<body>Paste Here</body>Section..........

<div class="rr-mod module-rightrail-social-widget" id="module-rightrail-social-widget">

<div class="configuration-neighbor">

<div id="rr-social-widget-chiclets">

<div id="rr-social-widget-chiclets-facebook">
<a href=" #" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_facebook';"></a></div>

<div id="rr-social-widget-chiclets-twitter">
<a href="# " rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_twitter';"></a></div>

<div id="rr-social-widget-chiclets-googleplus">
<a href=" #" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_googleplus';"></a></div>

<div id="rr-social-widget-chiclets-linkedin">
<a href=" #" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_linkedin';"></a></div>

<div id="rr-social-widget-chiclets-youtube">
<a href=" #" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_youtube';"></a></div>

<div id="rr-social-widget-chiclets-rss">
<a href=" #" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_rss';"></a></div>

</div>
</div>
</div>

After Paste This Code Change" # "Your Social ID or URL

3.
This HTML CODE Copy Or Paste In <head>Pase Here</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Copy This HTML CODE or Paste in <body>Pase Here</body> Any Blog or WebSite.......

<div id="socialicons">
<a class="icon" href="LINK" title="Follow with Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="LINK" title="Follow with Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="LINK" title="Follow with Instagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="icon" href="LINK" title="Follow with Google Plus" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="icon" href="LINK" title="Follow with Bloglovin" target="_blank"><i class="fa fa-heart"></i></a>
<a class="icon" href="LINK" title="Follow with Pinterest" target="_blank"><i class="fa fa-pinterest"></i></a>
<a class="icon" href="LINK" title="Follow with YouTube" target="_blank"><i class="fa fa-youtube"></i></a>
<a class="icon" href="LINK" title="Follow with Tumblr" target="_blank"><i class="fa fa-tumblr"></i></a>
<a class="icon" href="LINK" title="Follow with RSS" target="_blank"><i class="fa fa-rss"></i></a>
<a class="icon" href="mailto:LINK" title="Email Me" target="_blank"><i class="fa fa-envelope"></i></a>
</div>
Change This area With Your Social ID Or Url Link
THIS CODE WORK DEGINE NUMBER 3-4-5-6-7-8

Copy CSS CODE or Paste in <head>Paste Here</head>
You'r Change Any Color Under : #Color Code;
This is HTML Code Use In All Five Digine.

This Code is CSS CODE
<style>
.
#socialicons {
text-align: center;
}
#socialicons .icon{
background: #585858;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
position: relative;
top: 90px;
}
#socialicons .icon:hover{
background: #C1E1A6;
}

</style>
--------------------------------------------------------------------------------------------------------------------------
4.

Change only CSS CODE

<style>
.
#socialicons {
text-align: center;
}
#socialicons .icon{
background: #FFFFFF;
border:1px solid #CFCFCF;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
COLOR:#74AFAD;
position: relative;
top: 90px;
}
#socialicons .icon:hover{
background: #FFF056;
border:1px solid #CFCFCF;
}
</style>
--------------------------------------------------------------------------------------------------------------------------
5.

Change only CSS CODE

<style>
.
#socialicons {
text-align: center;
}
#socialicons .icon{
background: #4A96AD;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;

position: relative;
top: 90px;
}
#socialicons .icon:hover{
background: #FFF056;
}

</style>
--------------------------------------------------------------------------------------------------------------------------

6.

Change only CSS CODE

<style>
.
#socialicons {
text-align: center;
}
#socialicons .icon{
background: #FFFFFF;
border:1px solid #CFCFCF;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
-webkit-border-radius:17px;
-moz-border-radius:17px;
border-radius: 17px;
COLOR:#74AFAD;
position: relative;
top: 90px;
}
#socialicons .icon:hover{
background: #FFF056;
border:1px solid #CFCFCF;
}

</style>
--------------------------------------------------------------------------------------------------------------------------
7.

Change only CSS CODE

<style>

<style>

#socialicons {

text-align: center;

}

#socialicons .icon{

display: inline-block;

font-size: 20px;

text-align: center;

margin: 0 1px 8px;

COLOR:#74AFAD;

position: relative;

top: 90px;

}

#socialicons .icon:hover{

background: #FFF056;

border:1px solid #CFCFCF;

}

</style>
--------------------------------------------------------------------------------------------------------------------------
8.

Change only CSS CODE

<style>
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

.fa-instagram {
background: #125688;
color: white;
}

.fa-pinterest {
background: #cb2027;
color: white;
}

.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
background: #00aff0;
color: white;
}

.fa-android {
background: #a4c639;
color: white;
}

.fa-dribbble {
background: #ea4c89;
color: white;
}

.fa-vimeo {
background: #45bbff;
color: white;
}

.fa-tumblr {
background: #2c4762;
color: white;
}

.fa-vine {
background: #00b489;
color: white;
}

.fa-foursquare {
background: #45bbff;
color: white;
}

.fa-stumbleupon {
background: #eb4924;
color: white;
}

.fa-flickr {
background: #f40083;
color: white;
}

.fa-yahoo {
background: #430297;
color: white;
}

.fa-soundcloud {
background: #ff5500;
color: white;
}

.fa-reddit {
background: #ff5700;
color: white;
}

.fa-rss {
background: #ff6600;
color: white;
}
.fa-google-plus {
background: #ff6600;
color: white;
}
.fa-heart{
background: #ff6600;
color: white;
}
.fa-envelope {
background: #ff6600;
color: white;
}

</style>

--------------------------------------------------------------------------------------------------------------------------
9.
FANCY BUTTON