Tạo công cụ Up ảnh mini dành cho Blogger

Image Upload Tools for Blogger

Đây là một công cụ up ảnh có tên là zzImgUr do Zzbaivong viết nên. Ưu điểm của tool này là chỉ viết trên nền HTML5, không sử dụng php nên khá nhẹ và không phải setup host rắc rối. Bạn chỉ việc dán đoạn code bên dưới bài viết vào và sử dụng thôi.

Tính năng

1Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
2Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng.
3Sử 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.
4Ảnh sau khi tải lên có thể cập nhật trực tiếp vào khung soạn thảo.
5Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
6Dễ 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.
7Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh.
8Tự chuyển về giao diện mini khi chiều rộng hẹp hơn 220px.
9Kiể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.

Cách thực hiện

1Để dùng được lâu dài bạn nên vào ImgUr và lập cho mình 1 app mới tại địa chỉ này. Điền đầy đủ các thông tin vào. Ở dòng Authorization type bạn nên chọn dòng thứ 2 hoặc 3. Còn không thì bạn có dùng luôn đoạn code tại bước 3.

2Sau khi tạo app thành công bạn sẽ nhận được 1 Client ID như hình bên dưới.

3Dán đoạn code sau vào vị trí bạn cần đặt tool up ảnh. Nếu bạn định tạo trên 1 Page thì nhớ chuyển sang tab HTML.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<!--  zzImgUr plugin  --> <script src="https://sites.google.com/site/iristipsblogger/file/Up-anh-mini.js" type="text/javascript"></script><style>
    /*
 * jQuery plugin zzImgUr ver 1.6 by zzbaivong
 * http://devs.forumvi.com/ 
 */
.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{border:1px solid #333;background:#FFF;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(http://i.imgur.com/e9GpBzF.png) no-repeat center center;width:16px;height:16px;float:left;margin:7px}
.imgur_Zzbv-iconDevs{background-position:0 0}
.imgur_Zzbv-iconComplete{background-position:-32px -16px}
.imgur_Zzbv-status img{margin:0}
.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:30px;height:30px;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:30px;display:none;padding:0 10px 0 0}
.imgur_Zzbv-button .imgur_Zzbv-reset{background-color:#01686D}
.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:30px;line-height:30px;overflow:hidden;background:#333;color:#FFF}
.imgur_Zzbv-preview{overflow-y:auto;overflow-x:hidden}
.imgur_Zzbv-li{background:#f2f2f2;list-style-type:none;position:relative;height:68px;border-top:1px solid #DDD;overflow:hidden}
.imgur_Zzbv-li:first-child{border-top:0 none}
.imgur_Zzbv-li:nth-child(2n){background:#E7E6E6}
.imgur_Zzbv-li:hover{background:#007CEE;color:#FFF}
.imgur_Zzbv-li.imgur_Zzbv-success{background:#FFFFA1}
.imgur_Zzbv-image{width:100px;overflow:hidden;position:absolute;height:100%}
.imgur_Zzbv-image img{max-width:100%;max-height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}
.imgur_Zzbv-info{position:absolute;left:100px;top:0;right:0;height:100%}
.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:300;font-size:12px}
.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:5px;top:7px;display:none}
.imgur_Zzbv-add{cursor:pointer;position:absolute;width:100px;height:30px;overflow:hidden;background:orange;left:30px;top:0;z-index:10}
.imgur_Zzbv-upload-URL.imgur_Zzbv-add{background:#C100E6}
.imgur_Zzbv-textSelect{font-size:12px;position:absolute;width:100%;left:30px;height:30px;line-height:30px}
.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:90px;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:#666}
.imgur_Zzbv-devs-icon{position:absolute;right:0;top:0;line-height:16px}
.imgur_Zzbv-tip{height:24px;font-size:13px;font-style:italic;line-height:26px}
.imgur_Zzbv-tip img{vertical-align:middle;float:none;margin:-4px 0 0}
.imgur_Zzbv-wrap-progress{background:#FFF;height:3px;border:0;position:absolute;bottom:0;left:-100px;right:0}
.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:30px}
.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: "875087d69ea4b56",
    mode: "file",
    format: "o,",
    css: {
        width: "100%"
    },
    max: 10,
    loading: "http://i.imgur.com/m3NXDa6.gif",
    lang: {
        noID: "Ứng dụng chưa đăng ký",
      addImage: "Chọn ảnh",
      addURL: "Thêm URL",
      reset: "Làm mới",
      upload: "Tải lên",
      choose: "Đã chọn",
      waitConnect: "Đang kết nối...",
      waitUpload: "Đang tải lên...",
      noteURL: "Nhập URL ảnh vào đây:",
      errContact: '<a href="http://devs.forumvi.com/t131-jq-plugin-jquery-plugin-zzimgur#831" rel="nofollow" target="_blank">Nhấn vào đây</a> để báo lỗi.',
      errURL: "URL không truy cập được.",
      errSize: "URL lỗi hoặc kích thước quá nhỏ.",
      errRepeat: "URL không hợp lệ hoặc đã được sử dụng."
    },
    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 style="width: 100%;" class="imgur_Zzbv">
       
      <div class="imgur_Zzbv-control">
          
         <div class="imgur_Zzbv-mode">
            <img style="width: 16px; height: 16px;" alt="Image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconImage" />
         </div>
          
         <div class="imgur_Zzbv-status">
            <img alt="loading..." src="http://i.imgur.com/m3NXDa6.gif" />
         </div>
          
         <div class="imgur_Zzbv-upload-computer imgur_Zzbv-add">
             <img style="width: 16px; height: 16px;" alt="Select" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconSelect" /> 
            <div class="imgur_Zzbv-textSelect">
               Chọn ảnh
            </div>
             <input multiple="multiple" class="imgur_Zzbv-choose" type="file" /> 
         </div>
          
         <div style="display: none;" class="imgur_Zzbv-upload-URL imgur_Zzbv-add">
             
            <div class="imgur_Zzbv-iconSelect">
            </div>
             
            <div class="imgur_Zzbv-textSelect">
               Thêm URL
            </div>
             
         </div>
          
         <div style="display: none;" class="imgur_Zzbv-length">
             <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 style="width: 16px; height: 16px;" alt="Reset" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconReset" />Làm mới
            </div>
             
            <div style="display: none;" class="imgur_Zzbv-upload">
               <img style="width: 16px; height: 16px;" alt="Upload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconUpload" />Tải lên
            </div>
             
         </div>
          
      </div>
       
      <div class="imgur_Zzbv-preview">
          
         <div class="imgur_Zzbv-list">
         </div>
          
      </div>
       
   </div>
</div>

Chỉnh sửa: cliendID: "875087d69ea4b56" trong đoạn code trên lại thành ID app của bạn nhận được ở bước 2.

• DEMO

See the Pen up ảnh mini by Iris Tips (@IrisTips) on CodePen.

Vậy là bạn đã tạo cho mình được một tool up ảnh khá hiện đại cho website của mình rồi đấy.
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Zzbaivong/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm