Membuat Select Text and Share It dengan Mudah

Sahabat pernah mendapati sebuah situs yang saat kita mendrop teksnya, serta merta muncul tanda sosial media untuk dibagikan? Jika pernah menemukan itu, maka Anda sekarang berada pada jalur yang benar. Yups, pada kesempatan ini, Ngonline06 akan berbagi trik tersebut.

Select Text and Share It, itulah istilahnya. Select text berarti menyeleksi kata atau memilih kata-kata tertentu, sedangkan share itu berarti membagikannya. Select Text and Share It sangat penting untuk dibuat di blog Sahabat selain mempermudah pengunjung juga menunjukkan kelas tersendiri yang berarti blog atau websitenya PROFESIONAL.

Sahabat bisa melihat sendiri, Select Text anda Share It jarang dipakai dan hanya ada di website-website berkelas alias profesional. Hal itu memang jarang orang mengetahui trik membuatnya.

Selain itu, Select Text and Share It juga penting untuk mensosialisasikan website sahabat, terlebih jika website sahabat berisi teks-teks pesan penting, seperti motivasi, nasehat, atau kisah-kisah menarik lainnya yang memang sering berisi ungkapan-ungkapan tokoh terkemuka yang layak untuk dishare ungkapannya.

Biar tidak penasaran apa itu Select Text and Share It, silahkan sahabat memblock teksnya di halaman demo di bawah ini dengan saksama

DEMO

OK, langsung saja berikut adalah cara membuat Select Text and Share It sebagaimana dibuat oleh mas Adhy Suryadi.

Cara Membuat Select Text and Share It

Untuk membuat Select Text and Share It, sahabat harus melakukan langkah-langkah sebagai berikut. Lakukan dengan cermat.

Langkah Pertama

Silahkan copy CSS berikut ini dan letakkan di template sahabat, tepatnya di atas </head>

<style type='text/css'>
/*<![CDATA[*/
@keyframes selectionSharerPopover-animation{0%{transform:matrix(.97,0,0,1,0,12);filter:alpha(opacity=0);opacity:0}
20%{transform:matrix(.99,0,0,1,0,2);filter:alpha(opacity=70);opacity:.7}
40%{transform:matrix(1,0,0,1,0,-1);filter:alpha(opacity=100);opacity:1}
100%,70%{transform:matrix(1,0,0,1,0,0);filter:alpha(opacity=100);opacity:1}
}
#selectionSharerPopover{display:none;position:absolute;top:-100px;left:-100px;z-index:1010}
#selectionSharerPopover:after{content:'';display:block;position:absolute;bottom:-3px;left:50%;margin-left:-4px;width:8px;height:8px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:#262625;box-shadow:0 0 2px #262625}
#selectionSharerPopover.anim{transition:top 75ms ease-out;animation:selectionSharerPopover-animation 180ms forwards linear;-webkit-animation:selectionSharerPopover-animation 180ms forwards linear}
#selectionSharerPopover-inner{position:relative;overflow:hidden;-webkit-border-radius:5px;border-radius:5px;border:1px solid;border-color:#262625 #1c1c1b #121211;box-shadow:0 1px 3px -1px rgba(0,0,0,.7),inset 0 0 1px rgba(255,255,255,.07),inset 0 0 2px rgba(255,255,255,.15);background-image:linear-gradient(to bottom,rgba(49,49,47,.97),#262625);background-repeat:repeat-x}
#selectionSharerPopover .selectionSharerPopover-clip{position:absolute;bottom:-11px;display:block;left:50%;clip:rect(12px 24px 24px 0);margin-left:-12px;width:24px;height:24px;line-height:24px}
#selectionSharerPopover .selectionSharerPopover-arrow{display:block;width:20px;height:20px;-webkit-transform:rotate(45deg) scale(.5);transform:rotate(45deg) scale(.5);background-color:#454543;border:2px solid #121211;box-sizing:content-box}
.selectionSharer ul{padding:0;display:inline}
.selectionSharer ul li{float:left;list-style:none;background:0 0;margin:0}
.selectionSharer a.action,.selectionSharer a.action.googleplus{display:block;text-indent:-200px;margin:5px 7px;height:20px;border:none}
.selectionSharer a.action{width:20px}
.selectionSharer a.action.googleplus{width:32px}
.selectionSharer a:hover{color:#ccc}
.selectionSharer a.tweet{background:url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='171' height='139'%3e%3cg transform='translate(-282.32053,-396.30734)'%3e%3cpath style='fill:white' d='m 453.82593,412.80619 c -6.3097,2.79897 -13.09189,4.68982 -20.20852,5.54049 7.26413,-4.35454 12.84406,-11.24992 15.47067,-19.46675 -6.79934,4.03295 -14.3293,6.96055 -22.34461,8.53841 -6.41775,-6.83879 -15.56243,-11.111 -25.68298,-11.111 -19.43159,0 -35.18696,15.75365 -35.18696,35.18525 0,2.75781 0.31128,5.44359 0.91155,8.01875 -29.24344,-1.46723 -55.16995,-15.47582 -72.52461,-36.76396 -3.02879,5.19662 -4.76443,11.24048 -4.76443,17.6891 0,12.20777 6.21194,22.97747 15.65332,29.28716 -5.76773,-0.18265 -11.19331,-1.76565 -15.93716,-4.40083 -0.004,0.14663 -0.004,0.29412 -0.004,0.44248 0,17.04767 12.12889,31.26806 28.22555,34.50266 -2.95247,0.80436 -6.06101,1.23398 -9.26989,1.23398 -2.2673,0 -4.47114,-0.22124 -6.62011,-0.63114 4.47801,13.97857 17.47214,24.15143 32.86992,24.43441 -12.04227,9.43796 -27.21366,15.06335 -43.69965,15.06335 -2.84014,0 -5.64082,-0.16722 -8.39349,-0.49223 15.57186,9.98421 34.06703,15.8094 53.93768,15.8094 64.72024,0 100.11301,-53.61524 100.11301,-100.11387 0,-1.52554 -0.0343,-3.04251 -0.10204,-4.55261 6.87394,-4.95995 12.83891,-11.15646 17.55618,-18.21305 z' /%3e%3c/g%3e%3c/svg%3e") 2px 4px no-repeat;background-size:18px}
.selectionSharer a.facebook{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 33 33' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") 0 2px no-repeat;background-size:18px;display:none}
.selectionSharer a.googleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DjzTOTKCVMuXMMK1n6hniwjfkw9TIvU6Wo-Xx00Utbkm6nBBJV7oaIj-chb5yzS_Vd60DXP8Rj5MhrvUs5dUJhOBRy4RUiccSB6Ys661PeYjvG6UREHt-3IZaYdH1bLyiNWPtgi8o7VT/s1600/1475490209_40-google-plus.png) 0 -5px no-repeat;background-size:32px;color:#fff}
#selectionSharerPopunder.fixed{transition:bottom .5s ease-in-out;width:100%;position:fixed;left:0;bottom:-50px}
.selectionSharer{transition:-webkit-transform .6s ease-in-out}
.selectionSharer.moveDown{-webkit-transform:translate3d(0,60px,0)}
#selectionSharerPopunder{position:absolute;left:0;width:100%;height:0;transition:height .5s ease-in-out;background:#ccc;border:none;box-shadow:inset 0 10px 5px -10px rgba(0,0,0,.5),inset 0 -10px 5px -10px rgba(0,0,0,.5);border-radius:0;overflow:hidden}
#selectionSharerPopunder.show{height:50px}
.selectionSharerPlaceholder{height:1em;margin-bottom:-2em;transition:height .5s ease-in-out}
.selectionSharerPlaceholder.show{height:50px!important}
#selectionSharerPopunder-inner ul{overflow:hidden;float:right;margin:0}
#selectionSharerPopunder-inner ul li{padding:5px;overflow:hidden}
#selectionSharerPopunder-inner label{color:#fff;font-weight:300;line-height:50px;margin:0 20px 0 10px}
#selectionSharerPopunder-inner a{width:30px;height:30px;background-size:30px}
#selectionSharerPopunder-inner a.tweet{background-position:0 2px}
/*]]>*/
</style>

Langkah Kedua

Silahkan letakkan kode di bawah ini di atas kode </body>. Pastikan template sahabat sudah terpasang jquery library berapapun versinya.

<script>
//<![CDATA[
!function(e){var t=function(t){var o=this;t=t||{},"string"==typeof t&&(t={elements:t}),this.sel=null,this.textSelection="",this.htmlSelection="",this.url2share=e('meta[property="og:url"]').attr("content")||e('meta[property="og:url"]').attr("value")||window.location.href,this.getSelectionText=function(e){var t="",n="";if(e=e||window.getSelection(),e.rangeCount){for(var i=document.createElement("div"),r=0,a=e.rangeCount;a>r;++r)i.appendChild(e.getRangeAt(r).cloneContents());n=i.textContent,t=i.innerHTML}return o.textSelection=n,o.htmlSelection=t||n,n},this.selectionDirection=function(e){var t=e||window.getSelection(),o=document.createRange();if(!t.anchorNode)return 0;o.setStart(t.anchorNode,t.anchorOffset),o.setEnd(t.focusNode,t.focusOffset);var n=o.collapsed?"backward":"forward";return o.detach(),n},this.showPopunder=function(){o.popunder=o.popunder||document.getElementById("selectionSharerPopunder");var e=window.getSelection(),t=o.getSelectionText(e);if(e.isCollapsed||t.length<10||!t.match(/ /))return o.hidePopunder();if(o.popunder.classList.contains("fixed"))return o.popunder.style.bottom=0,o.popunder.style.bottom;var n=e.getRangeAt(0),i=n.endContainer.parentNode;if(o.popunder.classList.contains("show")){if(Math.ceil(o.popunder.getBoundingClientRect().top)==Math.ceil(i.getBoundingClientRect().bottom))return;return o.hidePopunder(o.showPopunder)}if(i.nextElementSibling)o.pushSiblings(i);else{o.placeholder||(o.placeholder=document.createElement("div"),o.placeholder.className="selectionSharerPlaceholder");var r=window.getComputedStyle(i).marginBottom;o.placeholder.style.height=r,o.placeholder.style.marginBottom=-2*parseInt(r,10)+"px",i.parentNode.insertBefore(o.placeholder)}var a=window.pageYOffset+i.getBoundingClientRect().bottom;o.popunder.style.top=Math.ceil(a)+"px",setTimeout(function(){o.placeholder&&o.placeholder.classList.add("show"),o.popunder.classList.add("show")},0)},this.pushSiblings=function(e){for(;e=e.nextElementSibling;)e.classList.add("selectionSharer"),e.classList.add("moveDown")},this.hidePopunder=function(e){if(e=e||function(){},"fixed"==o.popunder)return o.popunder.style.bottom="-50px",e();o.popunder.classList.remove("show"),o.placeholder&&o.placeholder.classList.remove("show");for(var t=document.getElementsByClassName("moveDown");el=t[0];)el.classList.remove("moveDown");setTimeout(function(){o.placeholder&&document.body.insertBefore(o.placeholder),e()},600)},this.show=function(e){setTimeout(function(){var t=window.getSelection(),n=o.getSelectionText(t);if(!t.isCollapsed&&n&&n.length>10&&n.match(/ /)){var i=t.getRangeAt(0),r=i.getBoundingClientRect().top-5,a=r+o.getPosition().y-o.$popover.height(),s=0;if(e)s=e.pageX;else{var l=t.anchorNode.parentNode;s+=l.offsetWidth/2;do s+=l.offsetLeft;while(l=l.offsetParent)}switch(o.selectionDirection(t)){case"forward":s-=o.$popover.width();break;case"backward":s+=o.$popover.width();break;default:return}o.$popover.removeClass("anim").css("top",a+10).css("left",s).show(),setTimeout(function(){o.$popover.addClass("anim").css("top",a)},0)}},10)},this.hide=function(){o.$popover.hide()},this.smart_truncate=function(e,t){if(!e||!e.length)return e;var o=e.length>t,n=o?e.substr(0,t-1):e;return n=o?n.substr(0,n.lastIndexOf(" ")):n,o?n+"...":n},this.getRelatedTwitterAccounts=function(){var t=[],o=e('meta[name="twitter:creator"]').attr("content")||e('meta[name="twitter:creator"]').attr("value");o&&t.push(o);for(var n=document.getElementsByTagName("a"),i=0,r=n.length;r>i;i++)if(n[i].attributes.href&&"string"==typeof n[i].attributes.href.value){var a=n[i].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);a&&a.length>1&&-1==["widgets","intent"].indexOf(a[1])&&t.push(a[1])}return t.length>0?t.join(","):""},this.shareTwitter=function(e){e.preventDefault();var t="“"+o.smart_truncate(o.textSelection.trim(),114)+"”",n="http://twitter.com/intent/tweet?text="+encodeURIComponent(t)+"&related="+o.relatedTwitterAccounts+"&url="+encodeURIComponent(window.location.href);o.viaTwitterAccount&&t.length<114-o.viaTwitterAccount.length&&(n+="&via="+o.viaTwitterAccount);var i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;return window.open(n,"share_twitter","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a),o.hide(),!1},this.shareFacebook=function(e){e.preventDefault();var t=o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>|  /gi,"").trim(),n="https://www.facebook.com/sharer.php?u="+encodeURIComponent(o.url2share)+"&quote="+encodeURIComponent(t),i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;window.open(n,"share_facebook","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a)},this.shareGoogleplus=function(e){e.preventDefault();var t=(o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>|  /gi,"").trim(),"https://plus.google.com/share?url="+encodeURIComponent(o.url2share)),n=640,i=440,r=screen.width/2-n/2,a=screen.height/2-i/2-100;window.open(t,"share_googleplus","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+n+", height="+i+", top="+a+", left="+r)},this.render=function(){var t='<div class="selectionSharer" id="selectionSharerPopover" style="position:absolute;">  <div id="selectionSharerPopover-inner">    <ul>      <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>      <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>      <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li>    </ul>  </div>  <div class="selectionSharerPopover-clip"><span class="selectionSharerPopover-arrow"></span></div></div>',n='<div id="selectionSharerPopunder" class="selectionSharer">  <div id="selectionSharerPopunder-inner">    <label>Share this selection</label>    <ul>      <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>      <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>      <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li>    </ul>  </div></div>';o.$popover=e(t),o.$popover.find("a.tweet").click(o.shareTwitter),o.$popover.find("a.facebook").click(o.shareFacebook),o.$popover.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popover),o.$popunder=e(n),o.$popunder.find("a.tweet").click(o.shareTwitter),o.$popunder.find("a.facebook").click(o.shareFacebook),o.$popunder.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popunder),o.url2share&&e(".selectionSharer a.facebook").css("display","inline-block")},this.setElements=function(t){"string"==typeof t&&(t=e(t)),o.$elements=t instanceof e?t:e(t),o.$elements.mouseup(o.show).mousedown(o.hide).addClass("selectionShareable"),o.$elements.bind("touchstart",function(){o.isMobile=!0}),document.onselectionchange=o.selectionChanged},this.selectionChanged=function(e){o.isMobile&&(o.lastSelectionChanged&&clearTimeout(o.lastSelectionChanged),o.lastSelectionChanged=setTimeout(function(){o.showPopunder(e)},300))},this.getPosition=function(){var e=void 0!==window.pageXOffset,t="CSS1Compat"===(document.compatMode||""),o=e?window.pageXOffset:t?document.documentElement.scrollLeft:document.body.scrollLeft,n=e?window.pageYOffset:t?document.documentElement.scrollTop:document.body.scrollTop;return{x:o,y:n}},this.render(),t.elements&&this.setElements(t.elements)};e.fn.selectionSharer=function(){var e=new t;return e.setElements(this),this},"function"==typeof define?define(function(){return t.load=function(e,o,n){var i=new t;i.setElements("p"),n()},t}):window.SelectionSharer=t}(jQuery);
$('.post-body').selectionSharer();
//]]>
</script>

Langkah Ketiga

Simpan

Yups, sekarang lihat blog sahabat dan rasakan pun perubahannya. Blog atau website sahabat akan terlihat profesional dengan Select Text and Share It tersebut. Selamat mencoba tutorial tentang membuat Select Text and Share It di atas dan menikmati perubahannya. Good Luck ya... :)