Tin Tức

recent
Home Blogger Code Share Code Up Ảnh Mini Cho Blogger - LuanNguyenIT

Share Code Up Ảnh Mini Cho Blogger - LuanNguyenIT

,

Chào các bạn. Mình xin chia sẻ với các bạn code upload ảnh lên sever Imgur cho blogspot. Code này chỉ có CSS, Javascript và HTML5. Chức... 


Chào các bạn. Mình xin chia sẻ với các bạn code upload ảnh lên sever Imgur cho blogspot. Code này chỉ có CSS, Javascript và HTML5.








Chức năng:


    

  1. Tải ảnh không giảm chất lượng nhờ dùng host Imgur.
    2. 

  2. Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng.
    3. 

  3. 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.
    4. 

  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.
    5. 

  5. Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
    6. 

  6. 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.
    7. 

  7. Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh.
    8. 

  8. Tự chuyển về giao diện mini khi chiều rộng hẹp hơn 220px.
    9. 

  9. 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).
    10. 




Để thêm code vào blog của bạn, đầu tiên các bạn vào Blog của bạn => Trang => Tạo trang mới và chuyển qua phần HTML và dán đoạn code sau vào:


123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<script src="http://bot-viet.info/js/uploadanh.js" type="text/javascript"></script>
<style>
.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(http://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{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: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 0 0;margin-left:-10px}
.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: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:10px;top:11px;display:none}
.imgur_Zzbv-add{cursor:pointer;position:absolute;width:110px;height:40px;overflow:hidden;background:#27ad60;left:40px;top:0;z-index:10}
.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:24px;font-size:15px;font-style:normal;line-height:26px}
.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: "9b061daf9f37078",
    mode: "file",
    format: "o,",
    css: {
        width: "auto"
    },
    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="https://www.facebook.com/luannguyenit.pro" 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>
<br>
<div class="upload"><div class="imgur_Zzbv" style="width: auto;"> <div class="imgur_Zzbv-control"> <div class="imgur_Zzbv-mode" style="display: block;"><img class="imgur_Zzbv-iconImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="16" width="16" alt="Image"></div> <div class="imgur_Zzbv-status" style="display: none;"><img src="http://i.imgur.com/m3NXDa6.gif" alt="loading..."></div> <div class="imgur_Zzbv-upload-computer imgur_Zzbv-add" style="display: block;"> <img class="imgur_Zzbv-iconSelect" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="16" width="16" alt="Select"> <div class="imgur_Zzbv-textSelect">Chọn ảnh</div> <input type="file" class="imgur_Zzbv-choose" multiple="multiple"> </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" style="display: none;"><img class="imgur_Zzbv-iconReset" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="16" width="16" alt="Reset">Làm mới</div> <div class="imgur_Zzbv-upload" style="display: none;"><img class="imgur_Zzbv-iconUpload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="16" width="16" alt="Upload">Tải lên</div> </div> </div> <div class="imgur_Zzbv-preview"> <div class="imgur_Zzbv-list"></div> </div> </div></div>
<br>
<img alt="Hướng dẫn upload ảnh nhanh - Luân Nguyễn IT" src="http://i.imgur.com/nuI331b.jpg" title="Hướng dẫn upload ảnh nhanh - Luân Nguyễn IT">
Share Code Up Ảnh Mini Cho Blogger - LuanNguyenIT Reviewed by Unknown on 10:39:00 Rating: 5

Từ khóa :

Thông tin tác giả:

- Chào mừng bạn đến với Website - Chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - Photoshop - PSD Tổng Hợp được cập nhật liên tục. Mong được mọi người quan tâm. Like và Share giúp Website phát triển nhé !!!

Không có nhận xét nào:

Đăng ký: Đăng Nhận xét (Atom)
All Rights Reserved by Kul Tricker Blog © 2015 - 2016
Template bởi: Nhật KTK Template by Nguyễn Đăng Nhật

Hộp thư đóng góp ý kiến

Tên

Email *

Thông báo *

Được tạo bởi Blogger.