Tools 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 Đi tới liên kết đến đích
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 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.min.js'></script>
<script type='text/javascript' src='https://cdn.giahuy.net/widget/imgur/ClientID.min.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.min.jsClientID.min.js

Trong file ClientID.min.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.

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

Về tác giả

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 .

5 nhận xét

  1. Hello sir can u make this post video tutorial how to make in blogger plz sir
    1. I'm busy right now, I'll make videos when I'm free
    2. okay bro thanks but plz make fast your video i'm really your fan hope u understand
  2. hello admin plz make a video plzzzzzzzzzzz
    1. I'm very busy, but you don't understand what I can answer for you
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.