How To Pick Out Text In Addition To Part It To Twitter Widget Inwards Blogger

In the past, nosotros conduct keep already showed yous how to add together Twitter cards inward blogger, add animated flight twitter aeroplane inward blogger, add a tweet to unlock widget inward blogger together with how to add together Twitter feeds inward blogger. Today nosotros conduct keep come upwardly up amongst approximately other Twitter widget for your BlogSpot site that is unique together with efficient plenty to assist yous gain to a greater extent than exposure to your site amongst the assist of Twitter. In this article, nosotros volition exhibit yous how to pick out text together with part it to Twitter widget inward blogger.

What is Select text together with part it to Twitter?

It is an efficient plugin that allows your users an mightiness to pick out whatsoever text on your weblog or website to part it (selected text) on their favorite social site Twitter. It is extremely slowly to install together with use, addition extremely lightweight inward nature.

In the higher upwardly screenshot, nosotros conduct keep shown how this widget works. Whenever a modest portion of the text is pick out a Twitter icon appears, upon clicking that icon yous tin part that slice of text to your twitter account, making sharing easier.

You tin depository fiscal establishment jibe out the demo of this widget here. 

How to Install this widget?

The installing instructions are extremely unproblematic together with would conduct keep hardly few seconds to complete. The start thing, yous take away to do is to login to your blogger draw of piece of occupation concern human relationship together with pick out the weblog you'll similar to install the widget on. Now to Template >> Edit HTML >> Search for ]]></b:skin> and merely higher upwardly it glue the next 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 bridge {
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 bridge {
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/AVvXsEhzSwZZI36ovG9e3N_hVr-k5eT93TgAV44HKDoeToQiOdpUSoPLdAOYcBlaruSjUBBXkowlWfa0Dx0qe1K-hxETJaWby2ZZQKkhjOlAtCEZvwCaQ-DNPRhyphenhyphengRP8WHPneTaWGl-Ar6Jq-mL5/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 higher upwardly CSS codes, 1 time to a greater extent than inward the template search for ending </head> tag together with merely higher upwardly it glue the next 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);
    }
});
business office 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);
}
business office getTextToShare() {
    shareTxt = '';
    if (window.getSelection) {
        shareTxt = window.getSelection();
        generateTooltipPosition();
    } else if (document.getSelection) {
        shareTxt = document.getSelection();
        generateTooltipPosition();
    }
    furnish shareTxt;
}
business office generateTooltipPosition() {
    var alternative = window.getSelection && window.getSelection();
    if (selection && selection.rangeCount > 0) {
        hit = 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 nosotros take away to add together the HTML code inward the template. Search for the ending </body> tag together with merely higher upwardly it glue the next 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" push introduce towards the locomote past times of your covert together with you're done. Congratulations, yous conduct keep successfully installed the widget on your site. Now watch your weblog together with pick out whatsoever text to run into what happens next.

We promise this article may conduct keep helped yous to add together to a greater extent than Twitter friendly features to your BlogSpot site. Do allow us know almost your thoughts inward the comment department below.