Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

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

Công cụ upload ảnh

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.

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

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

Demo:

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

Chèn đoạn code bên dưới vào nơi bạn muốn hiển thị:

<div class='dropzone'>
 <div class='infoimg'></div>
</div>

Sử dụng 2 file JS bên dưới:

<script type='text/javascript' src='https://cdn.giahuy.net/imgur/upload.js'></script>
<script type='text/javascript' src='https:/cdn.giahuy.net/imgur/clientid.js'></script>

Bạn có thể dowload 2 file JS trên về để chỉnh sửa theo ý mình qua 2 link tương ứng imgur_upload.jsimgur_clientid.js.

Trong file imgur_clientid.js sẽ có nội dung như sau:

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: '72100ba3c6aded1',
    callback: feedback
});

Lưu ý: 72100ba3c6aded1Client 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.

Thêm giao diện cho công cụ trên bằng đoạn css dưới:

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

Trên đây là hướng dẫn công cụ upload ảnh và tự động lấy link ảnh cho 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é.

Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Getting Info...

Về tác giả

Mỗi khi có ý định từ bỏ hãy nghĩ đến lý do mà bạn bắt đầu.

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.