Skip to main content

Learn How To Make Instagram Image And Video Downloader Website In Blogger

Image
By
  
Hello everyone,as we all know that INSTAGRAM is a social media site,In which we can upload aur images,videos also we can promote our Bussiness in this platform but we can not download the images or video which we like.In this platform we can not download the images or video in our phone.
          So guys this problem is solved we will now make another website in blogger through which you can download any images or videos in instagram you like.
Click On The Below Links To Learn How To Do Them
Instagram Image And Video Downloader Website In Blogger

Do The Following Steps For Making Website In Blogger For Downloading Instagram Images and Video -:
Step 1: First of all go to your Blogger Dashboard.
Step 2: Go to themes,then click on down arrow and select edit html,then select complete code and        delete it,after deleting the code,paste the below code at that place and click on save.

<?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 3: Now go back to blogger dashboard and click on layout,here click on "Add a Gadget",and select Html /Javascript option and paste the below HTML code and then click on save.

<!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>
 
Step 4: Now again click on "Add a Gadget" and Select Html/Javascript option and paste the below CSS code and click on save.

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

Step 5: Now again click on "Add a Gadget" and Select Html/Javascript option and paste the below JAVASCRIPT code and click on save.

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

Step 6: Now on left -bottom you will see to icons to remove them you have to copy the below code and search it in edit html section and delete it from there and then click on save.
<b:include name='quickedit'/>

 Step 7: Now your website is successfully completed,you can now download any image/video by copying link from instagram and pasting that link in your website after that there will be option to download it.

You can also customize your site by adding pages like privacy policy,terms and condition,etc.and if you have adsense approval,then you can start your earning by adding ads.

Website Demo Link-: CLICK HERE

Watch The Full Tutorial





Labels:
Location: Bareilly Rd, Old City, Jogi Navada, Bareilly, Uttar Pradesh 243006, India

Comments

  1. Sudarshan PandeyOctober 9, 2020 at 3:56 PM

    make your blogger tool website and earn money

    ReplyDelete
  2. dipuOctober 15, 2020 at 4:11 PM

    visit and see prove - - - lyricsbari.com

    ReplyDelete
  3. AB QUICK-SHORTMay 2, 2021 at 9:16 AM

    not working

    ReplyDelete
  4. AB QUICK-SHORTMay 2, 2021 at 9:17 AM

    after past link. when i click get not action done

    ReplyDelete
  5. Mohammad ShoaibMay 18, 2021 at 3:44 PM

    not working

    ReplyDelete
  6. UDAY JAISWALSeptember 23, 2021 at 1:08 PM

    Not working 😭

    ReplyDelete
  7. MR.BHAGAT GOctober 25, 2021 at 10:57 PM

    not working

    ReplyDelete
  8. Vivek Kapse November 16, 2021 at 11:31 AM

    Not working

    ReplyDelete
  9. digiskDecember 24, 2021 at 12:03 PM

    Bhai mene mobile edit kiya hai lekin jabi copy link add karta hoo usame ....action button not work....pls help me...

    ReplyDelete
  10. Mahakal bhakatJanuary 15, 2023 at 10:57 PM

    Not working

    ReplyDelete
  11. AnonymousMarch 15, 2023 at 4:45 PM

    Please dear koi badia si script lao ya ise hi edit kar do it's not working on my website gaganddeeppendu22 just check ✅ 👉 simran kour looking sexy and stunning let's check out this 📯

    ReplyDelete

Post a Comment

Please Do Not Enter Any Spam Link.