Tạo trang up ảnh nhanh cho blogger

Chào các bạn! Hôm nay mình xin hướng dẫn các bạn cách tạo một trang up ảnh lên blogger đơn giả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:

Artikel Terkait

<script src="http://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>  <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>

Lưu Template lại là xong !!! Chúc các bạn thành công!!!