كيفية إضافة زر تويتر على النص المحدد في البلوجر

المواقع الأجتماعية هي واحدة من افضل الطرق لزيادة عدد الزوار اليومي على موقعك الخاص ،  و هناك العديد من المواقع و المدونات التي تحصل على الالاف من الزيادة من على هذه المواقع الاجتماعية مما يجعلها تكسب شهرة كبيرة في بضعة أشهر ، و من هنا ستكون قادر على كسب عدد كبير من الزوار لمدونتك في وقت وجيز و بدون مقابل .

التويتر من المواقع الاجتماعية الأكثر شعبية و الذي يستخدم بشكل واسع على الأنترنت ، بحيث يستخدمه الملايين في اليوم  لأغراض مختلفة ، لذلك يمكننا الحصول على على بعض الفوائد منه . و من هنا سنتطرق الى موضوع جميل و هو اضافة زر غرد لتويتر على النص المحدد في منصة التدوين البلوجر .

    للمعاينة جرب تظليل نص هنا    

 كيفية إضافة زر تويتر على النص المحدد في البلوجر

• نتوجه الى مدونة البلوجر 
• ثم قالب ثم تحرير HTML
• ثم ابحث عن الكود الثالي (استعمل CTRL+F)

</head>

• ضع الكود الثالي من فوق الكود السابق

<style>
.SBTTweet {
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;
}
.SBTTweet 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;
}
.SBTTweet a {
color:#f16786;
}
.SBTTweet:hover {
background:#5EA9DD;
}
.SBTTweet:hover span {
border-top-color:#5EA9DD;
}
.SBTtipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.SBTtipContainer a {
width:100%;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRDeEPF8uziknDDmbtP9PPmpnA4T4cw8Q08dY1wEnplvv8ZRNCK_4FutfDivrft-TexMb8R4QVf1FK7IcCBgy0vyTYGCWfE1wPkaNbvy2fmaZK5__oZVlzmWjtBnuftET5BrzEYdq_A0/s1600/sbt-tweet.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;
}

اقرأ ايضا: كيفية تغيير شكل صندوق الاقتباس في مدونات بلوجر

</style>
<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 SBTTweet = document.getElementById("SBTTweet");
if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
var textToShare = getTextToShare();
var tooltipTitle = null;
var newTooltipTitle = $("#SBTTweet").attr("title");
if (newTooltipTitle == "") return;
if (newTooltipTitle !== tooltipTitle) $('#SBTTweet').animate({
opacity: 0
}, 30);
if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
if ($('#SBTTweet').show()) {
$('#SBTTweet').animate({
opacity: 0
}, 30);
}
});
function showMeTooltip() {
var pageURL = window.location.toString();
var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + mytwitterAccount + "&url=" + pageURL;

اقرأ ايضا: إضافة زر تكبير الشاشة والصعود للأعلى

$('#SBTTweet').show();
$('#SBTTweet').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();
$('#SBTTweet').css({
top: (rect.top + pos - 20) - 32 + 'px',
left: rect.left + (rect.width / 2) + 'px',
});
}
}
/*]]>*/
</script>

• ثم ابحث مرة اخرى عن الكود الثالي 

</body>

• ضع الكود الثالي من فوق الكود السابق

<script>var mytwitterAccount = &quot;HUKMAT&quot;;</script>
    <div class='SBTTweet' id='SBTTweet'>
         <div class='SBTtipContainer'><a class='sharingLink twitter' href='' id='sendToTwitter'><span/></a></div>
     </div>

و أخيرا اضغط حفظ .