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

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


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

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

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

  • نتوجه الى مدونة البلوجر 
  • ثم قالب ثم تحرير 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(http://2.bp.blogspot.com/-P1HMdLuxt8c/VLTO0QWjwtI/AAAAAAAAFMo/pNAkrrrdPe8/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>

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

مقالات ذات صلة

Previous
Next Post »

2 التعليقات

التعليقات
7/16/2015 delete

شكرا على الافاده والمعلومه

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا