Do You want to Create Tool Website on Using Blogger?
Yes, This is Your Lucky Day, Here We will Provide you, Instagram Image downloader tool With using this tool You can earn money with Google Adsense.
If you think, you will get direct approval of Google AdSense for this type of tool. So it will never be possible, there are some methods that I will discuss below, so first let’s see how to setup this tool in Blogger.
➥ Open Your Blogger Dashboard >>
➥ Let’s See on the Left Site, Click on the Themes Section
➥ Click on the Three Dots and Click on Edit HTML
➥ Erase the all Existing Codes and Paste our Source Code in Below
Source Code
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #ffd12b;
color: #ff3654;
text-align: center;
}
</style>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body{background:#fff}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><style>
* {
box-sizing: border-box;
}
html, body {
position: relative;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: "consolas",monospace;
font-size: 14px;
line-height: 1.5;
background: #ff3654;
color: #ffffff;
}
code {
background: #ffd12b;
color: #ff3654;
padding: 0.1em 0.5em;
border-radius: 4px;
}
.image-placeholder {
margin: auto;
width: 89%;
max-width: 500px;
display: block;
height: 380px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(https://i.imgur.com/m7cfeO5.png);
}
@media (max-width: 420px) {
.image-placeholder {
width: 320px;
max-width: 320px;
height: 280px;
background-size: contain;
background-position: top left;
background-attachment: scroll;
}
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4em;
background: #ffd12b;
margin: 0 auto;
text-align: center;
color: #ff3654;
}
::placeholder {
color: #212121;
}
input {
display: inline-block;
width: 100%;
max-width: 50%;
max-width: calc(100% - 8em);
min-height: 2.8em;
padding: 0.5em;
margin: 0.5em 0;
background: #ffffff;
border-color: #ff3654;
border-width: 1px;
color: #ff752b;
transition: all 500ms ease;
}
input:focus, input:hover {
border-color: #ff3654;
transition: all 500ms ease;
}
@media (min-width: 420px) {
input {
max-width: 50%;
}
}
.search {
display: inline-block;
padding: 0 1em;
text-align: center;
min-width: 2.8em;
height: 2.8em;
margin: 0;
background: #ff3654;
border: 1px solid #212121;
color: #ffffff;
transition: all 500ms ease;
}
.search:focus, .search:hover {
background: #23db0b;
border-color: #ff3654;
cursor: pointer;
transition: all 500ms ease;
}
.result {
margin: 0 auto;
padding: 4em 1em;
max-width: 40em;
}
.result video, .result img {
width: calc(100% - 4em);
margin: 2em;
}
.result .download {
text-decoration: none;
display: inline-block;
padding: 0.5em 1em;
background: #ffd12b;
border-color: #ffd12b;
border-width: 1px;
color: #ff3654;
transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
background: #ffd12b;
border-color: #ff3654;
cursor: pointer;
transition: all 500ms ease;
}
@media (max-width: 600px) {
.result {
position: absolute;
top: 4em;
left: 0;
right: 0;
height: calc(100% - 10em);
overflow-y: auto;
max-width: 40em;
background: #ff3654;
margin: auto;
}
}
footer {
width: 100%;
margin: 2em auto;
text-align: center;
}
@media (max-width: 600px) {
footer {
position: absolute;
bottom: 1em;
left: 0;
right: 0;
height: 2em;
}
}
</style></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML2' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><!doctype html>
Instagram Downloader
<link rel="stylesheet" href="style.css" />
<main>
<header class="navbar">
<input type="text" value="" placeholder="Paste link here..." />
<button class="search" onclick="getMedia()">Get</button>
</header>
<section class="result">
<div class="image-placeholder"></div>
<p> Paste the link of any Instagram video and picture in the empty box above. Instantly the download link will be generated. You can download it for free. </p>
</section>
</main>
<script src="function.js"></script>
</!doctype></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><script>
const _ = e => document.querySelector(e);
const render = _('.result');
// create video
const createVideo = data => {
let v = document.createElement('video');
v.id = "instavideo";
v.src = data.content;
v.controls = true;
v.autoplay = true;
// create info
let info = document.createElement('p');
info.textContent = "Click the right button on video and select save as.";
render.innerHTML = "";
render.appendChild(v);
render.appendChild(info);
};
// create image
const createImg = data => {
// create image
let i = document.createElement('img');
i.id = "instaImg";
i.src = data.content;
// create info
let info = document.createElement('p');
info.textContent = "Click the right button on the image and select save image..";
render.innerHTML = "";
render.appendChild(i);
render.appendChild(info);
};
// extract html
const getMedia = () => {
render.innerHTML = "<div class='image-placeholder'></div>";
// get input value
let url = _('input').value;
if (url) {
fetch(url).
then(r => r.text()).
then(r => {
// render html
render.innerHTML = r;
// wait, find meta and create video or image
let w = setTimeout(() => {
let v = _('meta[property="og:video"]');
if (v) {
createVideo(v);
} else {
let img = _('meta[property="og:image"]');
if (img) {
createImg(img);
} else {
document.body.innerHTML = body;
alert('Error extracting Instagram image / video.');
};
}
clearTimeout(w);
}, 200);
});
} else {
_('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');
}
};
</script></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='footer'>
<p><strong>©2020 Re-designed by <a href='https://blogsguru.net'>Blogsguru</a></strong></p>
</div>
</body>
</html>How to Change the Footer Credit
At First Copy the all Code and Paste Your HTML Editor app like Notepad ++. Then Press on CTRL+ F to Find on the Site Blogsguru.net and Then replace Your Site name.
You can Successfully replace Your footer Credit.
Read More: Youtube Thumbnail Downloader Tool
Setup Video Tutorial
How to Rank Instagram Image Downloader Tool
First of all, I would like to inform you that this kind of lifting will never give you an approval in Direct AdSense Because there is no article in this type of tool, and Google Adsense is the only article best site that gives this approval.
If you already have AdSense approval for a blog, you need to create a subdomain for that blog.
If you can’t create a subdomain we already have a video on youtube that you can definitely watch it in the Hindi language and create a subdomain on your site.
Conclusion
We Hope This article is helpful to you and using this Free Instagram image downloader tool, You can Earn real Money With Google Adsense.
Thanks its working!
thank you