How To Create Tool Website In Blogger
So let me tell you now how to Create Tool Websites In Blogger. So to make this work, all of you people who are making tools. All your people will have to download the script below. That is, I have provided you below Youtube Thumbnail Download Tool the entire script of which you have to download and after downloading all of you have to install it on Blogger, now I will tell you all below how to do that.
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> YouTube thumbnail downloader </title>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name="theme-color" content="#3273DC" />
<meta name="robots" content="index,follow" />
<link rel="icon" type="image/png" href="http://www.khanekhas.com/wp-content/uploads/2016/10/youtube-BW.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style type="text/css">
.d-links {display:none;}
.loder{
width:100%;
height:100vh;
position:fixed;
top:0;
background-color:#fff;
background-image: url('https://flevix.com/wp-content/uploads/2020/01/Bounce-Bar-Preloader-1.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
z-index:99999;
display:none;
}
</style>
</head>
<body>
<section class="section">
<div class="container ">
<h1 class="title is-5 has-text-centered has-text-grey-dark" id="mtir" >YouTube Thumbnail Download</h1>
<p class="has-text-centered" >Youtube Thumbnail Downloader Supports All Youtube Videos Including 4K, 1080p, HD, HQ, etc.</p>
<br>
<input class="input" type="text" id="vid" placeholder="Video Url Here...">
<br><br>
<button class="button is-link" id="dbtn" >Download</button>
<br>
<!--AdSense Code Hear-->
<br>
<div class="d-links" >
<br>
<h2 id="vtit" class="title is-6 has-text-centered" ></h2>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="image Hd Full" id="qu1" width="100%" >
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="content">
<a href="#" id="link1" download>Download 4K Quality </a>
<br>
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="image Hd Full" id="qu2" width="100%" >
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="content">
<a href="#" id="link2" download>Download Hd Quality</a>
<br>
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="image Hd Full" id="qu3" width="100%" >
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="content">
<a href="#" id="link3" download>Download SD Quality</a>
<br>
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="image Hd Full" id="qu4" width="100%" >
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="content">
<a href="#" id="link4" download>Download Low Quality</a>
<br>
</div>
</div>
</div>
</div>
<br>
</div>
<!--AdSense Code Hear-->
</section>
<div class="loder" > </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mtir").html("");
var i = 0;
var txt = 'YouTube Thumbnail Download';
var speed = 300;
function typeWriter() {
if (i < txt.length) {
document.getElementById("mtir").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
typeWriter();
$("#dbtn").click(function(){
var url = $("#vid").val();
if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test(url)){
var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
var vid = match[2];
$(".loder").show();
/* make Links
https://img.youtube.com/vi/[video-id]/sddefault.jpg
https://img.youtube.com/vi/[video-id]/mqdefault.jpg
http://img.youtube.com/vi/[video-id]/hqdefault.jpg
http://img.youtube.com/vi/[video-id]/maxresdefault.jpg
*/
var qu1 = "http://img.youtube.com/vi/"+vid+"/maxresdefault.jpg";
var qu2 = "http://img.youtube.com/vi/"+vid+"/mqdefault.jpg";
var qu3 = "http://img.youtube.com/vi/"+vid+"/hqdefault.jpg";
var qu4 = "http://img.youtube.com/vi/"+vid+"/sddefault.jpg";
$("#qu1").attr("src", qu1)
$("#qu2").attr("src", qu2)
$("#qu3").attr("src", qu3)
$("#qu4").attr("src", qu4)
$("#link1").attr("href", qu1)
$("#link2").attr("href", qu2)
$("#link3").attr("href", qu3)
$("#link4").attr("href", qu4)
var url = 'https://www.youtube.com/watch?v=' + vid;
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
var vtit = data.title;
$("#vtit").html(vtit);
});
setTimeout(
function()
{
$(".loder").hide();
$(".d-links").show();
}, 5000);
} else {
swal("Invalid Url", "Please Enter a Valid Video URL!", "error");
}
} else {
swal("Invalid Url", "Please Enter a Valid Video URL!", "error");
}
});
});
</script>
</body>
</html>
Download To Google Drive