Select Text Trick jQuery Plugin by: motyar

Karena Koben telah menemukan blog gaya lainnya, maka petualangan mengacak-ngacak artikel dari master @motyar akan saya sudahkan saja :D That's right brother, master Motyar+ seorang Web Services and API developer berdomisili di kota Chandigarh INDIA. Aca aca pahe pahe...paket hemat telungatus :D Menguasai beberapa bahasa pemograman antara lain: OAuth 2.0 authorization protocol, Expert in hand-coded PHP and JS, Proficient in working with JSON and XML, Custom JavaScript, and jQuery. Silahkan sobat sekalian kunjungi blognya, acak acak guna menambah skill kita :)
Sebelum menyudahkan adventure from Motyar Blog, si bloglang anu ganteng kalem tea akan mencatut satu lagi postingan mengenai hack jQuery plugin (Get user selected text with jquery and its uses)

Trik jQuery plugin ini tercipta tidak lain untuk menambah daya tarik pembaca dalam melakukan penjelajahan konten sebuah blog/web :D Mirip pada postingan GUE sebelumnya yang berjudul drag for search & share! Bagi blogger yg ingin jalan pintas tersedia dalam bentuk widget dengan fungsi sama, silahkan baca browse faster with fastestFox :-bd
Versi master Motyar akan menghasilkan 3 buah variabel. Select text to get search the query by WTF search engine, double click on text to get search query own blog/web, and select text for ZOOM!
Please welcome

jQuery Plugin Select Text

<script type='text/javascript'>
//<![CDATA[
function getSelected() {
   if (window.getSelection) {
       return window.getSelection();
   } else if (document.getSelection) {
       return document.getSelection();
   } else {
       var selection = document.selection && document.selection.createRange();
       if (selection.text) {
           return selection.text;
       }
       return false;
   }
   return false;
}

$(document).ready(function () {
   var url = 'http://google.com/search?q={term}',
    selectionImage;
   $('#show-bubb-text').mouseup(function (e) {
       var selection = getSelected();
       if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, ''))) {
           if (!selectionImage) {
               selectionImage = $('<a>').attr({
                   href: url,
                   title: 'Click here to learn more...',
                   target: '_blank',
                   id: 'show-bubb'
               }).html("Search!!!").css({
                   "color": "",
                   "background": ""
               }).hide();

               $(document.body).append(selectionImage);

           }

           selectionImage.attr('href', url.replace('{term}', encodeURI(selection))).css({
               top: e.pageY - 30,
               //offsets
               left: e.pageX - 13 //offsets
           }).fadeIn();
       }
   });

   $(document.body).mousedown(function () {
       if (selectionImage) {
           selectionImage.fadeOut();
       }
   });

   $("#db-Click-text").dblclick(function () {
       window.open("http://embah-google.blogspot.com/search?q=" + getSelected());

   });
});

$('#zoom-text').mouseup(function (e) {
   var selection = getSelected();
   if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, ''))) {
       zoomDiv = $('<div>').html(selection).attr({
           id: 'zoom-div'
       }).hide();
       $(document.body).append(zoomDiv);
       zoomDiv.fadeIn();
   }

   $(document).mousedown(function () {
       zoomDiv.fadeOut();
   });
});
//]]>
</script>

Gantikan URL dengan blog kalian yang diberi warna merah tua. Letakkan dibawah jQuery inti atau sebelum tag </body> Untuk customize CSS bisa dikreasikan menurut kesukaan...

CSS Select Text

#show-bubb {
background: #D00;
position: absolute;
margin-top: -10px;
color: #55FF00;
padding: 0 5px 3px 5px;
border: 1px solid #111;
border-radius: 5px
}
#zoom-div {
position: fixed;
color: #111;
font-size: 20px;
background: #FFFFC8;
left: 0;
top: 0;
width: 100%;
border-bottom: 5px double #333
}

Don't forget to visit and get the great article's by Master Motyar :)
Happy blogging \m/