Zing News - Tri thức trực tuyến

M
Home Trang chủ » Blogspot

Chia sẻ intro profile cá nhân giống BEATVN có edit | RIUSGREY

Hôm nay mình xin giới thiệu đến các bạn intro profile giống BEATVN. 

Hình Minh Hoạ

Live demo

Cách làm:

Các bạn copy code phía dưới và dán chỗ phù hợp ( thường là trên bài viết )
<style>
/* css còn thừa không rảnh xóa ae thông cảm */
.col-3 {
    width: 16%;
}
.col-2, .col-3 {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 6px;
    padding-right: 6px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16 {
    float: left;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16 {
    position: relative;
    min-height: 1px;
    padding-left: 6px;
    padding-right: 6px;
}
.col-13{
  width: 81.25%;
}
.b-cover{height:155px;background-repeat:no-repeat;background-size:cover;background-position:50%;background-color:#1c1e21}
.page-profile .b-sidebar-left{position:static}
.b-profile-cover-riusgrey{background-color:#fff;-webkit-box-shadow:0 1px 3px 0 rgba(26,26,26,.1);box-shadow:0 1px 3px 0 rgba(26,26,26,.1);border-radius:3px;margin-bottom:24px;overflow:hidden}
.b-profile-cover-riusgrey .upload-overlay{position:absolute;top:4px;right:4px;bottom:4px;left:4px;margin:auto;background-color:rgba(0,0,0,.3);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;text-align:center;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-profile-cover-riusgrey .upload-overlay:hover{opacity:.8}
.b-profile-cover-riusgrey .upload-overlay .text{margin:14px 0 0;font-size:14px;font-weight:600;color:#fff}
.profile-cover{position:relative}
.profile-cover .upload-overlay{width:180px;height:80px;border-radius:4px}
.profile-block .avatar-container{margin-top:-52px;padding:15px}
.profile-block .avatar-container .avatar{border-radius:3px;overflow:hidden;-webkit-box-shadow:0 1px 3px 0 rgba(26,26,26,.1);box-shadow:0 1px 3px 0 rgba(26,26,26,.1);position:relative}
.profile-block .avatar-container .avatar .image-avatar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}
.profile-block .avatar-container .avatar .image-avatar,.profile-block .avatar-container .avatar img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;border:4px solid #fff;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:scale-down;vertical-align:middle;-ms-flex-pack:center;justify-content:center}
.profile-block .info{position:relative;padding-top:16px}
.profile-block .cover-title{display:inline-block;float:left;color:#e70000}
.profile-block .cover-title .subtitle{margin:0;font-weight:700;font-size:13px}
.profile-block .cover-title .title{margin:0;font-weight:700;font-size:24px;line-height:32px;max-width:300px;color:#222}
.profile-block .cover-title .title&gt;a{-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;display:block;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;color:#1a1a1a}
.profile-block .cover-title .title&gt;a:hover{opacity:.8;color:#e70000}
.profile-block .cover-tab{margin-top:5px}
.profile-block .cover-title .title&gt;p{text-transform:capitalize;font-size:16px;font-weight:400}
.profile-block .cover-tab&gt;li&gt;a:after{left:16px;right:16px}
.profile-block .col-left{float:left;width:120px}
.profile-block .col-left .avatar-container{margin-top:-48px}
.profile-block .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.profile-block .col-right .cover-action{top:12px}
.profile-block .col-full{clear:both;display:block;width:100%}
.profile-block .col-full .info{padding:15px 15px 0}
.profile-block .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.profile-block .col-full .cover-tab::-webkit-scrollbar,.profile-block .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.profile-block .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.group-cover-info .row-eq-height,.profile-block .col-full .cover-tab li{-ms-flex-align:center;align-items:center}
.group-cover-info .row-eq-height div{-ms-flex-pack:start;justify-content:flex-start}
.group-cover-info .post-actions{display:inline-block}
.group-cover-info .post-actions .post-reaction{display:-ms-flexbox;display:flex}
.group-cover-info .post-actions .post-reaction&gt;li{display:-ms-flexbox;display:flex;padding:9px 2px;margin-right:16px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a{position:relative;line-height:32px;display:block;text-align:left;width:100%;border-radius:3px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;color:#8590a6;font-weight:700;font-size:12px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .b-icon{position:relative;margin-right:6px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-like{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-angry{top:5px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-share{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-comment,.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-more-lg{top:4px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active{color:#e70000}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-like{background-image:url(/static/media/like-active.efada8e0.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-angry{background-image:url(/static/media/angry-active.42d26955.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like{text-align:left}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .b-icon-like{width:42px;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:0}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like,.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{position:absolute;background-repeat:no-repeat;background-size:2900%;height:50px;width:50px;left:25px;top:50%;-ms-transform:translate(-50%,-47.5%);-webkit-transform:translate(-50%,-47.5%);transform:translate(-50%,-47.5%)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:100%;-webkit-animation-timing-function:steps(28);animation-timing-function:steps(28);-webkit-animation-name:heart-burst;animation-name:heart-burst;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:1;animation-iteration-count:1;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li .b-btn-more .icon-more-lg{top:8px}
.group-cover-info .col-left{float:left;width:120px}
.group-cover-info .col-left .avatar-container{margin-top:-48px}
.group-cover-info .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.group-cover-info .col-right .cover-action{top:12px}
.group-cover-info .col-full{clear:both;display:block;width:100%}
.group-cover-info .col-full .info{padding:0 15px}
.group-cover-info .col-full .group-cover-overview{text-align:center;padding:0 24px}
.group-cover-info .col-full .group-cover-overview .actions{margin:0}
.group-cover-info .col-full .cover-tab{margin-top:8px}
.group-cover-info .col-full .cover-tab&gt;li&gt;a:after{left:16px;right:16px}
.group-cover-info .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.group-cover-info .col-full .cover-tab::-webkit-scrollbar,.group-cover-info .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.group-cover-info .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.page-mobile .b-group-cover,.page-mobile .b-profile-cover-riusgrey{margin-bottom:12px;border-radius:0;-webkit-box-shadow:0 0 3px 0 rgba(26,26,26,.1);box-shadow:0 0 3px 0 rgba(26,26,26,.1)}
.card-update-profile{padding:24px 0}
.card-update-profile button[type=submit]{min-width:250px;font-weight:600}
.card-update-profile .btn-group{border-radius:3px;background-color:#f6f6f6;border:1px solid #ebebeb;width:100%;display:-ms-flexbox;display:flex}
.card-update-profile .btn-group .btn{-ms-flex:1;flex:1 1;background:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;font-weight:500}
.card-update-profile .btn-group .btn:hover{opacity:.8}
.card-update-profile .btn-group .btn.active{background-color:#000;border-color:#000;color:#fff}
.page-mobile .card-update-profile{padding:24px}
.b-featured{height:308px}
.b-featured.b-featured-video,.b-featured.b-featured-video .thumbnail{height:460px!important}
.b-video .video-list{margin-bottom:-12px;overflow:hidden}
.b-video .video-list.list-2col{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:wrap}
.b-video .b-card-header{position:relative}
.b-video .b-card-header .btn{position:absolute;right:12px;top:8px;font-size:11px;font-weight:500;text-transform:uppercase;padding:5px 12px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-video .b-card-header .btn:hover{opacity:.8}
.b-video .b-card-header .btn .b-icon{position:relative;top:1px;margin-left:4px}
.b-video .b-video-item{border-radius:3px}
.b-video .b-video-item .thumbnail{margin:0}
.b-video .b-video-item .info{padding:10px 0;min-height:64px}
.b-video .b-video-item .info .b-sm-title{display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word;margin-bottom:8px}
.b-video .b-video-header{border-radius:3px}
.b-video .b-video-header .thumbnail{margin:0}
.b-video .b-video-header .info{padding:10px 0;min-height:64px}
.b-video .b-video-header .info .b-sm-title{display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word;margin-bottom:8px}
.b-video .actions .next,.b-video .actions .prev{padding:14px 7px;border-radius:3px;-webkit-box-shadow:0 0 3px 0 rgba(26,26,26,.1);box-shadow:0 0 3px 0 rgba(26,26,26,.1);background-color:#fff;border:1px solid rgba(0,0,0,.1);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin:auto;cursor:pointer;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.b-video .actions .next:hover,.b-video .actions .prev:hover{opacity:.8}
.b-video .actions .next .b-icon,.b-video .actions .prev .b-icon{float:left}
.b-video .actions .prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.b-video .actions .next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.page-mobile .b-featured{height:200px}
.page-mobile .b-featured.b-featured-video,.page-mobile .b-featured.b-featured-video .thumbnail{height:200px!important}
.page-mobile .b-featured .item .thumbnail .b-icon.icon-play{width:48px;height:48px}
.page-mobile .b-featured .item .info .b-title,.page-mobile .b-featured .item .info .b-title a,.page-mobile .b-featured .item .info .title,.page-mobile .b-featured .item .info .title a{font-weight:600;font-size:16px;line-height:20px}
.page-mobile .b-featured .item .info .metadata{margin:0;font-size:13px}
.b-hot-list{border-radius:3px;overflow:hidden;background-color:#000;font-size:13px}
.b-hot-list .col-4,.b-hot-list .col-6{padding:0}
.b-hot-list .row.no-gutter{margin-left:0;margin-right:0}
.b-hot-list .item{margin-bottom:20px}
.b-hot-list .img-container{display:block;position:relative}
.b-hot-list .title{display:block;text-decoration:none}
.b-hot-list .title h2,.b-hot-list .title h2 a{margin:0;font-size:13px;font-weight:700;color:#555;display:-moz-box;display:-webkit-box;-webkit-line-clamp:2;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;word-break:break-word}
.b-hot-list .title small{font-size:.65em}
.b-hot-list .title p{color:#000;margin-bottom:0}
.b-hot-list .meta{color:#999;font-size:.9em}
.b-hot-list .meta p{margin:0}
.b-hot-list .meta a{color:#999;text-decoration:none}
.b-hot-list .meta a:hover{color:#000}
.b-hot-list.cover .item{position:relative;margin-bottom:0;border-right:1px solid #000;border-bottom:1px solid #000}
.b-hot-list.cover .item:hover .img-shadow{opacity:.8}
.b-hot-list.cover .info{position:absolute;bottom:0;left:0;color:#fff;padding:12px;cursor:pointer}
.b-hot-list.cover .info .title,.b-hot-list.cover .info p{color:#fff}
.b-hot-list .img-container .img-shadow{background-image:-webkit-linear-gradient(-90deg,rgba(0,0,0,.3),#000);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.3)),to(#000));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.3),#000);background-image:-o-linear-gradient(top,rgba(0,0,0,.3) 0,#000 100%);background-image:linear-gradient(180deg,rgba(0,0,0,.3),#000);width:100%;height:100%;position:absolute;top:0;left:0;opacity:.5;-webkit-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}
.page-group .b-sidebar-left{position:static}
.b-group-cover{background-color:#fff;-webkit-box-shadow:0 1px 3px 0 rgba(26,26,26,.1);box-shadow:0 1px 3px 0 rgba(26,26,26,.1);border-radius:3px;margin-bottom:24px;overflow:hidden}
.group-cover-overview{padding:12px 24px}
.group-cover-overview&gt;.title{font-weight:700;font-size:26px;line-height:32px;margin:16px 0 4px}
.group-cover-overview&gt;.actions{margin:12px 0}
.group-cover-overview&gt;.actions&gt;.btn{margin-right:12px;font-weight:700;text-transform:uppercase}
.group-cover-overview&gt;.actions&gt;.btn .b-icon{margin-right:6px;position:relative;top:1px}
.group-cover-overview&gt;.actions&gt;.btn .icon-verify{top:2px}
.group-cover-overview&gt;.actions&gt;.btn .icon-share-active{width:17px;height:12px}
.group-cover-overview&gt;.actions&gt;.btn:last-child{margin-right:0}
.group-cover-stats{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;padding:12px 24px}
.group-cover-stats .item{-ms-flex:1;flex:1 1;text-align:center}
.group-cover-stats .item:last-child{border-left:1px solid #ebebeb}
.group-cover-stats .item-value{font-size:20px;font-weight:600;line-height:24px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}
.group-cover-stats .item-label{text-transform:uppercase;font-size:11px;line-height:15px}
.b-beaters&gt;.info{padding:24px 12px}
.b-beaters&gt;.info .title{margin:0 0 4px;font-size:26px;line-height:32px;font-weight:700}
.b-notification-groups&gt;li .header{text-transform:uppercase;background-color:#f6f6f6;-webkit-box-shadow:0 -.5px 0 0 rgba(26,26,26,.1),0 .5px 0 0 rgba(0,0,0,.1);box-shadow:0 -.5px 0 0 rgba(26,26,26,.1),0 .5px 0 0 rgba(0,0,0,.1);color:#8590a6;font-weight:700;font-size:11px;padding:7px 12px}
.b-notification-list&gt;li{padding:12px;border-bottom:1px solid rgba(131,144,158,.15)}
.b-notification-list&gt;li.active{background-color:#f6f6f6}
.b-notification-list&gt;li:first-child{border-top:1px solid rgba(131,144,158,.15)}
.b-notification-list&gt;li .avatar{width:32px;height:32px;float:left}
.b-notification-list&gt;li .content{overflow:hidden;padding-left:12px;padding-right:76px;position:relative}
.b-notification-list&gt;li .content .icon-reply{position:relative;top:2px}
.b-notification-list&gt;li .description{margin-top:6px;margin-bottom:8px}
.b-notification-list&gt;li .overview{width:64px;border-radius:3px;position:absolute;top:0;right:0}
.b-notification-list&gt;li .activity{padding:12px 124px 12px 12px;background-color:#f6f6f6;border:1px solid #ebebeb;position:relative;min-height:124px}
.b-notification-list&gt;li .activity .title{margin-bottom:5px}
.b-notification-list&gt;li .activity .metadata{margin-top:12px}
.b-notification-list&gt;li .activity .thumbnail{position:absolute;right:12px;top:12px;width:100px}
.b-post-container{height:100%;background-color:#fff}
.b-post-container&gt;.row{height:100%;width:100%;margin:0;padding:0}
.b-post-container&gt;.row&gt;.col-9,.b-post-container&gt;.row&gt;.col-10{width:calc(100% - 436px - 48px);width:-webkit-calc(100% - 436px - 48px);margin:0;padding:0;-ms-flex:1;flex:1 1;height:100%}
.b-post-container&gt;.row&gt;.col-6,.b-post-container&gt;.row&gt;.col-7{width:436px;margin:0;padding:0;-ms-flex:1;flex:1 1;max-width:436px;height:100%}
.b-post-container .b-post-item{margin:0}
.b-post-container .b-featured{border-radius:0}
.b-post-content{position:relative;height:100%;width:100%;padding:12px;background-color:#000}
.b-post-content .d-show-tag{-ms-flex:1 1 0;flex:1 1;height:100%}
.b-post-content .d-show-tag,.b-post-content .d-show-tag .d-show-tag-inner{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}
.b-post-content .d-show-tag .d-show-tag-inner{max-width:100%;max-height:100%}
.b-post-content .d-show-tag .d-show-tag-inner .d-show-tag-img{position:relative;display:block}
.b-post-content img{position:absolute;top:12px;right:12px;left:12px;bottom:12px;margin:auto;max-width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:scale-down;vertical-align:middle;-ms-flex-pack:center;justify-content:center}
.b-new-post-modal{overflow:hidden;overflow-y:scroll}
.modal-right{width:100%;height:100%;position:relative}
.modal-right .overflow{overflow:auto;height:100%;width:100%}
.modal-right .post-header .actions{display:none}
.modal-right .related-list{padding-top:12px}
.modal-right .b-related-item .info{-ms-flex-line-pack:center;align-content:center;min-height:120px}
.modal-right .post-actions{padding-right:0}
.modal-right .post-actions .actions{display:none}
.btn{outline:none;display:inline-block;margin-bottom:0;font-weight:500;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:8px 12px;font-size:13px;line-height:1.15384615;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.btn.focus,.btn:focus,.btn:hover{color:#1a1a1a;text-decoration:none}
.btn.active,.btn:active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:none;opacity:.65;-webkit-box-shadow:none;box-shadow:none}
a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}
.btn-primary2{color:#fff;background-color:#3578e5;border-color:#3578e5;border-radius:20px;margin-bottom:10px;margin-left:-10px;
padding:3px 10px 3px 10px}
.btn-primary2.focus,.btn-primary2:focus{color:#fff;background-color:#ff1b1b;border-color:#ff6868}
.btn-primary2.active,.btn-primary2:active,.btn-primary2:hover,.open&gt;.btn-primary2.dropdown-toggle{color:#fff;background-color:#e50914;border-color:#3578e5}
.btn-primary2.active.focus,.btn-primary2.active:focus,.btn-primary2.active:hover,.btn-primary2:active.focus,.btn-primary2:active:focus,.btn-primary2:active:hover,.open&gt;.btn-primary2.dropdown-toggle.focus,.open&gt;.btn-primary2.dropdown-toggle:focus,.open&gt;.btn-primary2.dropdown-toggle:hover{color:#fff;background-color:#ff3f3f;border-color:#ff6868}
.btn-primary2.active,.btn-primary2:active,.open&gt;.btn-primary2.dropdown-toggle{background-image:none}
.btn-primary2.disabled.focus,.btn-primary2.disabled:focus,.btn-primary2.disabled:hover,.btn-primary2[disabled].focus,.btn-primary2[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary2:focus,fieldset[disabled] .btn-primary2:hover{background-color:#e70000;border-color:#e70000}
.btn-primary2 .badge{color:#e70000;background-color:#fff}


.btn-primary{color:#fff;background-color:#e70000;border-color:#e70000}
.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#ff1b1b;border-color:#ff6868}
.btn-primary.active,.btn-primary:active,.btn-primary:hover,.open&gt;.btn-primary.dropdown-toggle{color:#fff;background-color:#ff1b1b;border-color:#ff2525}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open&gt;.btn-primary.dropdown-toggle.focus,.open&gt;.btn-primary.dropdown-toggle:focus,.open&gt;.btn-primary.dropdown-toggle:hover{color:#fff;background-color:#ff3f3f;border-color:#ff6868}
.btn-primary.active,.btn-primary:active,.open&gt;.btn-primary.dropdown-toggle{background-image:none}
.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#e70000;border-color:#e70000}
.btn-primary .badge{color:#e70000;background-color:#fff}
.btn-white,.btn-white.active,.btn-white.active.focus,.btn-white.active:focus,.btn-white.active:hover,.btn-white.focus,.btn-white:active,.btn-white:active.focus,.btn-white:active:focus,.btn-white:active:hover,.btn-white:focus,.btn-white:hover,.open&gt;.btn-white.dropdown-toggle,.open&gt;.btn-white.dropdown-toggle.focus,.open&gt;.btn-white.dropdown-toggle:focus,.open&gt;.btn-white.dropdown-toggle:hover{color:#1a1a1a;background-color:#fff;border-color:#fff}
.btn-white.active,.btn-white:active,.open&gt;.btn-white.dropdown-toggle{background-image:none}
.btn-white.disabled.focus,.btn-white.disabled:focus,.btn-white.disabled:hover,.btn-white[disabled].focus,.btn-white[disabled]:focus,.btn-white[disabled]:hover,fieldset[disabled] .btn-white.focus,fieldset[disabled] .btn-white:focus,fieldset[disabled] .btn-white:hover{background-color:#fff;border-color:#fff}
.btn-white .badge{color:#fff;background-color:#1a1a1a}
.btn-gray,.btn-gray.active,.btn-gray.active.focus,.btn-gray.active:focus,.btn-gray.active:hover,.btn-gray.focus,.btn-gray:active,.btn-gray:active.focus,.btn-gray:active:focus,.btn-gray:active:hover,.btn-gray:focus,.btn-gray:hover,.open&gt;.btn-gray.dropdown-toggle,.open&gt;.btn-gray.dropdown-toggle.focus,.open&gt;.btn-gray.dropdown-toggle:focus,.open&gt;.btn-gray.dropdown-toggle:hover{color:#8590a6;background-color:#fff;border-color:#fff}
.btn-gray.active,.btn-gray:active,.open&gt;.btn-gray.dropdown-toggle{background-image:none}
.btn-gray.disabled.focus,.btn-gray.disabled:focus,.btn-gray.disabled:hover,.btn-gray[disabled].focus,.btn-gray[disabled]:focus,.btn-gray[disabled]:hover,fieldset[disabled] .btn-gray.focus,fieldset[disabled] .btn-gray:focus,fieldset[disabled] .btn-gray:hover{background-color:#fff;border-color:#fff}
.btn-gray .badge{color:#fff;background-color:#8590a6}
.btn-link,.btn-link.active,.btn-link.active.focus,.btn-link.active:focus,.btn-link.active:hover,.btn-link.focus,.btn-link:active,.btn-link:active.focus,.btn-link:active:focus,.btn-link:active:hover,.btn-link:focus,.btn-link:hover,.open&gt;.btn-link.dropdown-toggle,.open&gt;.btn-link.dropdown-toggle.focus,.open&gt;.btn-link.dropdown-toggle:focus,.open&gt;.btn-link.dropdown-toggle:hover{color:#e70000;background-color:#fff;border-color:#fff}
.profile-cover{position:relative}
.profile-cover .upload-overlay{width:180px;height:80px;border-radius:4px}
.profile-block .cover-mood{position:relative;display:inline-block;float:left;max-width:400px;padding:6px 12px 6px 6px;background-color:#f6f6f6;border:1px solid #ebebeb;color:#8590a6;text-align:center;line-height:18px;border-radius:3px;margin-left:24px}
.profile-block .cover-mood&gt;.content{font-size:13px;margin-top:0}
.profile-block .cover-mood:before{content:&quot;&quot;;position:absolute;left:-8px;border:6px solid transparent;border-right-width:8px;border-left:0;border-right-color:#f6f6f6;height:10px;top:0;bottom:0;margin:auto;z-index:1}
.profile-block .cover-mood:after{content:&quot;&quot;;position:absolute;left:-10px;border:8px solid transparent;border-left:0;border-right-width:10px;border-right-color:#ebebeb;height:12px;top:0;bottom:0;margin:auto}
.profile-block .cover-action{position:absolute;top:16px;right:16px}
.profile-block .cover-action .btn{float:right;margin-left:8px}
.profile-block .cover-action .btn .b-icon{margin-right:6px;position:relative;top:1px}
.profile-block .cover-action .btn .b-icon.icon-edit{background-image:url(https://beat.vn/static/media/profile.3815765d.svg);width:14px;height:14px;float:left}
.profile-block .col-left{float:left;width:120px}
.profile-block .col-left .avatar-container{margin-top:-48px}
.profile-block .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.profile-block .col-right .cover-action{top:12px}
.profile-block .col-full{clear:both;display:block;width:100%}
.profile-block .col-full .info{padding:15px 15px 0}
.profile-block .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.profile-block .col-full .cover-tab::-webkit-scrollbar,.profile-block .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.profile-block .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.group-cover-info .row-eq-height,.profile-block .col-full .cover-tab li{-ms-flex-align:center;align-items:center}
.group-cover-info .row-eq-height div{-ms-flex-pack:start;justify-content:flex-start}
.group-cover-info .post-actions{display:inline-block}
.group-cover-info .post-actions .post-reaction{display:-ms-flexbox;display:flex}
.group-cover-info .post-actions .post-reaction&gt;li{display:-ms-flexbox;display:flex;padding:9px 2px;margin-right:16px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a{position:relative;line-height:32px;display:block;text-align:left;width:100%;border-radius:3px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;color:#8590a6;font-weight:700;font-size:12px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .b-icon{position:relative;margin-right:6px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-like{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-angry{top:5px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-share{top:3px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-comment,.group-cover-info .post-actions .post-reaction&gt;li&gt;a .icon-more-lg{top:4px}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active{color:#e70000}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-like{background-image:url(https://beat.vn/static/media/like-active.efada8e0.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.active .icon-angry{background-image:url(https://beat.vn/static/media/angry-active.42d26955.svg)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like{text-align:left}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .b-icon-like{width:42px;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:0}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like,.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like .icon-like{position:absolute;background-repeat:no-repeat;background-size:2900%;height:50px;width:50px;left:25px;top:50%;-ms-transform:translate(-50%,-47.5%);-webkit-transform:translate(-50%,-47.5%);transform:translate(-50%,-47.5%)}
.group-cover-info .post-actions .post-reaction&gt;li&gt;a.reaction-like.active .icon-like{background-image:url(https://beat.vn/static/media/heart.e56d04a7.png);background-position:100%;-webkit-animation-timing-function:steps(28);animation-timing-function:steps(28);-webkit-animation-name:heart-burst;animation-name:heart-burst;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:1;animation-iteration-count:1;display:inline-block}
.group-cover-info .post-actions .post-reaction&gt;li .b-btn-more .icon-more-lg{top:8px}
.group-cover-info .col-left{float:left;width:120px}
.group-cover-info .col-left .avatar-container{margin-top:-48px}
.group-cover-info .col-right{float:right;width:calc(100% - 120px);width:-webkit-calc(100% - 120px)}
.group-cover-info .col-right .cover-action{top:12px}
.group-cover-info .col-full{clear:both;display:block;width:100%}
.group-cover-info .col-full .info{padding:0 15px}
.group-cover-info .col-full .group-cover-overview{text-align:center;padding:0 24px}
.group-cover-info .col-full .group-cover-overview .actions{margin:0}
.group-cover-info .col-full .cover-tab{margin-top:8px}
.group-cover-info .col-full .cover-tab&gt;li&gt;a:after{left:16px;right:16px}
.group-cover-info .col-full .cover-tab{display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-align:center;align-items:center;-webkit-align-items:center;list-style:none;overflow:hidden;overflow-x:auto;white-space:nowrap}
.group-cover-info .col-full .cover-tab::-webkit-scrollbar,.group-cover-info .col-full .cover-tab ::-webkit-scrollbar{display:none;width:0;background:transparent;overflow:-moz-scrollbars-none}
.group-cover-info .col-full .cover-tab li{float:left;text-align:center;-ms-flex:1;flex:1 1;-webkit-flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%}
.b-thumbnail{position:relative;display:block;background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:#f6f6f6}
.b-thumbnail:before{content:&quot;&quot;;display:block}
.b-thumbnail-1x1:before{padding-top:100%}
@media screen and (max-width: 980px) {
.b-profile-cover-riusgrey .col-3{width:50%;height:50%;margin:0 auto;float:none}
.b-profile-cover-riusgrey .col-13{width:100%}
.profile-block .cover-title,.profile-block .cover-title .title{display:block;float:none;text-align:center;margin:0 auto}
.profile-block .cover-mood{float:none;display:block;margin:10px auto}
.profile-block .cover-action{position:initial}
.profile-block .cover-action .btn{float:none;text-align:center;margin:0 auto;display:table;margin-bottom:15px}
.profile-block .cover-mood:after{top:-13px;transform:rotate(90deg);bottom:inherit;left:inherit}
.profile-block .cover-mood:before{top:-9.8px;transform:rotate(90deg);bottom:inherit;left:inherit;margin:0 1px}
}
.profile_img img{transition:.3s;width:150px;height:150px;object-fit:cover;border-radius:50%;background:#fff1;padding:6px;;position:absolute;bottom:-90px;left:15px;z-index:1;background:#fff;box-shadow: 0px 1px 1px 1px rgba(0,0,0,.24), 0 1px 1px 1px rgba(0,0,0,.2);}
.profile_img img:hover{border-radius:0%;background:#fff}
</style>
<div class='b-profile-cover-riusgrey'>
<div class='profile-cover b-cover'>
</div>
<div class='row profile-block'>
<div class='col-3'>
<div class='avatar-container'>
<div class='profile_img'>
<img src='https://instagram.fhan2-3.fna.fbcdn.net/vp/340171bb6e71f0f433c67fc1e0a24cc8/5CF6AABA/t51.2885-19/s150x150/52165319_967287836807109_5132926599544438784_n.jpg?_nc_ht=instagram.fhan2-3.fna.fbcdn.net'/>
  </div>
</div>
</div>
<div class='col-13'>
<div class='info'>
<div class='cover-title'>
<h3 class='subtitle'>Tưởng nhớ</h3>
<h1 class='title'><a>Vũ Minh Thịnh <img alt='verify' data-original-title='Trang cá nhân đã xác minh Tokenne đã xác nhận đây là trang cá nhân thật của người của công chúng này.' data-toggle='tooltip' src='https://pbs.twimg.com/media/DLMfcJwX0AAauDp.png' style='width:23px;height:23px;top:3px;left:0px' title='cc'/> </a>
<p>(RIUS GREY)</p>
</h1>
<a class='btn btn-primary2' href='https://www.blogger.com/follow.g?blogID=2016773409250385719' target='_blank'><i class=''/><img alt='verify' data-original-title='Trang cá nhân đã xác minh Tokenne đã xác nhận đây là trang cá nhân thật của người của công chúng này.' data-toggle='tooltip' src='https://i.imgur.com/IRRMg3V.png' style='width:11px;height:15px;top:3px;right:2px' title='cc'/> Trang cá nhân này bị khóa</a>
</div>

</div>
<div class='clear'/>
<div class='cover-action'>
<a class='btn btn-primary' href='https://www.blogger.com/follow.g?blogID=2016773409250385719' target='_blank'><i class=''/> &#8226;&#8226;&#8226;</a>
<a class='btn btn-primary' href='https://www.messenger.com/login.php?next=https%3A%2F%2Fwww.messenger.com%2Ft%2F100013576989756%2F' target='_blank'><i class='fas fa-comment-alt-lines'/> Nhắn tin</a>
<a class='btn btn-primary' href='https://www.blogger.com/follow.g?blogID=2016773409250385719' target='_blank'><i class='fas fa-rss'/> Theo dõi</a>

</div>
</div>
</div>
</div>



CODE TRANG TRÍ ĐÓN TẾT MỚI NHẤT CHO BLOGSPOT ĐẸP 2019 ĐÓN TẾT KỈ HƠ | RIUSGREY

Năm cũ qua đi, năm mới sắp đến hãy cùng nhau đón năm mới 2019 nhiều niềm vui và hạnh phúc,Cùng RIUSGREY sắm ngay cho mình bộ css trang trí blog nhân dịp tết kỉ hợi này nào !!

Đêm sẽ tối, ngày sẽ sáng, chúc bạn có cuộc sống luôn tươi sáng, gặp nhiều may mắn và thành công. Chúc mừng năm mới. 

1. Code hiệu ứng cậu chúc tết chạy dọc 2 bên blogspot

Để thêm code trang trí này bạn thêm code bên dưới vào 1 tiện ích HTML/javascript ở phần bố cục.
Hoặc vào phần chủ đề --> chỉnh sửa HTML và tìm thẻ </body> hoặc &lt;!--<head/>--&gt; ( với những bạn đang sửa dụng code bên mình) thêm code bên dưới ngay trên các thẻ vừa tìm được.


<script type='text/javascript'>
//<![CDATA[
document.write('<div class="tet-2019"><img class="left-2019" id="left-2020" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo5qZcrG-jxiq10lWcWl9p5XdIe5ST7wh7etY9qHT0PT43V_TM6rakPlPt7z3-oLmvNY3CZqWPcr4XRAdgnSU5Xi7oTAhRHO9KNZCQ8cVehcFdYa5CyTsURKlLCEavOfPqsPDbvWSwSS8/s1600/tet1.png"/><img class="right-2019" id="right-2020" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZzU-Vb3-uaOonypJIAvEk4dAaJZkXVr8Q8Byaie5IVh_0GKfc29hyphenhyphenwtYd4EhDEMj0zR_jBfA7pnHOL1LGLmkkjVlT2fjcoMb5DHamkzBPhQkvh4GteuDiqfZcQrxUgxICEn6uoplk-wY/s1600/tet2.png"/></div><style>#left-2020{width: 130px;left:0;z-index:7;position:fixed;;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear}#right-2020{width: 130px;right:0;z-index:7;position:fixed;;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear}.left-2019{top:0px}.right-2019{top:0px}.text-2019-l{top:0px}.text-2019-r{top:0px}@media screen and (max-width:1024px){.tet-2019{display:none}}@media screen and (max-width:1440px){#riusgrey{display:none}}</style>')
//]]>
</script>
<script>//<![CDATA[
var lastScroll = 0;
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > lastScroll) {
$('#right-2020').removeClass('left-2019').addClass('text-2019-l')
$('#left-2020').removeClass('right-2019').addClass('text-2019-r')
} else if (scroll < lastScroll) {
$('#right-2020').addClass('left-2019').removeClass('text-2019-l')
$('#left-2020').addClass('right-2019').removeClass('text-2019-r')
}
lastScroll = scroll;
})
})
//]]></script>

2. Code hiệu ứng ở header-bottom

Thường là thêm sau main hoặc header-bottom

<div class='header-bottom' id='menutom' itemscope='' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class="trangtritet-riusgrey visible">

<style>

.trangtritet-riusgrey{margin-top:43px;z-index:999;background:url(https://i.imgur.com/k0zJZ4h.png);background-repeat:repeat-x;width:100%;height:86px;position:absolute;top:auto}

</style>

</div>
source: toishare

Code Chống Copy, ViewSource, F12,Chuột phải... Cho Blogspot/Blogger | RIUSGREY

Hello ae chúc ae năm mới vui vẻ, nạn rip temp ngày càng nhiều nên hôm nay mình sẽ share cho các bạn code chống f12, ctrl+u cực kì hiệu quả.



CODE CHỐNG CHUỘT PHẢI VÀ CHUỘT TRÁI

Các bạn coppy code phía dưới dán vào trên thẻ đóng </body>
<script type="text/javascript" src="https://sites.google.com/site/bituotblog/disable-copy.js"></script>
<style>
body{
-moz-user-select: none !important;
-webkit-touch-callout: none!important;
-webkit-user-select: none!important;
-khtml-user-select: none!important;
-moz-user-select: none!important;
-ms-user-select: none!important;
user-select: none!important;
}
</style>
Lưu ý: Code này chỉ chống chuột phải và chuột trái, không chống đước coppy với sao chép địa chỉ hình ảnh

CODE CHỐNG CHUỘT PHẢI

Các bạn coppy code phía dưới dán vào trên thẻ đóng </head>
<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>

CODE CHỐNG CHUỘT TRÁI

Các bạn coppy code phía dưới dán vào trên thẻ đóng </head>
<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>

CODE CHỐNG CTRL + U, CHỐNG VIEWSOURCE, CHỐNG F12

Các bạn coppy code phía dưới dán vào trên thẻ đóng </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
<script type='text/javascript'>
checkCtrl=false $(&#39;*&#39;).keydown(function(e){
if(e.keyCode==&#39;17&#39;){ checkCtrl=false  } }).keyup(function(ev){
if(ev.keyCode==&#39;17&#39;){ checkCtrl=false } }).keydown(function(event){
if(checkCtrl){
if(event.keyCode==&#39;85&#39;){ return false; } } })
</script>
Và thay thẻ  <body> thành <body onkeydown="return false">

CHỐNG CLICK CHUỘT VÀO HÌNH ẢNH

Các bạn coppy code phía dưới dán vào trên thẻ đóng </body>
Các bạn thay link màu đỏ thành link bạn muốn chuyển hướng đến.
<script type='text/javascript'>
$('body').on('contextmenu', 'img', function(e){ return false; });
</script>

TỰ ĐỘNG CHUYỂN HƯỚNG KHI BẤM CTR + U HOẶC F12

Các bạn coppy code phía dưới dán vào trên thẻ đóng </head> hoặc dưới thẻ <body>
<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="https://www.riusgrey.cf/"}),shortcut.add("F12",function(){top.location.href="https://www.riusgrey.cf/"}),shortcut.add("Ctrl+Shift+I",function(){top.location.href="https://www.riusgrey.cf/"}),shortcut.add("Ctrl+S",function(){top.location.href="https://www.riusgrey.cf/"}),shortcut.add("Ctrl+Shift+C",function(){top.location.href="https://www.riusgrey.cf/"});
//]]>
</script>
 Các bạn thay link màu đỏ thành link bạn muốn chuyển hướng đến.

Code Tạo Hiệu Ứng Pháo Hoa Cho Blogspot Trang Trí Tết 2019 | RIUSGREY

Tết cổ truyền (Tết âm lịch) đang ngày một đến gần. Bạn đã chuẩn bị được những gì cho Blog/Website của mình để chào đón Tết cổ truyền (Tết âm lịch) 2019 này? Khoác cho Blog/Website một bộ cánh mới có chủ đề về Tết cổ truyền (Tết âm lịch) là việc mà nhiều người thường làm.
Tuy nhiên, việc thay Template mới sẽ khá tốn thời gian, công sức và có thể khiến Blog/Website của bạn rớt hạng trên bảng kết quả tìm kiếm. Trong trường hợp này, tạo hiệu ứng bắn pháo hoa ngay trên giao diện mà bạn đang sử dụng để mang một chút không khí Tết cổ truyền (Tết âm lịch) vào Blog/Website là một ý tưởng không hề tồi. Hãy cùng RIUSGREY đóng tết 2019 nhiều thành công



HƯỚNG DẪN CÁCH LÀM:

Bước 1: Dán css này vào trước thẻ </head>

<style type='text/css'>
canvas{
cursor:crosshair;
position:fixed;
width:100%;
height:100%;
background:none;
display:block

</style>

BƯỚC 2: DÁN ĐOẠN html NÀY VÀO sauTHẺ <BODY>

<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>

BƯỚC 3: DÁN đoạn javascript NÀY VÀO TRƯỚC THẺ </body>

<script type='text/javascript'>
      //<![CDATA[
      window.requestAnimFrame = ( function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function( callback ) {
          window.setTimeout( callback, 1000 / 60 );
        };
      })();
var canvas = document.getElementById( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    cw = window.innerWidth,
    ch = window.innerHeight,
    fireworks = [],
    particles = [],
    hue = 120,
    limiterTotal = 5,
    limiterTick = 0,
    timerTotal = 30,
    timerTick = 0,
    mousedown = false,
    mx,
    my;
      canvas.width = cw;
      canvas.height = ch;
      function random( min, max ) {
        return Math.random() * ( max - min ) + min;
      }
      function calculateDistance( p1x, p1y, p2x, p2y ) {
        var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
        return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
      }
      function Firework( sx, sy, tx, ty ) {
        this.x = sx;
        this.y = sy;
        this.sx = sx;
        this.sy = sy;
        this.tx = tx;
        this.ty = ty;
        this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
        this.distanceTraveled = 0;
        this.coordinates = [];
        this.coordinateCount = 3;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = Math.atan2( ty - sy, tx - sx );
        this.speed = 2;
        this.acceleration = 1.05;
        this.brightness = random( 50, 70 );
        this.targetRadius = 1;
      }
      Firework.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        if( this.targetRadius < 8 ) {
          this.targetRadius += 0.3;
        } else {
          this.targetRadius = 1;
        }
        this.speed *= this.acceleration;
        var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
        this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
        if( this.distanceTraveled >= this.distanceToTarget ) {
          createParticles( this.tx, this.ty );
          fireworks.splice( index, 1 );
        } else {
          this.x += vx;
          this.y += vy;
        }
      }
      Firework.prototype.draw = function() {
        ctx.beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
        ctx.stroke();
        ctx.beginPath();
        ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
        ctx.stroke();
      }
      function Particle( x, y ) {
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinateCount = 5;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = random( 0, Math.PI * 2 );
        this.speed = random( 1, 10 );
        this.friction = 0.95;
        this.gravity = 1;
        this.hue = random( hue - 50, hue + 50 );
        this.brightness = random( 50, 80 );
        this.alpha = 1;
        this.decay = random( 0.015, 0.03 );
      }
      Particle.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        this.speed *= this.friction;
        this.x += Math.cos( this.angle ) * this.speed;
        this.y += Math.sin( this.angle ) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if( this.alpha <= this.decay ) {
          particles.splice( index, 1 );
        }
      }
      Particle.prototype.draw = function() {
        ctx. beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
        ctx.stroke();
      }
      function createParticles( x, y ) {
        var particleCount = 30;
        while( particleCount-- ) {
          particles.push( new Particle( x, y ) );
        }
      }
      function loop() {
        requestAnimFrame( loop );
        hue= random(0, 360 );
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect( 0, 0, cw, ch );
        ctx.globalCompositeOperation = 'lighter';
        var i = fireworks.length;
        while( i-- ) {
          fireworks[ i ].draw();
          fireworks[ i ].update( i );
        }
        var i = particles.length;
        while( i-- ) {
          particles[ i ].draw();
          particles[ i ].update( i );
        }
        if( timerTick >= timerTotal ) {
          if( !mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
          }
        } else {
          timerTick++;
        }
        if( limiterTick >= limiterTotal ) {
          if( mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
          }
        } else {
          limiterTick++;
        }
      }
      canvas.addEventListener( 'mousemove', function( e ) {
        mx = e.pageX - canvas.offsetLeft;
        my = e.pageY - canvas.offsetTop;
      });
      canvas.addEventListener( 'mousedown', function( e ) {
        e.preventDefault();
        mousedown = true;
      });
      canvas.addEventListener( 'mouseup', function( e ) {
        e.preventDefault();
        mousedown = false;
      });
      window.onload = loop;
      //]]>
    </script>
cre: thuthuatms

Video