Cara Menyeleksi Teks dan Membagikannya di Twitter

Cara Menyeleksi Teks dan Membagikannya di Twitter - Mungkin anda sudah tidak asing lagi dengan kata Twitter. Twitter adalah salah satu sosial media yang cukup memiliki banyak penggemarnya dikalangan pengguna internet, selain facebook dan google+ dan beberapa sosial media yang lainnya. Walaupun saat ini pengguna twitter tidak terlalu melampaui para pengguna facebook akan tetapi twitter memiliki tempat tersendiri dihati para penggemarnya dan semakin hari semakin berkembang.

Pada artikel kali ini saya akn berbagi sedikit tips tentang bagaimana menggabungkan antara Blogger dan juga Twitter, sebagai media untuk mempromosikan blog kita maupun beberapa hal lain yang kita sukai. Karna Widget Twitter sendiri telah memiliki tempat di Dunia Blogger ini menjadi salah satu widget yang pasti ada.

Kembali lagi kita ke judul artikel klai ini, seperti pada judul kali ini tentang cara menyeleksi teks pada sebuah artikel lalu kita dapat membagikannya ke media sosial secara langsung dengan widget yang timbul setelah kita menyeleksi teks yang kita inginkan. Mungkin anda sudah sering menyeleksi teks diblogger atau bahasa ringannya mengcopy teks, namun sebelumnya kita hanya dapat mengcopy teks tersebut, dan tidak bisa berbagi kata tersebut kepada orang lain ditwitter. Nah,, pada kesempatan kali ini saya akan berbagi tips bagaimana cara melakukannya.

Untuk Lebih Jelasnya, silahkan Anda menyeleksi teks yang ada didalam Blockquote dibawah ini untuk Demo!

SILAHKAN BLOCK TEKS INI!

Bagaimana? apakah anda tertarik untuk menambahkan widget share teks di twitter ini? Jika anda berminat silahkan ikuti langkah-langkahnya dibawah ini:

Cara Menyeleksi Teks dan Membagikannya di Twitter
1. Masuk ke Akun Blogger
2. Pilih Template > Edit HTML > lalu cari kode ]]></b:skin> dan paste kode berikut sebelum kode tersebut.

 .SemuaTutorialku {
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;
}
.SemuaTutorialku 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;
}
.SemuaTutorialku a {
color:#f16786;
}
.SemuaTutorialku:hover {
background:#3D566E;
}
.SemuaTutorialku: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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXjz1017NNC7ZFnmqQUrpP5W3bSSTBZaJMHsFXkefbDe8ZoEVsgyCVl2xptRzFHDCppI7jkqJN1nrs7RG5Hqm_5pWZ4RQjmhrOT0pJAMTZGhDgpD9htS9wIZCuMyakxDGAR4qCvF2xM0y/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;
} 

3. Selanjutnya cari kode </head> dan paste kode berikut tepat diatasnya.

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

4. Terkahir cari kode </body> dan paste kode berikut tepat diatasnya.

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

5. Simpan Template.

Selamat mencoba, semoga bermanfaat!
Saya tunggu komentarnya! :)