Oct 27, 2015

Select Text & Share it To Twitter Widget for Blogger

Wanna Learn How To Add Select Text and Share it To Twitter Widget in Blogger Blog? So don't worry today we are here with Twitter gadget for your BlogSpot Blogger Blog that is one of a most beautiful and sufficiently productive to help you increase more exposure to your blog with the assistance of Twitter. So In this post, we learn how to add select text and share it to twitter widget in blogger blog.

Select Text & Share it To Twitter Widget for Blogger Blog


See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.

Find Our Latest Blogger Widgets Here.

What is Select Text and Share it To Twitter?

This is an efficient twitter widget for blogger blog which makes it easy for your readers to share any piece of text to twitter. This widget allows your blog visitors to tweet selected text on twitter easily. Whenever a visitor visit your blog and select any line of text a small black colored twitter tweet button will be visible now if your readers want that selected line to be tweeted on twitter then they just have to click on that black colored twitter button.

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.

.MBGSharetip { 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; } .MBGSharetip 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; } .MBGSharetip a { color:#f16786; } .MBGSharetip:hover { background:#3D566E; } .MBGSharetip: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(http://4.bp.blogspot.com/-HCutv6Nw8iM/VK_Q-v7WT1I/AAAAAAAAFTY/rbxVAhvs_dM/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 MBGSharetip = document.getElementById("MBGSharetip");    if (textToShare != '') showMeTooltip();});$(document).click(function() {    var textToShare = getTextToShare();    var tooltipTitle = null;    var newTooltipTitle = $("#MBGSharetip").attr("title");    if (newTooltipTitle == "") return;    if (newTooltipTitle !== tooltipTitle) $('#MBGSharetip').animate({        opacity: 0    }, 30);    if (textToShare != "") showMeTooltip();});$(window).resize(function() {    if ($('#MBGSharetip').show()) {        $('#MBGSharetip').animate({            opacity: 0        }, 30);    }});function showMeTooltip() {    var pageURL = window.location.toString();    var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;    $('#MBGSharetip').show();    $('#MBGSharetip').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();        $('#MBGSharetip').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 = "mybloggerguides";</script>    <div class="MBGSharetip" id="MBGSharetip">         <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.


So above guides is about How To Add Select Text and Share it To Twitter Widget in Blogger Blog? 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. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.