Almost every website has a
blog or social media widgets follow the button icons are diverse. By installing
a social media widget on blogs, you can invite readers / visitors to the blog
to be involved in your social networks, and of course can enhance the
reputation of your blog. But it will not happen if visitors do not click on the
follow button on your social network widget, and they're just going to click or
follow your blog updates unless they feel or find it useful and beneficial to
your blog.
This widget does not
automatically increase your blog follower various social nets but at least we
can lure them to at least click once on a button to create / display the widget
button is more attractive and has a widespread effect hover, smooth and sexy
Embarrassed smile. The hover effect we created with the help of CSS3
transitions.
This widget also without
javascript, without JQuery, purely with CSS. The widget will look neat and
clean sidebar of your blog or any part you put it.
if you find it amazing or
just interested in trying to make it or add it on your blog please step on the
stages of manufacture
Features:
This widget is quite simple
but has several key features:
• Covering four key social
networks are most commonly used and the plus icon RSS
• The effects extend, smooth
and sexy on hover
• Use CSS sprites
• Very neat and clean
• There is no JavaScript.
JQuery No. This pure CSS
CSS sprite technique is
pretty cool and useful, especially when you have too many pictures. In this
widget you would think that the picture or icon is used for each button that
makes a total of 5 images. But in fact there is only one image is used which
contains all the icons. This technique is useful because instead of 5 HTTP
requests, you only make one request that speed up loading time. This technique
is not very common in Blogger blog in WordPress blog but this technique is
often used.
Now let's add this widget on
your blog.
Note: If you want to add a
widget to a particular place, use separate HTML and CSS and if you want the
widget to appear somewhere in the sidebar you, please skip straight in the
alternative at the bottom.
Now add the CSS code that
will make this button cool
1. Login to your Blogger
account >> Templates >> Edit HTML >> Proceed
2. Find the code ]]></
b: skin> Place the following code above
HTML
CSS - Go Widget
/* Social Buttons Widget by by Go Widget*/
#GoWidget{list-style:none;
text-decoration:none; font-size:0.9em;
font-family:trebuchet
ms,sans-serif;}
#GoWidget
a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#GoWidget
li{position:relative; height:38px; cursor:pointer; padding: 0
!important;}
#GoWidget .facebook,
.googleplus, .pinterest, .rss, .twitter{position:relative;
z-index:5; display:block;
float:none; margin:10px 0 0; width:210px; height:38px;
border-radius:5px;
background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAA
G2E/CDbmwPO4haA/s800/sprites.png)
no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px
3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px
3px; color:#141414;
text-align:left; text-indent:50px; text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px; -webkit-transition:width .25s
ease-in-out,background-color
.25s ease-in-out; -moz-transition:width .25s
ease-in-out,background-color
.25s ease-in-out; -ms-transition:width .25s
ease-in-out,background-color
.25s ease-in-out; -o-transition:width .25s
ease-in-out,background-color
.25s ease-in-out; transition:width .25s
ease-in-out,background-color
.25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px
3px;}
#GoWidget
li:after{position:absolute; top:0; left:50px; z-index:2; display:block;
height:38px; color:#141414;
content:attr(data-alt); line-height:32px;}
#GoWidget
.icon{overflow:hidden; color:#fafafa;}
#GoWidget .facebook{width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;}
#GoWidget
.twitter{width:32px; height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;}
#GoWidget .googleplus{width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;}
#GoWidget .pinterest{width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:0 -95px;}
#GoWidget .rss{ width:32px;
height:32px; background-color:rgba(255,102,0,0.42);
background-position:-3px
-126px;}
#GoWidget li:hover .icon,
.touch #GoWidget li
.icon{width:210px;}
.touch #GoWidget li
.facebook, #tbisose li:hover
.facebook{background-color:rgba(59,89,152,1);}
.touch #GoWidget li
.twitter, #GoWidget li:hover
.twitter{background-color:rgba(64,153,255,1);}
.touch #GoWidget li .googleplus,
#GoWidget li:hover
.googleplus{background-color:rgba(228,69,36,1);}
.touch #GoWidget li .pinterest,
#GoWidget li:hover
.pinterest{background-color:rgba(174,45,39,1);}
.touch #GoWidget li .rss,
#GoWidget li:hover
.rss{background-color:rgba(255,102,0,1);}
/* Social Buttons Widget by - Go Widget*/
1. Login to your Blogger
account >> Templates >> Edit HTML >> Proceed
2. Place the following code
in the section you want from your blog
HTML - Go Widget
<!--Social Buttons Widget by Go Widget-->
<ul
id="tbisose">
<li
data-alt="Follow us on Facebook"><a class="icon
facebook" href="#">Follow us on
Facebook</a></li>
<li
data-alt="Follow us on Twitter"><a class="icon
twitter" href="#">Follow us on
Twitter</a></li>
<li
data-alt="Follow us on Google+"><a class="icon
googleplus" href="#">Follow us on
Google+</a></li>
<li
data-alt="Follow us on Pinterest"><a class="icon
pinterest" href="#">Follow us on
Pinterest</a></li>
<li
data-alt="Subscribe with RSS"><a class="icon rss"
href="#">Subscribe with
RSS</a></li>
</ul>
<!--Social Buttons Widget by Go Widget—>
<small><div style="font-size:80%; text-align:right;
text-shadow:2px 2px 2px #adadad;"><a
href="http://widgetmefor.blogspot.co.id/2015/11/how-to-make-social-media-widget-follow.html"
target="_blank" title="credit">+ Get This
Widget </a></div></small>
Replace all the # sign
with the URL of your social networking.
Alternative
If you want to add this
widget to the sidebar of your blog
1. Log in to your Blogger
account you >> Layout
2. Click the plus gadget
sidebar
3. PilihHTML / JavaScript on
the form place the following code
HTML/CSS - Go Widget
<style>
#goWidget{list-style:none;
text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#goWidget a{text-decoration:none;
font-family:trebuchet ms,sans-serif;}
#goWidget li{position:relative; height:38px;
cursor:pointer; padding: 0 !important;}
#goWidget.facebook, .googleplus,
.pinterest, .rss, .twitter{position:relative; z-index:5; display:block;
float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7C_ND94c21dwRKHDdhrkfc9YwqjxQcLATzLNoEH3pY0W2ogwEU3SPLFO14qlUi2y6u1NP_k5oCj8mT28wRxk4m5s_UT1ZCjNycJpL7kkA0s8UQkLVl2-WPSh5sEmznnPaVFhBhYpdzY/s800/sprites.png)
no-repeat; background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0
2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left;
text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;
line-height:32px; -webkit-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s
ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s
ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s
ease-in-out; transition:width .25s ease-in-out,background-color .25s
ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#goWidget li:after{position:absolute;
top:0; left:50px; z-index:2; display:block; height:38px; color:#141414;
content:attr(data-alt); line-height:32px;}
#goWidget .icon{overflow:hidden; color:#fafafa;}
#goWidget .facebook{width:32px;
height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#goWidget .twitter{width:32px; height:32px;
background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#goWidget .googleplus{width:32px;
height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px
-66px;}
#goWidget .pinterest{width:32px;
height:32px; background-color:rgba(174,45,39,0.42); background-position:0
-95px;}
#goWidget .rss{ width:32px; height:32px;
background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#goWidget li:hover .icon,
.touch #goWidget li .icon{width:210px;}
.touch #goWidget li .facebook, #tbisose
li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #goWidget li .twitter, #tbisose
li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #goWidget li .googleplus, #tbisose
li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #goWidget li .pinterest, #tbisose
li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #goWidget li .rss, #goWidget
li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="goWidget">
<li data-alt="Follow us on
Facebook"><a class="icon facebook" href="#">Follow
us on Facebook</a></li>
<li data-alt="Follow us on
Twitter"><a class="icon twitter" href="#">Follow
us on Twitter</a></li>
<li data-alt="Follow us on
Google+"><a class="icon googleplus" href="#">Follow
us on Google+</a></li>
<li data-alt="Follow us on
Pinterest"><a class="icon pinterest" href="#">Follow
us on Pinterest</a></li>
<li data-alt="Subscribe with
RSS"><a class="icon rss" href="#">Subscribe with
RSS</a></li>
</ul>
<small><div
style="font-size:80%; text-align:right; text-shadow:2px 2px 2px
#adadad;"><a href="http://widgetmefor.blogspot.co.id/2015/11/how-to-make-social-media-widget-follow.html" target="_blank"
title="credit">+ Get This Widget
</a></div></small>
Replace all the # sign
is blue with the URL of your social networking
4. Save and see the results
in your blog!
Well thus tutorial create
widgets follow social media with a cool button. Hope it is useful!
If you liked the article on
this blog, Please feel free to subscribe via email, so you will get an article
submission every article published in Go Widget