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

Monday, February 2, 2015

How To Add Moste Visitors Commenting To Blogger



How To Add Moste Visitors Commenting To Blogger


 

 
How To:
Step 1: Go to blogger dashboard.

Step 2: Select layout in menu on left side.


Step 3: Click on add a gadget and scroll down to Html/javascript.


Step 4: Copy below code and paste it into Html/javascript window:



<style type="text/css">
.top-commentators {margin: 3px 0px;border-bottom: 1px dotted #CCC;font-family: arial;color: #FF764C;}.top-commentators b{color: rgb(132, 132, 132);}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;}.top-commentators .commenter-link-name {padding-left:0;}
</style>
<script type="text/javascript">
var maxTopCommenters = 8; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] ([user]) ([count]) ';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYniYkqr9kVDK-HkD2CkZAYYvijPgcpriGgaOVhyDRoXw_gq2NA2B9-gSe8p934mtzfdcJ3voZRh1H5tbcYqK84_5vLPshy4y_mPFII7RzNJoHLHBuV36RFseWSAzSY7k0DwroM559FP2R/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw64_jogsr4vRSsmLVbnH5p-z4nzShAdQyJjBYQZHh276p04GiunfcNOejqbWmxjJ-fVwfLy3eWkjMngYfmMSwPeOvlpRdjxcgUQ-NJr-tTGUI4VkFrokyXB6EZ06w8fR9MK2d9eA9vR0/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
   
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
Customize
1-       var maxTopCommenters = 8;   This code to change the number of users.

2-      var sizeAvatar = 33;    This code to resize the image commentators .

0

Monday, January 26, 2015

How to Share a Text in Twitter by Select it ? Widget in Blogger

How to Share a Text in Twitter by Select it ? Widget in Blogger 

 


Today we have come up with another Twitter widget for your BlogSpot site that is unique and efficient enough to help you gain more exposure to your site with the help of Twitter. In this article, we will show you how to select text and share it to Twitter widget in blogger.









What is Select text and share it to Twitter?

It is an efficient plugin that allows your users an ability to select any text on your blog or website to share it (selected text) on their favorite social site Twitter. It is extremely easy to install and use, plus extremely lightweight in nature.
In the above screenshot, we have shown how this widget works. Whenever a small part of the text is select a Twitter icon appears, upon clicking that icon you can share that piece of text to your twitter account, making sharing easier.

You can check out the demo of this widget here

How to Install this widget?

The installing instructions are extremely simple and would take hardly few seconds to complete. The first thing, you need to do is to login to your blogger account and select the blog you'll like to install the widget on. Now to Template >> Edit HTML >> Search for ]]></b:skin> and just above it paste the following CSS codes.

.MBLSharetip {
display:none;
top:0;
background:#333;
color:#f16786;
width:40px;
height:32px;
position:absolute;
margin-left:-20px;
opacity:0;
filter:alpha(opacity=0);
z-index:99;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
}
.MBLSharetip span {
position:absolute;
content:" ";
border:solid rgba(0,0,0,0);
height:0;
width:0;
top:100%;
border-top-color:#333;
left:50%;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
border-width:7px;
margin:0 0 0 -7px;
}
.MBLSharetip a {
color:#f16786;
}
.MBLSharetip:hover {
background:#3D566E;
}
.MBLSharetip:hover span {
border-top-color:#3D566E;
}
.tooltipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.tooltipContainer a {
width:100%;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeF0rP2gFwtMqxWbIwwpZsc1oFtPMcWIp8GDvNdFPnNSNvMm-abChrb9ILS-PMNQ0s0T7DZoJ9LFo7BrF06Df6IdMhyVcQUQRQ2Wbqq8BXYgkxcK5CNZxKnCtFD2nsw6uLYlIDz7WS90vh/s1600/sprites.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.sharingLink {
display:block;
position:absolute;
text-indent:-9999px;
}

After adding the above CSS codes, again in the template search for ending </head> tag and just above it paste the following jQuery code:

<script type='text/javascript'>
 /*<![CDATA[*/
$(document).ready(function() {
    textToShare = '';
    $(document).mousemove(function(m) {
        generateTooltipPosition();
    });
});
$(document).mouseup(function() {
    $(document).mousemove(function(m) {
        generateTooltipPosition()
    });
    var textToShare = getTextToShare();
    var MBLSharetip = document.getElementById("MBLSharetip");
    if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
    var textToShare = getTextToShare();
    var tooltipTitle = null;
    var newTooltipTitle = $("#MBLSharetip").attr("title");
    if (newTooltipTitle == "") return;
    if (newTooltipTitle !== tooltipTitle) $('#MBLSharetip').animate({
        opacity: 0
    }, 30);
    if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
    if ($('#MBLSharetip').show()) {
        $('#MBLSharetip').animate({
            opacity: 0
        }, 30);
    }
});
function showMeTooltip() {
    var pageURL = window.location.toString();
    var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;
    $('#MBLSharetip').show();
    $('#MBLSharetip').animate({
        opacity: 1
    }, 30);
    $('#sendToTwitter').attr('href', twitterLink);
}
function getTextToShare() {
    shareTxt = '';
    if (window.getSelection) {
        shareTxt = window.getSelection();
        generateTooltipPosition();
    } else if (document.getSelection) {
        shareTxt = document.getSelection();
        generateTooltipPosition();
    }
    return shareTxt;
}
function generateTooltipPosition() {
    var selection = window.getSelection && window.getSelection();
    if (selection && selection.rangeCount > 0) {
        range = selection.getRangeAt(0);
        pos = $(window).scrollTop();
        selection_text = selection.toString(), rect = range.getBoundingClientRect();
        $('#MBLSharetip').css({
            top: (rect.top + pos - 20) - 32 + 'px',
            left: rect.left + (rect.width / 2) + 'px',
        });
    }
}
/*]]>*/
</script>

Now lastly, to display the widget we need to add the HTML code in the template. Search for the ending </body> tag and just above it paste the following code:

<script>var twitterAccount = "mybloggerlab";</script>
    <div class="MBLSharetip" id="MBLSharetip">
         <div class="tooltipContainer"><a id="sendToTwitter" href="" class="sharingLink twitter"><span></span></a></div>
     </div>

Once everything is done press the "Save Template" button present towards the top of your screen and you're done. Congratulations, you have successfully installed the widget on your site. Now visit your blog and select any text to see what happens next.

We hope this article may have helped you to add more Twitter friendly features to your BlogSpot site. Do let us know about your thoughts in the comment section below
0

How To Find Numeric ID Of Your Google+ Profile

How To Find Numeric ID Of Your Google+ Profile


Recently Google Plus offered some changes to profile URL. Now Google+ is allowing its users to set custom URL for their profile. Like my old Google+ profile link was
https://plus.google.com/113339369699471770120
and now it has been changed to https://plus.google.com/+RahulIppar/ but still in many cases you have to use your numeric ID, like most of widget generators on Helper Blogger uses Google+ numeric ID because I published them before this change. Also in most of the Google+ widgets you are required to enter numeric ID of your Google+ profile.

How to find your Google+ Numeric ID?


It is very easy process to find out your numeric ID. Just follow me step by step :)
  1. Login to your Google+ Profile
  2. Go to your profile
  3. Right click on your name and from list choose Copy link address 

  4. The link will look like this: https://plus.google.com/113339369699471770120
  5. The numbers in bold (113339369699471770120) is my ID so your ID will look like this.
  6. That's it :)
Hope you guys found this tutorial easy. If you have any queries related to this then feel to comment below also if you any know any other easier method then suggest it below.
0

Thursday, January 22, 2015

HowTo Add a Floating Social Media Widget With Mouse Hover Effect

HowTo Add Floating Social Media Widget With Mouse Hover Effect



Hey Friends! Today I am going to share a Awesome Social Media widget for blogspot platform. In these days social popularity is very and most important thing for a blog because the social media popularity brings tons of traffic and page views to a blog. This widget has a set of five social media properties i.e. Facebook, Twitter, RSS, Google plus and Pinterest. This widget works on some very simple but effective CSS and java-script coding. The widget has sliding effect whenever a visitor will hover on a social profile, it will appear with a slide effect of that profile.


Where This Widget Will Appear:-

Before, we get on to our Tutorial let us first learn where this widget will appear in a website. Since, this is a Sleek Widget. Therefore, it is extremely small in size so it wouldn’t take a large space on a website. We have integrated a Slide out Functionality that would produce sparks in the eyes of visitors. It will appear at the Top-left side of the screen.

How To Add This Widget To Your Blogger Blog:-

The steps mentioned below are extremely simple. We have tried our best to minimize the steps. 

So, let us start with our tutorial. Consider the following steps.
  1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
  2. Paste this code inside it.
    If your blog already have a jQuery Plugin then remove the highlighted code.
    (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)
    <style type="text/css">
    ul#social {
        position: fixed;
        margin: 0px;
        padding: 0px;
        top: 10px;
        left: 0px;
        list-style: none;
        z-index:9999;
    }
    ul#social li {
        width: 100px;
    }
    ul#social li a {
        display: block;
        margin-left: -2px;
        width: 100px;
        height: 70px;    
        background-color:#fff;
        background-repeat:no-repeat;
        background-position:center center;
        border:1px solid #AFAFAF;
        -moz-border-radius:0px 10px 10px 0px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -khtml-border-bottom-right-radius: 10px;
        -khtml-border-top-right-radius: 10px;
        -moz-box-shadow: 0px 4px 3px #000;
        -webkit-box-shadow: 0px 4px 3px #000;
    }
    ul#social .twitter a{
         background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSOpi0b54r5cpwa2Xd9pk5U4BfsmF4uH2rEtPX9erGpP9g8WuAvNMBf-Y9_ZpWW2xBikZujeJhevucoaamZoXINKadou0VJFkohltTpa_SqI0r5WZ61EGBN7VXPpWH7mqHxqiJcBLrcc/s1600/Twitter.png)no-repeat;
    background-position:center center;
    }
    ul#social .googleplus a      {
        background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA_nRzvNRajZlXrBjslXbvc6uY7uX33v6Nx7m0vVN0O9RUDFvRJQi25Yd_UeZrC3ADAMDy28iiLICSl-QNr6KwLo-ONZK5hA_5NYKD5F8LznGBr1mZVOI6vGPW6fkJw5B2PbdHsSOsCyE/s1600/GOOGLE+PLus.png)no-repeat;
    background-position:center center;
    }
    ul#social .facebook a      {
        background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNdD0If-_rbfSuA_es308nG0o0zib7G7gMJlI0AGUww-X8lC_lsM2y5fgCmVA_tSKv_MqW6lLYQZOO8R9OALxg7_3eGd7Z2BOjvhPiIQoslJmf1zE4s0OPRyDlL36kNEVgOUGTQuVUDmo/s1600/Facebook.png)no-repeat;
    background-position:center center;
    }
    ul#social .rss a      {
        background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUlAmqHqsRLMP3ddNCUscwIKqhTrbaoURou_fb8rJoPKd2ec6dTVQUAbSH9ZTHJGnOJoxbzgVvUfK7kghKx9flzBMhWYoy6HdmGzO4hWdopani4swdJVb-00_wXB_qVL_TjCaH_32HJNI/s1600/rss.png)no-repeat;
    background-position:center center;
    }
    
    ul#social .pinterest a   {
        background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6k0AUsJo2WAZs5kZH-_Je3VMAvMRR_RfEhFWbaEjRmDxXYG0YdekNkC8vaHEC_KjelRNGwzp5YXjo3Az8jS9Xg1PIDthjTk_ihZDupfrgC6jTYAVyPVM7cx51LpEGwckSd8T1NQs3ZAI/s1600/Pinterest.png)no-repeat;
    background-position:center center;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript'>
    $(function () {
        $('#social a').stop().animate({
            'marginLeft': '-85px'
        }, 1000);
    
        $('#social > li').hover(
            function () {
                $('a', $(this)).stop().animate({
                    'marginLeft': '-2px'
                }, 200);
            },
            function () {
                $('a', $(this)).stop().animate({
                    'marginLeft': '-85px'
                }, 200);
            }
        );
    });
    </script>
    <ul id='social'>
     <li class='twitter'><a href='#' title='Twitter'></a></li>
     <li class='googleplus'><a href='#' title='Google Plus'></a></li>
     <li class='facebook'><a href='#' title='Facebook'></a></li>
     <li class='rss'><a href='#' title='Rss'></a></li>
     <li class='pinterest'><a href='#' title='Pinterest'></a></li>
    </ul>
    
    • After Adding the above code Replace # with your Profile link
  3. Now save the widget and See your blog. :D
If you Liked it! then Feel Free to Share this widget. Kindly let me know your views About this Widget in the comment box below.
0

How To Add an Expandable Social Sharing Widget to Blogger

How To Add an Expandable Social Sharing Widget to Blogger

Add an Expandable Social Sharing Widget to Blogger
Today We shows us how to add an expandable social sharing widget to your Blogger site, allwing you and your readers to drive more traffic to your blog. Although this widget is built with HTML, CSS, jQuery, Javascript, and XML, it won’t affect your blog’s loading speed.
Let’s get started:
  • Login to your Dashboard, then go to Template >> Editor.
  • Using CTRL + F, locate </head> and paste the following code above it:
<script src='http://code.jquery.com/jquery-1.9.1.js'/>
 <link href='https://googledrive.com/host/0B8D3MQmcZTyvZllGZW55UGhJM0k' rel='stylesheet' type='text/css'/>
 <script>
 function toggle(d)
 {
 var o=document.getElementById(d);
 o.style.display=(o.style.display==&#39;none&#39;)?&#39;inline-block&#39;:&#39;none&#39;;
 }
 $(document).ready(function(){
 $(&quot;#social-expand&quot;).click(function(){
 $(&quot;#expand-plus&quot;).toggle();
 $(&quot;#expand-minus&quot;).toggle();
 });
 });
 </script>
  • Using CTRL + F, locate <b:if cond=’data:blog.metaDescription == &quot;&quot;’> and paste the following code above it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='social-div'>
 <a  class='facebook' expr:href='&quot;  http://www.facebook.com/sharer.php?u=&quot; + data:post.url'  id='socialshare' target='_blank'>
 <img  src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'  style='margin-right:8px;margin-bottom:-7px;margin-left:-5px;'/>
 Share on Facebook
 </a>
 <a  class='Twitter'  expr:href='&quot;http://twitter.com/share?text=&quot; +  data:post.title' id='socialshare' target='_blank'>
 <img  src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'  style='margin-right:8px;margin-bottom:-5px;margin-left:-5px;'/>
 Share on Twitter
 </a>
 <div id='expand-social' style='display:none;'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' id='google-plus' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/>
 </a>
 <a expr:href='&quot;  http://www.stumbleupon.com/submit?url=&quot; + data:post.url'  id='stumbleupon' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/>
 </a> </div>
 <script>
 $(&#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;).click(function(event) {
 var width  = 575,
 height = 400,
 left   = ($(window).width()  - width)  / 2,
 top    = ($(window).height() - height) / 2,
 url    = this.href,
 opts   = &#39;status=1&#39; +
 &#39;,width=&#39;  + width  +
 &#39;,height=&#39; + height +
 &#39;,top=&#39;    + top    +
 &#39;,left=&#39;   + left;
 window.open(url, &#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;, opts);
 return false;
 });
 </script>
 <div class='share-toggle'>
 <div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
 <div class='plus-div'>
 <a id='expand-plus'> + </a>
 </div>
 <div class='minus-div'>
 <a id='expand-minus'> - </a>
 </div>
 </div>
 </div>
 </div>
 </b:if>
  • Click on Save.
Your expandable social sharing widget should be installed and working now.
0