Home
Blogger
CODE

Chia Sẻ Code Trang Up Ảnh Nhanh Lên Imgur Bằng HTML5 Cho Blog

Up Ảnh Nhanh Lên Imgur Bằng HTML5

Xin chào các bạn đã đến với bài viết tiếp theo của Anh Tuấn Blog. Như hiện nay được biết của mình thì việc các bạn sử dụng Link ảnh khá nhiều nên việc up ảnh và lấy link ảnh nhanh là khá cần thiết với một số bạn, nên hôm nay mình sẽ hướng dẫn các bạn tạo một trang Up ảnh lên Imgur và lấy link cực nhanh

Official Mag Premium Template Blogger
Xem Demo

Chức năng

  • Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
  • Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng.
  • Sử dụng dễ dàng 7 định dạng BBcode mặc định, hoặc có thể tùy biến dữ liệu với 7 định dạng link.
  • Ảnh sau khi tải lên có thể cập nhật trực tiếp vào khung soạn thảo.
  • Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
  • Dễ dàng chuyển đổi 2 phương pháp tải ảnh thông dụng từ máy tính và từ liên kết.
  • Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh.
  • Tự chuyển về giao diện mini khi chiều rộng hẹp hơn 220px.
  • Kiểm soát định dạng, các ảnh trùng lặp và giới hạn 10 ảnh tối đa mỗi lượt, giúp tiết kiệm băng thông (vì mỗi app đăng ký trên ImgUr bị giới hạn).

Preview

Hướng dẫn chi tiết

  • Bước 1: Các bạn đăng nhập vào Blogger.com
  • Bước 2: Các bạn tạo một Trang mới và copy toàn bộ đoạn Code dưới đây dán vào
    • <h2 style="text-align: center;">
<b><span>Upload Your Photo Online And Get Working And Short Link</span></b></h2>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Upload Your Photo Online And Get Working And Short Link" border="0" data-original-height="339" data-original-width="509" height="426" src="https://i.imgur.com/WpIcLbf.jpg" title="Upload Your Photo Online And Get Working And Short Link" width="640" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b><span>Upload Your Photo Online And Get Working And Short Link</span></b></td></tr>
</tbody></table>
</div>
  <br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>
<!--zzImgUr plugin has updated js dropbox without re-upload because it does not delete--> <script src="https://kenbtec.github.io/uploadImg/upload.js" type="text/javascript"></script><style>
    /*
 * jQuery plugin zzImgUr ver 1.6 by AnhTuanBlog
 * http://ngohoanganhtuan.net/
 */
    .imgur_Zzbv,.imgur_Zzbv *{box-sizing:content-box;-moz-boxsizing:content-box;-webkit-box-sizing:content-box;margin:0;padding:0}
    .imgur_Zzbv input{-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial}
    .imgur_Zzbv{height:auto}
    .imgur_Zzbv-iconError,.imgur_Zzbv-iconDevs,.imgur_Zzbv-delete,.imgur_Zzbv-remove,.imgur_Zzbv-iconSelect,.imgur_Zzbv-button div img,.imgur_Zzbv-iconComplete,.imgur_Zzbv-iconImage{display:inline-block;background:url(https://i.imgur.com/e9GpBzF.png) no-repeat center center;width:16px;height:16px;float:left;margin:12px}
    .imgur_Zzbv-iconDevs{background-position:0 0}
    .imgur_Zzbv-iconComplete{background-position:-32px -16px}
    .imgur_Zzbv-status img{}
    .imgur_Zzbv-iconError{background-position:0 -32px}
    .imgur_Zzbv-iconSelect{background-position:0 -16px}
    .imgur_Zzbv-iconUpload{background-position:-16px -16px}
    .imgur_Zzbv-button div img.imgur_Zzbv-iconReset{background-position:-16px 0}
    .imgur_Zzbv-iconImage{background-position:-16px -32px}
    .imgur_Zzbv-iconImage.imgur_Zzbv-iconUrl{background-position:-32px -32px}
    .imgur_Zzbv-mode{cursor:pointer;width:40px;height:40px;float:left;background-color:#FF475D}
    .imgur_Zzbv-mode.imgur_Zzbv-zzURL{background-color:#0B704C}
    .imgur_Zzbv-button div{cursor:pointer;background-color:#359BED;border:0;height:40px;display:none;padding:0 10px;margin-left:-59px}
    .imgur_Zzbv-button .imgur_Zzbv-reset{background-color:#27ad61}
    .imgur_Zzbv-delete,.imgur_Zzbv-remove{background-position:-32px 0;position:absolute;right:3px;top:3px;height:16px;width:16px;text-indent:-9999px;overflow:hidden;background-color:transparent;margin:0}
    .imgur_Zzbv-control{position:relative;height:40px;line-height:40px;overflow:hidden;background:#3a5795;color:#FFF}
    .imgur_Zzbv-preview{overflow-y:auto;overflow-x:hidden}
    .imgur_Zzbv-li{background:#fff;list-style-type:none;position:relative;height:120px;border-top:1px solid #DDD;overflow:hidden;border:2px solid #bbb}
    .imgur_Zzbv-li:first-child{border-top:0 none}
    .imgur_Zzbv-li:nth-child(2n){background:#E7E6E6}
    .imgur_Zzbv-li:hover{background:#fff;color:#333}
    .imgur_Zzbv-li.imgur_Zzbv-success{background:#FFFFA1}
    .imgur_Zzbv-image{width:100px;overflow:hidden;position:absolute;height:113px;margin:10px}
    .imgur_Zzbv-image img{max-width:100%;max-height:100%;position:absolute;top:0;right:0;bottom:0;left:0}
    .imgur_Zzbv-info{position:absolute;left:140px;top:10px;right:10px;height:110px}
    .imgur_Zzbv-info > *{white-space:nowrap}
    .imgur_Zzbv-dl{line-height:34px}
    .imgur_Zzbv-dl > div{height:34px}
    .imgur_Zzbv-dt{float:left;width:70px;font-weight:400;font-size:14px}
    .imgur_Zzbv input.imgur_Zzbv-input{width:calc(100% - 84px)!important;height:16px!important;line-height:16px!important;margin:8px 0!important;padding:0!important}
    .imgur_Zzbv-status{position:absolute;width:16px;height:16px;line-height:16px;left:10px;display:none}
    .imgur_Zzbv-add{cursor:pointer;position:absolute;width:140px;height:40px;overflow:hidden;background:#27ad60;left:40px;top:0;z-index:1}
    .imgur_Zzbv-upload-URL.imgur_Zzbv-add{background:#C100E6}
    .imgur_Zzbv-textSelect{font-size:15px;position:absolute;width:100%;left:34px;height:40px;line-height:40px}
    .imgur_Zzbv-choose{cursor:pointer;z-index:10;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;font-size:300px;height:1000px;right:0;top:0;position:absolute}
    .imgur_Zzbv-length{position:absolute;width:50px;text-align:center;top:0;left:50%;margin-left:-25px;display:none}
    .imgur_Zzbv-button{position:absolute;width:100px;right:0;top:0;white-space:nowrap;z-index:10}
    .imgur_Zzbv-mode:hover,.imgur_Zzbv-button div:hover,.imgur_Zzbv-add:hover{background-color:#333}
    .imgur_Zzbv-devs-icon{position:absolute;right:0;top:0;line-height:16px}
    .imgur_Zzbv-tip{height:30px;font-size:15px;font-style:normal;line-height:30px;margin-bottom:20px}
    .imgur_Zzbv-tip img{vertical-align:middle;float:none;margin:-4px 0 0}
    .imgur_Zzbv-wrap-progress{background:#f8f8f8;height:3px;border:0;position:absolute;bottom:0;left:-141px;right:-10px}
    .imgur_Zzbv-progress{height:3px;background:red;width:1px}
    .imgur_Zzbv-errorURL{color:red}
    .imgur_Zzbv input.imgur_Zzbv-imageURL{width:calc(100% - 11px)!important;border:0 none!important;box-shadow:0 0 0 1px #DDD!important;height:16px!important;line-height:16px!important;margin:0 0 0 1px!important}
    .imgur_Zzbv-mini .imgur_Zzbv-button,.imgur_Zzbv-mini .imgur_Zzbv-add{width:40px}
    .imgur_Zzbv-mini .imgur_Zzbv-info{left:10px}
    .imgur_Zzbv-mini .imgur_Zzbv-wrap-progress{left:-10px}
    .imgur_Zzbv-upload-URL,.imgur_Zzbv-mini .imgur_Zzbv-image{display:none}
  </style>  <script type="text/javascript">//<![CDATA[
$(function(){
$(".upload").zzImgUr({
    cliendID: "74f5c858f447bb9",
    mode: "file",
    format: "o,",
    css: {
        width: "100%"
    },
    max: 10,
    loading: "http://i.imgur.com/m3NXDa6.gif",
    lang: {
        noID: "Unregistered application",
      addImage: "Choose photo",
      addURL: "Add the URL",
      reset: "Refresh",
      upload: "Upload",
      choose: "Selected",
      waitConnect: "Connecting...",
      waitUpload: "Uploading in progress...",
      noteURL: "Enter the image URL here:",
      errContact: '<a href="https://www.ngohoanganhtuan.net/" rel="nofollow" target="_blank">Click here</a> to report an error.',
      errURL: "The URL is not accessible.",
      errSize: "Error URL or size is too small.",
      errRepeat: "The URL is invalid or already in use."
    },
    success: function (firstVal, arrVal) {
        console.log(firstVal);
        console.log(arrVal);
    },
    input: function (arrInput) {
        console.log(arrInput);
        arrInput.click(function () {
            this.select();
            console.log(this);
        });
    },
    remove: function (firstVal, arrVal) {
        console.log(firstVal);
        console.log(arrVal);
    }
});
});//]]>
</script>

<div class="upload">
<div class="imgur_Zzbv" style="width: 100%;">
<div class="imgur_Zzbv-control">
<div class="imgur_Zzbv-mode">
<img alt="Image" class="imgur_Zzbv-iconImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" /></div>
<div class="imgur_Zzbv-status">
<img alt="loading..." src="https://i.imgur.com/m3NXDa6.gif" /></div>
<div class="imgur_Zzbv-upload-computer imgur_Zzbv-add">
<img alt="Select" class="imgur_Zzbv-iconSelect" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />
<div class="imgur_Zzbv-textSelect">
Chọn ảnh</div>
<input class="imgur_Zzbv-choose" multiple="multiple" type="file" /><br /></div>
<div class="imgur_Zzbv-upload-URL imgur_Zzbv-add" style="display: none;">
<div class="imgur_Zzbv-iconSelect">
</div>
<div class="imgur_Zzbv-textSelect">
Thêm URL</div>
</div>
<div class="imgur_Zzbv-length" style="display: none;">
<span class="imgur_Zzbv-complete">0</span> / <span class="imgur_Zzbv-selected">0</span></div>
<div class="imgur_Zzbv-button">
<div class="imgur_Zzbv-reset">
<img alt="Reset" class="imgur_Zzbv-iconReset" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />Làm mới</div>
<div class="imgur_Zzbv-upload" style="display: none;">
<img alt="Upload" class="imgur_Zzbv-iconUpload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />Tải lên</div>
</div>
</div>
<div class="imgur_Zzbv-preview">
<div class="imgur_Zzbv-list">
</div>
</div>
</div>
</div>
</div>
<h2 style="text-align: center;">
<b><span>Upload Your Photo Online And Get Working And Short Link</span></b></h2>
</div>
  • Bước 3: Các bạn chỉ cần nhấn Lưu và tận hưởng thành quả thôi nào

Chúc các bạn thành công sau khi đọc bài viết này nhé!!!

Bài viết liên quan:

5 comments

  1. Great Article
    • Thanks
  2. Nó không hoạt động anh tuấn ơi
  3. LÀm thế nào để thay đổi tài khoản imgur khác bạn nhỉ?