Nâng cấp Threaded Comments Blogger với ảnh, video và syntax

Xin chào các bạn, ở bài viết trước tôi đã hướng dẫn cho các bạn cách chèn bộ icon tùy chỉnh vào Threaded Comments Blogger, và trong bài viết này chúng ta sẽ tăng lực cho nó bằng việc chèn thêm ảnh, video youtube và syntax code

Khung bình luận của blogger thô sơ tới nỗi chèn vài thẻ html cơ bản vào cũng bị cấm, vì vậy không còn cách nào khác ta cần tạo các short code và sử dụng js để chuyển chúng về tag html. Nói vậy có nghĩa không chỉ có ảnh (thẻ img), video (thẻ iframe), syntax code (thẻ pre) mà với bất kì thẻ html cơ bản nào ta đều có thể dùng js để biến đổi được

Trong bài viết này tôi sử dụng SyntaxHighlighter 3.0.83 (theme Eclipse, 3 module js-html-css) phục vụ cho làm đẹp code và fancybox 3.3.5 phục vụ cho việc xem ảnh trong khung bình luận ở chế độ lightbox. Và đương nhiên điều kiện bắt buộc là bạn không tắt blogger comment trên trang của mình

Đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML

Tìm tới

<b:includable id='threaded_comments' var='post'> 

mở rộng nó ra và chèn code js vào SAU

<div class='comments-content'> 

như hình

<!-- Required for SyntaxHighlighter -->
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>

<!-- Custom Theme for SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ -->
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreEclipse.min.css' rel='stylesheet' type='text/css'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css' rel='stylesheet' type='text/css'/>

<!-- Module for SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ -->
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'/>

<!-- Required for fancybox -->
<link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[
function smartComment() {
    a = document.getElementById("comment-holder");
    b = a.innerHTML;
    b = b.replace(/\[pre\]/gi, "<pre>");
    b = b.replace(/\[pre js\]/gi, "<pre class='brush:js'>");
    b = b.replace(/\[pre html\]/gi, "<pre class='brush:html'>");
    b = b.replace(/\[pre css\]/gi, "<pre class='brush:css'>");
    b = b.replace(/\[\/pre\]/gi, "</pre>");
    b = b.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    b = b.replace(/\[img\]/gi, "<img data-fancybox='gallery' src='");
    b = b.replace(/\[\/img\]/gi, "'/>");
    b = b.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    b = b.replace(/\[youtube\]https:\/\/youtu.be/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed");
    b = b.replace(/\[youtube\]https:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed/");
    b = b.replace(/&amp;feature=/gi, "?rel=0' '");
    b = b.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    a.innerHTML = b
}
smartComment();

$("#comment-holder img").each(function() {
    $(this).attr('data-src', $(this).attr("src"));
});

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

$(window).on('load', function() {
    var t = document.createElement("script");
    t.src = "//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js";
    document.body.appendChild(t);
    $("#comment-holder img[data-fancybox]").fancybox();
});
//]]></script>

Trong đó

• Ảnh và video bạn không cần chỉnh sửa gì
• Themes cho SyntaxHighlighter bạn lấy list tại http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ và lấy link nhúng tại https://cdnjs.com/libraries/SyntaxHighlighter
• Phần đánh dấu màu xanh bạn có thể tùy chỉnh thêm bớt các module. Lấy list module tại http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ và lấy link nhúng tại https://cdnjs.com/libraries/SyntaxHighlighter

Ví dụ tôi muốn thêm syntax cho code php thì phải thêm link nhúng

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js'/>

và tạo thêm short code

b = b.replace(/\[pre php\]/gi, "<pre class='brush:php'>");

Phần màu đỏ là short code bạn tự tạo tùy thích, phần màu xanh phải chuẩn Brush aliases của SyntaxHighlighter không code nó không làm đẹp đâu nhé
Theo đó với code trình bày ở trên các short code khi bình luận sẽ là
chèn ảnh: [img]link ảnh[/img]
chèn video youtube: [youtube]link video[/youtube]
chèn code HTML: [pre html]code[/pre]
chèn code CSS: [pre css]code css[/pre]
chèn code JS: [pre js]code js[/pre]
... (bạn có thể thêm các module syntax tùy theo mục đích sử dụng)

Link ảnh: là link dạng trực tiếp ví dụ https://i.imgur.com/0GZdCna.jpg Link video: là link video trên youtube, copy trên thanh địa chỉ của trình duyệt ví dụ https://www.youtube.com/watch?v=MhQKe-aERsU
Các đoạn code js, html, css phải được convert các kí tự đặc biệt, bạn có thể tự tạo tool convert để người dùng chuyển đổi trước khi bình luận

KẾT LUẬN: kết hợp với bộ icon và thêm các chức năng trong bài viết này, chắc chắn khung bình luận blog của bạn sẽ rất đắt khách.

Để lại bình luận nếu gặp khó khăn và chúc thành công !

Nguồn : Hung1001.Blog

Material Design Dialog Box with jQuery

Ở bài viết trước tôi đã giới thiệu cho các bạn 1 hộp thông báo ẩn hiện responsive đơn giản với js và css. Trong bài viết này, chúng ta sẽ cho nó màu mè thêm 1 chút bằng việc thiết kế theo phong cách Material.

Trong thủ thuật này tôi sử dụng font awesome 5

Tích hợp các thư viện cần thiết nếu blog bạn chưa có, chèn trước thẻ đóng </head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css'/>

Viết CSS

.material-noti-content,
.material-noti-overlay {
    visibility: hidden;
    opacity: 0
}

.material-noti-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10
}

.material-noti-content {
    background: #fff;
    padding: 25px;
    left: 50%;
    top: 40%;
    position: relative;
    -webkit-transform: translateX(-50%) translateY(-50%) !important;
    transform: translateX(-50%) translateY(-50%) !important;
    transition: all .3s ease-in-out;
    max-width: 60%;
    z-index: 1000;
    border-radius: 4px;
    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2)
}

.material-noti-btn {
    z-index: 1000;
    text-decoration: none;
    font-size: 18px;
    color: #111
}

.material-noti-overlay {
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, .59);
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 999;
    transition: all .4s ease-in-out
}

.material-noti-title {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 20px
}

.material-noti-content.shows,
.material-noti-overlay.shows {
    visibility: visible;
    opacity: 1
}

.material-noti-content.shows {
    top: 50%
}

.material-noti-wrap.shows {
    z-index: 1000
}

.material-noti-text {
    font-size: 16px;
    line-height: 1.5
}

.close-noti {
    font-size: 20px;
    color: #111;
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 10px 8px;
    padding:7px 10px
}

.done-wrap {
    margin-top: 20px;
    text-align: right
}

.done {
    font-size: 14px;
    color: #fff;
    background: #3949ab;
    padding: 9px 13px;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none
}

.done:hover,.close-noti:hover {
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: all .4s ease-in-out
}

Đặt code HTML sau thẻ mở <body>

<div class='material-noti-wrap'>
    <div class='material-noti-content'>
        <div class='material-noti-title'>Notification</div>
        <div class='material-noti-text'>
           <!-- Viết thông báo vào đây -->
         </div>
        <div class='done-wrap'>
            <a class='close-noti' href='javascript:void(0)'><i class='fas fa-times'></i></a></div>
        <div class='done-wrap'>
            <a class='done' href='javascript:void(0)'>Done</a></div>
    </div>
</div>
<div class='material-noti-overlay'></div>

Đặt code js trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    $(".close-noti,.done").click(function() {
        $(".material-noti-wrap,.material-noti-content,.material-noti-overlay").removeClass("shows")
    })
}), $(document).ready(function() {
    $(".material-noti-btn").click(function() {
        $(".material-noti-wrap,.material-noti-content,.material-noti-overlay").toggleClass("shows")
    })
});
//]]></script>

Tạo button mở thông báo, đặt ở bất kì vị trí nào bạn mong muốn

<a class='material-noti-btn' href='javascript:void(0)' title='Notification'><i class='far fa-bell'></i></a>

DEMO ở thanh MENU

Chúc các bạn thành công :)

Nguồn : Hung1001.blog

Tạo khung chứa code có nút copy to clipboard cho blogspot

Trong bài viết Tạo khung chứa code có nút copy to clipboard cho blogspot chúng ta đã tạo được một form rất chuyên nghiệp để chia sẻ code, tuy nhiên nhận thấy vẫn có nhiều bất tiện trong quá trình sử dụng, để khắc phục điều đó chúng ta sẽ nâng cấp lên version 2 dễ sử dụng hơn sẽ được trình bày chi tiết trong bài viết này.

Công cụ để tạo nên khung code này

• jQuery
• Font Awesome
• ClipboardJS
• Tooltip Bootstrap component

Bài viết sử dụng jQuery 3.3.1, Font Awesome 5, ClipboardJS 2.0.1 và Tooltip Bootstrap 3.3.7

Tích hợp CSS tooltip và CSS khung chứa code

.codeHeader{background-color:#f5f5f5;border:1px solid #e0e0e0;border-bottom:0;text-align:right;padding:6px 0}
.copy-text{font-size:14px;cursor:pointer;color:#707070;padding:7px 10px;border-left:1px solid #e0e0e0}
.copy-text:before{font-family:"font awesome 5 free";content:"\f24d";display:inline-block;margin-right:7px}
.copy-text:hover{color:#707070;background:#ccc}
pre copy{display:block;background:#f9f9f9;max-height:400px;font-size:14px;color:black;text-align:left;overflow:auto;border:1px solid #d3d6db;margin:auto;padding:16px;line-height:21px}
.tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}
.tooltip.in{opacity:.9;filter:alpha(opacity=90)}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}

Tích hợp jQuery, Font Awesome 5, chèn code trước thẻ </head> (bỏ qua nếu đã tích hợp)

<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Tích hợp ClipboardJS và Tooltip chèn code trước thẻ đóng </body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'/>
<script type='text/javascript'>//<![CDATA[
/* ========================================================================
 * Bootstrap: tooltip.js v3.3.7
 * http://getbootstrap.com/javascript/#tooltip
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */
!function(t){"use strict";var e=function(t,e){this.type=null,this.options=null,this.enabled=null,this.timeout=null,this.hoverState=null,this.$element=null,this.inState=null,this.init("tooltip",t,e)};e.VERSION="3.3.7",e.TRANSITION_DURATION=150,e.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},e.prototype.init=function(e,i,o){if(this.enabled=!0,this.type=e,this.$element=t(i),this.options=this.getOptions(o),this.$viewport=this.options.viewport&&t(t.isFunction(this.options.viewport)?this.options.viewport.call(this,this.$element):this.options.viewport.selector||this.options.viewport),this.inState={click:!1,hover:!1,focus:!1},this.$element[0]instanceof document.constructor&&!this.options.selector)throw new Error("`selector` option must be specified when initializing "+this.type+" on the window.document object!");for(var n=this.options.trigger.split(" "),s=n.length;s--;){var r=n[s];if("click"==r)this.$element.on("click."+this.type,this.options.selector,t.proxy(this.toggle,this));else if("manual"!=r){var l="hover"==r?"mouseenter":"focusin",a="hover"==r?"mouseleave":"focusout";this.$element.on(l+"."+this.type,this.options.selector,t.proxy(this.enter,this)),this.$element.on(a+"."+this.type,this.options.selector,t.proxy(this.leave,this))}}this.options.selector?this._options=t.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},e.prototype.getDefaults=function(){return e.DEFAULTS},e.prototype.getOptions=function(e){return(e=t.extend({},this.getDefaults(),this.$element.data(),e)).delay&&"number"==typeof e.delay&&(e.delay={show:e.delay,hide:e.delay}),e},e.prototype.getDelegateOptions=function(){var e={},i=this.getDefaults();return this._options&&t.each(this._options,function(t,o){i[t]!=o&&(e[t]=o)}),e},e.prototype.enter=function(e){var i=e instanceof this.constructor?e:t(e.currentTarget).data("bs."+this.type);if(i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i)),e instanceof t.Event&&(i.inState["focusin"==e.type?"focus":"hover"]=!0),i.tip().hasClass("in")||"in"==i.hoverState)i.hoverState="in";else{if(clearTimeout(i.timeout),i.hoverState="in",!i.options.delay||!i.options.delay.show)return i.show();i.timeout=setTimeout(function(){"in"==i.hoverState&&i.show()},i.options.delay.show)}},e.prototype.isInStateTrue=function(){for(var t in this.inState)if(this.inState[t])return!0;return!1},e.prototype.leave=function(e){var i=e instanceof this.constructor?e:t(e.currentTarget).data("bs."+this.type);if(i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i)),e instanceof t.Event&&(i.inState["focusout"==e.type?"focus":"hover"]=!1),!i.isInStateTrue()){if(clearTimeout(i.timeout),i.hoverState="out",!i.options.delay||!i.options.delay.hide)return i.hide();i.timeout=setTimeout(function(){"out"==i.hoverState&&i.hide()},i.options.delay.hide)}},e.prototype.show=function(){var i=t.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(i);var o=t.contains(this.$element[0].ownerDocument.documentElement,this.$element[0]);if(i.isDefaultPrevented()||!o)return;var n=this,s=this.tip(),r=this.getUID(this.type);this.setContent(),s.attr("id",r),this.$element.attr("aria-describedby",r),this.options.animation&&s.addClass("fade");var l="function"==typeof this.options.placement?this.options.placement.call(this,s[0],this.$element[0]):this.options.placement,a=/\s?auto?\s?/i,p=a.test(l);p&&(l=l.replace(a,"")||"top"),s.detach().css({top:0,left:0,display:"block"}).addClass(l).data("bs."+this.type,this),this.options.container?s.appendTo(this.options.container):s.insertAfter(this.$element),this.$element.trigger("inserted.bs."+this.type);var h=this.getPosition(),f=s[0].offsetWidth,c=s[0].offsetHeight;if(p){var u=l,d=this.getPosition(this.$viewport);l="bottom"==l&&h.bottom+c>d.bottom?"top":"top"==l&&h.top-c<d.top?"bottom":"right"==l&&h.right+f>d.width?"left":"left"==l&&h.left-f<d.left?"right":l,s.removeClass(u).addClass(l)}var g=this.getCalculatedOffset(l,h,f,c);this.applyPlacement(g,l);var m=function(){var t=n.hoverState;n.$element.trigger("shown.bs."+n.type),n.hoverState=null,"out"==t&&n.leave(n)};t.support.transition&&this.$tip.hasClass("fade")?s.one("bsTransitionEnd",m).emulateTransitionEnd(e.TRANSITION_DURATION):m()}},e.prototype.applyPlacement=function(e,i){var o=this.tip(),n=o[0].offsetWidth,s=o[0].offsetHeight,r=parseInt(o.css("margin-top"),10),l=parseInt(o.css("margin-left"),10);isNaN(r)&&(r=0),isNaN(l)&&(l=0),e.top+=r,e.left+=l,t.offset.setOffset(o[0],t.extend({using:function(t){o.css({top:Math.round(t.top),left:Math.round(t.left)})}},e),0),o.addClass("in");var a=o[0].offsetWidth,p=o[0].offsetHeight;"top"==i&&p!=s&&(e.top=e.top+s-p);var h=this.getViewportAdjustedDelta(i,e,a,p);h.left?e.left+=h.left:e.top+=h.top;var f=/top|bottom/.test(i),c=f?2*h.left-n+a:2*h.top-s+p,u=f?"offsetWidth":"offsetHeight";o.offset(e),this.replaceArrow(c,o[0][u],f)},e.prototype.replaceArrow=function(t,e,i){this.arrow().css(i?"left":"top",50*(1-t/e)+"%").css(i?"top":"left","")},e.prototype.setContent=function(){var t=this.tip(),e=this.getTitle();t.find(".tooltip-inner")[this.options.html?"html":"text"](e),t.removeClass("fade in top bottom left right")},e.prototype.hide=function(i){var o=this,n=t(this.$tip),s=t.Event("hide.bs."+this.type);function r(){"in"!=o.hoverState&&n.detach(),o.$element&&o.$element.removeAttr("aria-describedby").trigger("hidden.bs."+o.type),i&&i()}if(this.$element.trigger(s),!s.isDefaultPrevented())return n.removeClass("in"),t.support.transition&&n.hasClass("fade")?n.one("bsTransitionEnd",r).emulateTransitionEnd(e.TRANSITION_DURATION):r(),this.hoverState=null,this},e.prototype.fixTitle=function(){var t=this.$element;(t.attr("title")||"string"!=typeof t.attr("data-original-title"))&&t.attr("data-original-title",t.attr("title")||"").attr("title","")},e.prototype.hasContent=function(){return this.getTitle()},e.prototype.getPosition=function(e){var i=(e=e||this.$element)[0],o="BODY"==i.tagName,n=i.getBoundingClientRect();null==n.width&&(n=t.extend({},n,{width:n.right-n.left,height:n.bottom-n.top}));var s=window.SVGElement&&i instanceof window.SVGElement,r=o?{top:0,left:0}:s?null:e.offset(),l={scroll:o?document.documentElement.scrollTop||document.body.scrollTop:e.scrollTop()},a=o?{width:t(window).width(),height:t(window).height()}:null;return t.extend({},n,l,a,r)},e.prototype.getCalculatedOffset=function(t,e,i,o){return"bottom"==t?{top:e.top+e.height,left:e.left+e.width/2-i/2}:"top"==t?{top:e.top-o,left:e.left+e.width/2-i/2}:"left"==t?{top:e.top+e.height/2-o/2,left:e.left-i}:{top:e.top+e.height/2-o/2,left:e.left+e.width}},e.prototype.getViewportAdjustedDelta=function(t,e,i,o){var n={top:0,left:0};if(!this.$viewport)return n;var s=this.options.viewport&&this.options.viewport.padding||0,r=this.getPosition(this.$viewport);if(/right|left/.test(t)){var l=e.top-s-r.scroll,a=e.top+s-r.scroll+o;l<r.top?n.top=r.top-l:a>r.top+r.height&&(n.top=r.top+r.height-a)}else{var p=e.left-s,h=e.left+s+i;p<r.left?n.left=r.left-p:h>r.right&&(n.left=r.left+r.width-h)}return n},e.prototype.getTitle=function(){var t=this.$element,e=this.options;return t.attr("data-original-title")||("function"==typeof e.title?e.title.call(t[0]):e.title)},e.prototype.getUID=function(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},e.prototype.tip=function(){if(!this.$tip&&(this.$tip=t(this.options.template),1!=this.$tip.length))throw new Error(this.type+" `template` option must consist of exactly 1 top-level element!");return this.$tip},e.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},e.prototype.enable=function(){this.enabled=!0},e.prototype.disable=function(){this.enabled=!1},e.prototype.toggleEnabled=function(){this.enabled=!this.enabled},e.prototype.toggle=function(e){var i=this;e&&((i=t(e.currentTarget).data("bs."+this.type))||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i))),e?(i.inState.click=!i.inState.click,i.isInStateTrue()?i.enter(i):i.leave(i)):i.tip().hasClass("in")?i.leave(i):i.enter(i)},e.prototype.destroy=function(){var t=this;clearTimeout(this.timeout),this.hide(function(){t.$element.off("."+t.type).removeData("bs."+t.type),t.$tip&&t.$tip.detach(),t.$tip=null,t.$arrow=null,t.$viewport=null,t.$element=null})};var i=t.fn.tooltip;t.fn.tooltip=function(i){return this.each(function(){var o=t(this),n=o.data("bs.tooltip"),s="object"==typeof i&&i;!n&&/destroy|hide/.test(i)||(n||o.data("bs.tooltip",n=new e(this,s)),"string"==typeof i&&n[i]())})},t.fn.tooltip.Constructor=e,t.fn.tooltip.noConflict=function(){return t.fn.tooltip=i,this}}(jQuery);
//]]></script>

Cuối cùng khởi tạo nút copy, tooltip cùng 1 số thành phần cần thiết, chèn code ngay bên dưới 2 script bên trên

<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function($) {
    jQuery("pre copy").before("<div class='codeHeader'><a class='copy-text' data-clipboard-target='pre copy' data-clipboard-action='copy'>Copy</a></div>");
    $('.copy-text').tooltip({
        trigger: 'click'
    })
});
var clipboard = new ClipboardJS(".copy-text", {
    target: function(trigger) {
        return trigger.parentNode.nextElementSibling
    }
});

function setTooltip(btn, message) {
    $(btn).tooltip('hide').attr('data-original-title', message).tooltip('show');
}

function hideTooltip(btn) {
    setTimeout(function() {
        $(btn).tooltip('hide');
    }, 1000);
}
clipboard.on('success', function(e) {
    var btn = $(e.trigger);
    setTooltip(btn, 'Copied');
    hideTooltip(btn);
});
clipboard.on('error', function(e) {
    var btn = $(e.trigger);
    setTooltip('Failed');
    hideTooltip(btn);
});
//]]></script>

Lưu mẫu lại !

Khi viết bài để tạo khung code bạn chuyển chế độ HTML và đặt code theo mẫu

<pre><copy>
<!-- Dán code vào đây -->
</copy></pre>

Trước khi dán code bạn cần convert các kí tự để tránh code chạy luôn trên trang, sử dụng công cụ convert để chuyển đổi nhé

Như bạn thấy, mẫu code tạo form khi viết bài đã được rút gọn đi một cách không thể ngắn hơn nhờ 1 ít js, bên cạnh đó bạn cũng không cần chỉnh sửa data-clipboard-target nữa, icon font cũng được định nghĩa qua css, bạn có thể dễ dàng thay đổi trong template



#Lưu ý: Nếu bạn tích hợp ClipboardJS verson 1.x.x thì phải chuyển ClipboardJS thành Clipboard để code hoạt động đúng nhé

DEMO

KẾT LUẬN: Khi ghé thăm các trang về thủ thuật, tôi rất thích trang nào có nút copy to clipboard rất thích quay lại trang của họ, vì đơn giản nó giảm được rất nhiều thao tác tay cũng như thể hiện được độ chuyên nghiệp của webmaster. Hi vọng khung chứa code này sẽ sớm xuất hiện trên trang của bạn

Chúc thành công !

Nguồn : Hung1001.blog

HƯỚNG DẪN TẠO TIỆN ÍCH THỐNG KÊ TUYỆT ĐẸP CHO BLOG

Xin chào các bạn cũng khá là lâu rồi mình chưa viết thủ thuật gì blogger , à và mình
cũng xin chân thành cảm ơn các bạn đã ủng hộ website hùng coder trong thời gian qua , và mình là cộng tác viết mới của hùng coder là STAR ÚT  và bài này cũng chính là bài đầu tiên mình viết trên blog hùng coder, mong các bạn ủng hộ mình nhé , thôi không nói dài vòng nữa đi thẳng vấn đề luôn.

GIỚI THIỆU

Chắc hằng mọi người chuyên về làm web cá nhân , chia sẻ thủ thuật,... thì chắc không xa lạ gì so với những cái khung , widget cá nhân nhằm mục đích giới thiệu hay , những chuyên mục linh tinh khác , nhưng trên mạng hiện nay có hướng dẫn rất nhiều cách tạo widget cá nhân khác nhau , từ đẹp đến xấu điều có thừa , nhưng hôm nay STAR ÚT xin chia sẻ đến các bạn một widget tuyệt đẹp được tào từ css và html 5 , thôi không nói dài vòng nữa đi thẳng vấn đề luôn nhé .

Hình Minh Họa

HƯỚNG DẪN

Bước 1 : Đăng nhập vô trang quản lý blogger và tìm đến mục Chủ đề => chỉnh sửa html => crtl + F   tìm đến thẻ ]]></b:skin> trong template và chép đoạn css Sau nằm trên nó.

/* starutblog */ section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important} .feau{height:100px;background:url('http://theneodesign.com/wp-content/uploads/2014/04/2014-04-26-06.32.50-pm.jpg');padding:2px0;text-align:center} .feau h1{background:;font-size:25px;color:#fff;text-align:center} .feau p{font-size:15px;color:#fff;text-align:center;margin-bottom:7px!important} .pms-logo-widget img{max-height:80px;border:5px solid #fff;border-radius:100%;margin-top:-40px;margin-left:calc(50% - 40px);background: #4d90fe;} .pms-logo-widget img:hover{-moz-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-o-transform: rotateY(180deg); transform: rotateY(180deg);} .info{float:left;width:100%;background:#fff;min-height:30px;margin-top:-35px;padding:5px} .col-widget{float:left;width:48%;text-align:center;height:35px;line-height:35px;font-size:18px;color:#333;} /* Butom Follow */ .pms-follow-wrpicon{display:block;margin:15px auto 5px;position:relative;} .pms-follow-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .pms-follow-icon{display:inline-block;border:0;margin:0;padding:0;width:48.8%} .extender .pms-follow-icon a{background:#fff;display:inline-block;font-weight:400;color:#006e78;line-height:36px;border-radius:3px;font-size:14px;border:1px solid #006e78;width:100%;transition:initial} .extender .pms-follow-icon i{font-family:fontawesome;margin:0 4px 0 0} .pms-follow-icon.blogger a:hover,.pms-follow-icon.ppal a:hover{background:#006e78;border-color:transparent;color:#fff;} .extender .pms-follow-icon:hover a,.extender .pms-follow-icon a:hover{color:#fff;}

 BƯỚC 2 : các bạn truy cập vào trang quản trị blogger => chọn thêm tiện ích => JavaScript => copy đoạn html 5 sau vào và save blogger lại hưởng thụ thành quả nhé.

<div class="feau"> <h1><i class="fa fa-code"></i> Star Út Blog</h1> <p>Chia Sẽ Thủ Thuật Facebook & Blogger , Seo Tip</p> </div> <br /> <div class="pms-logo-widget"><a href="/"><img src="https://i.imgur.com/AO5NjNg.jpg" /> </a></div> <div class="info"> <div class="col-widget so-bai"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <script style="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)); } </script> <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </div> <div class="col-widget so-comment"> <i class="fa fa-comments-o" aria-hidden="true"></i> <script style="text/javascript"> function numberOfComments(json) { document.write(json.feed.openSearch$totalResults.$t); } </script> <script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script> </div></div> <div style="clear:both; margin-top:10px ;"></div> <div class="pms-follow-wrpicon"> <ul class="extender"> <li class="pms-follow-icon blogger"><a href="https://www.blogger.com/follow-blog.g?blogID=4204156137751445880" target="_blank" title="Follow this site">
<i class="fa fa-users"></i> Theo Dõi</a></li> <li class="pms-follow-icon ppal"><a href="//www.facebook.com/starut.leminhut.blogspot" target="_blank" title="Liên Hệ"><i class="fa fa-paper-plane"></i> Liên Hệ</a>
</li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/2018/04/lien-ket-ban-be-hop-tac-phat-trien-blogs.html" title="Đặt Liên Kết"><i class="fa fa-handshake-o"></i> Đặt Liên Kết</a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Seo%20Tip" target="_blank" title="Seo Tip"><i class="fa fa-map"></i> Seo Tip</a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Thủ%20Thuật%20Blogspot" title="thủ Thuật blog"><i class="fa fa-newspaper-o"></i> Thủ Thuật blog </a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Fix%20Lỗi%20Blogger" title="fix lỗi blog"><i class="fa fa-gear"></i> Fix Lỗi Blog </a></li>
<li class="pms-follow-icon ppal"><a href="//leminhut.blogspot.com/search/label/Blogger%20Templates" title="template"><i class="fa fa-barcode"></i> Template </a></li>
</ul></div> <div class='clear'></div>

LỜI KẾT

Như vậy chỉ vài bước đơn giản mình đã hướng dẫn xong cho các bạn cách tạo một tiện ích cá nhân trên blogs tuyệt đẹp rồi đó , nếu thấy hay hãy share và ghé thăm blogs STAR ÚT ủng hộ mình nhé , cảm ơn các bạn đã phí 5 phút đọc bài viết của mình , xin chân thành cảm ơn.
Nguồn : không rõ , view - soucre :howktech

LIVE DEMO

TẠO QUẢNG CÁO DẠNG NỔI, CÓ NÚT ĐÓNG, THIẾT KẾ RESPONSIVE Ở CHÂN TRANG CHO BLOGGER/BLOGSPOT

Bạn đã bao giờ nhìn thấy một banner quảng cáo lơ lửng dưới trang web? Bây giờ chúng ta sẽ tạo ra các quảng cáo dạng nổi trong chân trang của blog nhé. Khi mở blog, banner quảng cáo sẽ ngay lập tức xuất hiện trong chân trang của blog và tiếp tục hiện khi bạn kéo thanh scrollbar lên xuống. Có một nút đóng để tắt cho những người không thích quảng cáo.

Tạo quảng cáo dạng nổi có nút đóng thiết kế responsive ở chân trang cho Blogger/Blogspot

Rất đơn giản bạn chỉ cần vào Bố cục >> thêm tiện ích HTML/JavaScript và thêm vào dòng code bên dưới.

<!-- ADS FOOTER  BY IRIS-TIPS.BLOGSPOT.COM-->
<script type='text/javascript'>
$(document).ready(function() {
$('img#closedb').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 80%;
opacity: 0.9;
left: 10%;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 17%; z-index: 9999;'>
<div style='text-align: right; width: 100%; height:5px;'>
<img id='closedb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKVycmPH5CZMjlHt9ZOdovTVfGvmvw3rfFtrKkRiXwfm9AnxfLrpFV4mc226PTSAs12DMOyoCy4qnW-p7BVnMKBQ1WBxfFURlqVzBHVdgM-WCx6QJKZR6Mw2PxbbxIf8v7PJ7YdFZSPE/s1600/exit.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
<!-- ADVERTISING CODE -->


ADVERTISING CODE HERE


<!-- ADVERTISING CODE -->
</center></p>
</p>
</div>
<!-- ADS FOOTER  BY IRIS-TIPS.BLOGSPOT.COM-->

Điều chỉnh width: 80%; left: 10%; opacity: 0.9; (độ trong suốt của banner, chọn 1 nếu không muốn trong suốt); height: 17%; cho phù hợp với website của bạn.

DEMO TẠI TRANG BÀI VIẾT NÀY.

Nguồn: IRIS-TIPS

Chia Sẽ Giao Diện Ẩn Link Đang Hot Hiện Nay.

Hôm nay Hùng Coder Blog xin chia sẽ cho mọi người một giao diện rất HOT hiện nay, đó là giao diện tùy biến ẩn link được viết bằng Blogspot tốt nhất hiện nay :v, các bạn có thể thoải mái ẩn link chia sẽ mà không lo ngại gì nữa.

Và dưới dây là đoạn Template cho bạn nào cần. cho bạn nào cần

DEMO Cho Mọi Người :
DEMO DOWNLOAD

Tạo trang mới với tiêu đề: Tùy ý các bạn và nhớ link trang đó và thay đoạn link đó vào đoạn mã bên dưới đặt ở trang đó là ok

Đặt mã tiện ích bên dưới chuyển đổi trên chế độ html và lưu nó.

<div class="text-xs-center margin-bottom-20">
<h3>
Advertise</h3>
KODE IKLAN DI SINI</div>
<div class="row margin-bottom-20">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-xs-center">
<h2>
<i class="fa fa-shield"></i> CaSafeLink Converter <i class="fa fa-shield"></i></h2>
</div>
<div class="panel-body text-xs-center">
<div class="text-primary margin-bottom-20">
Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.</div>
<div class="progress" id="daplong">
<progress class="progress progress-striped active six-sec-ease-in-out"></progress> </div>
<button class="alert alert-success btn-lg" id="download2" style="display: none;"><i aria-hidden="true" class="fa fa-thumbs-o-up"></i> <b>Well done!</b> you have successfully gained access to Decrypted Link.</button>  </div>
</div>
</div>
<div class="col-md-6 text-left">
<div class="panel panel-default">
<center>
<h2>
<i aria-hidden="true" class="fa fa-question-circle-o"></i> How to use our tool:</h2>
</center>
<div class="panel-body">
<ol>
<li>Click on <b>How To Use</b> menu above.</li>
<li>Click on the code and <kbd><kbd>CTRL</kbd> + <kbd>C</kbd></kbd> on your keyboard.</li>
<li>Paste the code in your HTML blog theme before the <mark>&lt;/body&gt;</mark>.</li>
<li>Save your HTML blog theme. you are done!</li>
<li>Now, your blog's outbound links was encrypted!</li>
</ol>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="row margin-bottom-20">
<div class="ads col-md-4 text-xs-center">
<h3>
Advertise</h3>
KODE IKLAN DI SINI</div>
<div class="col-md-4 margin-top-25">
<div class="panel panel-success text-xs-center">
<div class="panel-heading">
<h3 class="panel-title">
<strong>Your link will appear in:</strong></h3>
</div>
<div class="panel-body">
<script type='text/javascript'>
// <![CDATA[
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(input){var output="";var chr1,chr2,chr3,enc1,enc2,enc3,enc4;var i=0;input=Base64._utf8_encode(input);while(i<input.length){chr1=input.charCodeAt(i++);chr2=input.charCodeAt(i++);chr3=input.charCodeAt(i++);enc1=chr1>>2;enc2=((chr1&3)<<4)|(chr2>>4);enc3=((chr2&15)<<2)|(chr3>>6);enc4=chr3&63;if(isNaN(chr2)){enc3=enc4=64;}else if(isNaN(chr3)){enc4=64;}
output=output+ this._keyStr.charAt(enc1)+ this._keyStr.charAt(enc2)+ this._keyStr.charAt(enc3)+ this._keyStr.charAt(enc4);}
return output;},decode:function(input){var output="";var chr1,chr2,chr3;var enc1,enc2,enc3,enc4;var i=0;input=input.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(i<input.length){enc1=this._keyStr.indexOf(input.charAt(i++));enc2=this._keyStr.indexOf(input.charAt(i++));enc3=this._keyStr.indexOf(input.charAt(i++));enc4=this._keyStr.indexOf(input.charAt(i++));chr1=(enc1<<2)|(enc2>>4);chr2=((enc2&15)<<4)|(enc3>>2);chr3=((enc3&3)<<6)|enc4;output=output+ String.fromCharCode(chr1);if(enc3!=64){output=output+ String.fromCharCode(chr2);}
if(enc4!=64){output=output+ String.fromCharCode(chr3);}}
output=Base64._utf8_decode(output);return output;},_utf8_encode:function(string){string=string.replace(/\r\n/g,"\n");var utftext="";for(var n=0;n<string.length;n++){var c=string.charCodeAt(n);if(c<128){utftext+=String.fromCharCode(c);}
else if((c>127)&&(c<2048)){utftext+=String.fromCharCode((c>>6)|192);utftext+=String.fromCharCode((c&63)|128);}
else{utftext+=String.fromCharCode((c>>12)|224);utftext+=String.fromCharCode(((c>>6)&63)|128);utftext+=String.fromCharCode((c&63)|128);}}
return utftext;},_utf8_decode:function(utftext){var string="";var i=0;var c=c1=c2=0;while(i<utftext.length){c=utftext.charCodeAt(i);if(c<128){string+=String.fromCharCode(c);i++;}
else if((c>191)&&(c<224)){c2=utftext.charCodeAt(i+ 1);string+=String.fromCharCode(((c&31)<<6)|(c2&63));i+=2;}
else{c2=utftext.charCodeAt(i+ 1);c3=utftext.charCodeAt(i+ 2);string+=String.fromCharCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));i+=3;}}
return string;}}
var encode=document.getElementById('encode'),decode=document.getElementById('decode'),output=document.getElementById('output'),input=document.getElementById('input');var User_ID="";var protected_links="";var a_to_va=0;var a_to_vb=0;var a_to_vc="";function auto_safelink(){auto_safeconvert();}
function auto_safeconvert(){var a_to_vd=window.location.hostname;if(protected_links!=""&&!protected_links.match(a_to_vd)){protected_links+=", "+ a_to_vd;}else if(protected_links=="")
{protected_links=a_to_vd;}
var a_to_ve="";var a_to_vf=new Array();var a_to_vg=0;a_to_ve=document.getElementsByTagName("a");a_to_va=a_to_ve.length;a_to_vf=a_to_fa();a_to_vg=a_to_vf.length;var a_to_vh=false;var j=0;var a_to_vi="";for(var i=0;i<a_to_va;i++)
{a_to_vh=false;j=0;while(a_to_vh==false&&j<a_to_vg)
{a_to_vi=a_to_ve[i].href;if(a_to_vi.match(a_to_vf[j])||!a_to_vi||!a_to_vi.match("http"))
{a_to_vh=true;}
j++;}
if(a_to_vh==false)
{var encryptedUrl=Base64.encode(a_to_vi);var str=location.pathname;a_to_ve[i].href=""+str+"/p/convert.html?id="+ encryptedUrl;a_to_ve[i].rel="nofollow";a_to_vb++;a_to_vc+=i+":::"+ a_to_ve[i].href+"\n";}}
var a_to_vj=document.getElementById("anonyminized");var a_to_vk=document.getElementById("found_links");if(a_to_vj)
{a_to_vj.innerHTML+=a_to_vb;}
if(a_to_vk)
{a_to_vk.innerHTML+=a_to_va;}}
function a_to_fa()
{var a_to_vf=new Array();protected_links=protected_links.replace(" ","");a_to_vf=protected_links.split(",");return a_to_vf;}
// ]]>
</script> <script type="text/javascript">
var currentURL=location.href;
var str = currentURL;
var res = str.replace("http://compact-hungcoder.blogspot.com/p/link.html?id=", "");
document.write('<button type="button" id="download" class="Visit_Link btn btn-success" onclick="changeLink();" style="display: none;"><strong>Visit Link</strong> <i class="fa fa-external-link" aria-hidden="true"></i></button>')
</script> </div>
</div>
</div>
<div class="ads col-md-4 text-xs-center">
<h3>
Advertise</h3>
KODE IKLAN DI SINI</div>
<div class="clear">
 </div>
</div>
<div style="text-align: center;">
<b><span style="color: red; font-size: x-large;">RANDOM POST AREA == FOR PREMIUM ONLY !</span></b></div>
<div id="random-post">
</div>

Tạo Khung SUBSCRIBE Đẹp Cho Blogspot

Hôm nay Hùng Coder Blog chia sẽ cho mọi người một tiện ích mới cho mọi người. Thủ thuật này khá đơn giản cho mọi người lại có bố cục đơn giản đẹp :D

Qua hình ảnh bên trên các bạn cũng thấy nó đơn giản như thế nào rồi chứ :v. Không cầu kỳ phức tạp
như những khung đăng ký theo dõi khác :D. Và bên dưới là full đoạn code cho ai muốn sữ dụng

<style>
#wp-subscribe { padding:15px; background: #ffffff; }
#wp-subscribe h4.title { font-size:18px; color:#e8503c; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 0;margin: 10px;}
#wp-subscribe h4.title span {display: inline-block; font-size: 35px; margin-top: 10px;}
#wp-subscribe p { color: #000000; margin: 0; text-align: center; }
#wp-subscribe p.text { margin: 15px 0; opacity: 0.8;font-size: 16px; }
#wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height:60px; }
#wp-subscribe .email-field {}
#wp-subscribe input.email-field {color: #000000;background: #ffffff;border-style: solid;border-color:#e8503c;border-width: 3px;}
#wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::input-placeholder { color: transparent !important }
#wp-subscribe input.submit {background:#e8503c; color: #fff; margin-top:10px; font-size: 20px; font-weight: 900; cursor: pointer;}
#wp-subscribe p.footer-text { margin-top: 10px; font-size: 12px; }
</style>

<div class="wp-subscribe no-name-field" id="wp-subscribe">
<h4 class="title">Get more nice stuff <br /> <span>in your inbox</span></h4>
<p class="text">instantly by Subscribing to us. So you will get email everytime we post something new here</p>

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=USER_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1"> <input class="email-field" type="text" value="" placeholder="Enter email id here..." name="email" /> <input type="hidden" value="USER_NAME" name="uri" /><input type="hidden" name="loc" value="en_US" /> <input class="submit" name="submit" type="submit" value="Subscribe Now" /></form>

<div class="clear"></div>
<p class="footer-text">We guarantee you won't get any other SPAM</p>
</div>
</div>

Các bạn chỉ cần bỏ đoạn code vào phần bạn muốn nó hiển thị thế là xong :D và bạn chỉ cần thay đỗi những phần mình bôi đỏ trên code thành tên FEED của các bạn vậy là xong :D
Đơn giản quá phải không mọi người :v ai cần thì sữ dụng nhé.

DEMO BÊN PHÍA TAY TRÁI CỦA MỌI NGƯỜI

Tạo hiệu ứng (hover) text bằng css cực đẹp cho blogspot

Một trong những cách làm đẹp cho Blog của bạn đó là hiệu ứng (hover), giúp cho blog của bạn thêm phần nổi bật. Và hôm nay mình xin hướng dẫn các bạn tạo hiệu ứng (hover) text bằng css cực đẹp cho blogspot.

Bước 1: Các bạn thêm đoạn CSS sau vào trên thẻ ]]></b:skin>

.title-niem{animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

Bước 2: Sử dụng hiệu ứng


Cách 1: Sử dụng code

<div class='title-niem'>Chữ cần hiệu ứng</div>

Cách 2: Các bạn tìm đến thẻ có dạng id='header-inner' và thêm thuộc tính class='title-niem' phía trước nó. Ví dụ như hình dưới:

Khá đơn giản để có 1 hiệu ứng (hover) text đẹp cho Blog đúng không nào. Chúc các bạn thành công. Nếu thấy hay hãy để lại 1 comment để ủng hộ mình nhé!

DEMO THỦ THUẬT

Chữ cần hiệu ứng

Nguồn : Niệm Style

Tạo trang Demo và Download với thanh công cụ cho Blogger

Hôm nay, mình sẽ hướng dẫn các bạn tạo 1 thanh công cụ dùng để cho khách xem trang Demo hoặc Download. Tùy theo mục đích của bạn sử dụng là gì mà bạn có thể áp dụng trang này, nó rất hữu ích cho bạn khi làm một trang tải giao diện, hoặc có thể cho người khác xem bất kỳ một trang web nào đó nhưng vẫn có thông tin của trang mình, để khi cần thì người xem có thể quay lại trang chủ của mình.


Cách làm rất đơn giản, hãy theo những hướng dẫn bên dưới là có ngay 1 trang Demo và Download tuyệt vời thôi. Bạn có thể truy cập vào đường dẫn bên dưới để xem thử:

DEMO
Các bước thực hiện
Bước 1: Tạo một trang mới và nhớ địa chỉ của trang này, ví dụ:

http://www.hungcoder.com/p/link.html

Lưu ý: Để trang trống và không cần thêm bất cứ thành phần nào nhé!
Bước 2: Chèn đoạn code sau lên trước thẻ đóng ]]></b:skin>

#view{padding:0;margin:0;border:0;position:fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:93%;background:url(http://i.imgur.com/zilbd7l.gif)no-repeat center center;transition:all .4s ease-out}
#tab-demo{width:100%;height:50px;top:0;left:0;background:#222;color:white;font:normal 13px Roboto,sans-serif;z-index:99999;position:fixed}
.closebutton{background:#66af33 url(http://i.imgur.com/afHYpSH.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0 20px 0 50px;position:fixed;top:0;right:0;line-height:50px;cursor:pointer;color:white}
a.closebutton{color:white;text-decoration:none}
.closebutton:hover{background:#579c26 url(http://i.imgur.com/bOce61g.png)no-repeat 15px 50%}
.dlbutton:hover{background:#579c26 url(http://i.imgur.com/Z6RRwwZ.png)no-repeat 15px 50%}
.dlbutton,a.dlbutton{background:url(http://i.imgur.com/Z6RRwwZ.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0 20px 0 55px;position:fixed;top:0;right:158px;line-height:50px;cursor:pointer;color:white;text-decoration:none}
.demologo,a.demologo{background:url(http://i.imgur.com/EmEPej2.png)no-repeat left center;padding-left:55px;font-size:17px;font-weight:normal;font-family:Roboto;text-transform:uppercase;line-height:50px;left:15px;position:fixed;color:white;text-decoration:none}

Bước 3: Tìm thẻ <body> và chèn đoạn code này bên dưới:

<b:if cond="data:blog.url != &quot;http://www.hungcoder.com/p/link.html"">

Tiếp tục tìm thẻ đóng </body> và chèn đoạn code này lên trên.

<b:else/>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
}
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='http://www.hungcoder.com'>Hùng Coder Blog</a>
<a class='dlbutton' href='' id='dl'>Tải về</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Loại bỏ khung</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

Các bạn tùy chỉnh code sao cho phù hợp với blog của mình.
Sử dụng trang DEMO như thế nào?
Sau khi soạn thảo xong bài viết, các bạn tiến hành thêm đoạn code sau để tạo xem trước cho sản phẩm của mình.

http://www.hungcoder.com/p/link.htm?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download

Chúc các bạn thành công.

Trang Ẩn Danh Nội Dung Blogspot 2018

Chào mọi người, mình là Hùng Coder sau một thời gian tìm hiểu và mình đã tạo ra một trang ẩn danh cho các blogger, để chia sẽ những thứ hữu ích cho một số người bạn hoặc người quen. Để phòng tránh bị LEECH về một số trang mà không để lại nguồn bài viết ^^

Các bạn nhìn sơ qua thì ở trang chủ không hiển thị bất cứ nội dung bài viết nào. Hoặc lỗ hõng nào để cho mọi người xem được những bài viết ẩn đó :D

Và tiếp đến mình cũng đã thêm được đoạn code nhập PASSWORD để xem được nội dung bài viết đó :D, nhưng cái PASSWORD này không được ẩn danh như các SITE PHP vì trang mình tạo là
BLOGGER không được tùy biến hay có database để lưu trữ PASSWORD được. Và sau này mình sẽ tìm cách khác phục lỗi này sớm nhé :)

Và cuối cùng là bài viết được ẩn danh :D. Với một số bạn thì giao diện này quá đơn giản rồi phải không :D :D, có lỗi gì thì báo mình để mình FIX lỗi sớm để giao diện ẩn danh này tốt hơn nhé :D

DEMO SITE

Chúc các bạn thành công. Và các bạn copy bài viết này thì các bạn vui lòng để lại nguồn dùm HÙNG CODER nhé :D

Chuyển ảnh thành code HTML với PHP

Bài này mình sẽ giới thiệu với mọi người cách chuyển đổi hình ảnh sang code HTML với PHP. Demo sẽ như sau:

1, Thuật toán.
-Thuật toán xử lý hết sức đơn giản với cách thực hiện như sau:

+ Đầu chúng ta sẽ lấy ra hình ảnh cần quét. Và xác định chiều rộng và chiều dài của ảnh.

+ Sau đó chúng ta sẽ thực hiện lặp từng pixel của ảnh từ trái qua phải và từ trên xuống dưới để lấy mã màu (dạng RGB) của từng điểm ảnh.

+ Và khi có được mã màu rồi thì chúng ta sẽ vẽ nó theo code HTML của chúng ta với mỗi điểm ảnh tương ứng với một thẻ span.


-> Đấy đơn giản đúng không giờ mình cùng đi vào thực hành xem thế nào.

2, Thực hành thuật toán.
-Mình sẽ giải thích trong code luôn nhé!

<?php
//Lấy file ảnh từ máy
// Nếu ảnh png thì dùng hàm ImageCreateFrompng
// $img = ImageCreateFrompng('ha-noi.png');

//Nếu ảnh jpg thì dùng hàm ImageCreateFromJpeg
$image = ImageCreateFromJpeg('ha-noi.jpg');

// Lấy ra chiều rộng của ảnh.
$widthImage = imagesx($image);

//Lấy ra chiều cao của ảnh
$heightImage = imagesy($image);

//Lặp chiều cao của ảnh 
for ($height = 0; $height < $heightImage; $height++) {

    //Lặp chiều rộng của ảnh (Lấy dư ra một để xuống dòng)
 for ($width = 0; $width <= $widthImage; $width++) {
  //Nếu vị chí hiện tại bằng chiều rộng của ảnh
  //thì xuống dòng và tiếp tục.
  if ($width == $widthImage) {
   echo '<br>';
   continue;
  }
    // Lấy ra màu của điểm ảnh hiện tại
  $rgb = ImageColorAt($image, $width, $height);

    //Chuyển đổi màu sang dạng RGB.
    //chuyển sang red
  $red = ($rgb >> 16) & 0xFF;

    //Chuyển sang Green
  $green = ($rgb >> 8 ) & 0xFF;

    //Chuyển sang Blue
  $blue = $rgb & 0xFF;

    //Hiển thị màu của ảnh dưới dạng html
  echo '<span  style="font-size:1px;color:rgb(' . $red . ',' . $green . ',' . $blue . ');">#</span>';

 }
}

VD: Mình sẽ thử với bức ảnh:

Xem Kết Quả
3, Lời kết.
-Như vậy mình đã giới thiệu với mọi người cách chuyển đổi hình ảnh sang code HTML bằng PHP rồi. Tuy nhiên, cách này chỉ dùng chơi được thôi chứ áp dụng vào thực tế thì hoàn toàn không ổn, vì nó sử dụng quá nhiều tài nguyên (lặp dữ liệu quá nhiều).

Nguồn : Toidicode.com

Thêm Khung Liên Lạc Bên Tay Trái Cho WebBlog

Hôm nay Hùng Coder hướng dẫn cho các bạn một đoạn code khá hay cho các bạn bán hàng online hay tự vấn hổ trợ trực tiếp :), một dạng như chat online nhưng lại có thể gọi điện hoặc nhắn tin cho người đó ^^~.


Nếu bạn nào cần thì có thể bỏ đoạn code bên dưới và bỏ trên thẻ : </body> và lưu lại.

<!-- Support online hungcoder.com -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' rel='stylesheet'/>
<style>
.support-online{position:fixed;z-index:999;left:1%;bottom:11%}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online i{width:40px;height:40px;background:#43a1f3;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999}
.support-online a span{border-radius:2px;text-align:center;background:#67b634;padding:9px;display:none;width:180px;margin-left:10px;position:absolute;color:#fff;z-index:999;top:0;left:40px;font-size:14.5px;transition:all .2s ease-in-out 0;-moz-animation:headerAnimation .7s 1;-webkit-animation:headerAnimation .7s 1;-o-animation:headerAnimation .7s 1;animation:headerAnimation .7s 1}
.support-online a:hover span{display:block}
.support-online a{display:block}
.support-online a span:before{content:&quot;&quot;;width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #67b634 transparent transparent;position:absolute;left:-10px;top:10px}
.kenit-alo-circle-fill{width:60px;height:60px;top:-12px;position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(0,175,242,0.5);opacity:.75;right:-12px}
.kenit-alo-circle{width:50px;height:50px;top:-6.5px;right:-6.5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#0089B9;opacity:.5}
.support-online .btn-support{cursor:pointer}
</style>
<div class='support-online'>
<div class='support-content'>
<a class='call-now' href='tel: 0868 7878 92' rel='nofollow'>
<i aria-hidden='true' class='fa fa-whatsapp'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
<span>Hotline: 0868 7878 92</span>
</a>
<a class='mes' href='https://www.facebook.com/messages/t/100002632149630'>
<i aria-hidden='true' class='fa fa-facebook-official'/>
<span>Nhắn tin facebook</span>
</a>
<a class='zalo' href='https://chat.zalo.me/'>
<i aria-hidden='true' class='fa fa-comment'/>
<span>Zalo: 0868 7878 92</span>
</a>
<a class='sms' href='sms:0868787892'>
<i aria-hidden='true' class='fa fa-weixin'/>
<span>SMS: 0868 7878 92</span>
</a>
</div>
<a class='btn-support'>
<i aria-hidden='true' class='fa fa-user-circle'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
</a>
</div>
<script type='text/javascript'>
 //<![CDATA[
$(document).ready(function(){

    $('a.btn-support').click(function(e){
      e.stopPropagation();
      $('.support-content').slideToggle();
    });
    $('.support-content').click(function(e){
      e.stopPropagation();
    });
    $(document).click(function(){
      $('.support-content').slideUp();
    });
});
  //]]>
</script>
<!-- End Support -->

Và qua đoạn code trên bạn như thay đỗi những phần mình bôi đỏ trên đoạn code đó nhé :)

DEMO BÊN TAY TRÁI CỦA CÁC BẠN 

Chúc các bạn thành công với thủ thuật này nhé :)

Tạo Button Download với CSS hover tuyệt đẹp cho Blogspot

Tạo Button Download với CSS hover tuyệt đẹp cho Blogspot

Chèn CSS trước : ]]></b:skin>

.bsw-btn{border:2px solid;overflow:hidden;position:relative;padding:10px;display:inline-block;width:200px;text-align:center;text-decoration:none!important;text-transform:uppercase;font:500 15px Roboto;margin:10px 0}
.bsw-btn:hover{letter-spacing:2px}
.bsw-btn:after{opacity:.4;background:#4267b2;content:"";height:155px;left:-75px;opacity:2;position:absolute;top:-50px;transform:rotate(35deg);transition:all 1s cubic-bezier(0.19,1,0.22,1);width:100px;z-index:100}
.bsw-btn:hover:after{opacity:1;left:120%;-webkit-transition:all 1s cubic-bezier(0.19,1,0.22,1);transition:all 1s cubic-bezier(0.19,1,0.22,1)}

Cách sử dụng:

<center><a class='bsw-btn bsw_btn' href='http://www.hungcoder.com/' target='blank'title='DEMO'>DEMO</a></center>

DEMO THỦ THUẬT

DEMO

Nguồn: bacsiwindows.com

Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot

Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot. Sử dụng thẻ HTML :target, popup được thiết kế chỉ hoàn toàn bằng CSS với hiệu ứng và transform tuyệt đẹp cho Blogspot.
Bạn có thể dùng nó để tạo popup thông báo, liên hệ, lưu ý,...

Quăng hết đống code này vào sau thẻ <body>

<style>#bsw_popup{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.2)}
#bsw_popup:target{transform:scale(1);background:rgba(0,0,0,.2);opacity:1;visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999999999999;transition:.5s}
.bsw_popup_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.1)}
.bsw_popup_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.bsw_popup_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.bsw_popup_ p{margin:0 0 20px;padding:0;font:400 15px Roboto;color:#555;line-height:1.5}
.bsw_popup_ p a{font-weight:700;color:#555}
.bsw_popup_ p a:hover{text-decoration:underline}
<!-- code popup bacsiwindows.com -->
</style>
<div id='bsw_popup'>
    <div class='bsw_popup_'>
        <h2>Hướng dẫn bình luận</h2>
        <h3>Chèn link</h3>
        <p>Sử dụng thẻ <code>&amp;lt;a href=&amp;#39;LINK&amp;#39;&amp;gt;TÊN_HIỂN_THỊ&amp;lt;/a&amp;gt;</code></p>
        <h3>Chèn hình ảnh</h3>
        <p><code>[img] LINK_ANH [/img]</code> - sử dụng công cụ bên dưới để upload ảnh.</p>
        <h3>Định dạng chữ</h3>
        <p> &amp;lt;b&amp;gt; <b>Chữ in đậm</b> &amp;lt;/b&amp;gt;<br/> &amp;lt;i&amp;gt; <i>Chữ in nghiêng</i> &amp;lt;/i&amp;gt;<br/> &amp;lt;u&amp;gt; <u>Chữ gạch chân</u> &amp;lt;/u&amp;gt;<br/> &amp;lt;strike&amp;gt; <strike>Chữ gạch ngang</strike> &amp;lt;/strike&amp;gt;<br/> </p>
        <h3>Chèn một đoạn Code</h3>
        <p>Đầu tiên sử dụng <a href='//bacsiwindows.com/mahoahtml' target='blank'>công cụ này</a> để mã hóa đoạn code muốn chèn.<br/>Sau đó dùng thẻ <code>[code] CODE_ĐÃ_MÃ_HÓA [/code]</code></p><a class='close' href='#close' title='Close'><i aria-hidden='true' class='fa fa-check'/> Đã hiểu</a> </div>
</div>

CÁCH SỬ DỤNG :

Thêm href="#bsw_popup" hoặc id="#bsw_popup" vào bất cứ thẻ nào mà bạn muốn khi click sẽ hiện popup ra là được.
Ví dụ: <a href="#bsw_popup">Mở Popup</a>

TỔNG KẾT

Với thiết kế đẹp và cách thực hiện đơn giản, đây là mẫu popup được thiết kế bởi Bác Sĩ Windows chỉ bằng HTML và CSS nên khi sử dụng sẽ không làm ảnh hưởng đến những thành phần khác trên blog cũng như tốc độ tải trang. Cho một bình luận/chia sẻ nếu thấy hữu ích nhé.

DEMO THỦ THUẬT

DEMO

Hướng dẫn bình luận

Chèn link

Sử dụng thẻ <a href='LINK'>TÊN_HIỂN_THỊ</a>

Chèn hình ảnh

[img] LINK_ANH [/img] - sử dụng công cụ bên dưới để upload ảnh.

Định dạng chữ

&lt;b&gt; Chữ in đậm &lt;/b&gt;
&lt;i&gt; Chữ in nghiêng &lt;/i&gt;
&lt;u&gt; Chữ gạch chân &lt;/u&gt;
&lt;strike&gt; Chữ gạch ngang &lt;/strike&gt;

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]
Đã hiểu

Nguồn : bacsiwindows.com

Share Template Blogspot Bảo Trì

Hôm nay mình xin chia sẽ cho mọi người một template đã lâu rồi :), dạng này thì có từ rất lâu rồi nhưng hôm nay mình viết lại bài chia sẽ cho những bạn chưa biết về template này :)

Đó là hình ảnh của template :D, nó rất đơn giản phải không các bạn, và ở phía dưới nó có hiển thị những bài viết của 1 blog nào mà bạn đang còn duy trì và hiển thị tiêu đề ở phía dưới và trượt qua lại cho các bạn nắm bắt tiện ích :)


FULL CODE

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
   /* 
    
@import url(http://fonts.googleapis.com/css?family=Raleway:200,300);
/* ============================================ Reset ============================================ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
 }                  

article, aside, figure, footer, header, 
hgroup, nav, section {
 display:block;
 }

nav ul {
 list-style:none;
 }

blockquote, q {
 quotes:none;
 }

blockquote:before, blockquote:after,
q:before, q:after { 
 content:'';
 content:none;
 }

a {
 margin:0;
 padding:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
 }

ins {
 background-color:#ff9;
 color:#000;
 text-decoration:none;
 }

mark {
 background-color:#ff9;
 color:#000;
 font-style:italic;
 font-weight:bold;
 }

del { 
 text-decoration: line-through;
 }

abbr[title], dfn[title] {
 border-bottom:1px dotted #000;
 cursor:help;
 }

/* tables still need cellspacing="0" in the markup */
table {
 border-collapse:collapse;
 border-spacing:0;
 }

hr {
 display:block;
 height:1px;
 border:0;
 border-top:1px solid #ccc;
 margin:1em 0;
 padding:0;
 }

input, select {
 vertical-align:middle;
 }

/* ============================================ General Type styles ============================================ */

body {
 width: 980px;
 margin: 80px auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 200;
 text-align: center;
 color: #909090;
}
p {
        font-size: 25px;
        margin-bottom: 20px;
        line-height: 1.3;
}
p a {
 color: #1abc9c;
        border-bottom: 1px solid #1abc9c;
        text-decoration: none;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        font-size: 52px;
        font-weight: 300;
}
   
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#9DE2D5;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url("") center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url("") center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}


.bomkhung{background:#f9f9f9;padding:10px 20px 10px;border:2px dashed #3598DB;text-align:center;margin-top:10px;}

  ]]></b:skin>


 </head>

<!-- chuyen huong link -->
    <script>
    var redirect = &#39;int&#39;;
    var exclude_domains = [&#39;drive.google.com&#39;, &#39;blog.bomkhung.info&#39;,&#39;mediafire.com&#39;,&#39;bp.blogspot.com&#39;,];
    //<![CDATA[
    var DOMAssistant=function(){var G=function(){};var C=/*@cc_on!@*/false;var F=C&&parseFloat(navigator.appVersion)<6;var B={},K={},A=true;var J={accesskey:"accessKey","class":"className",colspan:"colSpan","for":"htmlFor",maxlength:"maxLength",readonly:"readOnly",rowspan:"rowSpan",tabindex:"tabIndex",valign:"vAlign",cellspacing:"cellSpacing",cellpadding:"cellPadding"};var I={rules:/\s*(,)\s*/g,selector:/^(\w+)?(#[\w\u00C0-\uFFFF\-\_]+|(\*))?((\.[\w\u00C0-\uFFFF\-_]+)*)?((\[\w+\s*(\^|\$|\*|\||~)?(=\s*([\w\u00C0-\uFFFF\s\-\_\.]+|"[^"]*"|'[^']*'))?\]+)*)?(((:\w+[\w\-]*)(\((odd|even|\-?\d*n?((\+|\-)\d+)?|[\w\u00C0-\uFFFF\-_\.]+|"[^"]*"|'[^']*'|((\w*\.[\w\u00C0-\uFFFF\-_]+)*)?|(\[#?\w+(\^|\$|\*|\||~)?=?[\w\u00C0-\uFFFF\s\-\_\.\'\"]+\]+)|(:\w+[\w\-]*))\))?)*)?(>|\+|~)?/,id:/^#([\w\u00C0-\uFFFF\-\_]+)$/,tag:/^(\w+)/,relation:/^(>|\+|~)$/,pseudo:/^:(\w[\w\-]*)(\((.+)\))?$/,pseudos:/:(\w[\w\-]*)(\(([^\)]+)\))?/g,attribs:/\[(\w+)\s*(\^|\$|\*|\||~)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+|"[^"]*"|'[^']*')?\]/g,classes:/\.([\w\u00C0-\uFFFF\-_]+)/g,quoted:/^["'](.*)["']$/,nth:/^((odd|even)|([1-9]\d*)|((([1-9]\d*)?)n([\+\-]\d+)?)|(\-(([1-9]\d*)?)n\+(\d+)))$/};var E=function(M,L){M.push.apply(M,[].slice.apply(L));return M};if(C){E=function(N,M){if(M.slice){return N.concat(M)}var L=0,O;while((O=M[L++])){N[N.length]=O}return N}}var D=function(O,N){if(O.indexOf){return O.indexOf(N)>=0}for(var M=0,L=O.length;M<L;M++){if(O[M]===N){return true}}return false};var H=function(N,L){var M=N.parentNode;return L===document||M===L||(M!==document&&H(M,L))};return{isIE:C,camel:J,allMethods:[],publicMethods:["cssSelect","elmsByClass","elmsByAttribute","elmsByTag"],initCore:function(){this.applyMethod.call(window,"$",this.$);this.applyMethod.call(window,"$$",this.$$);window.DOMAssistant=this;if(C){G=Array}G.prototype=[];G.prototype.each=function(N){for(var M=0,L=this.length;M<L;M++){N.call(this[M])}return this};G.prototype.first=function(){return(typeof this[0]!=="undefined")?DOMAssistant.addMethodsToElm(this[0]):null};G.prototype.end=function(){return this.previousSet};this.attach(this)},addMethods:function(L,M){if(typeof this.allMethods[L]==="undefined"){this.allMethods[L]=M;this.addHTMLArrayPrototype(L,M)}},addMethodsToElm:function(M){for(var L in this.allMethods){if(typeof this.allMethods[L]!=="undefined"){this.applyMethod.call(M,L,this.allMethods[L])}}return M},applyMethod:function(M,L){if(typeof this[M]!=="function"){this[M]=L}},attach:function(N){var L=N.publicMethods;if(typeof L==="undefined"){for(var P in N){if(P!=="init"&&typeof N[P]!=="undefined"){this.addMethods(P,N[P])}}}else{if(L.constructor===Array){for(var M=0,O;(O=L[M]);M++){this.addMethods(O,N[O])}}}if(typeof N.init==="function"){N.init()}},addHTMLArrayPrototype:function(L,M){G.prototype[L]=function(){var P=new G();P.previousSet=this;var Q;for(var O=0,N=this.length;O<N;O++){Q=M.apply(this[O],arguments);if(!!Q&&Q.constructor===Array){P=E(P,Q)}else{P.push(Q)}}return P}},clearHandlers:function(){var Q=this.all||this.getElementsByTagName("*");for(var P=0,R,L;(R=Q[P++]);){if((L=R.attributes)){for(var N=0,O=L.length,M;N<O;N++){M=L[N].nodeName.toLowerCase();if(typeof R[M]==="function"){R[M]=null}}}}},setCache:function(L){A=L},$:function(){var O=arguments[0];if(arguments.length===1&&(typeof O==="object"||(typeof O==="function"&&!!O.nodeName))){return DOMAssistant.$$(O)}var Q=new G();for(var M=0,L,P;(L=arguments[M]);M++){if(typeof L==="string"){L=L.replace(/^[^#]*(#)/,"$1");if(I.id.test(L)){if((P=DOMAssistant.$$(L.substr(1),false))){Q.push(P)}}else{var N=(document.all||document.getElementsByTagName("*")).length;Q=(!document.querySelectorAll&&A&&K.rule&&K.rule===L&&K.doc===N)?K.elms:E(Q,DOMAssistant.cssSelection.call(document,L));K={rule:L,elms:Q,doc:N}}}}return Q},$$:function(Q,N){var P=(typeof Q==="object"||(typeof Q==="function"&&!!Q.nodeName))?Q:document.getElementById(Q);var O=N||true;if(typeof Q==="string"&&P&&P.id!==Q){P=null;for(var L=0,M;(M=document.all[L]);L++){if(M.id===Q){P=M;break}}}if(P&&O){DOMAssistant.addMethodsToElm(P)}return P},getSequence:function(P){var Q,O=2,M=-1,L=-1,N=I.nth.exec(P.replace(/^0n\+/,"").replace(/^2n$/,"even").replace(/^2n+1$/,"odd"));if(!N){return null}if(N[2]){Q=(N[2]==="odd")?1:2;L=(Q===1)?1:0}else{if(N[3]){Q=parseInt(N[3],10);O=0;M=Q}else{if(N[4]){O=N[6]?parseInt(N[6],10):1;Q=N[7]?parseInt(N[7],10):0;while(Q<1){Q+=O}L=(Q>O)?(Q-O)%O:((Q===O)?0:Q)}else{if(N[8]){O=N[10]?parseInt(N[10],10):1;Q=M=parseInt(N[11],10);while(Q>O){Q-=O}L=(M>O)?(M-O)%O:((M===O)?0:M)}}}}return{start:Q,add:O,max:M,modVal:L}},cssByDOM:function(L){var AL=L.replace(I.rules,"$1").split(",");var AD=new G(),At=[],AI=[];var y,AU,X,T,d,Ax,N,Ak,Q,Z,M,Au,AO,O,AK;try{y=new RegExp("(?:\\[[^\\[]*\\]|\\(.*\\)|[^\\s\\+>~\\[\\(])+|[\\+>~]","g")}catch(Am){y=/[^\s]+/g}function AR(i){i=i||At;for(var e=0,a=i.length;e<a;e++){i[e].added=null}}function S(){for(var e=0,a=AU.length;e<a;e++){AU[e].childElms=null}}function Aq(k,a){for(var l=0,o;(o=k[l]);l++){var n=false;for(var e=0,m;(m=a[e]);e++){if(m===o){n=true;a.splice(e,1);break}}if(n){k.splice(l--,1)}}return k}function U(e,a){return C?e[J[a.toLowerCase()]||a]:e.getAttribute(a,2)}function g(a,e){a=a?a.replace(I.quoted,"$1").replace(/\./g,"\\."):null;switch(e){case"^":return"^"+a;case"$":return a+"$";case"*":return a;case"|":return"^"+a+"(\\-\\w+)*$";case"~":return"\\b"+a+"\\b";default:return a?"^"+a+"$":null}}function v(a,e){return F?((a==="*")?e.all:e.all.tags(a)):e.getElementsByTagName(a)}function AM(a,e){a=a||"*";e=e||document;return(e===document||e.lastModified)?B[a]||(B[a]=v(a,document)):v(a,e)}function Av(m,A5,j){AU=[];var k=A5.split("-"),r=[],AW=0,A4,AV;var l=(A4=/\-of\-type$/.test(A5))?"nodeName":"nodeType";function A6(A8){var A7=A4?A8.nodeName:1;while((A8=A8.previousSibling)&&A8[l]!==A7){}return A8}function q(A8){var A7=A4?A8.nodeName:1;while((A8=A8.nextSibling)&&A8[l]!==A7){}return A8}var o={first:function(A7){return !A6(A7)},last:function(A7){return !q(A7)},empty:function(A7){return !A7.childNodes.length},enabled:function(A7){return !Q.disabled&&Q.type!=="hidden"},disabled:function(A7){return Q.disabled},checked:function(A7){return Q.checked},contains:function(A7){return(Q.innerText||Q.textContent||"").indexOf(j.replace(I.quoted,"$1"))>-1},other:function(A7){return U(Q,A5)===j}};function i(A7){while((Q=m[AW++])){if(o[A7](Q)){r[r.length]=Q}}return r}var A1=k[0]||null;if(A1&&o[A1]){return i(A1)}switch(A1){case"only":var s;while((Q=m[AW++])){Z=Q.parentNode;if(Z!==s){if(!A6(Q)&&!q(Q)){r[r.length]=Q}s=Z}}break;case"nth":if(/^n$/.test(j)){r=m}else{var A3=(k[1]==="last")?["lastChild","previousSibling"]:["firstChild","nextSibling"];AK=DOMAssistant.getSequence.call(this,j);if(AK){while((Q=m[AW++])){Z=Q.parentNode;if(!Z.childElms){var A0=0,AX=Q.nodeName;AO=AK.start;O=Z[A3[0]];while(O&&(AK.max<0||AO<=AK.max)){var A2=O.nodeName;if((A4&&A2===AX)||(!A4&&O.nodeType===1)){if(++A0===AO){if(A2===AX){r[r.length]=O}AO+=AK.add}}O=O[A3[1]]}Z.childElms=true;AU[AU.length]=Z}}S()}}break;case"target":var e=document.location.hash.slice(1);if(e){while((Q=m[AW++])){if(U(Q,"name")===e||U(Q,"id")===e){r[r.length]=Q;break}}}break;case"not":if((AV=I.pseudo.exec(j))){r=Aq(m,Av(m,AV[1]?AV[1].toLowerCase():null,AV[3]||null))}else{for(var AY in I){if(I[AY].lastIndex){I[AY].lastIndex=0}}j=j.replace(I.id,"[id=$1]");var u=I.tag.exec(j);var n=I.classes.exec(j);var t=I.attribs.exec(j);var a=new RegExp(t?g(t[3],t[2]):"(^|\\s)"+(u?u[1]:n?n[1]:"")+"(\\s|$)","i");while((M=m[AW++])){Au=null;if(u&&!a.test(M.nodeName)){Au=M}else{if(n&&!a.test(M.className)){Au=M}else{if(t){var AZ=U(M,t[1]);if(!AZ||!a.test(AZ)){Au=M}}}}if(Au&&!Au.added){Au.added=true;r[r.length]=Au}}}break;default:return i("other")}return r}for(var Ao=0;(X=AL[Ao]);Ao++){if(Ao&&D(AL.slice(0,Ao),X)){continue}At=[this];T=X.match(y);for(var Al=0,V;(V=T[Al]);Al++){AI=[];if(Al>0&&I.relation.test(V)){if((d=I.relation.exec(V))){var Ar=null,AS=T[Al+1];if((Ax=I.tag.exec(AS))){Ax=Ax[1];N=new RegExp("(^|\\s)"+Ax+"(\\s|$)","i")}else{if(I.id.test(AS)){Ar=DOMAssistant.$(AS)||null}}for(var Aj=0,c;(c=At[Aj]);Aj++){switch(d[0]){case">":var AF=Ar||AM(Ax,c);for(var Ah=0,AA;(AA=AF[Ah]);Ah++){if(AA.parentNode===c){AI[AI.length]=AA}}break;case"+":while((c=c.nextSibling)&&c.nodeType!==1){}if(c){if((Ar&&Ar[0]===c)||(!Ar&&(!Ax||N.test(c.nodeName)))){AI[AI.length]=c}}break;case"~":while((c=c.nextSibling)&&!c.added){if((Ar&&Ar[0]===c)||(!Ar&&(!Ax||N.test(c.nodeName)))){c.added=true;AI[AI.length]=c}}break}}At=AI;AR();V=T[++Al];if(/^\w+$/.test(V)||I.id.test(V)){continue}At.skipTag=true}}var Aw=I.selector.exec(V);var AH={tag:(!Aw[1]||Aw[3]==="*")?"*":Aw[1],id:(Aw[3]!=="*")?Aw[2]:null,allClasses:Aw[4],allAttr:Aw[6],allPseudos:Aw[11]};if(AH.id){var f=0,Ap=document.getElementById(AH.id.replace(/#/,""));if(Ap){while(At[f]&&!H(Ap,At[f])){f++}AI=(f<At.length)?[Ap]:[]}At=AI}else{if(AH.tag&&!At.skipTag){if(Al===0&&!AI.length&&At.length===1){At=AI=E([],AM(AH.tag,At[0]))}else{for(var Ag=0,AP=At.length,AB,Ay;Ag<AP;Ag++){AB=AM(AH.tag,At[Ag]);for(var Ad=0;(Ay=AB[Ad]);Ad++){if(!Ay.added){Ay.added=true;AI[AI.length]=Ay}}}At=AI;AR()}}}if(!AI.length){break}At.skipTag=false;if(AH.allClasses){var Ac=0,Ae=[],Y=AH.allClasses.split(".").slice(1);while((Ak=At[Ac++])){var Ai=true,Az=Ak.className;if(Az&&Az.length){Az=Az.split(" ");for(var Aa=0,Ab=Y.length;Aa<Ab;Aa++){if(!D(Az,Y[Aa])){Ai=false;break}}if(Ai){Ae[Ae.length]=Ak}}}At=AI=Ae}if(AH.allAttr){var w=0,AE=[],Af=[],AJ=AH.allAttr.match(/\[[^\]]+\]/g);for(var z=0,P=AJ.length,x,AQ;z<P;z++){I.attribs.lastIndex=0;x=I.attribs.exec(AJ[z]);AQ=g(x[3],x[2]||null);AE[z]=[(AQ?new RegExp(AQ):null),x[1]]}while((Ak=AI[w++])){for(var p=0,AG=AE.length;p<AG;p++){var R=true,AC=AE[p][0],An=U(Ak,AE[p][1]);if(!AC&&An===true){continue}if((!AC&&(!An||typeof An!=="string"||!An.length))||(!!AC&&!AC.test(An))){R=false;break}}if(R){Af[Af.length]=Ak}}At=AI=Af}if(AH.allPseudos){var W=AH.allPseudos.match(I.pseudos);for(var h=0,As=W.length;h<As;h++){I.pseudos.lastIndex=0;var AT=I.pseudos.exec(W[h]);var b=AT[1]?AT[1].toLowerCase():null;var AN=AT[3]||null;AI=Av(AI,b,AN);AR(AI)}At=AI}}AD=E(AD,At)}return AD},cssByXpath:function(M){var N={xhtml:"http://www.w3.org/1999/xhtml"};var O=(document.documentElement.namespaceURI===N.xhtml)?"xhtml:":"";var L=function P(Q){return N[Q]||null};DOMAssistant.cssByXpath=function(l){if(/:checked/.test(l)){return DOMAssistant.cssByDOM.call(this,l)}var X=l.replace(I.rules,"$1").split(",");var W=new G();var p,r,f,U,V,Z;var q=new RegExp("(?:\\[[^\\[]*\\]|\\(.*\\)|[^\\s\\+>~\\[\\(])+|[\\+>~]","g");function h(i,t,k,j){j=j?j.replace(I.quoted,"$1"):j;switch(k){case"^":return"starts-with(@"+t+', "'+j+'")';case"$":return"substring(@"+t+", (string-length(@"+t+") - "+(j.length-1)+"), "+j.length+') = "'+j+'"';case"*":return'contains(concat(" ", @'+t+', " "), "'+j+'")';case"|":return"(@"+t+'="'+j+'" or starts-with(@'+t+', "'+j+'-"))';case"~":return'contains(concat(" ", @'+t+', " "), " '+j+' ")';default:return"@"+t+(j?'="'+j+'"':"")}}function T(i,t,k,j){return"["+h(i,t,k,j)+"]"}function n(y,x,k){y=/\-child$/.test(x)?"*":y;var t="",v=x.split("-"),u;switch(v[0]){case"nth":if(!/^n$/.test(k)){var j=((v[1]==="last")?"(count(following-sibling::":"(count(preceding-sibling::")+y+") + 1)";if((Z=DOMAssistant.getSequence.call(this,k))){t=(Z.start===Z.max)?j+" = "+Z.start:j+" mod "+Z.add+" = "+Z.modVal+((Z.start>1)?" and "+j+" >= "+Z.start:"")+((Z.max>0)?" and "+j+" <= "+Z.max:"")}}break;case"not":var w=(u=I.pseudo.exec(k))?n(y,u[1]?u[1].toLowerCase():null,u[3]||null):k.replace(I.id,"[id=$1]").replace(I.tag,"self::$1").replace(I.classes,'contains(concat(" ", @class, " "), " $1 ")').replace(I.attribs,h);t="not("+w+")";break;case"first":return"not(preceding-sibling::"+y+")";case"last":return"not(following-sibling::"+y+")";case"only":return"not(preceding-sibling::"+y+" or following-sibling::"+y+")";case"empty":return"count(child::*) = 0 and string-length(text()) = 0";case"contains":return'contains(., "'+k.replace(I.quoted,"$1")+'")';case"enabled":return'not(@disabled) and not(@type="hidden")';case"disabled":return"@disabled";case"target":var i=document.location.hash.slice(1);return'@name="'+i+'" or @id="'+i+'"';default:return"@"+x+'="'+k+'"'}return t}for(var m=0;(p=X[m]);m++){if(m&&D(X.slice(0,m),p)){continue}r=p.match(q);f=".";for(var g=0,o=r.length;g<o;g++){U=I.selector.exec(r[g]);V={tag:O+((!U[1]||U[3]==="*")?"*":U[1]),id:(U[3]!=="*")?U[2]:null,allClasses:U[4],allAttr:U[6],allPseudos:U[11],tagRelation:U[23]};if(V.tagRelation){var a={">":"/child::","+":"/following-sibling::*[1]/self::","~":"/following-sibling::"};f+=a[V.tagRelation]||""}else{f+=(g>0&&I.relation.test(r[g-1]))?V.tag:("/descendant::"+V.tag)}if(V.id){f+='[@id = "'+V.id.replace(/^#/,"")+'"]'}if(V.allClasses){f+=V.allClasses.replace(I.classes,'[contains(concat(" ", @class, " "), " $1 ")]')}if(V.allAttr){f+=V.allAttr.replace(I.attribs,T)}if(V.allPseudos){var Y=V.allPseudos.match(I.pseudos);for(var e=0,R=Y.length;e<R;e++){I.pseudos.lastIndex=0;var S=I.pseudos.exec(Y[e]);var s=S[1]?S[1].toLowerCase():null;var Q=S[3]||null;var b=n(V.tag,s,Q);if(b.length){f+="["+b+"]"}}}}var d=document.evaluate(f,this,L,0,null),c;while((c=d.iterateNext())){W.push(c)}}return W};return DOMAssistant.cssByXpath.call(this,M)},cssSelection:function(M){DOMAssistant.cssSelection=document.evaluate?DOMAssistant.cssByXpath:DOMAssistant.cssByDOM;if(document.querySelectorAll){var L=DOMAssistant.cssSelection;DOMAssistant.cssSelection=function(N){try{var P=new G();return E(P,this.querySelectorAll(N))}catch(O){return L.call(this,N)}}}return DOMAssistant.cssSelection.call(this,M)},cssSelect:function(L){return DOMAssistant.cssSelection.call(this,L)},elmsByClass:function(N,L){var M=(L||"")+"."+N;return DOMAssistant.cssSelection.call(this,M)},elmsByAttribute:function(M,N,L,P){var O=(L||"")+"["+M+((N&&N!=="*")?((P||"")+"="+N+"]"):"]");return DOMAssistant.cssSelection.call(this,O)},elmsByTag:function(L){return DOMAssistant.cssSelection.call(this,L)}}}();DOMAssistant.initCore();DOMAssistant.AJAX=function(){var globalXMLHttp=null;var readyState=0;var status=-1;var statusText="";var requestPool=[];var createAjaxObj=function(url,method,callback,addToContent){var params=null;if(/POST/i.test(method)){url=url.split("?");params=url[1];url=url[0]}return{url:url,method:method,callback:callback,params:params,headers:{},responseType:"text",addToContent:addToContent||false}};var inProgress=function(xhr){return(!!xhr&&xhr.readyState>=1&&xhr.readyState<=3)};return{publicMethods:["ajax","get","post","load"],initRequest:function(){var XMLHttp=null;if(!!window.XMLHttpRequest){XMLHttp=new XMLHttpRequest();DOMAssistant.AJAX.initRequest=function(){return requestPool.length?requestPool.pop():new XMLHttpRequest()}}else{if(!!window.ActiveXObject){var XMLHttpMS=["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];for(var i=0;i<XMLHttpMS.length;i++){try{XMLHttp=new window.ActiveXObject(XMLHttpMS[i]);DOMAssistant.AJAX.initRequest=function(){return requestPool.length?requestPool.pop():new window.ActiveXObject(XMLHttpMS[i])};break}catch(e){XMLHttp=null}}}}return XMLHttp},ajax:function(ajaxObj){if(!ajaxObj.noParse&&ajaxObj.url&&/\?/.test(ajaxObj.url)&&ajaxObj.method&&/POST/i.test(ajaxObj.method)){var url=ajaxObj.url.split("?");ajaxObj.url=url[0];ajaxObj.params=url[1]+((url[1].length>0&&ajaxObj.params)?("&"+ajaxObj.params):"")}return DOMAssistant.AJAX.makeCall.call(this,ajaxObj)},get:function(url,callback,addToContent){var ajaxObj=createAjaxObj(url,"GET",callback,addToContent);return DOMAssistant.AJAX.makeCall.call(this,ajaxObj)},post:function(url,callback){var ajaxObj=createAjaxObj(url,"POST",callback);return DOMAssistant.AJAX.makeCall.call(this,ajaxObj)},load:function(url,addToContent){DOMAssistant.AJAX.get.call(this,url,DOMAssistant.AJAX.replaceWithAJAXContent,addToContent)},makeCall:function(ajaxObj){var XMLHttp=DOMAssistant.AJAX.initRequest();if(XMLHttp){globalXMLHttp=XMLHttp;(function(elm){var url=ajaxObj.url,method=ajaxObj.method||"GET",callback=ajaxObj.callback,params=ajaxObj.params,headers=ajaxObj.headers,responseType=ajaxObj.responseType||"text",addToContent=ajaxObj.addToContent,timeout=ajaxObj.timeout||null,ex=ajaxObj.exception,timeoutId=null;XMLHttp.open(method,url,true);XMLHttp.setRequestHeader("AJAX","true");XMLHttp.setRequestHeader("X-Requested-With","XMLHttpRequest");if(method==="POST"){var contentLength=params?params.length:0;XMLHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");XMLHttp.setRequestHeader("Content-length",contentLength);if(XMLHttp.overrideMimeType){XMLHttp.setRequestHeader("Connection","close")}}if(responseType==="json"){XMLHttp.setRequestHeader("Accept","application/json, text/javascript, */*")}for(var i in headers){if(typeof i==="string"){XMLHttp.setRequestHeader(i,headers[i])}}if(typeof callback==="function"){XMLHttp.onreadystatechange=function(){try{if(XMLHttp.readyState===4){window.clearTimeout(timeoutId);status=XMLHttp.status;statusText=XMLHttp.statusText;readyState=4;if(!status||status!==200){throw new Error(statusText)}var response=/xml/i.test(responseType)?XMLHttp.responseXML:XMLHttp.responseText;if(/json/i.test(responseType)){response=(typeof JSON==="object"&&typeof JSON.parse==="function")?JSON.parse(response):eval("("+response+")")}globalXMLHttp=null;XMLHttp.onreadystatechange=function(){};requestPool.push(XMLHttp);callback.call(elm,response,addToContent)}}catch(e){globalXMLHttp=XMLHttp=null;if(typeof ex==="function"){ex.call(elm,e);ex=null}}}}XMLHttp.send(params);if(timeout){timeoutId=window.setTimeout(function(){if(inProgress(XMLHttp)){XMLHttp.abort();if(typeof ex==="function"){readyState=0;status=408;statusText="Request timeout";globalXMLHttp=XMLHttp=null;ex.call(elm,new Error(statusText));ex=null}}},timeout)}})(this)}return this},replaceWithAJAXContent:function(content,add){if(add){this.innerHTML+=content}else{DOMAssistant.clearHandlers.apply(this);this.innerHTML=content}},getReadyState:function(){return(globalXMLHttp&&typeof globalXMLHttp.readyState!=="undefined")?globalXMLHttp.readyState:readyState},getStatus:function(){return status},getStatusText:function(){return statusText}}}();DOMAssistant.attach(DOMAssistant.AJAX);DOMAssistant.CSS=function(){return{addClass:function(B){if(!DOMAssistant.CSS.hasClass.call(this,B)){var A=this.className;this.className=A+(A.length?" ":"")+B}return this},removeClass:function(A){return DOMAssistant.CSS.replaceClass.call(this,A)},replaceClass:function(B,C){var A=new RegExp(("(^|\\s)"+B+"(\\s|$)"),"i");this.className=this.className.replace(A,function(D,G,F){var E=C?(G+C+F):"";if(/^\s+.*\s+$/.test(D)){E=D.replace(/(\s+).+/,"$1")}return E}).replace(/^\s+|\s+$/g,"");return this},hasClass:function(A){return new RegExp(("(^|\\s)"+A+"(\\s|$)"),"i").test(this.className)},setStyle:function(C,D){if(this.filters&&(typeof C==="string"?/opacity/i.test(C):C.opacity)){this.style.filter="alpha(opacity="+(D||C.opacity||1)*100+")"}if(typeof this.style.cssText!=="undefined"){var A=this.style.cssText;if(typeof C==="object"){for(var B in C){if(typeof B==="string"){A+=";"+B+":"+C[B]}}}else{A+=";"+C+":"+D}this.style.cssText=A}return this},getStyle:function(A){var C="";A=A.toLowerCase();if(document.defaultView&&document.defaultView.getComputedStyle){C=document.defaultView.getComputedStyle(this,"").getPropertyValue(A)}else{if(this.currentStyle){if(this.filters&&/^opacity$/.test(A)){var B=this.filters["DXImageTransform.Microsoft.Alpha"]||this.filters.alpha||{};C=(B.opacity||100)/100}else{A=A.replace(/^float$/,"styleFloat").replace(/\-(\w)/g,function(D,E){return E.toUpperCase()});C=this.currentStyle[A]}if(C==="auto"&&/^(width|height)$/.test(A)&&this.currentStyle.display!=="none"){C=this["offset"+A.charAt(0).toUpperCase()+A.substr(1)]+"px"}}}return C}}}();DOMAssistant.attach(DOMAssistant.CSS);DOMAssistant.Content=function(){var A=DOMAssistant.$;return{init:function(){DOMAssistant.setCache(false)},prev:function(){var B=this;while((B=B.previousSibling)&&B.nodeType!==1){}return A(B)},next:function(){var B=this;while((B=B.nextSibling)&&B.nodeType!==1){}return A(B)},create:function(D,C,B,E){var F=A(document.createElement(D));if(C){F=F.setAttributes(C)}if(typeof E!=="undefined"){F.addContent(E)}if(B){DOMAssistant.Content.addContent.call(this,F)}return F},setAttributes:function(B){if(DOMAssistant.isIE){var C=function(G,E,F){var D=E.toLowerCase();switch(D){case"name":case"type":return document.createElement(G.outerHTML.replace(new RegExp(D+"=[a-zA-Z]+")," ").replace(">"," "+D+"="+F+">"));case"style":G.style.cssText=F;return G;default:G[DOMAssistant.camel[D]||E]=F;return G}};DOMAssistant.Content.setAttributes=function(D){var H=this;var G=this.parentNode;for(var F in D){if(typeof D[F]==="string"||typeof D[F]==="number"){var E=C(H,F,D[F]);if(G&&/(name|type)/i.test(F)){if(H.innerHTML){E.innerHTML=H.innerHTML}G.replaceChild(E,H)}H=E}}return A(H)}}else{DOMAssistant.Content.setAttributes=function(D){for(var E in D){if(/class/i.test(E)){this.className=D[E]}else{this.setAttribute(E,D[E])}}return this}}return DOMAssistant.Content.setAttributes.call(this,B)},addContent:function(C){var B=typeof C;if(B==="string"||B==="number"){this.innerHTML+=C}else{if(B==="object"||(B==="function"&&!!C.nodeName)){this.appendChild(C)}}return this},replaceContent:function(B){DOMAssistant.clearHandlers.apply(this);this.innerHTML="";return DOMAssistant.Content.addContent.call(this,B)},replace:function(G,B){var F=typeof G;if(F==="string"||F==="number"){var E=this.parentNode;var D=A(E).create("div",null,false,G);for(var C=D.childNodes.length-1;C>=0;C--){E.insertBefore(D.childNodes[C],this.nextSibling)}G=this.nextSibling;E.removeChild(this)}else{if(F==="object"||(F==="function"&&!!G.nodeName)){this.parentNode.replaceChild(G,this)}}return B?G:this},remove:function(){this.parentNode.removeChild(this);return null}}}();DOMAssistant.attach(DOMAssistant.Content);DOMAssistant.Events=function(){var A=1;return{publicMethods:["triggerEvent","addEvent","removeEvent","preventDefault","cancelBubble"],init:function(){window.addEvent=this.addEvent;window.removeEvent=this.removeEvent;DOMAssistant.preventDefault=this.preventDefault;DOMAssistant.cancelBubble=this.cancelBubble},triggerEvent:function(C,F){if(this.events&&this.events[C]){var E={type:C,target:F||this,currentTarget:this,bubbles:false,cancelable:false,preventDefault:function(){},stopPropagation:function(){},timeStamp:+new Date()};for(var D=0,B=this.events[C].length;D<B;D++){this.events[C][D].call(this,E)}}else{if(typeof this["on"+C]==="function"){this["on"+C].call(this,E)}}return this},addEvent:function(B,D){if(/^DOM/.test(B)){if(this.addEventListener){this.addEventListener(B,D,false)}}else{if(!this.uniqueHandlerId){this.uniqueHandlerId=A++}if(!(D.attachedElements&&D.attachedElements[B+this.uniqueHandlerId])){if(!this.events){this.events={}}if(!this.events[B]){this.events[B]=[];var C=this["on"+B];if(C){this.events[B].push(C)}}this.events[B].push(D);this["on"+B]=DOMAssistant.Events.handleEvent;if(typeof this.window==="object"){this.window["on"+B]=DOMAssistant.Events.handleEvent}if(!D.attachedElements){D.attachedElements={}}D.attachedElements[B+this.uniqueHandlerId]=true}}return this},handleEvent:function(B){var G=B||event;var H=G.target||G.srcElement||document;while(H.nodeType!==1&&H.parentNode){H=H.parentNode}G.eventTarget=H;var C=this.events[G.type].slice(0),F,E;if((F=C.length)){for(var D=0;D<F;D++){if(typeof C[D]==="function"){E=C[D].call(this,G)}}return E}},removeEvent:function(B,F){if(this.events&&this.events[B]){var C=this.events[B];for(var E,D=C.length-1;D>=0;D--){E=F||C[D];if(C[D]===E){delete C[D];C.splice(D,1);if(E.attachedElements){E.attachedElements[B+this.uniqueHandlerId]=null}}}}else{if(this["on"+B]&&!F){this["on"+B]=null}}return this},preventDefault:function(B){if(B&&B.preventDefault){DOMAssistant.Events.preventDefault=function(C){C.preventDefault()}}else{DOMAssistant.Events.preventDefault=function(C){event.returnValue=false}}return DOMAssistant.Events.preventDefault(B)},cancelBubble:function(B){if(B&&B.stopPropagation){DOMAssistant.Events.cancelBubble=function(C){C.stopPropagation()}}else{DOMAssistant.Events.cancelBubble=function(C){event.cancelBubble=true}}return DOMAssistant.Events.cancelBubble(B)}}}();DOMAssistant.attach(DOMAssistant.Events);DOMAssistant.DOMLoad=function(){var DOMLoaded=false;var DOMLoadTimer=null;var functionsToCall=[];var addedStrings={};var errorHandling=null;var execFunctions=function(){for(var i=0,il=functionsToCall.length;i<il;i++){try{functionsToCall[i]()}catch(e){if(errorHandling&&typeof errorHandling==="function"){errorHandling(e)}}}functionsToCall=[]};var DOMHasLoaded=function(){if(DOMLoaded){return}DOMLoaded=true;execFunctions()};
    /*@cc_on @if(@_win32||@_win64)if(document.getElementById){document.write("<script id="\&quot;ieScriptLoad\&quot;" defer="defer" src="\&quot;//:\&quot;" ><\/script>");document.getElementById("ieScriptLoad").onreadystatechange=function(){if(this.readyState==="complete"){DOMHasLoaded()}}}@end@*/
    if(document.addEventListener){document.addEventListener("DOMContentLoaded",DOMHasLoaded,false)}if(/KHTML|WebKit|iCab/i.test(navigator.userAgent)){DOMLoadTimer=setInterval(function(){if(/loaded|complete/i.test(document.readyState)){DOMHasLoaded();clearInterval(DOMLoadTimer)}},10)}window.onload=DOMHasLoaded;return{DOMReady:function(){for(var i=0,il=arguments.length,funcRef;i<il;i++){funcRef=arguments[i];if(!funcRef.DOMReady&&!addedStrings[funcRef]){if(typeof funcRef==="string"){addedStrings[funcRef]=true;funcRef=new Function(funcRef)}funcRef.DOMReady=true;functionsToCall.push(funcRef)}}if(DOMLoaded){execFunctions()}},setErrorHandling:function(funcRef){errorHandling=funcRef}}}();DOMAssistant.DOMReady=DOMAssistant.DOMLoad.DOMReady;
    if (redirect != 'int' && redirect != 'banner') {
        var redirect = 'int';
    }
    var url;
    function checkLinks() {
        if (typeof(domains) == "object") {
            DOMAssistant.$("body a").each(function () {      
                if (in_object(domains, DOMAssistant.$(this).href)) {          
                    if (DOMAssistant.$(this).href.toLowerCase().indexOf("go.hungcoder.com") != 7) {
                        if (redirect == 'int') {
                            url = "http://go.huungcoder.com?url="+DOMAssistant.$(this).href;
                        } else {
                            url = "http://go.hungcoder.com?url="+DOMAssistant.$(this).href;
                        }
                        DOMAssistant.$(this).setAttributes({href : url});
                    }              
                }
            });
        } else if (typeof(exclude_domains) == "object") {
            DOMAssistant.$("body a").each(function () {    
                if (!in_object(exclude_domains, DOMAssistant.$(this).href) && DOMAssistant.$(this).href.substr(0,10) != "javascript") {                      
                    if (DOMAssistant.$(this).href.toLowerCase().indexOf("go.hungcoder.com") != 7) {                              
                        if (redirect == 'int') {
                            url = "http://go.hungcoder.com?url="+DOMAssistant.$(this).href;
                        } else {
                            url = "http://go.hungcoder.com?url="+DOMAssistant.$(this).href;
                        }
                        DOMAssistant.$(this).setAttributes({href : url});                  
                    }
                }
            });
        }
    }
    function in_object(obj, val) {
     for(var i = 0, l = obj.length; i < l; i++) {    
            var re = new RegExp(obj[i],"i");        
            if(val.search(re) >0) {
                return true;
      }
     }
     return false;
    }
    DOMAssistant.DOMReady(checkLinks);
    //]]>
    </script>
<!-- end -->




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<!-- <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/> -->

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvyDdSCf3t93JBFBZZKhpsStTGU0Q-oXte0HQwavMkxdz2BDRE4U7BulKjV3ihl_cLWBWXfYaCs-q8e1AxsrqQi_QgFfKJHy9gO8XWvvRD5gu3gfnCM83Lr6pGYHKSUTxUku3M9vCeoo/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 20;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}

/* javascript load */
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v;}
var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)
$(o.btnPrev).click(function(){return go(curr-o.scroll);});if(o.btnNext)
$(o.btnNext).click(function(){return go(curr+o.scroll);});if(o.btnGo)
$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i);});});if(o.mouseWheel&&div.mousewheel)
div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll);});if(o.auto)
setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)
o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll;}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll;}else curr=to;}else{if(to<0||to>itemLength-v)return;else curr=to;}
running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)
o.afterEnd.call(this,vis());running=false;});if(!o.circular){$(o.btnPrev+","+ o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled");}}
return false;};});};function css(el,prop){return parseInt($.css(el[0],prop))||0;};function width(el){return el[0].offsetWidth+ css(el,'marginLeft')+ css(el,'marginRight');};function height(el){return el[0].offsetHeight+ css(el,'marginTop')+ css(el,'marginBottom');};})(jQuery);
//]]>
</script>
 <body>

<p>We are sorry for this blog while we close, perhaps to the fore we don&#39;t use blog <b><span style='color:#ff0000'>Bờm Khùng</span></b> again and Changed into a new Blog, wait his coming :), we will announce them later in social media if we have issued our new blog with the theme or template that is super than ever. Thank you for your attention :)</p>
   <p><a href='http://bomkhung.blogspot.com/'>HÙNG CODER BLOGGER</a></p>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
  document.write(&quot;&lt;script src=\&quot;https://www.hungcoder.com/feeds/posts/default/?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 4,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if> 
   
<!-- add _blank for link out by http://quangtruyen.info -->
<script type='text/javascript'>
//<![CDATA[
function changetargetlink(x){
var a = document.getElementsByTagName('a');
var args = changetargetlink.arguments;
for(var i in a){
a[i].target = "_blank";
a[i].rel = "_blank";
for(var j=0;j<args.length;j++){
if(a[i].href.match(args[j])){
a[i].target = "";
a[i].rel = "";
}}}}
  changetargetlink('http://baotri.hungcoder.com/');
//]]>
</script>
<style type='text/css'>body, a, a:hover {cursor: url(http://hellox.persiangig.com/DefacePage/negro.cur), progress;}</style>

  <b:section class='main' id='main' showaddelement='yes'/>

<!-- Don't Ctrl + U -->
<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="http://bomkhung.blogspot.com/p/privacy-policy.html"});
//]]>
</script>
<!-- /End Don't Ctrl + U -->

<!-- don't clip right -->
<style type='text/css'>
body{
-webkit-touch-callout: none;
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
-o-user-select: none;
user-select: none;
}
</style>
<script type='text/javascript'>
//<![CDATA[
// JavaScript Document
var message="NoRightClicking"; function defeatIE() {if (document.all) {(message);return false;}} function defeatNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;} else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;} document.oncontextmenu=new Function("return false")
//]]>
</script>

 
<!-- dont ctrl + U BomKhung.Info--> 
<script type='text/javascript'> 
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="http://www.bomkhung.info/p/ban-quyen-bom-khung-blogger.html"}),shortcut.add("F12",function(){top.location.href="http://www.bomkhung.info/p/ban-quyen-bom-khung-blogger.html"}),shortcut.add("Ctrl+Shift+I",function(){top.location.href="http://www.bomkhung.info/p/ban-quyen-bom-khung-blogger.html"}),shortcut.add("Ctrl+S",function(){top.location.href="http://www.bomkhung.info/p/ban-quyen-bom-khung-blogger.html"}),shortcut.add("Ctrl+Shift+C",function(){top.location.href="http://www.bomkhung.info/p/ban-quyen-bom-khung-blogger.html"}); //]]> </script> 
<!-- end --> 


<iframe allowfullscreen='true' frameborder='0' height='1' scrolling='no' src='https://mp3.zing.vn/embed/song/ZW8WA7WB?start=true' width='1'/>

 </body>
</html>

Các bạn nhìn lên Full đoạn code bên trên các bạn chỉ cần thay thế những đoạn mà mình bôi đỏ là có 1 template bảo trì của riềng mình rồi đáy:D,

Chúc các bạn thành công .