Chào các bạn, nếu các bạn để ý thì Star Cường IT đã hơn 2 tuần chưa up bài nào, nguyên nhân là do mình bận ôn thi cho kì thi sắp tới nên không có thời gian để lên chăm blog. Mong các bạn thông cảm. Trong hôm nay, mình sẽ hướng dẫn các bạn cách tạo trang up ảnh lên imgur.com cho blog đơn giản.
tao-trang-up-anh-len-imgur-com-cho-blogspot-don-gian
Hình Minh Họa




Các bước thực hiện

Bước 1: Tạo một trang mới cho blogspot, và chuyển sang phần viết HTML
Bước 2: Chèn đoạn code sau vào:

<script src="http://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>
<!--  zzImgUr plugin đa up lại js dropbox ko cần up lại vì ko xóa đâu  --> <script src="https://dl.dropboxusercontent.com/s/ybbxn699ravj52b/16855.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{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{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;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: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: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: "Ứ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>
<br />
<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="http://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;" />
            <br />
<div class="imgur_Zzbv-textSelect">
Chọn ảnh
            </div>
<input class="imgur_Zzbv-choose" multiple="multiple" type="file" />
         </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>
Bước 3: Lưu lại và tận hưởng

Lời Kết

Chỉ đơn giản vậy thôi! Chúc các bạn thành công.

CHIA SẺ BÀI VIẾT

- - 86 bình luận
CHUYÊN MỤC

BÌNH LUẬN (86)

  1. Trả lời
    1. bên LTT có cái này r nhưng lỗi, test bên Star Cường nó ít lỗi hơn r :v

      Xóa
    2. Ăn nói lại đàng hoàng nhé. Cái này không có lấy bên nào cả, cái mã upload tui khác LTT, chả giống chổ nào.

      Xóa
    3. ai nói của LTT đâu =.=
      "bên LTT có cái này r nhưng lỗi, test bên Star Cường nó ít lỗi hơn r :v". đọc kĩ lại cmt dùm cái

      Xóa
    4. by là bởi chứ đâu phải of đâu

      Xóa
    5. Design By LTT and Design Of LTT khác nhau hả :v

      Xóa
    6. cho hỏi Cường học lớp mấy rồi thế ! lên gg dịch BY và OF khác nhau chỗ nào nha !

      Xóa
    7. với lại không có cái từ DESIGN OF đau nhé ! vl thanh niên

      Xóa
    8. https://media.tenor.co/images/c0d2036429eb2c4f91f66af2c09b1b33/tenor.gif

      Xóa
  2. Lâu r mới thấy anh đăng bài, đăng cái tuyệt cú mèo

    Trả lờiXóa
  3. Hữu ích nhá , cho em cái link fb a

    Trả lờiXóa
  4. Cái này thấy bên Link thủ thuật mà chưa up thử, up lên lấy link đc luôn hả?

    Trả lờiXóa
  5. Demo cho target='_blank' để tiện lợi nhé k báo công an phường giờ đó :v

    Trả lờiXóa
  6. Chào bạn. Xin lỗi bạn cho mình hỏi cái này nha. Ko hiểu sao hôm nay mình post bài mới cho blog thì chữ nó tràn ra ngoài khung. Một số bạn blog của mình cũng bị tình trạng này. Mình có search tìm cách khác phục từ trang này:

    https://tienichno1.blogspot.com/2016/07/sua-loi-noi-dung-bai-viet-tran-ra-khoi.html?showComment=1513265903647#c6292424690375659084

    nhưng mình làm theo mà ko hiệu quả. Mình tìm blog bạn có rất nhiều thủ thuật hay nên nhờ bạn giúp. Cảm ơn bạn.

    Trả lờiXóa
    Trả lời
    1. Bạn gửi mình link trang blog của bạn mình xem nhé!

      Xóa
    2. Cảm ơn bạn, Đây là blog của mình. Bạn xem giúp mình nhé!
      http://onlydream199.blogspot.com

      Xóa
    3. Cái này mình không biết là bạn copy hay là viết, nếu là viết thì do template, còn không thì chắc do bạn copy nên bị thế.

      Xóa
    4. Thì nào giờ mình cũng viết trên drive rồi copy mà ko bị tình trạng đó, bỗng dưng hôm nay blogsot bị cái gì mình ko hiểu nữa. Bạn xem có cách nào giúp mình với! Mà các bạn blog của mình cũng bị vậy nữa. Cảm ơn bạn

      Xóa
    5. Bạn set admin mình xem! Tuananhle732@gmail.com

      Xóa
    6. Mình đã gửi rồi nha bạn. Cảm ơn bạn

      Xóa
    7. Chào bạn,hôm qua mình gửi rồi và mình vào đây ngóng bạn rất nhiều lần. Mình cũng ko biết sao bạn ko nhận dc. Mình vừa gửi lại rồi đó bạn. Cảm ơn bạn.

      Xóa
    8. Mình check lại thấy mail rồi, bạn set mình lên Admin đi.

      Xóa
    9. Hình như hết lỗi tràn chữ rồi thì phải.

      Xóa
    10. Vẫn còn tràn chữ bạn ơi, tại mình ngắt xuống dòng bài viết cho dễ coi đó. Giờ mình sẽ set admin bạn nha. Cảm ơn.

      Xóa
    11. Thấy vẫn bình thường mà ?
      https://i.imgur.com/BoprSke.png

      Xóa
    12. Chắc có lẽ do bạn gỏ chữ d liên tiếp nên ko bị tràn khung, mình text thử bài khác nó vẫn tràn khung. Bạn xem giúp mình nha. Cảm ơn

      Xóa
    13. Thế này thì do máy bạn rồi, mình đăng vẫn bình thường.
      http://onlydream199.blogspot.com/2017/12/test-star-cuong-it.html

      Xóa
    14. Vậy hả bạn? Vậy để mình coi lại máy. Cảm ơn bạn rất nhiều

      Xóa
  7. https://vina4u.vn/share-code-upload-anh-len-imgur-cho-blogspot_62988.html
    COPY KHÔNG GHI NGUỒN KÌA STAR CƯỜNG IT

    Trả lờiXóa
  8. Bài viết hay quá mà e add vào blog của e bị lỗi ad ơi? ad xem em sửa những gì được ah? https://www.qthang.net/p/up-anh.html

    Trả lờiXóa
    Trả lời
    1. Cái này là do chiều dài của cái temp bạn nó nhỏ quá, bạn sửa lại width dài hơn là thấy rõ.

      Xóa
  9. Trả lời
    1. http://chemgiocucai.blogspot.com/p/blog-page.html

      Xóa
    2. http://chemgiocucai.blogspot.com/p/them-anh.html

      Xóa
    3. Nhìn lướt qua cứ tưởng ông Niệm vì 2 logo màu giống nhau :3

      Xóa
    4. Cái này thì bó chân rồi :v chắc do temp :3 Chứ cũng code này mấy người khác làm vẫn ok mà.

      Xóa
    5. Chúng ta còn gia đình, con cha mẹ, người thân và cả người yêu, tại sao lại phải chết chứ. À mà thôi chết đi cho nó thanh thản.

      Xóa
    6. Ơ, đang nói nghiêm túc đấy :v

      Xóa
    7. http://chemgiocucai.blogspot.com/p/them-anh.html
      Click zo không được :V thật

      Xóa
  10. Hay lắm anh đang tìm mà không thấy bây h mới ra :)

    Trả lờiXóa
  11. tạo cái page full trang thế nào vậy bác

    Trả lờiXóa
    Trả lời
    1. Hỏi page up ảnh làm thế nào đấy, admin óc ch* vãi c** :3

      Xóa
    2. Trang úp ảnh ở trên có HD rồi ???

      Xóa
    3. ý bạn ý hỏi là làm ntn để ẩn sidebar + footer r làm cho phần bài viết nó rộng ra ấy...

      Xóa
  12. Đến giờ vẫn chưa làm lại cái này luôn :(

    Trả lờiXóa
  13. Đợt này bận vch, thôi để vài ngày nữa làm vậy xem sao

    Trả lờiXóa
  14. nên thêm vài dòng css và trong, sung đột css làm nó xấu đi

    Trả lờiXóa