![]() |
"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(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; }
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.
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. Here is a
screenshot of this widget that you can see how actually it works.
Go to Blogger Dashboard> Template> Edit HTML
Press CTRL + F to enable search box then Search for
Now, Copy and paste the following CSS code just above it.
Next search for
Now final code is an HTML code which we need to add to show the widget. Just search for
Now save your template and you're done.
Drop your comments and questions below.
![]() |
"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(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; }
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.
"Select Text and Share it on Twitter" Widget for Blogger
Reviewed by impart4you
on
July 09, 2016
Rating:

No comments: