TUTORIAL IT: Social Media Follow Buttons Widget For Blogger

Showing posts with label Social Media Follow Buttons Widget For Blogger. Show all posts

Friday, November 13, 2015

Platform Twitter Follow Button Widget For Blogger

A twitter follow button allows your readers to easily follow your blog/site on Twitter. This helps in increasing your blog's page views since you'll have more return visitors to your blog. Also, more followers on your twitter account means you'll likely get more retweets on blog posts you've shared on twitter. On retweeting, their followers can also view the post and by this, you're actually promoting your blog on one of the largest social networking sites.

The twitter follow button widget can be placed in your blog's sidebar or footer. and below are the various sizes of the platform twitter follow button widget have been given, follow the steps below to add one on your blog.

How to Add Twitter Follow Button Widget In Blogger

From your Blogger Dashboard,
Goto Layout
Select 'Add a gadget'
Click on 'HTML/Javascript' (refer to this post on how to add widgets/gadget in blogger layout)
Copy the code for any of your preferred styles below and paste in the text field.
Replace the fields specified 'Username' with your twitter username

Style 1

Large Twitter Follow Button With Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @USERNAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Style 2

Medium Twitter Follow Button With Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="true" data-size="medium">Follow @USERNAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Style 3

Large Twitter Follow Button Without Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @USERNAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Style 4

Medium Twitter Follow Button Without Followers Count

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow @USERNAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Save the gadget

Social Media Follow Buttons Widget For Blogger

Learn how to add social media follow buttons widget for blogger in your blog. The Social media icons like Facebook, Twitter, Goggle+, Pinterest on this follow widget makes it easy for readers to connect with your blog. Just like the social share buttons that can increase your blog's pageviews when your post is shared, this widget also increases your blog's traffic. This is because those who subscribed from this blogger widget will get your updates in their social accounts, meaning an increase in your returning visitors and the number of fans on your twitter, facebook, google+ accounts. Also Included in this widget is an email subscription box that sends your latest blog posts as an email to your blog's subscribers. I'll say it is one of the best and most popular blogger widget, beacuse you'll see it on visiting most websites. Below are the guidelines on how to add the social media follow buttons in your blogger blog.

Also Read: Facebook Popup Like Box With Timer For Blogger

Facebook Invite Friends Button With Timer For Blogger

How to Add 'Link to This Post Widget' For Blogger

How to Add Social Media Buttons To Blogger

Goto your blogger dashboard,
Navigate to 'layout'.
Click on 'add a gadget'
Select 'Html/Javascript'
Copy any of the codes below for your preferred style and paste in the text field.

Social Media Follow And Subscription Widget For Blogger

<style type="text/css">

img.beintouch:hover {

    background: none repeat scroll 0 0 #D6D6D6;

    border-radius: 16px 16px 16px 16px;

    box-shadow: 0 0 10px #565656;

}

.emailtext {

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3lvQwqdfMhXxRuE_z_zL2UQCD-m-ilgeWmyZD1KryPtx1UdwcxyGloZI64ljkcDgNFIlOoR4Lz7oMU0UrJp-sD97QYaVHOu6UClrnv-z1Y5hPGU_N5ii1XTD-xJx3IjEV0oMx7ebqpk/s1600/mailbox.png") no-repeat scroll 4px center transparent;

    border: 1px solid #7E4E27;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 1px 1px 4px #7E4E27 inset;

    color: #444444;

    font-weight: bold;

    margin-left: 2px;

    padding: 7px 15px 7px 35px;

    text-decoration: none;

    width: 176px;

}

.ebutton {

    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;

    border: 1px solid #D3D3D3;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-weight: bold;

    margin-left: -18px;

    margin-top: 5px;

    padding: 6px 15px;

    text-decoration: none;

    text-shadow: 1px 1px 0 #000000;

}

</style>

<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/USERNAME"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwOyt9IiufWcIEpJF07jJa9jvuBvAsom87ITOh7kfqkDnRJCshc3m_EEy448Y6gaMbCpAXRvhkiUvXXnSahKpUb_os2xhXTjZ5dNgj7N1wX0gVvre0AIgr4Ibh5RZLozEWSxQpJmWoN5A/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/USERNAME/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlAMynXmNx1all-AYcVgfD5_AbXDVt2Y8QK58wiHRsmI81xBbyJlCrss-keHliDc0MVrDQMzV-PK1LV15mj-QHaVh1P-uuG_iHyCauLF2EaQHeMiULdFXBUSbCcTS5Xh8z223Q1vjkC8/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/FEEDBURNERID" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifX68qbK8dD0V_5vn0eAth852VTeVBw5VzSogM7x-g9HUn2_9Jm9k60VAtgvzQS_HOiF_YXY6YvNWwSzaZTthdNrimserc5rolmdpjEFk0jO9j0gQjYnCkhuCSqAaB-xXUkVq-GOKWUes/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://informationtutorial15.blogspot.com"></a></td></tr></tbody></table>

<div>Get Latest Tips via e-mail</div>

<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">

<input type="hidden" value="FEEDBURNERID" name="uri" />

<input type="hidden" value="en_US" name="loc" />

<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />

<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />

</form>

Animated Social Media Follow Wigdet For Blogger

<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .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/AVvXsEj547C3HUKhmXMEYgh2nB01nsnoboxhcjnEihwDYqkL4QrCAXMzKLSjQlsAXIZKbq5zSAVN-xlI8Cq15A7QYCe-LLDU-yxDZbxNDisme-LgUkpvf4r5xRSYMzRh799t1RxcsmI1A9E5DUc/w35-h158-no/facebook+and+google%252B+.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;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/USERNAME"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/ID/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://www.twitter.com/USERNAME"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/USERNAME/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe for Updates"><a class="icon rss" href="http://YOURURL/feeds/posts/default"target="blank">Subscribe for Updates</a></li>
</ul>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.informationtutorial15.blogspot.com/2015/11/social-media-follow-buttons-widget-blogger.html" target="_blank" title="Get This Widgets">Blogger Widgets</a></div></small>

Social Network Popup Widget for Blogger

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhHeViFSiseGWo_rFWlai3LvD5vI7XSQES9_Mrd5hNenXMHRkwvwxo_CghIuyZtg2K5u2V0T-Hbqj8YHBo4jCejUbNUh2-6JngSLtZzPWlz45HsIcjDSdLmYIqG91bUe12MWbmkOoQ-4/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUSERNAME&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @USERNAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>

Also Read: How to Customize Labels Cloud Widget In Blogger
Square Popular Posts Blogger Widget with Rotating Effect
Sliding Recent Post Widget For Blogger

Save your gadget.

TUTORIAL IT

Pages