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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRI95Wr85czsj9rUHjWs7JKS9yzOt4O8zg0w7eXwjuuivP_Zl-1oCFwkxAK-jCzi7zAdp7frcQlA4KC_Opv10kcOGG_BnuzkTSz5GTbH5Q_09utzSGdSnbsG3JUEuSgWCes4hyphenhyphenx7ETpEY/s1600/twitter.png' title='Twitter'/></a>
<a href='http://facebook.com/' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjrMBeBUojpEP0oTRx7zeNl92Vafm6Zcgykpu9pK9g9djXVksDlGfZla8vmLrYUYcHvuiUlvocLNMbE154JK7q9U6N5HWvStmLqOGRCxi3gP77Nk259mJ-db0P9UUAC7Ra0P0cvT9mWow/s1600/facebook.png' title='Facebook'/></a>
<a href='https://plus.google.com/' target='_blank'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPyxcfsIiBGjsjPIUGfn4vkE3fNtvwNmA3QUBJRMQXiNF1yxTahqc6fQsMRGlv_qRllrGsSig-UKftIrjIZYL4mYPdCRmTCo6hgfnlp8DE58K3V8djDy987puKzLYNd074_bMfnYRDRJ0/s1600/gplus.png' title='Google Plus'/></a>
<a href='http://www.linkedin.com/' target='_blank'><img alt='LinkedIn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMG_1AUknTZtX6TX3DqKy1phS90SIlcKqLAlrqU_YT_NBl-gA1V60mUzJJdc79L-D53jQJUJ28HfVqk-K2W__ubyfysZLKFkdsCxDmA1FRrwnOJ3HLLCgvJLCIyozBp-MMgt66WpgtAs/s1600/linkedin.png' title='LinkedIn'/></a>
<a href='https://rss.com/' target="_blank"><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF1twwIooSysED-t38YoyOjG2uFAIIFO2wpkZzsbU3evNINcoqKslgIsbpTcZQi4sPKypv8M1fMXqu8TmheIHhiU_mN6fcOwjK0zAjanpQfvw8cc-pAOBRPNsVmcY5uZNHdZxzj95fryY/s1600/rss.png' title='RSS Feed'/></a>
<a href='mailto:your@email.com' target='_blank'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZ1Wb8Do8favgLLNb1JyBL0nVy8sRkRDMehIJvrDpckitIz1Wv79hvWgcGqpTD-VgB0StRYhmflnyA1PaxHiJ92ANdU7cGZFmol_ZotqmpoE4WuPY4IX6X2xZ8FH41sestoCd1m9FyV8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOhr8mlJE_YNDZPfMeh5uNtxUVAja9yxP__cn9gLeFivpT9D0xkzMJ7WSi2NlwsEepTUKBUwAQDILKu3QCfAR90uac-okZkRyHlXznKLpCqmLRSyDqghjoQfKp9InHUERZt7DUMd3kMlCL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOhr8mlJE_YNDZPfMeh5uNtxUVAja9yxP__cn9gLeFivpT9D0xkzMJ7WSi2NlwsEepTUKBUwAQDILKu3QCfAR90uac-okZkRyHlXznKLpCqmLRSyDqghjoQfKp9InHUERZt7DUMd3kMlCL/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