Android Helping is a way to get information on Android knowledge.

Share Highlighted Text To Twitter Blogger Widget

When terms came to increase traffic using social media(s). Then wise bloggers do not forget twitter.
Twitter is a best platform to support or promote an official content. I myself suggest my all friends to share there each post to twitter. The button to share post is already developed but now i have a gadget for you that helps you to share only that words you have highlighted using mouse pointer. That amazing gadget is coded by TFT team.

Why to Add this widget?

When time comes to add widgets to blogger template than i prefer only those that do not have any bad affect and are light weight and this widget is one of those it is so much light weight widget that it will not affect your template. Moreover it will integrate twitter and also make your template social friendly.
Demo is seen in piture

Process to Add Share Highlighted Text To Twitter Blogger Widget

I have the code that is tested and being used by many friends. This code do need any more change. Let us read Share Highlighted Text To Twitter Blogger Widget process.
First of all you need to be logged in to your blogger dashboard after that
  • Go to template section and then click on Edit Html
  • Right click any where inside template to active mouse editor.
  • Now Press Ctrl + F this will launch search bar.
  • In this search bar find for ]]></b:skin>
  • Copy whole code from below and paste it above ]]></b:skin>
.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(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;
}
  • Now find for </head> and just above it paste the following 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>
  • Now find for </body> tag and just above it paste the following code
<script>var twitterAccount = “ammarmalghani”;</script>
<div class=”MBLSharetip” id=”MBLSharetip”>
<div class=”tooltipContainer”><a id=”sendToTwitter” href=”” class=”sharingLink twitter”><span></span></a></div>
</div>
Now just click on Save Template and we have finished adding Share Highlighted Text To Twitter Blogger Widget. Go to your blog and test this tool.

Final Words for Share Highlighted Text To Twitter Blogger Widget

I have done various exercises on this code to make it best if it does not fit with your template or you do not like its any of affect this please comment i will tell you all possible steps to make it beautiful for you..
At last, i want to say that InshAllah soon you will start getting traffic from twitter and this will increase your authorship too. So, why not to get more benefit by ding small work.

Share:

No comments:

Post a Comment

If you have any problem and questions related to this article then please ask them. One of our moderators will reply soon. Please keep in mind that all the comments are checked for moderation and spam ones are deleted immediately. These spam contacts also include those which are not related to this article. Thanks for understanding !

Popular Posts

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.