Home » Archive for tháng 1 2021

Nút Like - sau mỗi Bài viết trên Blogger với hiệu ứng đẹp mắt

QRViet tháng 1 14, 2021 Add Comment

⛨ Nút Love hình trái tim Nút hình trái tim sau bài viết Demo filter_1 Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:sk...

thủ thuật blog

⛨ Nút Love hình trái tim

Nút hình trái tim sau bài viết

Demo

Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:skin> đoạn CSS sau:

.lovebutton-iristips{position:relative;display:inline-block;text-align:center;min-width:40px;width:40px;min-height:40px;height:40px;margin-bottom:5px}
.lovebutton-iristips .inner{text-align:center;display:inline-table}
.lovebutton-iristips .inner a{padding:0!important}
.lovebutton-iristips .total{position:absolute;top:-10px;right:-10px;font-size:20px;display:inline;color:rgba(247,40,109,0.6);text-shadow:0 0 1px rgba(247,40,109,1)}
#heart{display:block;width:40px;height:40px;background:rgba(120,120,120,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrxtKrDsKDNR9aCLYAOdDtCq08vb1QBWKMGFKrSEFkPM1uuV8gtwlqspNBAQhpzoi7YV2bjyrVhNrw1lUtxrIIfsZVnPHIkZrIDNINcMnJYtDbejB8wnwXItcOAgTlpBenNC1b8oNynLU/s300/iris-love.png) center no-repeat;background-size:100%;border-radius:50%;position:relative;margin:30% auto;box-shadow:0 0 0 0 rgba(247,40,109,1);transition:all 0.4s cubic-bezier(0.64,0.57,0.67,1.53),background-color 0.4s linear}
#heart:hover{animation:beat 1s infinite}
#heart.loved{background-color:rgba(247,40,109,1);box-shadow:0 0 0 5px rgba(247,40,109,1);transform:rotate(-3deg);animation:none}
#heart .ray{width:30px;height:8px;left:20px;top:18px;background:rgba(0,0,0,0);border-radius:4px;position:absolute;transform:rotate(0deg);transform-origin:0% 50%;transition:all 0.1s linear;overflow:hidden;text-align:right;pointer-events:none}
#heart .ray:before{content:"";position:absolute;top:0;right:10%;display:block;width:50%;border-radius:4px;height:8px;background:rgba(247,40,109,0)}
#heart .ray:nth-of-type(2){transform:rotate(45deg)}
#heart .ray:nth-of-type(3){transform:rotate(90deg)}
#heart .ray:nth-of-type(4){transform:rotate(135deg)}
#heart .ray:nth-of-type(5){transform:rotate(180deg)}
#heart .ray:nth-of-type(6){transform:rotate(225deg)}
#heart .ray:nth-of-type(7){transform:rotate(270deg)}
#heart .ray:nth-of-type(8){transform:rotate(315deg)}
#heart.loved .ray{width:50px}
#heart.loved .ray:before{width:10%;right:-10%;background:rgba(247,40,109,1);transition:all 0.4s cubic-bezier(0.085,0.890,0.600,0.115)}
@keyframes beat{0%{opacity:0.5}80%,100%{opacity:0.9}}

Tiếp tục dán đoạn JS bên dưới vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
$('#heart').on('click',function(){$(this).toggleClass('loved');});for (var i = 1; i <= 10; i++){ $('#heart').append('<span class=ray>')}
//]]>
</script>
<script src='https://sites.google.com/site/iristipsblogger/file/iris-reaction.js' type='text/javascript'></script>

Cuối cùng là dán đoạn code sau vào sau thẻ <data:post.body/> để nút love hiển thị sau mỗi bài viết.

<div class='lovebutton-iristips' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
    <div class='inner'>
        <a href='javascript:;'>
            <div class='icon' id='heart'>               
            </div>
        </a>
        <div class='total'>...</div>
        <div style='clear:both;'/>
    </div>
</div>

⛨ Nút Love kiểu bung tim

Nút hình trái tim sau bài viết

Demo

Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:skin> đoạn CSS sau:

.lovebutton-iristips{position:relative;display:inline-block;text-align:center;margin:20px 0;}
.lovebutton-iristips .inner{text-align:center;display:inline-table}
.lovebutton-iristips .total{position:absolute;top:-20px;right:-10px;font-size:20px;display:inline;color:rgba(247,40,109,0.6);text-shadow:0 0 1px rgba(247,40,109,1)}
.wrapper{position:relative}
.heart{display:inline-flex;height:25px;position:absolute;left:-5px;top:-15px;z-index:8;fill:#ff796b;stroke:none;display:inline-flex;opacity:0}
.heart:nth-child(1){animation:boom1 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom1{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(54px,-86px);opacity:0}}
.heart:nth-child(2){animation:boom2 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom2{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(128px,28px);opacity:0}}
.heart:nth-child(3){animation:boom3 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom3{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(159px,-140px);opacity:0}}
.heart:nth-child(4){animation:boom4 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom4{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(104px,0px);opacity:0}}
.heart:nth-child(5){animation:boom5 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom5{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-76px,15px);opacity:0}}
.heart:nth-child(6){animation:boom6 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom6{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-7px,-138px);opacity:0}}
.heart:nth-child(7){animation:boom7 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom7{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(51px,-27px);opacity:0}}
.heart:nth-child(8){animation:boom8 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom8{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-91px,-137px);opacity:0}}
.heart:nth-child(9){animation:boom9 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom9{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(139px,-131px);opacity:0}}
.heart:nth-child(10){animation:boom10 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom10{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(20px,-17px);opacity:0}}
.heart:nth-child(11){animation:boom11 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom11{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-12px,-77px);opacity:0}}
.heart:nth-child(12){animation:boom12 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom12{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(63px,-121px);opacity:0}}
.heart:nth-child(13){animation:boom13 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom13{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(13px,-58px);opacity:0}}
.heart:nth-child(14){animation:boom14 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom14{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-16px,-67px);opacity:0}}
.heart:nth-child(15){animation:boom15 1.5s cubic-bezier(0.3,0.55,0.35,0.85)}
@keyframes boom15{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-47px,-111px);opacity:0}}
.sg-icon{fill:#fff;max-width:24px;max-height:24px;height:24px;width:24px}
.sg-label{display:inline-block;position:relative;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem;min-height:1.5rem;margin:0;overflow:visible;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.sg-label__text,.sg-label__number{font-size:.75rem;min-height:.75rem;line-height:.875rem;line-height:1 !important;overflow:visible;display:block;color:#020a1b;font-weight:700;margin-right:6px}.sg-label__text:last-child,.sg-label__number:last-child{margin-right:0}.sg-label__icon{width:16px;height:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-right:6px}.sg-label__icon:last-child{margin-right:0}.sg-label__icon--align-top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.sg-label--emphasised{text-transform:uppercase;letter-spacing:0}.sg-label--secondary .sg-label__text,.sg-label--secondary .sg-label__number{color:#434e66}.sg-label--small{min-height:0}.sg-label--small .sg-label__text,.sg-label--small .sg-label__number{font-size:.625rem;min-height:.625rem;line-height:.625rem;line-height:1 !important;overflow:visible;margin-right:4px}.sg-label--small .sg-label__text:last-child,.sg-label--small .sg-label__number:last-child{margin-right:0}.sg-label--small .sg-label__icon{margin-right:4px;width:14px;height:14px}.sg-label--large .sg-label__text,.sg-label--large .sg-label__number{font-size:1.125rem;min-height:1.125rem;line-height:1.125rem;line-height:1 !important;overflow:visible}.sg-label--large .sg-label__text:last-child,.sg-label--large .sg-label__number:last-child{margin-right:0}.sg-label--large .sg-label__icon{margin-right:12px;width:24px;height:24px}.sg-label--unstyled .sg-label__text,.sg-label--unstyled .sg-label__number{color:inherit}
.sg-icon--x16{max-width:16px;max-height:16px;height:16px;width:16px}.sg-icon--x14{max-width:14px;max-height:14px;height:14px;width:14px}.sg-icon--x10{max-width:10px;max-height:10px;height:10px;width:10px}.sg-icon--x8{max-width:8px;max-height:8px;height:8px;width:8px}.sg-icon--adaptive{fill:inherit}
.sg-button-secondary{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-width:0;text-decoration:none;overflow:hidden;white-space:nowrap;font-weight:700;text-transform:uppercase;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2);-webkit-transition-property:box-shadow, opacity, -webkit-transform;transition-property:box-shadow, opacity, -webkit-transform;transition-property:box-shadow, transform, opacity;transition-property:box-shadow, transform, opacity, -webkit-transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;border-radius:7px;height:1.875rem;padding:0 18px;font-size:.875rem;color:#fff;fill:#fff;background-color:#7ed7ac}.sg-button-secondary:hover,.sg-button-secondary:focus{box-shadow:0 2px 16px 0 rgba(0,0,0,0.25)}.sg-button-secondary:active{box-shadow:0 1px 3px 0 rgba(0,0,0,0.2);-webkit-transform:scale(0.985);transform:scale(0.985)}.sg-button-secondary:active:focus{box-shadow:0 1px 3px 0 rgba(0,0,0,0.2)}.sg-button-secondary:active,.sg-button-secondary:focus,.sg-button-secondary:hover{text-decoration:none}.sg-button-secondary__container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.sg-button-secondary--full-width{width:100%}.sg-button-secondary--alt{background-color:#57b2f8}.sg-button-secondary--dark{background-color:#434e66}.sg-button-secondary--inverse{background-color:#fff;color:#7ed7ac;fill:#7ed7ac}.sg-button-secondary--alt-inverse{background-color:#fff;color:#57b2f8;fill:#57b2f8}.sg-button-secondary--dark-inverse{background-color:#fff;color:#434e66;fill:#434e66}.sg-button-secondary--disabled{opacity:0.45;cursor:default;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2)}.sg-button-secondary--disabled:active{-webkit-transform:none;transform:none}.sg-button-secondary--disabled:active,.sg-button-secondary--disabled:focus,.sg-button-secondary--disabled:hover{box-shadow:0 1px 4px 0 rgba(0,0,0,0.2)}.sg-button-secondary--small{padding:0 14px;height:1.5rem;border-radius:5px;font-size:.75rem}.sg-button-secondary--active-inverse{background-color:#fff;color:#ff796b;fill:#ff796b;-webkit-transition-property:box-shadow, background-color, color, fill, opacity, -webkit-transform;transition-property:box-shadow, background-color, color, fill, opacity, -webkit-transform;transition-property:box-shadow, transform, background-color, color, fill, opacity;transition-property:box-shadow, transform, background-color, color, fill, opacity, -webkit-transform}.sg-button-secondary--active-inverse:hover,.sg-button-secondary--active-inverse:active,.sg-button-secondary--active-inverse:focus{background-color:#ff796b;color:#fff;fill:#fff}

Tiếp tục dán đoạn JS bên dưới vào trước thẻ </body>.

<script type='text/javascript'>
//<![CDATA[
const proto = document.querySelector('.heart');
const wrapper = document.querySelector('.wrapper');
function go() {
  for (var i=1; i<15; i++) {
    const heart = proto.cloneNode(true);
    heart.addEventListener('animationend', () => heart.parentNode.removeChild(heart));
    wrapper.append(heart);
  }
}
const button = document.querySelector('.js-button');
button.addEventListener('click', () => {
  go();
  button.blur();
});
//]]>
</script>
<script src='https://sites.google.com/site/iristipsblogger/file/iris-reaction.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/iristipsblogger/file/heart-icons.js' type='text/javascript'></script>

Cuối cùng là dán đoạn code sau vào sau thẻ <data:post.body/> để nút love hiển thị sau mỗi bài viết.

<div class='lovebutton-iristips' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
    <div class='inner'>
        <a href='javascript:;'>
            <div class='icon'>
<div style='display:none'>
  <svg viewBox="0 0 32 29.6" class="heart">
    <use xlink:href="#icon-heart"></use>
  </svg>
</div>
  <div class='wrapper'>
    <button class="sg-button-secondary sg-button-secondary--small sg-button-secondary--active-inverse js-button">
            <div class="sg-label sg-label--secondary sg-label--unstyled">
                <div class="sg-label__icon">
                    <svg class="sg-icon sg-icon--x16 sg-icon--adaptive">
                        <use xlink:href="#icon-heart"></use>
                    </svg>
                </div>
                <div class="sg-label__text">Thank you</div>
            </div>
        </button>
  </div>                
            </div>
        </a>
        <div class='total'>...</div>
        <div style='clear:both;'/>
    </div>
</div>
</div>

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

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Tạo Sơ Đồ Trang Web XML Cho Blogger

QRViet tháng 1 13, 2021 Add Comment

filter_1 Truy cập trang web ⛨ Truy cập - Labnol Link Trực tiếp filter_2 Điền địa chỉ Blogger của bạn vào khung bên dưới. Nhập địa chỉ Bl...

thủ thuật blog

Truy cập trang web
⛨ Truy cập - Labnol

Link Trực tiếp

Điền địa chỉ Blogger của bạn vào khung bên dưới.

Nhập địa chỉ Blogger

Nhấn TẠO SƠ ĐỒ TRANG WEB và copy code lại.

Tạo Sơ đồ trang web

Bạn vào phần Cài đặt trong Blog của bạn, tìm đến mục Trình thu thập thông tin và lập chỉ mục, tại Robots.txt tùy chỉnh bạn chọn chỉnh sửa, sau đó chỉ việc paste code ở bước trên vào và bấm Lưu là xong.

Robots.txt tùy chỉnh

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Hướng dẫn highlight code trong Blogspot

QRViet tháng 1 12, 2021 Add Comment

Trong bài viết này chúng ta sẽ sử dụng highlight.js để làm nổi bật các đoạn code lập trình mà ta trình bày trên Blogger . Highlight - làm ...

thủ thuật blog

Trong bài viết này chúng ta sẽ sử dụng highlight.js để làm nổi bật các đoạn code lập trình mà ta trình bày trên Blogger.

Highlight - làm nổi bật các đoạn code

Lấy hightlight.js

⛨ Bạn có thể truy cập vào link này để lấy hoặc copy luôn tại đây.

Link trực tiếp

<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/default.min.css" rel="stylesheet"></link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>

Thêm highlight vào template Blogspot

Đầu tiên bạn Đăng nhập Blogger > Chủ để > Tùy chỉnh > Chỉnh sửa HTML.
Sau đó dán đoạn code ở trên vào trước thẻ </head>.
Chèn code xong các bạn nhớ lưu lại.

Sử dụng highlight trong bài viết

Để sử dụng highlight.js trong bài viết, bạn chuyển sang > sau đó bạn copy và dán đoạn Script này vào.

<script>
//script initialisation for 'pre' tags
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
</script>

<pre>Hiển thị đoạn code </pre>

Sau đó chuyển bài viết sang và chèn đoạn code mà bạn muốn hiển thị.
Chúc bạn thành công!!!

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Cách tạo mật khẩu bảo vệ Nội dung bài viết

QRViet tháng 1 12, 2021 Add Comment

Vì nhiều lí do bạn muốn hạn chế người xem Nội dung một bài viết nào đó và chỉ cho phép người dùng có password mới xem được, thì ta sẽ cài ...

thủ thuật blog

Vì nhiều lí do bạn muốn hạn chế người xem Nội dung một bài viết nào đó và chỉ cho phép người dùng có password mới xem được, thì ta sẽ cài đặt password cho bài viết đó.

Tạo mật khẩu bảo vệ Nội dung bài viết

Khóa liên kết

Đầu tiên bạn Đăng nhập Blogger > Chủ để > Tùy chỉnh > Chỉnh sửa HTML.
Sau đó dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

.lock{position:relative;width:50px;height:50px;border:8px solid #E3A11E;border-color:#999 #999 #ccc;border-radius:50%;background-color:#ccc;color:#555}
.lock::before{content:"";display:block;position:absolute;top:-16px;left:-16px;bottom:0;right:0;width:50px;height:50px;border-radius:50%;border:8px solid #000;border-color:#fff #555 #555 #555}
.lock i{display:block;position:absolute;top:25%;left:0;right:0;bottom:25%;margin:auto;transition:0s}
.lock i:first-child{opacity:1}
.lock i:last-child{opacity:0}
.lock:hover{transform:rotate(495deg);transition:0.8s}
.lock:hover i{transform:rotate(-495deg);transition:transform 0.8s,opacity 0s 1.8s}
.lock:hover i:first-child{opacity:0}
.lock:hover i:last-child{opacity:1}
.lock:hover::before{transform:rotate(-900deg);transition:0.8s 0.8s}

Thêm thư viện thẻ jQuery này vào trước thẻ </b:skin> nếu như Blogger bạn chưa có.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Tiếp theo bạn vào tạo và chuyển sang Chế độ xem HTML và dán lần lượt 2 đoạn code HTML và Javarscript dưới đây vào.

<center>
<button class="lock" onClick="passWord()">
  <i class="fa fa-lock fa-2x" aria-hidden="true"></i>
  <i class="fa fa-unlock-alt fa-2x" aria-hidden="true"></i>
</button>
</center>

<script type='text/javascript'>
function passWord() {
var testV = 1;
var pass1 = prompt('Vui lòng nhập mật khẩu',' ');
while (testV < 3) {
if (!pass1) 
location.reload(true);
if (pass1.toLowerCase() == "qrviet") {
window.open('https://qrviet.blogspot.com');
break;
} 
testV+=1;
var pass1 = 
prompt('Truy cập bị từ chối - Mật khẩu không chính xác. Vui lòng nhập lại.','Nhập mật khẩu tại đây');
}
if (pass1.toLowerCase()!="password" & testV ==3) 
location.reload(true);
return " ";
} 
</script>

Note:
✔ Sửa lại qrviet thành mật khẩu của bạn.
✔ Sửa lại https://qrviet.blogspot.com thành liên kết của bạn cần ẩn.

Khóa Nội dung tùy chỉnh

Khóa Nội dung bài viết

Đầu tiên bạn Đăng nhập Blogger > Chủ để > Tùy chỉnh > Chỉnh sửa HTML.
Sau đó dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

#flippylock {text-align:center;}
#flippylock button {margin:10px auto;cursor:pointer;font-family:'Source Sans Pro',sans-serif;background-color:#18bb8c;font-size:14px;color:#fff;padding:6px 14px!important;text-transform:uppercase;border:none;border-radius:3px;transition:all 0.3s ease-out;}
#flippylock button:hover, #flippylock button:focus {outline:none;background-color:#3b3f48;color:#fff;}
#flippanellock {padding:1px;text-align:left;background:#fafafa;border:1px solid #e3e3e3;}
#flippanellock {padding:24px;display:none;}
#flippanellock img {margin:10px auto;}

Thêm thư viện thẻ jQuery này vào trước thẻ </b:skin> nếu như Blogger bạn chưa có.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Tiếp theo bạn vào tạo và chuyển sang Chế độ xem HTML và dán lần lượt 2 đoạn code HTML và Javarscript dưới đây vào.

<center>
<div id="flippylock"><button onClick="passWord()">Nội dung bị khóa</button></div>
<div id="flippanellock">
--- NỘI DUNG BỊ ẨN ĐẶT Ở ĐÂY ---
</div>
</center>

<script type='text/javascript'>
function passWord() {
var testV = 1;
var pass1 = prompt('Vui lòng nhập mật khẩu',' ');
while (testV < 3) {
if (!pass1) 
location.reload(true);
if (pass1.toLowerCase() == "qrviet") {
$("#flippanellock").slideToggle("normal");
break;
} 
testV+=1;
var pass1 = 
prompt('Truy cập bị từ chối - Mật khẩu không chính xác. Vui lòng nhập lại.','Nhập mật khẩu tại đây');
}
if (pass1.toLowerCase()!="password" & testV ==3) 
location.reload(true);
return " ";
} 
</script>

Note :
✔ Sửa lại qrviet thành mật khẩu của bạn và Nội dung cần ẩn.

Chúc bạn thành công!

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Thêm nút Download và Demo vào trong Blogger với hiệu ứng CSS

QRViet tháng 1 11, 2021 Add Comment

Trong bài viết này mình sẽ chia sẻ một bài hướng dẫn cách thêm nút Download và Demo bằng CSS đẹp cho Blogger . Thêm nút Download và Demo ...

thủ thuật blog

Trong bài viết này mình sẽ chia sẻ một bài hướng dẫn cách thêm nút Download và Demo bằng CSS đẹp cho Blogger.

Thêm nút Download và Demo vào trong Blogger

Nút Demo và Download được tạo ra bằng CSS với hiệu ứng hover chuột. Hai biểu tượng này được lấy từ font awesome.

Vì vậy, trước khi bắt đầu hướng dẫn này bạn cần thêm font awesome vào trong blog của bạn.

⛨ Hướng dẫn chi tiết thêm Font Awesome

Xem hướng dẫn

Đầu tiên bạn Đăng nhập vào Blogger > Chủ đề > Tùy chỉnh chọn Edit HTML.
Chèn code bên dưới vào trước thẻ đóng </style>

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Lưu lại giao diện chủ đề.
Khi bạn tạo bài viết mới bạn chuyển qua Chế độ xem HTML , copy code bên dưới và chèn link của bạn vào chỗ "YOUR-LINK-THERE" khi muốn tạo nút Download và nút Demo.

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

⛨ Nút DEMO / DOWNLOAD

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Các nút CSS - CSS Buttons

QRViet tháng 1 11, 2021 Add Comment

Bảng chạy thử CSS Buttons Chèn CSS vào đây filter_1 Kiểu nút cơ bản Kiểu nút cơ bản <style> .button { background-color: #4CA...

css + thủ thuật blog

Bảng chạy thử CSS Buttons

Kiểu nút cơ bản

Kiểu nút cơ bản

<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
<h2>CSS Buttons</h2>
<button>Nút-Button Mặc định</button>
<a href="#" class="button">Link Button</a>
<button class="button">Nút-Button</button>

Màu nút
Thay đổi nàu nền của nút bằng thuộc tính background-color.

Màu nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Xanh da trời-Blue */
.button3 {background-color: #f44336;} /* Đỏ-Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Xám-Gray */ 
.button5 {background-color: #555555;} /* Đen-Black */
</style>

<h2>Button Colors</h2>
<p>Thay đổi nàu nền của nút bằng thuộc tính background-color</p>

<button class="button">Xanh lá-Green</button>
<button class="button button2">Xanh da trời-Blue</button>
<button class="button button3">Đỏ-Red</button>
<button class="button button4">Xám-Gray</button>
<button class="button button5">Đen-Black</button>

Kích thước nút
Thay đổi kích thước phông chữ của một nút với thuộc tính font-size.

Kích thước nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>

<h2>Button Sizes</h2>
<p>Thay đổi kích thước phông chữ của một nút với thuộc tính font-size </p>

<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>

Thay đổi vùng đệm của một nút bằng thuộc tính padding.

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>

<h2>Button Sizes</h2>
<p>Thay đổi vùng đệm của một nút bằng thuộc tính padding</p>

<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>

Các nút tròn
Thêm các góc tròn vào nút với thuộc tính border-radius.

Các nút tròn

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>

<h2>Rounded Buttons</h2>
<p>Thêm các góc tròn vào nút với thuộc tính border-radius</p>

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

Đường viền nút màu
Sử dụng thuộc tính border để thêm đường viền vào nút.

Đường viền nút màu

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
</style>

<h2>Colored Button Borders</h2>
<p>Sử dụng thuộc tính border để thêm đường viền vào nút</p>

<button class="button button1">Xanh lá-Green</button>
<button class="button button2">Xanh da trời-Blue</button>
<button class="button button3">Đỏ-Red</button>
<button class="button button4">Xám-Gray</button>
<button class="button button5">Đen-Black</button>

Kiểu của nút khi bạn di chuyển chuột qua nút
Sử dụng thuộc tính hover để thay đổi kiểu của nút khi bạn di chuyển chuột qua nó.
Tip: Sử dụng thuộc tính transition-duration để xác định tốc độ của hiệu ứng di chuột.

Kiểu của nút khi bạn di chuyển chuột qua nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}
</style>

<h2>Hoverable Buttons</h2>
<p>Sử dụng :hover để thay đổi kiểu của nút khi bạn di chuyển chuột qua nó.
</p>
<p><strong>Tip: Sử dụng thuộc tính <transition-duration> để xác định tốc độ của hiệu ứng "di chuột"</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

Thêm bóng vào nút
Sử dụng thuộc tính box-shadow để thêm bóng vào nút.

Thêm bóng vào nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>

<h2>Shadow Buttons</h2>
<p>Sử dụng thuộc tính box-shadow để thêm bóng vào nút</p>

<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on Hover</button>

Tạo nút bị vô hiệu hóa
Sử dụng thuộc tính opacity để thêm một lớp trong suốt cho nút (làm cho nó trông bị vô hiệu hóa).
Tip: Bạn cũng có thể thêm thuộc tính cursor với giá trị not allowed - không được phép, thuộc tính này sẽ hiển thị no parking sign - biển báo cấm đỗ xe khi bạn di chuột qua nút.

Tạo nút bị vô hiệu hóa

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

<h2>Disabled Buttons</h2>
<p>Sử dụng thuộc tính opacity để thêm một lớp trong suốt cho nút (làm cho nó trông bị vô hiệu hóa)</p>

<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>

Chiều rộng nút
Theo mặc định, kích thước của nút được xác định bởi nội dung văn bản của nó (độ rộng tỷ lệ theo nội dung của nó).
Sử dụng thuộc tính width hoặc % để thay đổi chiều rộng của nút.

Chiều rộng nút

<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>

<h2>Button Width</h2>
<p>Sử dụng thuộc tính width hoặc % để thay đổi chiều rộng của nút.</p>

<button class="button button1">250px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button>

NHÓM NÚT Nhóm nút cơ bản

Nhóm nút cơ bản

<style>
.btn-group .button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>

<h2>Button Groups</h2>

<div class="btn-group">
  <button class="button">Button1</button>
  <button class="button">Button2</button>
  <button class="button">Button3</button>
  <button class="button">Button4</button>
</div>

Nhóm nút có viền
Sử dụng thuộc tính border để tạo nhóm nút có viền.

Nhóm nút có viền

<style>
.btn-group .button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .button:not(:last-child) {
  border-right: none; /* -Ngăn 2 đường viền-Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>

<h2>Bordered Button Group</h2>
<p>Sử dụng thuộc tính border để tạo nhóm nút có viền.</p>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

Nhóm nút dọc
Sử dụng display:block thay vì float:left để nhóm các nút bên dưới nhau, thay vì cạnh nhau.

Nhóm nút dọc

<style>
.btn-group .button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group .button:not(:last-child) {
  border-bottom: none; /* Ngăn 2 đường viền-Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>

<h2>Vertical Button Group</h2>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

Thêm nút vào hình ảnh

Thêm nút vào hình ảnh

<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
  color: white;
}
</style>

<h2>Button on Image</h2>
<p>Thêm nút vào hình ảnh</p>

<div class="container">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigieovp8US0ltkZ33JZUx-kYgmbZMuPSpxaBvvteKknBegfaiVfhxUONQEXSazk9ZSaVb4gV_woJfxaCI_AfzHtsrLM4mGfGT_ggeqEZaklefM3Q2QglKx754IlRYHwKh0qlgTZkOhDQ/s320/qrviet-anh.png" alt="Snow" style="width:100%">
  <button class="btn">Button</button>
</div>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigieovp8US0ltkZ33JZUx-kYgmbZMuPSpxaBvvteKknBegfaiVfhxUONQEXSazk9ZSaVb4gV_woJfxaCI_AfzHtsrLM4mGfGT_ggeqEZaklefM3Q2QglKx754IlRYHwKh0qlgTZkOhDQ/s320/qrviet-anh.png

Thêm một mũi tên ">>" hiện ra khi di chuột vào nút

Thêm một mũi tên ">>" hiện ra khi di chuột vào nút

<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

Thêm hiệu ứng "nhấn" khi nhấp chuột vào nút

Thêm hiệu ứng "nhấn" khi nhấp chuột vào nút

<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button">Click Me</button>

Hiệu ứng "mờ dần" khi di chuột vào nút

Hiệu ứng "mờ dần" khi di chuột vào nút

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {opacity: 1}
</style>

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="button">Hover Over Me</button>

Hiệu ứng "gợn sóng" khi nhấp chuột

Hiệu ứng "gợn sóng" khi nhấp chuột

<style>
.button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>

<h2>Animated Button - Ripple Effect</h2>

<button class="button">Click Me</button>

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Cách lấy link download trực tiếp từ Google Drive

QRViet tháng 1 11, 2021 Add Comment

Google Drive là nơi lưu trữ dữ liệu trực tuyến, miễn phí tuyệt vời mà chắc rằng ai đang sử dụng Gmail cũng đã biết. Bạn cần chia sẻ link d...

google drive + thủ thuật

Google Drive là nơi lưu trữ dữ liệu trực tuyến, miễn phí tuyệt vời mà chắc rằng ai đang sử dụng Gmail cũng đã biết. Bạn cần chia sẻ link download những file này với những người khác thì làm như thế nào?

Có rất nhiều cách để lấy link download nhưng hôm nay mình sẽ hướng dẫn các bạn cách nhanh nhất và hiệu quả nhất mà mình đang dùng.

Đầu tiên bạn cần thêm ứng dụng Download Link Generator For Google Drive™ vào trình duyệt.

☑ Download - Link Generator For Google Drive™

Link trực tiếp

Download - Link Generator For Google Drive™

Sau khi Cài đặt xong, bạn vào Google Drive và chọn file cần chia sẻ.

Chọn File cần chia sẻ

Và đây là kết quả.

Link download trực tiếp

NOTE:
Còn có một cách khác không cần cài đặt mà vẫn lấy được link download trực tiếp, đó là chúng ta chỉ cần lấy mã (ID) của file và cải biên chút xíu là được.
Bạn so sánh link chia sẻ và link trực tiếp là bạn biết ngay mình phải chỉnh như thế nào ^.^

⛳Link chia sẻ : https://drive.google.com/open?id=1ZKfD3FI2WaE-Q7QwDIWnpmKyF9PfYDSs

⛳Link trực tiếp : https://drive.google.com/uc?id=1ZKfD3FI2WaE-Q7QwDIWnpmKyF9PfYDSs

Như vậy ta chỉ cần sửa chữ "open" thành "uc" là có ngay link download trực tiếp.

⛳Link trực tiếp (là link bấm vào cái là download ngay không cần view như link chia sẻ).
Tuy nhiên chỉ áp dụng cho những file có Mb nhỏ, còn những file có Mb lớn thì chúng ta vẫn phải thực hiện 1 bước nữa là nhấn vào nút [⚠ do Google Drive không thể quét vi-rút].
Nhưng bạn yên tâm những file mà được mình chia sẻ đã được ⛨Bác sĩ BKAV xét nghiệm "âm tính" hết rồi!.

⚠Google Drive không thể quét vi-rút

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Thêm Nút DOWNLOAD Để Tải Video Trên Youtube

QRViet tháng 1 11, 2021 Add Comment

Youtube là một mạng xã hội chia sẻ video lớn nhất thế giới hiện nay. Và cũng chính vì nó lớn, nó hữu ích nên có rất nhiều thủ thuật xoay qu...

thủ thuật youtube

Youtube là một mạng xã hội chia sẻ video lớn nhất thế giới hiện nay. Và cũng chính vì nó lớn, nó hữu ích nên có rất nhiều thủ thuật xoay quanh mạng xã hội này.

Đặc biệt là các cách tải video trên Youtube, vì theo mặc định thì Youtube không hỗ trợ người dùng tải các video từ mạng xã hội này về. Trong rất nhiều cách thì chắc có lẽ nhiều bạn sẽ lựa chọn việc sử dụng công cụ download, tự động bắt link video, audio… có trên trình duyệt web Cốc Cốc, vì nó cho phép bạn tải về video ở nhiều định dạng và chất lượng khác nhau một cách cực kì nhanh chóng và hiệu quả. Tuy nhiên, đối với những bạn không sử dụng Cốc Cốc thì phải làm như thế nào đây?

Chính vì thế, trong bài viết này mình sẽ hướng dẫn cho các bạn cách thêm nút Download vào các video trên Youtube khi bạn duyệt web bằng Google Chrome, hoặc các trình duyệt web sử dụng nhân Chromium.

Thêm nút DOWNLOAD để tải Video trên Youtube

Nút DOWNLOAD mà chúng ta sẽ thêm vào Youtube này là của trang web Y2Mate.com – một trang web hỗ trợ download video Youtube cực kì hiệu quả, nhanh chóng và miễn phí.

Thông thường thì bạn cần copy URL của video youtube => rồi dán vào trang Y2Mate.com để tải là xong thôi. Tuy nhiên điều bất tiện là bạn cứ phải vào trang web đó mỗi khi muốn tải video.

Chính vì thế, việc thêm cái nút DOWNLOAD này vào luôn trang Youtube là rất tiện lợi, bạn chỉ cần bấm 1 phát là được đưa đến trang download video của Y2Mate.com ngay, rất nhanh chóng và thuận tiện.

Để cài đặt tiện ích mở rộng này thì bạn hãy truy cập vào đây và làm theo hướng dẫn.

Click vào liên kết

Muốn thêm được cái nút này vào Youtube thì chúng ta cần sử dụng một tiện ích mở rộng trên Chrome Web Store, nó có tên là Meddle Monkey.

Thêm MeddleMonkey

Sau khi đã Thêm vào Chrome xong bây giờ bạn hãy bấm vào link này => sau đó bấm nút Cài đặt để cài đặt.

Setup/Xác nhận

Tuy nhiên ở đây mình đã Cài đặt rồi nên ở đây mình chỉ cần nhấn Cài lại để cài đè lên là OK.

Bây giờ thì bạn hãy thử truy cập vào video trên Youtube mà bạn muốn tải về=> và bấm vào nút Download màu đỏ kia.

Before

After

Bây giờ bạn chỉ cần chọn định dạng video và chất lượng video mà bạn muốn tải về => rồi bấm nút Download màu xanh để tải thôi.

Download

Ngoài download định dạng .mp4 bạn có thể còn download theo định dạng .mp3 luôn.

Chia sẻ thêm:

Ngoài cách thêm nút DOWNLOAD trực tiếp vào trang Youtube như hướng dẫn bên trên ra, còn một cách cũng khá nhanh khác đó là sửa đường link truy cập đến link video.

Ví dụ link gốc của video là : https://www.youtube.com/watch?v=LxXjvUYKY5M

Bây giờ bạn sẽ sửa lại thành như này: https://www.youtubepp.com/watch?v=LxXjvUYKY5M

=> Thêm pp vào sau chữ youtube thôi. Cách này cũng rất nhanh chóng và đơn giản.

Nút Like - sau mỗi Bài viết trên Blogger với hiệu ứng đẹp mắt

Xếp hạng bài viết

⛨ Nút Love hình trái tim

⛨ Nút Love kiểu bung tim

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Tạo Sơ Đồ Trang Web XML Cho Blogger

Xếp hạng bài viết

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Hướng dẫn highlight code trong Blogspot

Xếp hạng bài viết

filter_1 Lấy hightlight.js

filter_2 Thêm highlight vào template Blogspot

filter_3 Sử dụng highlight trong bài viết

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Cách tạo mật khẩu bảo vệ Nội dung bài viết

Xếp hạng bài viết

filter_1 Khóa liên kết

filter_2 Khóa Nội dung tùy chỉnh

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Thêm nút Download và Demo vào trong Blogger với hiệu ứng CSS

Xếp hạng bài viết

⛨ Hướng dẫn chi tiết thêm Font Awesome

⛨ Nút DEMO / DOWNLOAD

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Các nút CSS - CSS Buttons

Xếp hạng bài viết

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Cách lấy link download trực tiếp từ Google Drive

Xếp hạng bài viết

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Thêm Nút DOWNLOAD Để Tải Video Trên Youtube

Xếp hạng bài viết

CHIA SẺ CHO BẠN BÈ

BẠN CÓ THỂ QUAN TÂM

Bình luận

Lấy hightlight.js

Thêm highlight vào template Blogspot

Sử dụng highlight trong bài viết

Khóa liên kết

Khóa Nội dung tùy chỉnh