Notification texts go here. Contact Us Buy Now!

How To Create INSTAGRAM video && Image Downloader Website In Blogger .

 Hello friends! Welcome to your Epic Template blog. So in this article today we are going to talk about how to Create Instagram Image & Video Downloader Tool. And what is this Instagram Image & Video Downloader Javascript & how can we use them. So we will know all these things in this article. So stay in this article and know more details.


What is Instagram?

So friends if you do not know what this Instagram is and what happens with it. So let me tell you that an Instagram is a Social Media Platform.

Let me tell you the way Whatsapp belongs to Facebook company. So this Instagram also belongs to the Facebook company.

Like you share your photos & videos on Facebook. In the same way, you can share in this Instagram too.

People use this Instagram in very large quantities. Not only this, people download it in large quantities from Playstore as well.

Instagram Image & Video Downloader

So friends, we read above what is this Instagram. So now we will know what is this Instagram Image & Video Downloader?

So if you do not know, then let me tell you that whatever image & video people share on the official Instagram.

We cannot download it. So for this we need this Instagram Image & Video Downloader.

With the help of this downloader, we can easily download any Instagram video & image.

Many people also search Instagram image Downloader or Image Downloader for Instagram on Google.


Preview Of Save Insta Photos & Videos Program


SO Friends, I have provided the Preview Gif of an Instagram Image Downloader below.

By watching this, you can know how you can download videos from Instagram.

How to Create Instagram Image & Video Downloader Tool in Blogger


So friends, now we will know how we can create this Instagram Video & Image Downloader Tool in Blogger.

So if you want to know how we can make this tool. So follow the steps given below carefully.

Let me tell you if you make this tool. And your domain is Adsense approved or you can reduce money by using any other ads network.

Step 1 – First of all, you have to copy the code of the Blank Template given below.

 <?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>  
  <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'/>  
   </body>  
   </html>  

Step 2
 
– 
Now you have to go to the theme in Dashboard and click on Edit Theme.

Step 3 – Now you have to remove the previous code and paste the copied code.

Now I have provided some scripts below. Which you have to apply carefully. If you do not know how to use these codes.

So below I have provided a video. Seeing this, you can easily use these codes.

JavaScript for Instagram Image & Video Downloader

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


HTML Script Instagram Image & Video Downloader

 <!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> Copy image or video link from Instagram and put it on the field given on the top. </p>  
   </section>  
  </main>  
  <script src="function.js"></script>  
 </!doctype>  


CSS Script Instagram Image & Video Downloader

 <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: #f9f9f9;  
  color: #333;  
 }  
 code {  
  background: #208bfd;  
  color: #f9f9f9;  
  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://webdevtrick.com/wp-content/uploads/image-placeholder.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: #208bfd;  
  margin: 0 auto;  
  text-align: center;  
  color: #f9f9f9;  
 }  
 ::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: #f3f3f3;  
  border-color: #208bfd;  
  border-width: 1px;  
  color: #212121;  
  transition: all 500ms ease;  
 }  
 input:focus, input:hover {  
  border-color: #208bfd;  
  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: #208bfd;  
  border: 2px solid #212121;  
  color: #f9f9f9;  
  transition: all 500ms ease;  
 }  
 .search:focus, .search:hover {  
  background: #212121;  
  border-color: #f9f9f9;  
  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: #208bfd;  
  border-color: #208bfd;  
  border-width: 1px;  
  color: #f9f9f9;  
  transition: all 500ms ease;  
 }  
 .result .download:focus, .result .download:hover {  
  background: #208bfd;  
  border-color: #f9f9f9;  
  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: #f9f9f9;  
   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>  
  
CHeck this

 <b:include name='quickedit'/>  
[sp_easyaccordion id=”3874″]

Getting Info...

About the Author

Hey There I'm Rahul Shah Founder Of Rahul's Blog and interested In Blogging and coding too.

1 comment

  1. Las Vegas | Casino and Sportsbook | DRMCD
    With over 1,500 충청남도 출장마사지 live dealer games 울산광역 출장샵 and sports betting lines at your 하남 출장샵 fingertips, you can 강원도 출장샵 now bet at top Las Vegas casinos with games and 속초 출장안마
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.