Berbicara merenung coba sekarang sobat bayangkan 1 langkah dapat 7 fungsi? Ketemu jawabnya? Yes that's right my bro Search and Share. Script buat mencari and berbagi dengan teknik jQuery Plugin tentunya :p Koben menemukan kembali trik serupa namun content site yang lainnya begitu menakjubkan buat disimak :D walo kebanyakan plugin buat wordpress. Mengapa gue mengangkat topic postingan mirip² tapi tak sama! Customize alasan salah satunya sob. Sobat bisa meng-add share/save/submit/translate/... link via kemana saja sesuai keperluan ;)
Features
- Cross browser supported.
- Highly customisable interface.
- Ringan Bo.
- Dapat menambahkan link tak terbatas untuk widget mencari dan berbagi.
- Selected text truncation for Twitter.
- Can show widget for textboxes and textareas also.
- Can show widget only for particular elements.
Selalu melakukan backup (Download Full Template) bila mau mengutak-ngatik template sekecil apapun bentuk aksinya!!!Beben Koben
/*
* jQuery - Selected Text Sharer - Plugin v1.5
* http://www.aakashweb.com/
* Copyright 2010, Aakash Chakravarthy
* Released under the MIT License.
*/
(function($) {
$.fn.selectedTextSharer= function(options) {
var defaults = {
title : 'Share',
lists : 'Google,http://www.google.com/search?q=%s',
truncateChars : 115,
extraClass : '',
borderColor : '#444',
background : '#fff',
titleColor : '#f2f2f2',
hoverColor : '#ffffcc',
textColor : '#000'
};
var options = $.extend(defaults, options);
var listSplit = [];
var lstSplit = [];
function getBaseUrl( url ) {
if (url.indexOf('.') == -1 || url.indexOf('/') == -1){
return false;
}
var result = url.substr(0, url.indexOf( '/' , url.indexOf('.') ) + 1 );
return result;
}
function splitList(){
listSplit = (options.lists).split('|');
for(i=0; i<listSplit.length; i++){
lstSplit[i] = listSplit[i].split(',');
}
}
function createListBox(ele, e){
e = e || window.event;
stsBox = '<div class="stsBox ' + options.extraClass + '"><div class="title">' + options.title + '<a href="http://www.aakashweb.com" title="What is this ?" target="_blank" rel="follow">?</a></div><div class="list"><ul></ul></div><span class="arrow"></span></div>';
if(ele.height() == $('body').height()){
ele.append(stsBox);
}else{
ele.after(stsBox);
}
}
function addToList(ele){
if(ele.height() == $('body').height()){
stsBoxEle = ele.find('.stsBox');
}else{
stsBoxEle = ele.next('.stsBox');
}
for(i=0; i<listSplit.length; i++){
if(lstSplit[i][0] != null){
if(lstSplit[i][2] != null){
iconUrl = lstSplit[i][2].split(' ').join('');
if(iconUrl == 'favicon'){
img = '<img src="' + getBaseUrl(lstSplit[i][1]) + 'favicon.ico" width="16" height="16" alt="' + lstSplit[i][0] + '"/> ';
}else{
img = '<img src="' + lstSplit[i][2] + '" width="16" height="16" alt="' + lstSplit[i][0] + '"/> ';
}
}else{
img = '';
}
tempList= '<li>' + img + '<a rel="' + lstSplit[i][1] + '" title="' + lstSplit[i][0] + '" href="#">' + lstSplit[i][0] + '</a></li>';
stsBoxEle.find('ul').append(tempList);
}
}
}
function applyCss(ele){
if(ele.height() == $('body').height()){
stsBoxEle = ele.find('.stsBox');
}else{
stsBoxEle = ele.next('.stsBox');
}
stsBoxEle.css({
position: 'absolute',
display: 'none',
margin: 0,
width: '200px',
'-webkit-border-radius': '5px',
'-moz-border-radius': '5px',
'border-radius': '5px',
border: '5px solid ' + options.borderColor
});
stsBoxEle.find('img').css({
'vertical-align': 'middle'
});
stsBoxEle.find('.title').css({
color: options.textColor,
background: options.titleColor,
padding: 3,
'border-bottom': '1px solid #e5e5e5'
});
stsBoxEle.find('.title').find('a').css({
float: 'right',
'padding-left': '5',
'padding-right': '5'
});
stsBoxEle.find('a').css({
color: options.textColor,
'text-decoration': 'none'
});
stsBoxEle.find('.list').css({
background: options.background
});
$('.stsBox ul, .stsBox li').css({
'list-style': 'none',
'margin': 0,
'padding': 0,
cursor: 'pointer'
});
$('.stsBox li').css({
'padding': 3
});
stsBoxEle.find('.arrow').css({
width: 0, height: 0, 'line-height': 0,
'border-left': '10px solid transparent',
'border-top': '15px solid ' + options.borderColor,
position: 'absolute',
bottom:'-19px'
});
stsBoxEle.find('li').hover(function(){
$(this).css({ background: options.hoverColor });
}, function(){
$(this).css({ background: 'none' });
});
}
function getSelectionText(){
if (window.getSelection){
selectionTxt = window.getSelection();
}
else if (document.getSelection){
selectionTxt = document.getSelection();
}
else if (document.selection){
selectionTxt = document.selection.createRange().text;
}
return selectionTxt;
}
String.prototype.trunc = function(n){
return this.substr(0,n-1) + (this.length > n ? '...' : '');
};
function init(ele){
splitList();
createListBox(ele);
addToList(ele);
applyCss(ele);
}
return this.each(function() {
init($(this));
$(this).mouseup(function(e){
if ($(e.target).closest('.stsBox').length){
return;
}
if(getSelectionText() != ''){
if($(this).height() == $('body').height()){
stsBoxEle = $(this).find('.stsBox');
}else{
stsBoxEle = $(this).next('.stsBox');
}
var x = e.pageX;
var y = e.pageY;
stsBoxEle.fadeIn('fast');
stsBoxEle.css({
top: y - (stsBoxEle.outerHeight() + 30),
left: x - 30
});
$('.stsBox li a').each(function(){
$(this).attr('rev', getSelectionText());
});
}
});
$('.stsBox li').click(function(){
sUrl = $(this).children('a').attr('rel');
selectedText = $(this).children('a').attr('rev');
theUrl = sUrl.replace('%s', selectedText);
theUrl = theUrl.replace('%ts', selectedText.trunc(options.truncateChars));
window.open(theUrl, 'sts_window');
});
$(document).mousedown(function(e) {
if ($(e.target).closest('.stsBox').length)
return;
$('.stsBox').fadeOut('fast');
});
});
};
})(jQuery);
Pemakaian (jQuery pemanggil) terdapat 4 jenis script pemanggil di demonya. Pilih sobat mau pakai yang mana! Misalkan sobat mau pakai search wikipedia, google, yahoo dan terjemah via google translate. Maka jQuery pemanggilnya seperti ini
Save dulu deh setelah melakukan proses memasukan kedua script diatas :)<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.Aakash').selectedTextSharer({
lists:"Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Search,http://www.google.com/search?q=%s,favicon|Yahoo Search,http://search.yahoo.com/search?p=%s,favicon|Google Translate,http://translate.google.co.id/translate_t?q=%s,favicon",
extraClass: 'dark',
title: 'Search this text ...',
borderColor: '#815A28',
hoverColor: '#FFFFCC'
});
});
//]]>
</script>
Kemudian centang Expand Widget Templates lalu temukan tag bagian postingan! Biasanya kode tagging post mirip kayak begini...
Apapun kode yang ada pada template sobat, sisipkan didalam atribut class dengan unique id berikut Aakash. Pada contoh diatas penulisan tag post menjadi
SAVE
Tengok bagaimana hasilnya :DResource & original article jQuery Selected Text Sharer by Aakash Web.
Acak-acak sana sob webnya, banyak artikel mancap punya b-) :-bd ;)
Happy blogging \m/
Tidak ada komentar:
Posting Komentar