Make Inline Quote Tweet use jQuery for Blogger

Tidak bisa dipungkiri keberadaan web jejaring sosial saat ini meraja-lela dalam menyebarkan berita-berita. Kecepatan kebutuhan manusia sekarang akan update berita sudah melebihi dari perkiraan. Twitter adalah salah satu web-jejaring yg sekarang merajai dunia secara global. Konon negara Indonesia merupakan salah satu terbesar di dunia sebagai pemakai aktif si twitter :-O
Adapun salah satu proses kinerja dari twitter-web yaitu dengan melakukan pengiriman link! Sekarang AA Koben akan berbagi satu tutorial cara grab kata/kalimat yg berada pada artikel post, kemudian akan dilanjutkan ke web twitter. Cara grab disini bukan seperti biasanya, melainkan dengan melakukan HTML <a> tag terhadap kalimat/kata tujuan.

Source & demo:

codepen.io/SachaG/full/NPePzX

Bahan-bahan membuat inline Quote tweets.

a[href~="#twitter"], .twitter-link {
background-color: #fff;
padding: 2px;
font-size: initial;
position: relative;
transition: background-color 300ms;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a[href~="#twitter"]:after, .twitter-link:after {
width: 0px;
height: 23px;
position: relative;
right: -8px;
top: 2px;
vertical-align: text-bottom;
transition: width 300ms;
content: " ";
display: inline-block;
background: #fff url("https://abs.twimg.com/favicons/favicon.ico") right 6px center no-repeat;
background-size: 18px 18px;
}
a[href~="#twitter"]:hover, .twitter-link:hover {
background-color: #55ACEE;color: #fff
}
a[href~="#twitter"]:hover:after, .twitter-link:hover:after {
width: 32px;
}

Trik ini memakai jQuery, jadi harus sudah tertanam script<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var capitaliseFirstLetter = function (string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    // take a text and a link, and build the twitter link
    var buildTwitterLink = function (text, url) {
        var encodedUrl = encodeURIComponent(url);
        var referrer = encodeURIComponent("http://www.YOUR-ADDRESS.com");
        return "https://twitter.com/intent/tweet?original_referer=" + referrer + "&url=" + encodedUrl + "&text=" + encodeURIComponent(text) + "&via=yourTwitterUsername";
    }
    $('[href="#twitter"]').each(function () {

        var $link = $(this);
        var text = "“" + capitaliseFirstLetter($link.text()) + "”";
        var url = "http://www.YOUR-ADDRESS.com" + window.location.pathname;
        var twitterLink = buildTwitterLink(text, url);

        $link.addClass('twitter-link').attr('href', twitterLink).attr('target', '_blank');
    });
});
//]]></script>

NB:
Gantikan http://www.YOUR-ADDRESS.com dengan alamat blog anda!
Cara pemakaian, ketika sobat akan melakukan posting sama halnya dengan mebuat tag <a>
Ex:

<p>Retro lo-fi raw denim est excepteur dreamcatcher. <a href="#twitter">Nullam malesuada erat ut turpis. Suspendisse urna nibh</a>, viverra non, semper suscipit, posuere a, pede.</p>
<p>Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. <a href="#twitter">Aliquam porttitor mauris sit amet orci</a>. Aenean dignissim pellentesque felis.</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>

Other technique:
Tweet selected text >> codepen.io/hugobessaa/pen/xDtri

Bye :-h