Tools upload ảnh và tự động lấy link ảnh trên blogger

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

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 tổng quan Blogger.

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

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

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

Bước 6: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </head>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;!--</head>--&gt;&lt;/head&gt;.

<script type='text/javascript' src='https://cdn.giahuy.net/widget/imgur/Upload.js'></script>
<script type='text/javascript' src='https://cdn.giahuy.net/widget/imgur/ClientID.js'></script>

Bạn có thể tải về 2 file JavaScript trên về để chỉnh sửa theo ý mình qua 2 link tương ứng Upload.js và ClientID.js

Trong file 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 ý: 72100ba3c6aded1 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.

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Bước 8: Vậy là xong! Thêm các mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị 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>

Trên đây là hướng dẫn tools 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é.
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ả!

Copyright © www.giahuy.net