Harga Jual / Beli Bitcoin

Membuat Widget Select Text and Tweet Di Blogger

07:37:00 Wahab Saputra 7 Comments

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....!!!

How to Select Text and Share it to Twitter Widget in Blogger

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>

.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(http://2.bp.blogspot.com/-P1HMdLuxt8c/VLTO0QWjwtI/AAAAAAAAFMo/pNAkrrrdPe8/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>

<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>

<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.

7 comments:

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!