Mumpung ada bahan post, siapa tau ada pengunjung di hari minggu! Pernah melihat link web/blog ketika di sorot terlihat penampakan sebuah gambar? Gambar
snapshot, screenshot, screen capture atau apapun namanya itu. Biasanya kita tinggal menaruh link script dari pihak ke dua? Sekarang tidak usah pakai acara pihak ke-2 segala, kalian bisa membuatnya dengan snippet jQuery script! Karena trik ini begitu mengesankan, proses terjadi snap-shot dari syntax link di rubah ke dalam bentuk
iframe Jadi..capture akan tercipta, kalau web/blog tidak menanamkan script
anti iframe. Kalau tertanam maka akan terjadi yg terbuka web tersebut ;)) Semoga mengerti :P
Agar lebih jelas, lihat live demo Mini-Preview Links cdpn.io/LGJoc Biarkan tetap terbuka halaman Edit this Pen berikut codepen.io/lonekorean/pen/LGJoc?editors=001 Sebelum masuk ke acara bumbu ramuan, sobat harus terlebih dahulu memperhatikan hal-hal berikut!
$(function() {
// attach mini-previews
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
Terdapat 3 opsi pemanggilan. Pilihlah salah satu saja yg menurut kalian baik! Sekali lagi INGAT, hover capture akan di buat ke dalam property IFRAME!!
- prefetch: 'pageload'
Link web tujuan akan langsung ikut terpanggil bersamaan seketika itu juga. - prefetch: 'parenthover'
Link web tujuan akan bereaksi ketika dilakukan hover terhadap link tsb. - prefetch: 'none'
Menurut saya ini yg paling aman. Ambil saja opsi ini yah ;)
Masih seputar script snippet, lihat tulisan script sbb
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
},
Script yg berkerja menampilkan apabila web/blog tujuan tidak mengijinkan pengambilan screenshot/capture image! Sobat bisa merubah dengan sebuah gambar, sehinga penulisan bagian itu menjadi sbb
$(this).css('background', '#fff url(HTTP:\\LINK-IMAGE) no-repeat center center');Hal-hal itu saja mungkin yg menjadi pertimbangan sebelum benar² anda mau melakukan penanaman ke seluruh bumbu ramuan ajaib
mini preview links :)
#mini-preview a {
color: #537f7c;
outline: none;
position: relative;
white-space: nowrap;
display: inline-block;
}
.mini-preview-wrapper {
z-index: -1;
opacity: 0;
margin-top: -4px;
overflow: hidden;
position: absolute;
border-radius: 15px;
border: solid 1px #555;
box-sizing: content-box;
-moz-box-sizing: content-box;
box-shadow: 4px 4px 6px rgba(0,0,0,.3);
transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}
a:hover .mini-preview-wrapper {
z-index: 2;
opacity: 1;
margin-top: 6px;
transition: opacity .3s, margin-top .3s;
}
.mini-preview-loading, .mini-preview-cover {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
.mini-preview-loading {
display: table;
height: 100%;
width: 100%;
font-size: 1.25rem;
text-align: center;
color: #f5ead4;
background-color: #59513f;
}
.mini-preview-loading::before {
content: 'Loading...';
display: table-cell;
text-align: center;
vertical-align: middle;
}
.mini-preview-cover {
background-color: rgba(0, 0, 0, 0); /* IE fix */
}
.mini-preview-frame {
border: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
Supaya tidak ribet dalam pemanggilan, sobat cari kode di dalam template blog yg mengcover bagian post/artikel. Biasanya kode seperti berikut
<div class='post-body' id='PostContent'>Sisipkan kode tambahan menjadi sbb
<div class='post-body' id='PostContent mini-preview'>Kalau tidak mau melakukan penyisipan kode itu, berarti ketika melakukan post (menulis artikel), seluruh isi post harus berada di dalam tag
mini-previewContoh
<div id='mini-preview'>
------------ ISI POSTINGAN ------------
</div><script type='text/javascript'>
//<![CDATA[
$(function() {
$('#mini-preview a').attr('target','_blank').miniPreview({ prefetch: 'none' });
});
(function($) {
var PREFIX = 'mini-preview';
// implemented as a jQuery plugin
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 256,
height: 144,
scale: .25,
prefetch: 'none'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
var $loading = $('<div>', { class: PREFIX + '-loading' });
var $frame = $('<iframe>', { class: PREFIX + '-frame' });
var $cover = $('<div>', { class: PREFIX + '-cover' });
$wrapper.appendTo(this.$el).append($loading, $frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
// positioning
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
$wrapper.css({
top: top + 'px',
left: left + 'px'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);
//]]>
</script>
Beres.
DEMO.
jsfiddle.net/bebenkoben/BDALn/show
Happy preview \m/
Perhatikan display 4 buah widget-social yg bentuknya selaras! Gambar twitter (kotak terang) itulah triknya yg akan dibahas sekarang :D Kenapa saya menyuruh kalian buat menyelaraskan tampilan widget-sosial terlebih dahulu, karena penggunaan gambar yg berfungsi sebagai tutup-buka nantinya harus sama pula [-X Bagi blogger sudah mahir silahkan kunjungi BASICuse bit.ly/1puQPG5
Hostingkan gambar tersebut, mau diedit-edit dulu jg silahkan!
Happy type \m/