How to Create Image Compressor & Optimizer Website || In Blogger || By Techno Sahil ||

Hello Friends तो जैसा कि आप लोग जानते हैं कि बहुत सारे लोग Blogging के द्वारा पैसे गवा रहे है। अपने पैसों को बेस्ट कर रहे हैं। उन्हें समझ नहीं आ रहा है कि कैसे Blogger पर Traffic लाया, कैसे Adsense का Approval ले।


तो ऐसे समय में मैंने आपके लिए Image Compressor Tool Website का Script  लाया है। इसके बारे में आप Article लिख सकते है की कैसे लोगो इसे Use करना है और इसे अपने Blogger के Site पर लगाकर आप पैसे कमा सकते हैं। इस तरह की Website पर जल्दी Adsense Approval होता है। तो कैसे  आपको इसे Blogger में Create करना है और कैसे Code को Copy करना है यह सब Process मैं आपको इस Article में बताऊंगा।

So friends इस कोड को Copy करने के लिए आपको नीचे दिए गए Steps को पूरा करना होगा।


Image Compressor Tool

बहुत सारे दोस्तों को शायद पता भी नाम हो की ये Image Compressor क्या होता है? तो मैं आपको बता देना चाहता हूँ की किसी भी Blog Post या Blog Page में जो Source Code उपलब्ध करवाया जाता है. और उसे जिस Format में Post में Add किया जाता है उसे हम Image Compressor के नाम से जानते है.

पंरतु अब समय के साथ साथ सब कुछ Advance होता जा रहा है. ऐसे में अब Normal Image Compressor को भी Advance बना दिया गया है. अब इसमें आपको Image Compressor with 3d Background भी देखने को मिल जाता है. और इसका फायदा यह है की सभी Codes तो अच्छे दिखते ही है लेकिन उसके साथ-साथ Text Area Box और Site भी अच्छे दिखते है। जिसके कारण Sites पर ज्यादा से ज्यादा Traffic आते हैं



इन्हें भी पढ़े:-




Steps To Get The Code:-

● नीचे दिए गए Download Button पर Click करें

तो यह आपको एक नये Page पर Redirect कर देगा

● अब आपको नीचे से Scroll करके Continue Download पर Click करना है।

● अब आप नीचे Scroll करके Captcha को Solve कर दें और Click Here To Download पर Click करें।

● फिर आपको Countdown Timer मतलब की उल्टी गिनती करता हुआ बक्सा एक गोल घेरे में दिख रहा होगा तब तक Wait करें और फिर Get Link पर Click करें।

● अब आपको Blue या Green Colour के बक्से में Code दिख रहा होगा।

● अब आप Code को Copy कर ले।


 <!DOCTYPE html>
<html>
  <head>
  <title>[Best] Online Image Compress Tool JPG, jpeg, PNG, gif & More</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="[Best] Online Image Compress Tool JPG, jpeg, PNG, gif & More"/>
	<meta name="robots" content="index,follow" />
	<meta name="keywords" content="[Best] Online Image Compress Tool JPG, jpeg, PNG, gif & More" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.14/dist/browser-image-compression.js"></script>
  <link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2J7RIwhuxCoTXXNBI4waItSdbbt3hfgiTRRw0CJljmGj3BGTWzQzS6VkxzQDgl5Q4N9xRdAgdN4sgGkp270e5f0WBRTi5TivlETcYewybvIhuxxZOnLYHkpUjRMSg2O8k9Btuvhz0Jw/s104/icon.png" sizes="16x16" type="image/png">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    td {
        vertical-align: top;
        width: 50%;
    }

    img {
        max-width: 100%;
    }
</style>
	</head>
<body>

  <header class="navbar navbar-light navbar-expand-md">    
  </header>
  
      <div style="position: relative; background-image: linear-gradient(to right, #42f54b, #7ef542, #b3f542, #42f5a7, #00bcee, #00e3e3); min-height: 100%;"> 
        
  <div class="jumbotron rounded-0 bg-primary text-white">
    <div class="container">
      <h1>Online Image compressor <small class="h10"></small></h1>     
    </div>
  </div>
         
 
  <center>
  <div class="container">
    <h3>[Best] Online Image Compressor</h3>

    <br />
    <h5 style="text-align:center;">
    This online image compressor uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality. </h5>

    <hr />
    <div id="app">
      
<label for="maxSizeMB">maxSizeMB: <input type="number" id="maxSizeMB" name="maxSizeMB" value="1" /></label><br />
<label for="maxWidthOrHeight">maxWidthOrHeight: <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight"
                                                       value="1024" /></label>
<hr>
<div>
    <label for="web-worker">
        Compress in web-worker <span id="web-worker-progress"></span>
        <input id="web-worker" type="file" accept="image/*" onchange="compressImage(event, true);">
    </label>
    <p id="web-worker-log"></p>
</div>
<hr>
<div>
    <label for="main-thread">
        Compress in main thread <span id="main-thread-progress"></span>
        <input id="main-thread" type="file" accept="image/*" onchange="compressImage(event, false);">
    </label>
    <p id="main-thread-log"></p>
</div>
<table>
    <tr>
        <td>input preview</td>
        <td>output preview</td>
    </tr>
    <tr>
        <td><img id="preview" /></td>
        <td><img id="preview-after-compress" /></td>
    </tr>
</table>
    </center>

<script>
  document.querySelector('#version').innerHTML = imageCompression.version
  function compressImage (event, useWebWorker) {
    var file = event.target.files[0]
    var logDom, progressDom
    if (useWebWorker) {
      logDom = document.querySelector('#web-worker-log')
      progressDom = document.querySelector('#web-worker-progress')
    } else {
      logDom = document.querySelector('#main-thread-log')
      progressDom = document.querySelector('#main-thread-progress')
    }
    document.getElementById('preview').src = URL.createObjectURL(file)

    logDom.innerHTML = 'Source image size:' + (file.size / 1024 / 1024).toFixed(2) + 'mb'
    console.log('input', file)
    imageCompression.getExifOrientation(file).then(function (o) {
      console.log('ExifOrientation', o)
    })

    var options = {
      maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
      maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
      useWebWorker: useWebWorker,
      onProgress: onProgress
    }
    imageCompression(file, options).then(function (output) {
        logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
        console.log('output', output)
        const downloadLink = URL.createObjectURL(output)
        logDom.innerHTML += ' <a class="btn btn-sm btn-blocks btn-outline-primary mt-2" : href="' + downloadLink + '" download="' + file.name + '">Download</a>'
        document.getElementById('preview-after-compress').src = downloadLink
    })

    // await uploadToServer(output)

    function onProgress (p) {
      progressDom.innerHTML = '(' + p + '%' + ')'
    }
  }

  function uploadToServer (file) {
    var formData = new FormData()
    formData.append('image', file)
    return fetch('http://localhost/image-upload-api', {
      method: 'POST',
      body: formData
    })
  }
</script>

        </div>    
    </div>    
  </div>
</body>
</html>


अब रही बात की इस Script को कहां पर Paste करना है कैसे Image Compressor Website बनाना है। तो Image Compressor Website बनाने के लिए आपको नीचे दिए गए Steps को पुरा करना होगा।


Steps to Create Image Compressor Website:-


● अब आप Blogger के Dashboard में जाए या फिर blogger लिखकर Search करे।

● आप New Blog पर Click करें और फिर नाम Create कर Subdomain Create करके Save करें।

● यहाँ तक आपका काम हो गया है आपका Blogger का Website Create हो गया है।

● अब आप Theme पर Click कर Simple Blog के Theme को Choose कर Apply करें।

● अब Arrow पर Click कर Mobile Settings में जाकर Mobile View से Desktop View कर दें।

● फिर से Arrow पर Click करके Switch to first generation classic theme पर Click करके Without A backup को Choose करे।

● अब Edit Html पर Click कर Select All करके Code को Paste कर दे।

● अब Save के Icon पर Click कर Save कर दे।

Congratulations your Image Compressor Website has been created successfully.


Important Notice:- अगर आपको इसे अपने दुसरे Site पर लगाना है तो इस Tool का Use करे।

IFrame Generator Tool

निस्कर्ष:- तो दोस्तों आपको Image Compressor Script For Blogger के बारे में यह Article  कैसा लगा Comment में जरूर बताएं। या आप भी किसी प्रकार का सुझाव देना चाहते हैं, तो आप नीचे Comment Box में अपनी राय हमसे Share कर सकते हैं।

Post a Comment

0 Comments