Add Mini Preview Links to Blogger like Snapshot Capture

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-preview
Contoh<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/