How To Conduct Text As Well As Part It To Twitter Widget Inwards Blogger

In the past, nosotros direct maintain already showed yous how to add together Twitter cards inwards blogger, add animated flight twitter plane inwards blogger, add a tweet to unlock widget inwards blogger together with how to add together Twitter feeds inwards blogger. Today nosotros direct maintain come upwards up amongst about other Twitter widget for your BlogSpot site that is unique together with efficient plenty to assistance yous gain to a greater extent than exposure to your site amongst the assistance of Twitter. In this article, nosotros volition present yous how to choose text together with portion it to Twitter widget inwards blogger.

What is Select text together with portion it to Twitter?

It is an efficient plugin that allows your users an mightiness to choose whatever text on your weblog or website to portion it (selected text) on their favorite social site Twitter. It is extremely slowly to install together with use, summation extremely lightweight inwards nature.

In the to a higher house screenshot, nosotros direct maintain shown how this widget works. Whenever a pocket-size constituent of the text is choose a Twitter icon appears, upon clicking that icon yous tin portion that slice of text to your twitter account, making sharing easier.

You tin banking concern stand upwards for out the demo of this widget here. 

How to Install this widget?

The installing instructions are extremely unproblematic together with would direct maintain hardly few seconds to complete. The showtime thing, yous involve to do is to login to your blogger describe of piece of employment organisation human relationship together with choose the weblog you'll similar to install the widget on. Now to Template >> Edit HTML >> Search for ]]></b:skin> and merely to a higher house 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/AVvXsEiBSPHy5Baqkgn1IVYouukpmNYFkZWiJrCPrS1bSAzAigl9tTxXS4n7-a1ReCE9BI_0sWg7A1qOzUgNmp-iCMulVt5RdfmhLAV7IG3o3oCBf58CPkb1Z2_ao8nj0XRC1txi489WQPAr3Gbb/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 to a higher house CSS codes, in ane lawsuit again inwards the template search for ending </head> tag together with merely to a higher house 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 pick = window.getSelection && window.getSelection();
    if (selection && selection.rangeCount > 0) {
        attain = 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 involve to add together the HTML code inwards the template. Search for the ending </body> tag together with merely to a higher house 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 clit acquaint towards the overstep of your hide together with you're done. Congratulations, yous direct maintain successfully installed the widget on your site. Now catch your weblog together with choose whatever text to come across what happens next.

We promise this article may direct maintain helped yous to add together to a greater extent than Twitter friendly features to your BlogSpot site. Do allow us know virtually your thoughts inwards the comment department below.