Welcome to the Droidnur123 blog today we will know about installing a simple thumb link preview on the blog. Okay, this time Droidnur will share tips on how to install a simple thumb link preview on the blog.
The application of this thumb link preview I have experienced before in the blogger template created by Dntech Site. The function of this effect is quite simple, which is to give the appearance of a web page/blog that is applied via a link to the web page by giving a certain class.
Here's how it's implemented:
Please apply the script below just above </body> or </head> tag
<script>
//<![CDATA[
$(function(){$("#p1 a").miniPreview({prefetch:"pageload"}),$("#p2 a").miniPreview({prefetch:"parenthover"}),$("#p3 a").miniPreview({prefetch:"none"})}),function(e){var t="link-preview";e.fn.miniPreview=function(s){return this.each(function(){var n=e(this),r=n.data(t);r&&r.destroy(),(r=new i(n,s)).generate(),n.data(t,r)})};var i=function(t,s){this.$el=t,this.options=e.extend({},this.defaultOptions,s),this.counter=i.prototype.sharedCounter++};i.prototype={sharedCounter:0,defaultOptions:{width:256,height:144,scale:.25,prefetch:"pageload"},generate:function(){this.createElements(),this.setPrefetch()},createElements:function(){var i=e("<div>",{class:t+"-wrapper"}),s=e("<div>",{class:t+"-loading"}),n=e("<iframe>",{class:t+"-frame"}),r=e("<div>",{class:t+"-cover"});i.appendTo(this.$el).append(s,n,r),i.css({width:this.options.width+"px",height:this.options.height+"px"});var a=100/this.options.scale;n.css({width:a+"%",height:a+"%",transform:"scale("+this.options.scale+")"});var o=parseInt(this.$el.css("font-size").replace("px",""),10),h=(this.$el.height(),(this.$el.width()-i.outerWidth())/2);i.css({left:h+"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}},loadPreview:function(){this.$el.find("."+t+"-frame").attr("src",this.$el.attr("href")).on("load",function(){e(this).css("background-color","#fff")})},getNamespacedEvent:function(e){return e+"."+t+"_"+this.counter},destroy:function(){this.$el.parent().off(this.getNamespacedEvent("mouseenter")),this.$el.off(this.getNamespacedEvent("mouseenter")),this.$el.find("."+t+"-wrapper").remove()}}}(jQuery);
//]]>
</script>Then copy and paste the below code before </style>
.break{text-align:center}
.link-preview-wrapper{-moz-box-sizing:content-box;box-sizing:content-box;position:absolute;overflow:hidden;z-index:-1;opacity:0;margin-top:-4px;border:1px solid #aaa;box-shadow:0 4px 6px -2px rgba(0,0,0,0.3);transition:z-index steps(1) .3s,opacity .3s,margin-top .3s}
a:hover .link-preview-wrapper{z-index:2;opacity:1;margin-top:6px;transition:opacity .3s,margin-top .3s}
.link-preview-loading,.link-preview-cover{position:absolute;top:0;bottom:0;right:0;left:0}
.link-preview-loading{display:table;height:100%;width:100%;font-size:15px;text-align:center;color:#999;background-color:#e5e5e5}
.link-preview-loading::before{content:'Loading...';display:table-cell;text-align:center;vertical-align:middle}
.link-preview-cover{background-color:rgba(0,0,0,0)}
.link-preview-frame{border:none;-webkit-transform-origin:0 0;transform-origin:0 0}Don't Forget to Save your template.
Application to posts:
Wrap writing with classes id="p1"or id="p2"or id="p3"examples of application as below
<p id="p1">Until I look at my pain. But always. In order to be and for pregnancy sometimes <a href="https://droidnur123.blogspot.com/">Droidnur123</a></p>The result will look like exactly the demo below
Demo
Notes:
id="p1" = Thumbnail will show when hover on link.
id="p2" = Thumbnails will not appear before hover in the text area.
id="p3" = Thumbnails will appear if needed, which will save bandwidth but will take some time to hover back over the link.