Tạo Widget SmartPhone cực chất cho blogspot - Thích Chia Sẻ Blog
Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn cách Tạo Widget SmartPhone  cực chất cho blogspot.

Cách thực hiện

Bước 1: Các bạn đăng nhập vào blogger > Bố cục > Thêm tiện ích > HTML/Javascript
Bước 2: Các bạn dán đoạn code sau vào rồi lưu lại là xong
<!-- BEGIN CSS -->
<style>
.patt-holder{background:#3382c0;-ms-touch-action:none}
.patt-wrap{position:relative;cursor:pointer}
.patt-wrap li,.patt-wrap ul{list-style:none;margin:0;padding:0}
.patt-circ{position:relative;float:left;box-sizing:border-box;-moz-box-sizing:border-box}
.patt-circ.hovered{border:3px solid #090}
.patt-error .patt-circ.hovered{border:3px solid #BA1B26}
.patt-hidden .patt-circ.hovered{border:0}
.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}
.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}
.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}
.patt-hidden .patt-lines{display:none}
.mhn-ui-date-time,.text-center{text-align:center}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
.mhn-ui-wrap{width:300px;height:475px;margin:0 auto;overflow:hidden;position:relative;0 auto;background:url(http://i.imgur.com/axSg5ih.png) center no-repeat #2c3e50;}
.mhn-ui-wrap:before{top:0;left:0;right:0;bottom:0;content:'';position:absolute;background:rgba(0,0,0,.4)}
.mhn-ui-date-time{color:#eee;z-index:50;position:relative}
.mhn-ui-date-time .mhn-ui-time{font-size:28px;font-weight:400;margin-bottom:15px}
.mhn-ui-date-time .mhn-ui-day{font-size:24px;margin-bottom:10px}
.mhn-ui-date-time .mhn-ui-date{font-size:18px;font-weight:400}
.mhn-ui-app-time{padding:0 5px;font-size:12px;text-align:right;margin:-15px -15px auto;background:rgba(0,0,0,.6)}
.mhn-lock-wrap{left:0;right:0;bottom:0;z-index:50;position:absolute}
.mhn-lock-wrap .mhn-lock-title{margin: 0 20px;color:#fff;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.mhn-lock-wrap .mhn-lock-success{color:transparent;text-shadow:none}
.mhn-lock-wrap .mhn-lock-failure{color:#f34235}
.mhn-lock{margin:auto;background:0 0}
.patt-wrap{margin:auto;overflow:hidden}
.patt-wrap li{transition:all .4s ease-in-out 0s}
.patt-dots,.patt-lines{transition:background .1s ease-in-out 0s}
.patt-circ{border:3px solid transparent}
.patt-dots{background:rgba(255,255,255,.8)}
.patt-lines{background:rgba(255,255,255,.4)}
.patt-circ.hovered{border-color:#ddd;background:rgba(255,255,255,.2)}
.patt-error .patt-circ.hovered{background:rgba(243,66,53,.4);border-color:rgba(243,66,53,.8)}
.patt-error .patt-lines{background:rgba(243,66,53,.5)}
.patt-success .patt-circ.hovered{background:rgba(75,174,79,.4);border-color:rgba(75,174,79,.8)}
.patt-success .patt-lines{background:rgba(75,174,79,.5)}
.mhn-ui-page{color:#fff;height:100%;z-index:50;display:none;padding:15px;position:relative}
.mhn-ui-page.page-lock{position:initial}
.mhn-ui-page .mhn-ui-app-title-head{padding:10px 15px;font-size:16px;margin:0 -15px;background:rgba(0,0,0,.4)}
.mhn-ui-page .mhn-ui-filter{float:right;position:relative}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn{right:0;top:-5px;padding:5px;cursor:pointer;position:absolute;display:inline-block}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn.active{background:teal}
.mhn-ui-page .mhn-ui-filter-list{right:0;top:20px;padding:5px;width:180px;display:none;position:absolute;background:rgba(0,0,0,.8)}
.mhn-ui-page .mhn-ui-filter-list>div{display:block;font-size:14px;cursor:pointer;padding:2px 4px}
.mhn-ui-page .mhn-ui-filter-list>div.active{color:teal}
.mhn-ui-page .mhn-ui-filter-list>div:hover{background:teal}
.mhn-ui-page .mhn-ui-filter-list>div.active:hover{background:0 0}
.mhn-ui-page .mhn-ui-row{margin-top:15px}
.mhn-ui-page .mhn-ui-row:after,.mhn-ui-page .mhn-ui-row:before{content:'';display:table}
.mhn-ui-page .mhn-ui-row:after{clear:both;display:block}
.mhn-ui-page .mhn-ui-col{width:25%;float:left;margin-bottom:15px}
.mhn-ui-bottom-link-bar{left:0;right:0;bottom:0;padding:15px;position:absolute;text-align:center}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn{width:40px;height:40px;cursor:pointer;font-size:28px;line-height:40px;text-align:center;border-radius:50%;display:inline-block}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(1){margin-right:15px}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(2){margin-left:15px}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:hover{color:#ccc;background:rgba(0,0,0,.8)}
.mhn-ui-icon{text-align:center}
.mhn-ui-icon span{width:55px;height:55px;margin:auto;display:block;font-size:28px;cursor:pointer;line-height:55px;text-align:center;border-radius:15px;background:rgba(0,0,0,.3);transition:background .4s ease-in-out 0s;box-shadow:0 -1px 0 rgba(255,255,255,.5) inset}
.mhn-ui-icon .mhn-ui-icon-title{margin-top:5px;cursor:default;overflow:hidden;font-size:13px;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.mhn-ui-page.page-author img{padding:8px;margin-top:15px;border-radius:50%;background:rgba(255,255,255,.7)}
.mhn-ui-credit{padding:5px;font-size:13px;margin-top:15px;background:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.2)}
.mhn-ui-credit p{margin:0;color:#f1f1f1}
.mhn-ui-credit a{font-weight:500}
.mhn-ui-dialog-wrap{top:0;left:0;right:0;bottom:0;display:none;z-index:50;position:absolute;background:rgba(0,0,0,.7)}
.mhn-ui-dialog{padding:15px;background:#000;margin:50% 0 auto}
.mhn-ui-dialog .mhn-ui-dialog-title{font-size:18px;font-weight:500}
.mhn-ui-dialog .mhn-ui-dialog-btn{padding:5px;min-width:65px;cursor:pointer;margin-right:10px;text-align:center;display:inline-block;border:2px solid rgba(255,255,255,.8)}
.mhn-ui-dialog .mhn-ui-dialog-btn:hover{background:#009688;text-decoration:none}
.mhn-ui-info{margin:10px 0 0 0;font-size:16px;text-align:center}
.mhn-ui-date,.mhn-ui-time{animation:zoomIn 1s}
.mhn-ui-day{animation:rubberBand 1s}
.mhn-lock-failure{animation:zoomIn .4s}
.patt-circ:nth-child(1),.patt-circ:nth-child(2),.patt-circ:nth-child(3){animation:fadeInUp .4s}
.patt-circ:nth-child(4),.patt-circ:nth-child(5),.patt-circ:nth-child(6){animation:fadeInUp .6s}
.patt-circ:nth-child(7),.patt-circ:nth-child(8),.patt-circ:nth-child(9){animation:fadeInUp .8s}
.mhn-ui-icon span{animation:zoomIn .6s}
.mhn-ui-bottom-btn{animation:bounceInUp .8s}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(1){animation:fadeInUp .4s}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(2){animation:fadeInUp .5s}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(3){animation:fadeInUp .6s}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(4){animation:fadeInUp .7s}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(5){animation:fadeInUp .8s}
</style>
<!-- END CSS -->
<!-- BEGIN HTML -->
<div class="mhn-ui-wrap">
 <div class="mhn-ui-page page-lock">
  <div class="mhn-ui-date-time">
   <div class="mhn-ui-time">10:02 PM</div>
   <div class="mhn-ui-day">Monday</div>
   <div class="mhn-ui-date">May 15, 2017</div>
  </div>
  <div class="mhn-lock-wrap">
   <div class="mhn-lock-title" data-title="Vẽ hình chữ 'M' bắt đầu từ phía dưới bên trái để mở khóa."></div>
   <div class="mhn-lock"></div>
  </div>
 </div>
 <div class="mhn-ui-page page-home">
  <div class="mhn-ui-app-time">&nbsp;</div>
  <div class="mhn-ui-app-title-head">
   <span class="mhn-ui-page-title">Tất cả ứng dụng</span>
   <div class="mhn-ui-filter">
    <span class="mhn-ui-btn"><i class="fa fa-filter" aria-hidden="true"></i></span>
    <div class="mhn-ui-filter-list">
     <div data-filter="all" class="active">Tất cả ứng dụng</div>
     <div data-filter="general">Ứng dụng chung</div>
     <div data-filter="social">Ứng dụng xã hội</div>
     <div data-filter="credits">Ứng dụng website</div>
    </div>
   </div>
  </div>
  <div class="mhn-ui-row mhn-ui-apps">
   <div class="mhn-ui-col" data-filter="general">
    <div class="mhn-ui-icon" data-open="page-author">
     <span data-color="#2980b9"><i class="fa fa-user" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Tác giả</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="general">
    <div class="mhn-ui-icon" data-open="page-credits">
     <span data-color="#16a085"><i class="fa fa-globe" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Website</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="general">
    <div class="mhn-ui-icon" data-open="page-contact">
     <span data-color="#8e44ad"><i class="fa fa-info-circle" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Liên hệ</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="social">
    <div class="mhn-ui-icon" data-href="http://facebook.com/HieuWAI">
     <span data-color="#3b5998"><i class="fa fa-facebook-official" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Facebook</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="social">
    <div class="mhn-ui-icon" data-href="http://youtube.com/HieuWAI">
     <span data-color="#FF0000"><i class="fa fa-youtube-play" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Youtube</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="social">
    <div class="mhn-ui-icon" data-href="http://plus.google.com/+HieuWAI">
     <span data-color="#F22613"><i class="fa fa-google-plus" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Google+</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="social">
    <div class="mhn-ui-icon" data-href="http://twitter.com/HieuWAI">
     <span data-color="#56a3d9"><i class="fa fa-twitter" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Twitter</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="social">
    <div class="mhn-ui-icon" data-href="http://instagram.com/HieuWAI">
     <span data-color="#ec4a89"><i class="fa fa-instagram" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Instagram</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="credits">
    <div class="mhn-ui-icon" data-href="http://hieuwai.blogspot.com/">
     <span data-color="#19B5FE"><i class="fa fa-h-square" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">Blog Hiếu WAI</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="credits">
    <div class="mhn-ui-icon" data-href="http://pluskienthuc.com/">
     <span data-color="green"><i class="fa fa-product-hunt" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">PLUS Kiến Thức</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="credits">
    <div class="mhn-ui-icon" data-href="http://blogthemevn.blogspot.com/">
     <span data-color="#16A085"><i class="fa fa-bullseye" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">BlogTheme VN</div>
    </div>
   </div>
   <div class="mhn-ui-col" data-filter="credits">
    <div class="mhn-ui-icon" data-href="http://infohieuwai.blogspot.com/">
     <span data-color="#000000"><i class="fa fa-check-square" aria-hidden="true"></i></span>
     <div class="mhn-ui-icon-title">INFO Hiếu WAI</div>
    </div>
   </div>
  </div>
  <div class="mhn-ui-bottom-link-bar">
   <span class="mhn-ui-bottom-btn"><i class="fa fa-home" aria-hidden="true"></i></span>
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-lock')"><i class="fa fa-lock" aria-hidden="true"></i></span>
  </div>
 </div>
 <div class="mhn-ui-page page-author">
  <div class="mhn-ui-app-time"></div>
  <div class="mhn-ui-app-title-head"><span class="ion-person"></span> Tác giả</div>
  <div class="text-center"><a href='http://facebook.com/HieuWAI' target='_blank'><center><img class="flipInX animated" src="https://graph.facebook.com/100004881976478/picture" alt="@HieuWAI" /></center></a></div>
  <p class="text-center">Chào các bạn, tôi là Đỗ Văn Hiếu. Tôi là quản trị viên của Blog Hiếu WAI. Tôi lập ra website này nhằm chia sẻ kiến thức tổng hợp.</p>
  <div class="mhn-ui-bottom-link-bar">
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-home')"><i class="fa fa-home" aria-hidden="true"></i></span>
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-lock')"><i class="fa fa-lock" aria-hidden="true"></i></span>
  </div>
 </div>
 <div class="mhn-ui-page page-contact">
  <div class="mhn-ui-app-time">&nbsp;</div>
  <div class="mhn-ui-app-title-head"><span class="ion-chatbox"></span> Liên hệ</div>
  <p>Phone: <a href="tel:+841239738097" target="_blank">01239738097</a></p>
  <p>Email: <a href="mailto:mail.hieuwai@gmail.com">mail.hieuwai@gmail.com</a></p>
  <p>Website:</p>
  <p><a href="http://hieuwai.blogspot.com" target='_blank'>HieuWAI.blogspot.com</a></p>
  <p><a href="http://pluskienthuc.com" target='_blank'>PlusKienThuc.com</a></p>
  <p><a href="http://blogthemevn.blogspot.com" target='_blank'>BlogThemeVN.blogspot.com</a></p>
  <p><a href="http://infohieuwai.blogspot.com" target='_blank'>InfoHieuWAI.blogspot.com</a></p>
  <div class="mhn-ui-bottom-link-bar">
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-home')"><i class="fa fa-home" aria-hidden="true"></i></span>
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-lock')"><i class="fa fa-lock" aria-hidden="true"></i></span>
  </div>
 </div>
 <div class="mhn-ui-page page-credits">
  <div class="mhn-ui-app-time">&nbsp;</div>
  <div class="mhn-ui-app-title-head"><span class="ion-information-circled"></span> Website</div>
  <div class="mhn-ui-credit-list">
   <div class="mhn-ui-credit">
    <a href="http://hieuwai.blogspot.com/" target="_blank">HieuWAI.blogspot.com</a>
    <p>Blog Hiếu WAI là website tôi lập ra để chia sẻ kiến thức tổng hợp.</p>
   </div>
   <div class="mhn-ui-credit">
    <a href="http://pluskienthuc.com/" target="_blank">PlusKienThuc.com</a>
    <p>PLUS Kiến Thức là website tôi lập ra để chia sẻ tài liệu học tập, khóa học ôn thi, sách kỹ năng...</p>
   </div>
   <div class="mhn-ui-credit">
    <a href="http://blogthemevn.blogspot.com/" target="_blank">BlogThemeVN.blogspot.com</a>
    <p>BlogTheme VN là website tôi lập ra để chia sẻ template blogger miễn phí với kho template khổng lồ.</p>
   </div>
   <div class="mhn-ui-credit">
    <a href="http://infohieuwai.blogspot.com/" target="_blank">InfoHieuWAI.blogspot.com</a>
    <p>INFO Hiếu WAI là website giới thiệu cá nhân của tôi.</p>
   </div>
  </div>
  <div class="mhn-ui-bottom-link-bar">
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-home')"><i class="fa fa-home" aria-hidden="true"></i></span>
   <span class="mhn-ui-bottom-btn" onclick="mhnUI.page.show('page-lock')"><i class="fa fa-lock" aria-hidden="true"></i></span>
  </div>
 </div>
 <div class="mhn-ui-dialog-wrap">
  <div class="mhn-ui-dialog">
   <div class="mhn-ui-dialog-title">Bạn có chắc không?</div>
   <p>Ứng dụng này muốn mở một liên kết bên ngoài. Để xác nhận, vui lòng nhấp vào nút Chấp nhận.</p>
   <a data-action="confirm" class="mhn-ui-dialog-btn" target="_blank">Chấp nhận</a>
   <a data-action="cancel" class="mhn-ui-dialog-btn">Hủy</a>
  </div>
 </div>
</div>


<!-- BEGIN JAVASCRIPT -->
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900");loadCSS("http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css");loadCSS("http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");loadCSS("http://github.com/khadkamhn/lock-screen/raw/master/patt/pattern-lock.min.css");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 mhnUI.setup();
});
mhnUI = {
    pattern: "",
    setup: function() {
        this.lock(), this.filter(), this.colors(), this.links.setup(), this.dialog.setup(), setInterval("mhnUI.datetime()", 1e3)
    },
    lock: function() {
        mhnUI.page.hide(), pattern = new PatternLock(".mhn-lock", {
            margin: 15
        }), $(".mhn-lock-title").html($(".mhn-lock-title").data("title")), pattern.checkForPattern("7415369", function() {
            $(".mhn-lock-title").html('<span class="mhn-lock-success">Bạn đã mở khóa thành công</span>'), $(".patt-holder").addClass("patt-success"), setTimeout(function() {
                pattern.reset(), mhnUI.message()
            }, 1e3), mhnUI.page.show()
        }, function() {
            $(".mhn-lock-title").html('<span class="mhn-lock-failure">Opps! Mẫu không chính xác</span>'), $(".patt-holder").removeClass("patt-success"), setTimeout(function() {
                pattern.reset(), mhnUI.message()
            }, 2e3)
        })
    },
    message: function() {
        $(".mhn-lock-title span").fadeOut(), setTimeout(function() {
            $(".mhn-lock-title").html($(".mhn-lock-title").data("title")), $(".mhn-lock-title span").fadeIn()
        }, 500)
    },
    datetime: function() {
        var t = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"),
            e = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"),
            n = new Date,
            i = n.getYear();
        1e3 > i && (i += 1900);
        var a = n.getDay(),
            o = n.getMonth(),
            s = n.getDate();
        10 > s && (s = "0" + s);
        var h = n.getHours(),
            c = n.getMinutes(),
            u = n.getSeconds(),
            l = "AM";
        h >= 12 && (l = "PM"), h > 12 && (h -= 12), 0 == h && (h = 12), 9 >= c && (c = "0" + c), 9 >= u && (u = "0" + u), $(".mhn-ui-date-time .mhn-ui-day").text(t[a]), $(".mhn-ui-date-time .mhn-ui-date").text(e[o] + " " + s + ", " + i), $(".mhn-ui-date-time .mhn-ui-time").text(h + ":" + c + " " + l), $(".mhn-ui-app-time").text(h + ":" + c + ":" + u + " " + l)
    },
    page: {
        show: function(t) {
            t = t ? t : "page-home", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
        },
        hide: function(t) {
            t = t ? t : "page-lock", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
        }
    },
    filter: function() {
        $(".mhn-ui-filter .mhn-ui-btn").click(function() {
            $(this).toggleClass("active"), $(".mhn-ui-filter-list").toggle(100)
        }), $(".mhn-ui-filter-list>div").click(function() {
            var t = $(this).data("filter");
            $(this).siblings().removeAttr("class"), $(this).addClass("active");
            var e = function(t) {
                $(".mhn-ui-apps .mhn-ui-col").fadeOut(400), $('.mhn-ui-apps .mhn-ui-col[data-filter="' + t + '"]').fadeIn(400)
            };
            switch (t) {
                case "all":
                    $(".mhn-ui-apps .mhn-ui-col").fadeIn(400);
                    break;
                case "general":
                    e(t);
                    break;
                case "social":
                    e(t);
                    break;
                case "credits":
                    e(t)
            }
            $(".mhn-ui-filter-list").toggle(100), $(".mhn-ui-filter .mhn-ui-btn").removeClass("active"), $(".mhn-ui-page-title").text($(this).text())
        })
    },
    colors: function() {
        $(".mhn-ui-icon span").on("mouseover", function() {
            $(this).css("background", $(this).data("color"))
        }).on("mouseout", function() {
            $(this).removeAttr("style")
        })
    },
    links: {
        setup: function() {
            $(".mhn-ui-apps .mhn-ui-icon").click(function() {
                var t = $(this).data("href"),
                    e = $(this).data("open");
                t && mhnUI.links.href(t), e && mhnUI.page.show(e)
            })
        },
        href: function(t) {
            mhnUI.dialog.show(t)
        }
    },
    dialog: {
        setup: function() {
            $('.mhn-ui-dialog-wrap,.mhn-ui-dialog-wrap a[data-action="cancel"]').click(function() {
                mhnUI.dialog.hide()
            }), $(".mhn-ui-dialog").click(function(t) {
                t.stopPropagation()
            }), $('.mhn-ui-dialog a[data-action="confirm"]').click(function() {
                setTimeout(function() {
                    mhnUI.dialog.hide()
                }, 400)
            })
        },
        show: function(t) {
            $('.mhn-ui-dialog-wrap a[data-action="confirm"]').attr("href", t), $(".mhn-ui-dialog-wrap").show()
        },
        hide: function() {
            $('.mhn-ui-dialog-wrap a[data-action="confirm"]').removeAttr("href"), $(".mhn-ui-dialog-wrap").fadeOut(400)
        }
    }
};
/*
    patternLock.js v 0.5.0
    Author: Sudhanshu Yadav
    Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo on: ignitersworld.com/lab/patternLock.html
*/
!function(t,e,n,a){"use strict";function r(t){for(var e=t.holder,n=t.option,a=n.matrix,r=n.margin,i=n.radius,o=['<ul class="patt-wrap" style="padding:'+r+'px">'],s=0,l=a[0]*a[1];l>s;s++)o.push('<li class="patt-circ" style="margin:'+r+"px; width : "+2*i+"px; height : "+2*i+"px; -webkit-border-radius: "+i+"px; -moz-border-radius: "+i+"px; border-radius: "+i+'px; "><div class="patt-dots"></div></li>');o.push("</ul>"),e.html(o.join("")).css({width:a[1]*(2*i+2*r)+2*r+"px",height:a[0]*(2*i+2*r)+2*r+"px"}),t.pattCircle=t.holder.find(".patt-circ")}function i(t,e,n,a){var r=e-t,i=a-n;return{length:Math.ceil(Math.sqrt(r*r+i*i)),angle:Math.round(180*Math.atan2(i,r)/Math.PI)}}function o(){}function s(e,n){var a=this,i=a.token=Math.random(),h=p[i]=new o,u=h.holder=t(e);if(0!=u.length){h.object=a,n=h.option=t.extend({},s.defaults,n),r(h),u.addClass("patt-holder"),"static"==u.css("position")&&u.css("position","relative"),u.on("touchstart mousedown",function(t){d.call(this,t,a)}),h.option.onDraw=n.onDraw||l;var c=n.mapper;h.mapperFunc="object"==typeof c?function(t){return c[t]}:"function"==typeof c?c:l,h.option.mapper=null}}var l=function(){},p={},d=function(e,a){e.preventDefault();var r=p[a.token];if(!r.disabled){r.option.patternVisible||r.holder.addClass("patt-hidden");var i="touchstart"==e.type?"touchmove":"mousemove",o="touchstart"==e.type?"touchend":"mouseup";t(this).on(i+".pattern-move",function(t){h.call(this,t,a)}),t(n).one(o,function(){u.call(this,e,a)});var s=r.holder.find(".patt-wrap"),l=s.offset();r.wrapTop=l.top,r.wrapLeft=l.left,a.reset()}},h=function(e,n){e.preventDefault();var a=e.pageX||e.originalEvent.touches[0].pageX,r=e.pageY||e.originalEvent.touches[0].pageY,o=p[n.token],s=o.pattCircle,l=o.patternAry,d=o.option.lineOnMove,h=o.getIdxFromPoint(a,r),u=h.idx,c=o.mapperFunc(u)||u;if(l.length>0){var f=i(o.lineX1,h.x,o.lineY1,h.y);o.line.css({width:f.length+10+"px",transform:"rotate("+f.angle+"deg)"})}if(u){if(-1==l.indexOf(c)){var v,m=t(s[u-1]);if(o.lastPosObj){for(var g=o.lastPosObj,x=g.i,w=g.j,b=Math.abs(h.i-x),j=Math.abs(h.j-w);(0==b&&j>1||0==j&&b>1||j==b&&j>1)&&(w!=h.j||x!=h.i);){x=b?Math.min(h.i,x)+1:x,w=j?Math.min(h.j,w)+1:w,b=Math.abs(h.i-x),j=Math.abs(h.j-w);var M=(w-1)*o.option.matrix[1]+x,y=o.mapperFunc(M)||M;-1==l.indexOf(y)&&(t(s[M-1]).addClass("hovered"),l.push(y))}v=[],h.j-g.j>0?v.push("s"):h.j-g.j<0?v.push("n"):0,h.i-g.i>0?v.push("e"):h.i-g.i<0?v.push("w"):0,v=v.join("-")}m.addClass("hovered"),l.push(c);var P=o.option.margin,k=o.option.radius,C=(h.i-1)*(2*P+2*k)+2*P+k,O=(h.j-1)*(2*P+2*k)+2*P+k;if(1!=l.length){var D=i(o.lineX1,C,o.lineY1,O);o.line.css({width:D.length+10+"px",transform:"rotate("+D.angle+"deg)"}),d||o.line.show()}v&&(o.lastElm.addClass(v+" dir"),o.line.addClass(v+" dir"));var E=t('<div class="patt-lines" style="top:'+(O-5)+"px; left:"+(C-5)+'px"></div>');o.line=E,o.lineX1=C,o.lineY1=O,o.holder.append(E),d||o.line.hide(),o.lastElm=m}o.lastPosObj=h}},u=function(t,e){t.preventDefault();var n=p[e.token],a=n.patternAry.join("");n.holder.off(".pattern-move").removeClass("patt-hidden"),a&&(n.option.onDraw(a),n.line.remove(),n.rightPattern&&(a==n.rightPattern?n.onSuccess():(n.onError(),e.error())))};o.prototype={constructor:o,getIdxFromPoint:function(t,e){var n=this.option,a=n.matrix,r=t-this.wrapLeft,i=e-this.wrapTop,o=null,s=n.margin,l=2*n.radius+2*s,p=Math.ceil(r/l),d=Math.ceil(i/l),h=r%l,u=i%l;return p<=a[1]&&d<=a[0]&&h>2*s&&u>2*s&&(o=(d-1)*a[1]+p),{idx:o,i:p,j:d,x:r,y:i}}},s.prototype={constructor:s,option:function(t,e){var n=p[this.token],i=n.option;return e===a?i[t]:(i[t]=e,void(("margin"==t||"matrix"==t||"radius"==t)&&r(n)))},getPattern:function(){return p[this.token].patternAry.join("")},setPattern:function(t){var e=p[this.token],n=e.option,a=n.matrix,r=n.margin,i=n.radius;if(n.enableSetPattern){this.reset(),e.wrapLeft=0,e.wrapTop=0;for(var o=0;o<t.length;o++){var s=t[o]-1,d=s%a[1],u=Math.floor(s/a[1]),c=d*(2*r+2*i)+2*r+i,f=u*(2*r+2*i)+2*r+i;h.call(null,{pageX:c,pageY:f,preventDefault:l,originalEvent:{touches:[{pageX:c,pageY:f}]}},this)}}},enable:function(){var t=p[this.token];t.disabled=!1},disable:function(){var t=p[this.token];t.disabled=!0},reset:function(){var t=p[this.token];t.pattCircle.removeClass("hovered dir s n w e s-w s-e n-w n-e"),t.holder.find(".patt-lines").remove(),t.patternAry=[],t.lastPosObj=null,t.holder.removeClass("patt-error patt-success")},error:function(){p[this.token].holder.addClass("patt-error")},checkForPattern:function(t,e,n){var a=p[this.token];a.rightPattern=t,a.onSuccess=e||l,a.onError=n||l}},s.defaults={matrix:[3,3],margin:20,radius:25,patternVisible:!0,lineOnMove:!0,enableSetPattern:!1},e.PatternLock=s}(jQuery,window,document);
//]]>
</script>
<!-- END JAVASCRIPT -->
Xong rồi bạn vào blog của mình và tận hưởng thành quả nhé. Chúc các bạn thành công!
Cảm ơn anh Hiếu Wai đã làm ra một thủ thuật chất ạ!
avatar

- Tương tác, lỗi CSS menu kìa ô

delete 07:59 25 tháng 3, 2018
avatar

- tên Thanh Phú IT
- url https://www.thanhphuit.xyz/
- mô tả Blog Chia Sẽ Thủ Thuật
- đã đặt

delete 18:59 2 tháng 4, 2018
avatar

Bác cmt thông tin đi tui đặt cho

delete 16:51 3 tháng 4, 2018
avatar

Onl pc mình sẽ đặt cho bạn nhé

delete 16:52 3 tháng 4, 2018
avatar

Đã đặt nhé bạn, hy vọng bạn sẽ tt tốt

delete 16:56 3 tháng 4, 2018
avatar

Ok bạn cmt thông tin đi mình đặt cho nhé

delete 21:35 7 tháng 4, 2018
avatar

Starsinh.blogspot.com
Tên. Nhật Sinh Blog

delete 12:21 11 tháng 4, 2018
avatar

Hay đó ông mà blog ông còn lỗi kìa fix đi

delete 12:34 12 tháng 4, 2018
avatar

Ừ ông tui chưa có time để fix, rảnh tui fix liền

delete 12:35 12 tháng 4, 2018
avatar

Mình sẽ đặt khi rảnh nhé bạn

delete 12:38 12 tháng 4, 2018
avatar

Sao ko rep cmt mà cmt mới cho rối vậy

delete 12:33 13 tháng 4, 2018

- Không spam link bừa bãi.

- Không nói tục, chửi bậy.

- Không bình luận mang tính chính trị.

- Hãy là một độc giả có ý thức!

Nội quy chung Phú Cường Blogger

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Phú Cường Blogger - Life Is Share
- Thành lập: 22/09/2017
- Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Team Solomid...
- Tác giả blog: Nguyễn Phú Cường hiện đang là sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!