Tạo trang úp ảnh lấy link Imgur cho blogspot mới nhất

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

Thay vì vào trang imgur.com để úp ảnh lấy link thì nay mình làm cái này để tự úp ảnh lên Blog mình luôn cho tiện.

Tạo trang úp ảnh lấy link Imgur cho blogspot mới nhất
Tạo trang úp ảnh lấy link Imgur cho blogspot mới nhất.

Trước kia có rất nhiều bài viết hướng dẫn làm trang úp ảnh này nhưng đa số là code cũ bị lỗi. Bài viết này sẽ hướng dẫn các bạn làm một cách nhanh nhất với code mới nhất cho các bạn. Cùng xem hướng dẫn ở dưới nhé!

(getButton) #text=(Xem Demo) #icon=(link)

Hướng dẫn

Bước 1: Đăng nhập Blogger > Vào phần Trang và tạo Trang mới

Bước 2: Đặt tên cho tiêu đề Trang, sau đó tại mục hình cây bút chọn phần Chế độ xem HTML:

Tạo trang úp ảnh lấy link Imgur cho blogspot mới nhất
Chế độ xem HTML.

Bước 3: Các bạn copy toàn bộ phần code dưới đây và paste vào Trang:

<style>
body.loading .loading-modal{display:block}
.dropzone{border:2px dashed #999;border-radius:10px;position:relative;margin:0 auto;clear:both;}
.infoimg{margin:0 auto;margin-top:20px;margin-bottom:20px}
.dropzone p{margin:0;text-align:center;width:100%;font-weight:bold;color:#999}
.input{height:100%;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;cursor:-webkit-zoom-in}
.status{border-radius:5px;text-align:center;margin-left:auto;margin-right:auto}
.image-url{width:calc(100% - 10px);padding:5px;border:1px solid #999;border-radius:5px;color:#999}
.linkimg{margin:20px 0}
.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{margin-left:auto;margin-right:auto;margin-top:15%;margin-bottom:15%}
</style>
<div class="dropzone">
        <div class="infoimg"></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 p1, p2, input;
                p1 = this.createEls('p', {}, 'Kéo file ảnh vào đây');
                p2 = this.createEls('p', {}, 'Hoặc click để chọn ảnh');
            input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});
            Array.prototype.forEach.call(this.infoimg, function (zone) {
                zone.appendChild(p1);
                zone.appendChild(p2);
            }.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://firebasestorage.googleapis.com/v0/b/huydc-090288.appspot.com/o/Images%20Upload%2Floading-spin.svg?alt=media&token=8a1fd8dc-30b2-4b74-acc6-9e4ce55a89b0'});
            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" 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: '3a8be4390ef3eb8',
    callback: feedback
});
</script>

Lưu ý: 3a8be4390ef3eb8 là Client 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

Cách lấy Client ID imgur

Đầu tiên các bạn tạo cho mình một tài khoản imgur xong đã.

Tiếp đến ae vào đây để tạo Client ID: https://api.imgur.com/oauth2/addclient.

Tạo trang úp ảnh lấy link Imgur cho blogspot mới nhất
Điền thông tin vào như này, có thể chọn callback để add callback url.

Sau khi điền thông tin như ảnh các bạn bấm Sumbit là OK nó sẽ ra Client ID cho các bạn lấy chèn vào code ở trên.

Kết luận

Khá đơn giản để tạo một trang úp ảnh lấy link Imgur cho blogspot phải không nào. Chúc các bạn tạo thành công. Cảm ơn các bạn đã ghé xem!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu