Add Mini Preview Links to Blogger like Snapshot Capture

Make screenshot, snapshot, or screenshot web/blog links use snippet jQuery script.

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<p id="mini-preview">
    1. Contoh mode prefetch: 'pageload'<br/><br/>
Demo ini menunjukkan bagaimana untuk menambahkan hidup mini-preview link di hover. Lihat link ini <a href="http://www.w3schools.com/">w3schools</a> and <a href="http://www.w3.org/">w3 oreg</a>. Melayanglah di atas mereka untuk melihat preview kecil dari apa yang mereka tuju.
</p><br/>
<p id="mini-preview-1">
    2. Contoh mode prefetch: 'parenthover'<br/><br/>
Mereka preview yang diambil segera setelah halaman ini dimuat. Ini bagus untuk memiliki preview siapkah depan waktu, tetapi dapat memakan bandwidth ekstra. Sebagai alternatif, periksa link ini <a href="http://jsbin.com/">jsbin</a> and <a href="http://validator.w3.org/">Markup Validation Service</a>.
</p><br/>
<p id="mini-preview-2">
    3. Contoh mode prefetch: 'none'<br/><br/>
Akhirnya, periksa link ini <a href="http://www.facebook.com/">facebook</a>, <a href="http://www.google.com/">Google</a>, and this is <a href="http://beben-koben.blogspot.com/?m=1">my blog</a>. Preview ini hanya diambil bila diperlukan. Ini menghemat bandwidth besar, tetapi akan ada penundaan sebelum preview dapat ditampilkan. 
Merupakan contoh preview yg webnya memasang anti iframe!!
</p>    
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2014/05/add-mini-preview-links-to-blogger-like.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://undercover-blogger.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#f5ead4;color:#59513f;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:200%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}

#mini-preview a,#mini-preview-1 a,#mini-preview-2 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 {
 ...

JavaScript

(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...