![]() |
"Select Text and Share it on Twitter" Widget for Blogger |
How to Add "Select Text and Share it on Twitter" Widget in Blogger?
To install this widget on blog, Just follow the easy steps given below:Go to Blogger Dashboard> Template> Edit HTML
Press CTRL + F to enable search box then Search for
]]></b:skin>
Now, Copy and paste the following CSS code just above it.
.BWGSharetip { 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; } .BWGSharetip 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; } .BWGSharetip a { color:#f16786; } .BWGSharetip:hover { background:#3D566E; } .BWGSharetip: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/AVvXsEiWGzMfJGumSMT879KA3HMoPBYCouMmyZLa2vBB2bxMR33E4R8xT5PjRLVRYbJDxatrTUx5QpGwgT8InMqsuq2Ny6ZpsgVMEb6tuPdDSh3r4TP1EDCqjg0KpYKeWAeUjMP2H5egNqERxAsd/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; }
Next search for
</head>
tag and copy paste the following code just above it. <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 BWGSharetip = document.getElementById("BWGSharetip"); if (textToShare != '') showMeTooltip(); }); $(document).click(function() { var textToShare = getTextToShare(); var tooltipTitle = null; var newTooltipTitle = $("#BWGSharetip").attr("title"); if (newTooltipTitle == "") return; if (newTooltipTitle !== tooltipTitle) $('#BWGSharetip').animate({ opacity: 0 }, 30); if (textToShare != "") showMeTooltip(); }); $(window).resize(function() { if ($('#BWGSharetip').show()) { $('#BWGSharetip').animate({ opacity: 0 }, 30); } }); function showMeTooltip() { var pageURL = window.location.toString(); var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL; $('#BWGSharetip').show(); $('#BWGSharetip').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(); $('#BWGSharetip').css({ top: (rect.top + pos - 20) - 32 + 'px', left: rect.left + (rect.width / 2) + 'px', }); } } /*]]>*/ </script>
Now final code is an HTML code which we need to add to show the widget. Just search for
</body>
tag and paste the following HTML code just above it. <script>var twitterAccount = "nitinmaheta";</script> <div class="BWGSharetip" id="BWGSharetip"> <div class="tooltipContainer"><a id="sendToTwitter" href="" class="sharingLink twitter"><span></span></a></div> </div>
Now save your template and you're done.
Drop your comments and questions below.
0 Comments