Hello Readers My Name is Muzamil Hussain.Today we have concocted Twitter gadget for your BlogSpot Blogger Blog that is one of a most beautiful and sufficiently productive to help you increase more exposure to your blog with the assistance of Twitter. In this post, we learn how to select text and share it to twitter widget in blogger blog. Blogger Widget: Add Select Text And Share To Twitter. Our Last Post Was About Blogger Widget: Add Latest Twitter Profile in Blogger.
Step # 3: Now find a code </head> and just above it paste the following code
This Post Is About Blogger Widget: Add Select Text And Share To Twitter. If You Found And Query Mistake or You Have Any Kind Problem Related Blogger Widgets Then Comment Here.if you like this post so share your friends and keep visit our site.
Preview This Widget:
 |
| Add Select Text And Share To Twitter:Blogger Widget |
Step # 1: Login to Blogger > Select Your Blog and go to Template > Edit HTML.
Step # 2: Search for ]]></b:skin> and Just above it paste the following code.
.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;
}
Step # 3: Now find a code </head> and just above it paste the following code
<script type=’text/javascript’>Step 4: Now find </body> tag and just above it paste the following code
/*<![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>
<script>var twitterAccount = “MSLangah”;</script>Step 5: Click on Save Template.
<div class=”MBLSharetip” id=”MBLSharetip”>
<div class=”tooltipContainer”><a id=”sendToTwitter” href=”” class=”sharingLink twitter”><span></span></a></div>
</div>
Final Words:
This Post Is About Blogger Widget: Add Select Text And Share To Twitter. If You Found And Query Mistake or You Have Any Kind Problem Related Blogger Widgets Then Comment Here.if you like this post so share your friends and keep visit our site.
EmoticonEmoticon