Social blogging pays and SEO optimize. Quote me! In this article, we will show you how to select text and share it to Twitter widget in blogger. 

How to Install this widget in one step:
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 and make sure you backup your 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/AVvXsEjOYetsYc7d1ZWnPoOySx0tUOoAwi_wj0chWHBjXWUeDr2k9Ai-Ba11YhfKg38EDmTxX0eb7cEo3EegCb2aV-qGMV-luwRPLRAFVx1uZDKcWH5dk21blrGtIIfG632kuoWD7inte4_iou5P/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; }

Save the code and 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>

Lets now show-off this widget. 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>

Thats all. Click SAVE TEMPLATE and preview your installation by opening your blog and try selecting any text of your choice. Thank me later. Let me cross my legs and take a drink. Winks (-_-)


Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.