Cara Cepat Membuat Widget Select Text and Tweet Di Blogger Update Terbaru

Sedikit Info Seputar Membuat Widget Select Text and Tweet Di Blogger Terbaru 2017 - Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Membuat Widget Select Text and Tweet Di Blogger, kami selaku Team Android Media telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Media. semoga isi postingan tentang Artikel Coding, Artikel Tutorial Blogspot, Artikel Widget, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Widget Select Text and Tweet Di Blogger Terbaru
link: Membuat Widget Select Text and Tweet Di Blogger

Berbagi Membuat Widget Select Text and Tweet Di Blogger Terbaru dan Terlengkap 2017

Membuat Select Text and Tweet Di Blogger - Belakangan ini saya mulai sering share artikel ke twitter melalui share button yang terdapat diblog namun menurut saya share button tersebut kinerjanya kurang powerfull karena pada saat share artikel yang muncul hanya link judul post dan menurut saya itu sedikit mengganggu karena saya harus mengcopy atau mengetik manual beberapa kata lagi untuk menyempurnakan tweet tersebut. Berbeda dengan wordpress yang dapat menggunakan sejenis plugin Select Text and Share it to Twitter, jadi saya berfikir untuk mencari script yang cara kerjanya sedikit mirif dengan plugin tersebut dan syukur alhamdulillah ketemu juga. Berikut penerapan Select Text and Share it to Twitter Widget in Blogger pada blog :

Sebagai demo silahkan select text atau block text di blog ini....!!!

Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum  ]]></b:skin> atau </style>

CSS.BWSTweet {
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;
}
.BWSTweet 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;
}
.BWSTweet a {
color:#f16786;
}
.BWSTweet:hover {
background:#5EA9DD;
}
.BWSTweet:hover span {
border-top-color:#5EA9DD;
}
.BWStipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.BWStipContainer a {
width:100%;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6eeqpU36R3yMdIhDp0iAIDWgYGWTsgjvKBYvA4X4x4KQ2yBn3FDZKwYbleElcdkbwd6kUD5ZhL9zxLmpAHRHYmrhNdk-_P0_tRnBSRu2zJ5BT7MHjpqK38aerxy79DqIYnShchZKFvI/s1600/BWS-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;
}

Step 3 > Copy kode HTML di bawah ini, setelah itu paste tepat di atas atau sebelum tag </Head>

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

Step 4 > Setelah itu simpan kode javascript di bawah ini tepat diatas atau sebelum tag </body>

JS<script>var mytwitterAccount = &quot;wahabsaputrabs&quot;;</script>
<div class='BWSTweet' id='BWSTweet'>
<div class='BWStipContainer'><a class='sharingLink twitter' href='' id='sendToTwitter'><span/></a></div>
</div>

Silahkan ganti text "wahabsaputrabs" Dengan username twitter anda.

Step 5 > Simpan Template dan lihat hasilnya.....

Demikian tutorial singkat tentang Cara Membuat Widget Select Text and Tweet Di Blogspot semoga bermanfaat. sekian dan terimah kasih.

Itulah sedikit Artikel Membuat Widget Select Text and Tweet Di Blogger terbaru dari kami

Semoga artikel Membuat Widget Select Text and Tweet Di Blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Media. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Membuat Widget Select Text and Tweet Di Blogger