Showing posts with label Social Sharing Widgets. Show all posts
Showing posts with label Social Sharing Widgets. Show all posts

How To Add Windows 8 Tiles Style Social Media Widget

Hello bloggers, hope everyone are doing good. We all know that there are unlimited benefits available in social media platforms for promoting our blog/ website. Today we will learn and add an unique social media widget in our blogger blog which is looks like windows 8 titles. In this widget you can link up your social media profiles. (RSS feed, Facebook, Twitter, Google Plus, LinkedIn, YouTube, StumbleUpon and Pinterest.) This is an extra colorful attraction to concentrate your readers for subscribing. I have already applied it to our test blog. So, before you apply it on your blog, you can simply watch a demo.
windows-8-style-social-widget

How To Add Windows 8 Tiles Style Social Media Widget

  • Sign in to Blogger blog
  • Click Layout from left side menu
  • Choose a suitable widget position and click Add a Gadget
  • Select HTML/JavaScript.
  • Now simply paste the below codes in the box.

<style>
/*---My Blogging Techniques Windows 8 Style Social Widget---*/
.sm-win-eight-social{
background: transparent;
width:300px;
}
.sm-win-eight-social li{
position:relative;
cursor:pointer;
padding:0px;
list-style:none;
}
.sm-win-eight-social .smrss,.smfacebook,.smtwitter,.smgoogleplus,.smlinkedin,.smyoutube,.smstumble,.smpinterest {
z-index:8;
float:left;
margin:2px;
display:block;
position:relative;
}
.sm-win-eight-social .smrss{
background: #F98509 url(http://2.bp.blogspot.com/-ZUphGkq3UNM/UdCaXGDHWYI/AAAAAAAAEH8/RtTu5Ow9b_8/s60/shinemat-rss-feed-icon-n.png) no-repeat center;
width:140px;
height:143px;
}
.sm-win-eight-social .smfacebook{
background: #2E89F2 url(http://2.bp.blogspot.com/-w78SGkj0S4g/UdCaVC8jGyI/AAAAAAAAEHw/Kc5L0NbsE10/s37/shinemat-facebook-icon-h.png) no-repeat center;
width:68px;
height:70px;
}
.sm-win-eight-social .smtwitter{
background: #6EB921 url(http://2.bp.blogspot.com/-hDccFupO26Q/UdCaavsEC7I/AAAAAAAAEIU/lVESKdBJsWk/s50/shinemat-twitter-icon-n.png) no-repeat center;
width:69px;
height:70px;
}
.sm-win-eight-social .smgoogleplus{
background: #5533AE url(http://1.bp.blogspot.com/-kE_-sK9FpEE/UdCaUjFdUuI/AAAAAAAAEHk/JULJosvEAfU/s40/shinemat-googleplus-icon-n.png) no-repeat center;
width:68px;
height:69px;
}
.sm-win-eight-social .smlinkedin{
background: #0097BD url(http://1.bp.blogspot.com/-qSTYsuxhK2Y/UdCaU8K3ncI/AAAAAAAAEHs/dzrr30FjEEQ/s30/shinemat-linkedin-icon-n.png) no-repeat center;
width:69px;
height:69px;
}
.sm-win-eight-social .smyoutube{
background: #e64a41 url(http://4.bp.blogspot.com/-KWF7QiEHOl8/UdCabQTUkcI/AAAAAAAAEIc/P9rS5Fe_h3Q/s80/shinemat-youtube-icon-n.png) no-repeat center;
width:285px;
height:69px;
}
.sm-win-eight-social .smstumble{
background: #FA05EC url(http://4.bp.blogspot.com/-TlprUIB_GvA/UdCaX8PyhTI/AAAAAAAAEIM/DXimB7E-x0o/s50/shinemat-stumbleupon-icon-n.png) no-repeat center;
width:141px;
height:69px;
}
.sm-win-eight-social .smpinterest{
background: #0B54A9 url(http://4.bp.blogspot.com/-n6OJ4lHESvE/UdCaXd7eD9I/AAAAAAAAEIA/l_9v7SUd2YY/s38/shinemat-pinterest-icon-n.png) no-repeat center;
width:141px;
height:69px;
}
.sm-win-eight-social li:hover .smrss{
background: #F98509 url(http://1.bp.blogspot.com/-qyPyojUEMi8/UdCW2H-k6lI/AAAAAAAAEG8/8DqJq5atouU/s70/shinemat-rss-feed-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smfacebook{
background: #2E89F2 url(http://1.bp.blogspot.com/-gGtzAVHcW44/UdCWwttlLHI/AAAAAAAAEGc/AFmwcosgvZw/s56/shinemat-facebook-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smtwitter{
background: #6EB921 url(http://2.bp.blogspot.com/-sc_qxC0Mmfo/UdCW6v2hW5I/AAAAAAAAEHM/MXXPV1bHoBU/s60/shinemat-twitter-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smgoogleplus{
background: #5533AE url(http://4.bp.blogspot.com/-JyK9dFzixBg/UdCWxPpigiI/AAAAAAAAEGk/jr5Aozqw-4Y/s50/shinemat-googleplus-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smlinkedin{
background: #0097BD url(http://2.bp.blogspot.com/-Tvs-yuw7vvA/UdCWxYRBPKI/AAAAAAAAEGo/jffPCC9TgQA/s40/shinemat-linkedin-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smyoutube{
background: #e64a41 url(http://3.bp.blogspot.com/-_Tfex556WOw/UdCW7nHj8nI/AAAAAAAAEHU/eCKq6j8ZL24/s100/shinemat-youtube-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smstumble{
background: #FA05EC url(http://3.bp.blogspot.com/-czu-X4tuiQ0/UdCW3B8tzqI/AAAAAAAAEHE/s8AbDK_f9JA/s60/shinemat-stumbleupon-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smpinterest{
background: #0B54A9 url(http://4.bp.blogspot.com/-JcV5ObMAkJs/UdCW1NOIETI/AAAAAAAAEG0/3ro_lw7KHvk/s51/shinemat-pinterest-icon.png) no-repeat center;
}
</style>

<div class="sm-win-eight-social">

<li><a class="smrss" href="http://feeds.feedburner.com/RSS-USERNAME"></a></li>
<li><a class="smfacebook" href="http://www.facebook.com/FACEBOOK-USERNAME"></a></li>
<li><a class="smtwitter" href="http://twitter.com/TWITTER-USERNAME"></a></li>
<li><a class="smgoogleplus" href="https://plus.google.com/G+PROFILE-ID"></a></li>
<li><a class="smlinkedin" href="https://www.linkedin.com/LINKEDIN-USERNAME"></a></li>
<li><a class="smyoutube" href="http://www.youtube.com/YOUTUBE-USERNAME"></a></li>
<li><a class="smstumble" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME"></a></li>
<li><a class="smpinterest" href="http://pinterest.com/PINTEREST-USERNAME"></a></li>

</div>


  • Replace the following areas with your own details...


    • Replace RSS-USERNAME with your blog's RSS feed link.

    • Replace FACEBOOK-USERNAME with your Facebook username.

    • Replace TWITTER-USERNAME with your own Twitter username

    • Replace G+PROFILE-ID with your Google Plus profile ID.

    • Replace LINKEDIN-USERNAME with your LinkedIn username.

    • Replace YOUTUBE-USERNAME with your Youtube username.

    • Replace STUMBLEUPON-USERNAME with your Stumbleupon username.

    • Replace PINTEREST-USERNAME with your Pinterest username..

  • Now click Save button to done everything.
    Reload your blog to see this nice widget is working on your blog.
    If any problem you will face please do not late to let me know. I will assist you with smiles.

How To Add Twitter Official Tweet Buttons to Blogger

Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3 types of Beautiful Tweet buttons : Vertical count, Horizontal count and No count.Here I am going to describe how to add these Twitter buttons to your blogger blog.

If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.

Twiiter Tweet Buttons

  • Login to your blogger Dashboard--> Design- -> Edit HTML
  • Click on "Expand Widget Templates"
  • Scroll down to where you see below code:

<div class='post-header-line-1'/>

  • Now Copy your "Twitter tweet button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button" code just before <data:post.body/> .

Code 1 : Vertical Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Code 2 : Horizontal Count


<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Code 3 : No Count


<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Remember to replace "TWITTER-USERNAME" with your real Twitter username.

If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.

5.Now save your template.

You can view more info from here:

http://twitter.com/goodies/tweetbutton

Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :

http://dev.twitter.com/pages/tweet_button

Touch Me Social Sharing Widget To Blogger

Hello friends, today I am giving you a simple and beautiful Touch Me Social Sharing Widget to Blogger. All you know, What is the role of Social Sharing Widgets in Blogger ? Well it help your readers to subscribe to your social networks easily. Our Previous Social Sharing Widgets was “Clean and White Spinning Social Media Icons”.
Touch Me




View Demo Button

Add Touch Me Social Sharing Widget To Blogger

  • Login to your Blogger Dashboard.
  • Go to Layout –> Add a Gadget –> HTML/Javascript –> Paste the below code in it.
<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class="touchme">
<!--RSS-->
<a class="rss" href="YOUR-FEED URL- GOES HERE " rel="nofollow" target="_blank"></a>
<!--Google Plus-->
<a class="googleplus" href="YOUR GOOGLE PLUS PAGE URL GOES HERE" rel="nofollow" target="_blank"></a>
<!--Facebook-->
<a class="facebook" href="YOUR-FACEBOOK FAN PAGE-URL-GOES HERE" rel="nofollow" target="_blank"></a>
<!-- Twitter -->
<a class="twitter" href="YOUR-TWITTER FAN PAGE-URL/USER NAME GOES HERE " rel="nofollow" target="_blank"></a>
</div>
</div>
  • After pasting click on Save.
  • You're Done.

Note : Highlighted text in the above code should be replaced with the following.

    • YOUR-FACEBOOK FAN PAGE-URL GOES HERE with your Facebook fan Page URL
  • YOUR-TWITTER FAN PAGE-URL/USER NAME GOES HERE with Twitter user name or Fan page
  • YOUR GOOGLE PLUS PAGE URL GOES HERE with Google Plus Profile or Fan Page URL
  • YOUR-FEED URL- GOES HERE with your feed name URL

Attractive Social Media with Count Widget For Blogger

Hello to all my readers hope you are all enjoying the contents in my blog. Today i am back with an Attractive Social Media Widgets with Subscribers count in it. Attractive Social MediaThis cool widget makes your readers to subscribe to your feeds, follow you on twitter, like your page on Facebook and for YouTube subscribers.

Attractive Social Media with Count For Blogger

<style> .btrix_widget{ margin-bottom:20px; overflow:hidden; clear: both; border: 1px solid black; width: 300px; } .btrix_widget li{ line-height:15px; float:left; width:75px; height:87px; padding:7px 0 10px; -moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear; list-style:none; } .btrix_widget li a{display:block;text-align:center;} .btrix_widget li a strong{ background:url(http://4.bp.blogspot.com/-DHkZX7Y0FXs/UVvNYBepQVI/AAAAAAAAAc8/_EA1lwrFxqA/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s; -moz-transition: opacity ease-in-out 0.4s; -o-transition: opacity ease-in-out 0.4s; transition: opacity ease-in-out 0.4s;} .btrix_widget li a:hover strong{opacity:1;} .btrix_widget li:hover a{text-decoration: none;} .btrix_widget li.rss-subscribers a strong{ background-position:center -1084px ;} .btrix_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;} .btrix_widget li.rss-subscribers span{display:block;font-size:21px;} .btrix_widget li.facebook-fans a strong { background-position:center -1192px ;} .btrix_widget li.facebook-fans a:hover strong { background-position:center -1246px ;} .btrix_widget li.twitter-followers a strong{ background-position:center -868px;} .btrix_widget li.twitter-followers a:hover strong{ background-position:center -922px;} .btrix_widget li.youtube-subs a strong{ background-position:center -976px;} .btrix_widget li.youtube-subs a:hover strong{ background-position:center -1030px;} .btrix_widget li span{display:block;font-size:21px;} .btrix_widget li a small{color:#777;} </style> <br /> <div class="widget btrix_widget"> <ul style="margin-left: -40px;"> <center><h1>Connect with Us</h1></center> <li class="rss-subscribers"> <a href="http://feeds.feedburner.com/MyBloggingTechniques"> <strong></strong> <span>548</span> <small>RSS Feed</small> </a> </li> <li class="twitter-followers"> <a href="https://twitter.com/DanielRakshith"> <strong></strong> <span>5,245</span> <small>Followers</small> </a> </li> <li class="facebook-fans"> <a href="https://www.facebook.com/MyBloggingTechniques"> <strong></strong> <span>2,298</span> <small>Fans</small> </a> </li> <li class="youtube-subs"> <a href="http://www.youtube.com/username"> <strong></strong> <span>1,202</span> <small>Subscribers</small> </a> </li> </ul> </div>

You have to change the counters in the code manually, just change the coloured texts as given below
  • Replace MyBloggingTechniques with your Feedburner ID
  • Replace MyBloggingTechniques with your Facebook Fan Page Name
  • Replace DanielRakshith with your Twitter Username
  • Replace Username with your Youtube Username

Also you can edit the number of fans/subscribers/followers you have by changing the numeric characters in the code.

If you like this then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.

Add Horizontal Share this Social Media Buttons Just Below Every Blogger Posts

Adding social sharing button to your blog is a most powerful way to increasing page views and traffic on your blog.On almost all blogs you will watch social sharing and social subscribing icons.You can see more social sharing under the label social sharing widgets.In this post I have used Sharethis.com script which is one of the leading bookmarking company,Now let's see how to add social sharing buttons just below of every blogger posts.

btsnts-social-sharing-widget

How To Add This Widget To Blogger ?

  • Go to Blogger.com.
  • Login into your Blogger Dashboard
  • Template (Design in old interface) --> Edit HTML –> Edit Template (as per new template editing method).
  • Now find ]]></b:skin> tag and add below code just above/before ]]></b:skin> tag.
.btsnts-sswidget{
border:1px dashed #000000;
font-size:16px;
font-family:Segoe Print;
font-weight:bold;
padding:10px;
color:#4488dd;




  • Add below code just above/before </head> tag.
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-60399e4-d14-8df8-3a50-76118b149821"}); </script>


  • Now paste below code just after <div class='post-footer'> tag.
<div class="btsnts-sswidget"><span class='st_plusone_hcount' displayText='Google 1'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_email_hcount' displayText='Email'></span>
<span class='st_sharethis_hcount' displayText='ShareThis'></span></div>

  • Now save your template.

If you like this article then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.
Proudly powered by Blogger