Make Inline Quote Tweet use jQuery for Blogger - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Inline Quote Tweet use jQuery for Blogger, we have prepared well for this article you read and download the information therein. hopefully fill posts Article jQuery, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Inline Quote Tweet use jQuery for Blogger
link : Make Inline Quote Tweet use jQuery for Blogger

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

Thus articles Make Inline Quote Tweet use jQuery for Blogger

that is all articles Make Inline Quote Tweet use jQuery for Blogger This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Inline Quote Tweet use jQuery for Blogger with the link address https://autopostingblogspot.blogspot.com/2015/03/make-inline-quote-tweet-use-jquery-for.html