Công cụ upload ảnh và tự động lấy link ảnh trên Blogger

Công cụ upload ảnh
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào đây để chuyển đến liên kết
Chúc mừng! Liên kết được tạo

Imgur là website lưu trữ ảnh tuyệt vời mà bạn nghĩ đến nếu muốn tải những tấm ảnh trên máy tính hoặc trên Internet mà mình yêu thích để lưu trữ hoặc lấy link chèn vào website hay bài viết, tất cả đều hoàn toàn miễn phí.

Ưu điểm của Imgur là tốc độ upload nhanh, ảnh sau khi upload lên không bị resize hay giảm kích thước. Vì vậy nó rất tiện nếu bạn muốn làm 1 blog đọc truyện tranh hay blog ảnh.

Để up ảnh lên Imgur bạn có thể chọn cách tải ảnh lên mà không cần đăng kí tài khoản, hoặc đăng kí tài khoản rồi tải lên cũng được, cái này ưu điểm là dễ quản lý ảnh thôi.

Công cụ upload ảnh và tự động lấy link ảnh cho blogger
Công cụ upload ảnh và tự động lấy link ảnh trên Blogger

Bài viết này mình giới thiệu về công cụ upload ảnh và lấy link để chia sẻ qua trang imgur.com

Hướng dẫn thêm công cụ upload ảnh

Bước 1: Trước hết Đăng nhập vào trang Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Trang.

Bước 3: Nhấp vào biểu tượng dấu cộng + bên cạnh nút 'TRANG MỚI'.

Bước 4: Nhấp vào 'Chế độ xem HTML'.

Bước 5: Sau đó sao chép mã từ tập lệnh bên dưới và dán nó vào đó.

<!--[ Image upload tool imgur by Giahuy.net ]-->
<style>
body.loading .loading-modal{display:block}
.up-i{background: var(--contentBg-alt);padding: 10px;border-radius: 5px;}
.dropzone{border:1px dashed #999;position:relative;margin:0 auto;clear:both;}
.infoimg{margin:20px auto}
.dropzone p{margin:0;text-align:center;width:100%;}
.input{height:100%;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;cursor:cell}
.status{border-radius:5px;text-align:center;margin-left:auto;margin-right:auto}
input.image-url{width: 100%; background-color:var(--inputBg);border: 1px solid var(--contentBd-color);padding: 5px 5px 5px 32px;border-radius: 5px;background-image: url('//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZzjBu8th_qMHCuystN-4AcyLD6H_ODGLwcBO5M2OaS0jbKKtj1UQxY3TYm2ZCyNLRO62zJHDpoktsNj04WFezMjZ-IucHoZXg3pzs6yQsRtP6ncpKUevdkdN-bPtXaoragNYkuYyOCt6bse3GFPpiZUflsTniF-fxRGqgUrQ8gYwHPH_JRKP0BZtRvo/s0/icon.png');background-repeat: no-repeat;background-position: -34px -108px;}
.linkimg{width: 100%;margin:20px auto;display:inline-block}
.dropzone.dropzone-dragging{border-color:#000}
.loading-modal{background-color:rgba(255,255,255,.8);display:none;position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%}
.loading-table{border:none!important;margin-left:auto;margin-right:auto;margin-top:15%;margin-bottom:15%}
.loading-image {min-width:100px;opacity: 1;filter: blur(0);}
#svgZ {text-align:center}#svgZ svg {width:79px;height:79px}</style>

<div class='up-i'>
<div class='dropzone'>
  <div class='infoimg'>
    <div id='svgZ'><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256' enable-background='new 0 0 256 256' xml:space='preserve'><g><path fill='' d='M127.7,31.6c-7.2,0.9-18.7,4.6-25.3,8.2c-13.6,7.6-26.2,21.9-31.1,35.5L70,79h-4.1c-5.6,0-15.1,2-20.8,4.4c-15.1,6.3-27.5,19.8-32.8,35.6c-1.9,5.7-2.1,7.3-2.2,17.9c0,10.8,0.2,12.1,2.2,17.9c6.5,18.7,20.7,32.2,39.6,37.8c5.1,1.6,8,1.7,27.9,2c21.9,0.4,22.3,0.4,24-1.2c2.3-2.3,2.2-6.6-0.1-8.2c-1.5-1.1-4.9-1.2-21.2-1.2c-22.2,0-26.7-0.7-36-5.1c-4.7-2.3-7.4-4.3-12.2-9.2c-9.6-9.8-13.6-19.4-13.6-32.7c0-13.5,3.9-22.9,13.7-32.8c9.9-10.1,20.1-14.2,35.2-14.2c3.7,0,7.2-0.3,7.7-0.6c0.5-0.4,2-3.5,3.3-7.1C84.4,71,91,61.6,99.9,54.5c24.5-19.1,58.7-16.2,79.7,6.8c9,9.8,13.9,21.1,15,34.6c0.8,8.7,1.5,9.6,8.6,10.9c13.7,2.4,25.8,13,30.3,26.4c1.8,5.3,2.2,15.2,0.8,21.1c-2.1,9.2-10.7,20.3-19.2,24.8c-8.1,4.3-12,4.8-38,4.8c-21.6,0-23.6,0.1-25.2,1.4c-2.3,1.9-2.3,6.2,0.1,8.1c1.5,1.2,3.9,1.4,24.8,1.4c17.3,0,24.7-0.3,29.3-1.2c18.4-3.5,34.4-18.7,38.7-36.9c1.6-6.5,1.6-16.9,0-23.3c-3.9-16.6-18-31.3-34.5-36.1l-4.4-1.2l-1.2-7.2C198.5,52.5,164.8,27.5,127.7,31.6z'></path><path fill='' d='M126.3,134c-0.6,0.2-7.9,7.1-16.1,15.3c-12.9,12.8-15,15.2-15,17.2c0,1.2,0.3,2.7,0.6,3.2c1,1.6,4.1,2.7,5.8,2.3c0.9-0.3,6-4.8,11.3-10l9.5-9.5v34.4c0,32.1,0.1,34.4,1.4,36.1c2,2.4,6.1,2.4,8.1,0c1.3-1.7,1.4-4,1.4-36.1v-34.4l9.6,9.5c5.2,5.1,10.3,9.6,11.2,10c1.7,0.5,4.8-0.7,5.8-2.3c0.3-0.5,0.6-1.9,0.6-3.2c0-2-2.1-4.4-14.9-17.3c-8.2-8.2-15.7-15-16.6-15.2C128.2,133.8,126.9,133.8,126.3,134z'></path></g></svg></div>
  </div>
  <input type='file' class='input' accept='image/*'></div>
  <div class='status'>
  </div>
</div>

<script type='text/javascript'>
  /* Imgur Upload Script */
(function (root, factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory();
    } else {
        root.Imgur = factory();
    }
}(this, function () {
    "use strict";
    var Imgur = function (options) {
        if (!this || !(this instanceof Imgur)) {
            return new Imgur(options);
        }

        if (!options) {
            options = {};
        }

        if (!options.clientid) {
            throw 'Provide a valid Client Id here: https://api.imgur.com/';
        }

        this.clientid = options.clientid;
        this.endpoint = 'https://api.imgur.com/3/image';
        this.callback = options.callback || undefined;
        this.dropzone = document.querySelectorAll('.dropzone');
        this.infoimg = document.querySelectorAll('.infoimg');

        this.run();
    };

    Imgur.prototype = {
        createEls: function (name, props, text) {
            var el = document.createElement(name), p;
            for (p in props) {
                if (props.hasOwnProperty(p)) {
                    el[p] = props[p];
                }
            }
            if (text) {
                el.appendChild(document.createTextNode(text));
            }
            return el;
        },
        insertAfter: function (referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        },
        post: function (path, data, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.open('POST', path, true);
            xhttp.setRequestHeader('Authorization', 'Client-ID ' + this.clientid);
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        var response = '';
                        try {
                            response = JSON.parse(this.responseText);
                        } catch (err) {
                            response = this.responseText;
                        }
                        callback.call(window, response);
                    } else {
                        throw new Error(this.status + " - " + this.statusText);
                    }
                }
            };
            xhttp.send(data);
            xhttp = null;
        },
        createDragZone: function () {
            var p, input;

                p = this.createEls('p', {}, 'Chọn file ảnh hoặc kéo ảnh vào đây');
          		p.innerHTML = '<strong>Chọn file ảnh</strong> hoặc kéo ảnh vào đây';
            input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});

            Array.prototype.forEach.call(this.infoimg, function (zone) {
                zone.appendChild(p);
            }.bind(this));
            Array.prototype.forEach.call(this.dropzone, function (zone) {
                zone.appendChild(input);
                this.status(zone);
                this.upload(zone);
            }.bind(this));
        },
        loading: function () {
            var div, table, img;

            div = this.createEls('div', {className: 'loading-modal'});
            table = this.createEls('table', {className: 'loading-table'});
            img = this.createEls('img', {className: 'loading-image', src: 'https://www.giahuy.net/img/loading.svg'});

            div.appendChild(table);
            table.appendChild(img);
            document.body.appendChild(div);
        },
        status: function (el) {
            var div = this.createEls('div', {className: 'status'});

            this.insertAfter(el, div);
        },
        matchFiles: function (file, zone) {
            var status = zone.nextSibling;

            if (file.type.match(/image/) && file.type !== 'image/svg+xml') {
                document.body.classList.add('loading');
                status.classList.remove('bg-success', 'bg-danger');
                status.innerHTML = '';

                var fd = new FormData();
                fd.append('image', file);

                this.post(this.endpoint, fd, function (data) {
                    document.body.classList.remove('loading');
                    typeof this.callback === 'function' && this.callback.call(this, data);
                }.bind(this));
            } else {
                status.classList.remove('bg-success');
                status.classList.add('bg-danger');
                status.innerHTML = 'Invalid archive';
            }
        },
        upload: function (zone) {
            var events = ['dragenter', 'dragleave', 'dragover', 'drop'],
                file, target, i, len;

            zone.addEventListener('change', function (e) {
                if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                    target = e.target.files;

                    for (i = 0, len = target.length; i < len; i += 1) {
                        file = target[i];
                        this.matchFiles(file, zone);
                    }
                }
            }.bind(this), false);

            events.map(function (event) {
                zone.addEventListener(event, function (e) {
                    if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
                        if (event === 'dragleave' || event === 'drop') {
                            e.target.parentNode.classList.remove('dropzone-dragging');
                        } else {
                            e.target.parentNode.classList.add('dropzone-dragging');
                        }
                    }
                }, false);
            });
        },
        run: function () {
            var loadingModal = document.querySelector('.loading-modal');

            if (!loadingModal) {
                this.loading();
            }
            this.createDragZone();
        }
    };

    return Imgur;
}));
  var feedback = function(res) {
    if (res.success === true) {
        var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
        document.querySelector('.status').classList.add('bg-success');
        document.querySelector('.status').innerHTML =
            '<div class="linkimg"><input class="image-url extL" id="copylinkimg" onclick="this.select()" value=\"' + get_link + '\"/></div>' + '<div class="showimg"><img class="img" alt="Imgur-Upload" src=\"' + get_link + '\"/></div>';
    }
};
  
  new Imgur({
    clientid: 'f442ebe2efe3fc7',
    callback: feedback
});</script>

Lưu ý:
f442ebe2efe3fc7Client ID để tool có thể hoạt động, để chủ động hơn bạn tạo account tại imgur.com sau đó vào link sau để tạo và lấy Client ID riêng tránh việc mình xóa hoặc thay đổi Client ID này tool của bạn sẽ không hoạt động nữa.

Bước 6: Đặt tiêu đề cho trang, sau đó Xuất trang bằng cách nhấp vào Xuất bản.

Trên đây là hướng dẫn công cụ upload ảnh và tự động lấy link ảnh trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé!

Copyright © www.giahuy.net

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.