كيفية تحديد نص والتغريد به على تويتر لمدونات بلوجر

أعزائي زوار ومتابعي الكرام

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

هذا العمل واليوم بفضل الله لقد تم وها نحن نقدم لكم طريقة تحديد نص وتغريد به على تويتر .

للمعاينة أنقر هنا

- طريقة التركيب :

1-ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوح التحكم اختر قالب ثم اضغط على تحرير قالب : HTML

3- ابحث عن الوسم :
]]></b:skin>

4- اضف الكود التالي فوقه .

 .HOMESharetip {
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;
}
.HOMESharetip 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;
}
.HOMESharetip a {
color:#f16786;
}
.HOMESharetip:hover {
background:#3D566E;
}
.HOMESharetip: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://cdn.top4top.co/i_fa424fb2ee1.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;
}

5- ابحث عن الوسم :
</head>

6-اضف الكود التالي فوقه .

 <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 HOMESharetip = document.getElementById("HOMESharetip");
    if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
    var textToShare = getTextToShare();
    var tooltipTitle = null;
    var newTooltipTitle = $("#HOMESharetip").attr("title");
    if (newTooltipTitle == "") return;
    if (newTooltipTitle !== tooltipTitle) $('#HOMESharetip').animate({
        opacity: 0
    }, 30);
    if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
    if ($('#HOMESharetip').show()) {
        $('#HOMESharetip').animate({
            opacity: 0
        }, 30);
    }
});
function showMeTooltip() {
    var pageURL = window.location.toString();
    var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;
    $('#HOMESharetip').show();
    $('#HOMESharetip').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();
        $('#HOMESharetip').css({
            top: (rect.top + pos - 20) - 32 + 'px',
            left: rect.left + (rect.width / 2) + 'px',
        });
    }
}
/*]]>*/
</script>

7-ابحث عن الوسم :
</body>

8- اضف الكود التالي فوقه .

<script>var twitterAccount = "homeblog7";</script>
    <div class="HOMESharetip" id="HOMESharetip">
         <div class="tooltipContainer"><a id="sendToTwitter" href="" class="sharingLink twitter"><span></span></a></div>
     </div>

9-احفظ القالب .

إذا كان لديك أي أستفسار فصندوق التعليقات ملك لك .