Cách thêm Light Gallery vào chủ đề blogspot

Cách thêm Light Gallery vào chủ đề blogspot

Nguyễn Đình Diện       1 comment   

Xin chào đọc giả của Tôi Share blog, theo yêu cầu của một số bạn bảo mình chia sẻ cách thêm trình chiếu ảnh cho blogspot thì hôm nay mình sẽ viết bài hướng dẫn cách để thêm nó và code này mình lấy bên https://www.arlinadzgn.com nhé.

Các bạn có thể xem demo bên dưới

Hướng dẫn cách làm

Bước 1: Vào trang chủ đề tìm thẻ </body> và thêm toàn bộ đoạn code bên dưới lên thẻ vừa tìm được

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

Bước 2: Tìm tất cả đoạn <div class='post-body entry-content'
itemprop='articleBody'> và thay hết thành đoạn này <div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>
Chúc bạn thành công!

Tạo tiện ích copy link bài viết cho blogspot

Tạo tiện ích copy link bài viết cho blogspot

Nguyễn Đình Diện       Comment   

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo tiện ích copy link bài viết cho blogspot

Hướng dẫn cách làm

Để tạo tiện ích này, làm những yêu cầu sau:
Bước 1: Vào chỉnh sửa HTML và chèn toàn bộ đoạn Code bên dưới lên trên thẻ đóng </body>

<!-- Copy link -->
<style>
.at-button{z-index:10000000;position:fixed;right:24px;bottom:24px;background:#FFF;width:48px;height:48px;padding:12px;border-radius:100%;box-sizing:border-box;color:#666;-webkit-animation:at-ripple .6s linear infinite;animation:at-ripple .6s linear infinite}
.at-button:hover i{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.at-button i{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transition:.3s ease}
@-webkit-keyframes at-ripple {
0%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 0 rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1)}
100%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1),0 0 0 20px rgba(102,102,102,0)}
}
@keyframes at-ripple {
0%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 0 rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1)}
100%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1),0 0 0 20px rgba(102,102,102,0)}
}
</style>
<a class='at-button' href='javascript:;' onclick='CopyLink()'><i class='material-icons'>link</i></a>
<!-- End -->

Bước 2: Thêm đoạn js bên dưới lên trên thẻ </head>

<script>
function copyTextToClipboard(e){var t=document.createElement(&quot;textarea&quot;);t.style.position=&quot;fixed&quot;,t.style.top=0,t.style.left=0,t.style.width=&quot;2em&quot;,t.style.height=&quot;2em&quot;,t.style.padding=0,t.style.border=&quot;none&quot;,t.style.outline=&quot;none&quot;,t.style.boxShadow=&quot;none&quot;,t.style.background=&quot;&quot;,t.value=e,document.body.appendChild(t),t.select();try{document.execCommand(&quot;copy&quot;),alert(&quot;Đã sao chép liên kết!&quot;)}catch(o){alert(&quot;Không thể sao chép liên kết!&quot;)}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)}
</script>

Demo tiện ích

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

Cách kích hoạt giao diện mới trên Google Chrome rất đẹp và bóng bẩy (Material Design)

Cách kích hoạt giao diện mới trên Google Chrome rất đẹp và bóng bẩy (Material Design)

Nguyễn Đình Diện       Comment   

Sau một thời gian dài thử nghiệm, Google đã chính thức giới thiệu bộ giao diện mới có tên Material Design trên phiên bản Google Chrome 68. Ngay bây giờ, hãy cùng mình tìm hiểu cách kích hoạt cũng như xem có gì đặc biệt không nhé!
Material Design được thiết kế theo phong cách hoàn toàn khác so với các phiên bản trước đó, giao diện mới này khá hiện đại và sang trọng. Đặc biệt, các công cụ trên Google Chrome được thiết kế thanh thoát, dễ nhìn hơn so với phiên bản cũ.

Giao diện Google Chrome mới

Hướng dẫn kích hoạt giao diện mới Material Design trên Google Chrome
Bước 1: Đảm bảo trình duyệt của bạn đang chạy trên phiên bản mới nhất (Google Chrome 68), bằng cách sao chép và dán đường dẫn sau lên thanh địa chỉ của trình duyệt.

chrome://settings/help

Nếu bạn đang sử dụng Google Chrome có phiên bản cũ hơn, hệ thống sẽ tự động nhận diện và cập nhật sau khi theo tác theo hướng dẫn trên.
Bước 2: Nhập vào thanh địa chỉ Google Chrome đường dẫn sau:

chrome://flags/#top-chrome-md

Tiếp đến chọn vào "Refresh" tại mục UI Layout và nhấp vào "RELAUNCH NOW" để hoàn tất.

Để quay trở lại giao diện cũ, bạn hãy truy cập vào đường dẫn sau:

chrome://flags/#top-chrome-md

Tại mục UI Lauout chọn vào Default và chọn RELAUCH NOW để hoàn tất thay đổi.
Chúc các bạn thao tác thành công và đừng quên chia sẻ ngay với bạn bè nếu thấy hữu ích nhé!

Theo: https://www.thegioididong.com

Tạo hiệu ứng tải trang cực thích cho trang web

Tạo hiệu ứng tải trang cực thích cho trang web

Nguyễn Đình Diện       Comment   

Chào các bạn, cũng đã lâu rồi thì mình chưa hướng dẫn thủ thuật gì nên vì thế hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng tải trang cho trang web.

Demo hình ảnh:

Hướng dẫn cách làm:

Việc bạn cần làm là thêm đoạn code này dưới thẻ <body> trong HTML

<style>
/* 
=======================
   Preloader
=======================
*/
#preloader{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#fff;z-index:9999999999;background-repeat:no-repeat;background-position:center center;font-family:Open Sans,sans-serif}
blockquote{font-size:inherit}
.loading-page{background:#0d0d0d;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.loading-page .counter{text-align:center}
.loading-page .counter p{font-size:40px;font-weight:100;color:#E6AF2A}
.loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px}
.loading-page .counter hr{background:#E6AF2A;border:none;height:2px;float:left}
.loading-page .counter{position:relative;width:200px}
.loading-page .counter h1.abs{position:absolute;top:0;width:100%}
.loading-page .counter .color{width:0;overflow:hidden;color:#E6AF2A}
</style>
<!-- Preloader -->
<div id='preloader'>
<div class='loading-page'>
<div class='counter'>
<p>loading</p>
<h1>0%
<!-- h1.abs loading h1.abs.color loading -->
</h1>
<hr/>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
// Loader
  var counter = 0;
  var c = 0;
  var i = setInterval(function(){
      $(".loading-page .counter h1").html(c + "%");
      $(".loading-page .counter hr").css("width", c + "%");
    counter++;
    c++;
      
    if(counter == 101) {
        clearInterval(i);
        $("#preloader").delay(100).fadeOut(500);
    }
  }, 50);
//]]></script>

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

Xem nguyệt thực toàn phần và mưa sao băng ngày 28/7 mấy giờ, ở đâu rõ nhất?

Xem nguyệt thực toàn phần và mưa sao băng ngày 28/7 mấy giờ, ở đâu rõ nhất?

Nguyễn Đình Diện       Comment   

Nguyệt thực toàn phần và mưa sao băng xuất hiện rạng sáng ngày 28/7, người xem có thể quan sát rất rõ tại Thừa Thiên Huế, các tỉnh Nam Bộ.
Xem nguyệt thực toàn phần và mưa sao băng lúc mấy giờ, ở đâu rõ nhất?
Nguyệt thực ngày 28/7 sẽ kéo dài hơn 5 tiếng, từ 00h14 phút đến 6h28' ngày 28/7. Trong đó nguyệt thực toàn phần bắt đầu từ 2h30'đến 4h13'.
Lịch trình chi tiết của nguyệt thực diễn ra như sau:
00h14: Bắt đầu pha nửa tối
01h24: Bắt đầu pha một phần
02h30: Bắt đầu pha toàn phần
03h21: Nguyệt thực cực đại
04h13: Kết thúc pha toàn phần
05h19: Kết thúc pha một phần

Theo dự báo thời tiết của Trung tâm Dự báo Khí tượng Thủy văn Quốc gia, Bắc Bộ và Bắc Trung Bộ nhiều khả năng mưa to vào đêm 27 và ngày 28/7, nên người yêu thiên văn không thể chứng kiến nguyệt thực toàn phần kéo dài nhất thế kỷ từ 0h đến 6h30.
Ở các tỉnh Thừa Thiên Huế đến Nam Bộ thời tiết thuận lợi, ít mây không mưa nên đây sẽ là khu vực lý tưởng để xem nguyệt thực sáng 28/7.
Rạng sáng 28/7 còn là hiện tượng mặt trăng máu. Khi Mặt Trăng đi vào vùng bóng tối của Trái Đất, hoàn toàn che khuất Mặt Trời, Mặt Trăng sẽ chuyển thành màu đỏ đậm, vô cùng rực rỡ.
Cùng thời điểm này cũng sẽ diễn ra mưa sao băng Delta Aquarids với khoảng 20 vệt mỗi giờ. Đây cũng sẽ là một hiện tượng thú vị cho ai yêu thiên văn. Được biết, một số sao băng đầu tiên của Perseids, mưa sao băng lớn nhất hàng năm, xuất hiện.
Theo đó, theo các chuyên gia thiên văn, hiện tượng nguyệt thực lần này là sự xuất hiện lần thứ 2 trong năm.
Nếu không xem mưa sao băng và nguyệt thực toàn phần ngày 28/7, người yêu thích thiên văn sẽ phải chờ đến tận tháng 5/2021 và tháng 11/2022 mới được chứng kiến tiếp sự kiện thiên văn độc đáo này.
Xem nguyệt thực toàn phần bằng cách nào?
Khác với nhật thực, người xem nguyệt thực có thể quan sát bằng mắt thường, không cần thiết bị bảo vệ. Nếu muốn thấy nguyệt thực rõ hơn có thể trang bị thêm ống nhòm, máy ảnh. Cần lưu ý tránh ánh sáng trực tiếp 20 phút trước khi bắt đầu quan sát.
Hiện tượng nguyệt thực là gì?
Nguyệt thực là hiện tượng thiên văn khi Mặt Trăng đi vào hình chóp bóng của Trái Đất, đối diện với Mặt Trời. Điều này chỉ có thể xẩy ra khi Mặt Trời, Trái Đất và Mặt Trăng thẳng hàng hoặc xấp xỉ thẳng hàng với nhau, với Trái Đất ở giữa. Do vậy, nguyệt thực chỉ có thể xảy ra vào những ngày trăng tròn. Kiểu và chiều dài của nguyệt thực phụ thuộc vào vị trí của Mặt trăng so với các điểm nút quỹ đạo của nó.
Nguyệt thực toàn phần xảy ra khi ánh sáng mặt trời trực tiếp bị bóng của trái đất che hoàn toàn. Ánh sáng duy nhất nhìn thấy được là khúc xạ qua bóng tối của trái đất. Ánh sáng này có màu đỏ vì cùng lý do hoàng hôn có màu đỏ, do sự tán xạ Rayleigh của các tia sáng màu có bước sóng ngắn hơn. Bởi vì màu đỏ của nó, nguyệt thực toàn phần đôi khi được gọi là mặt trăng máu.
Không giống như nhật thực, mà chỉ có thể được nhìn thấy từ một khu vực tương đối nhỏ trên thế giới, nguyệt thực có thể được nhìn từ bất cứ nơi nào ở nửa tối của trái đất. Nguyệt thực kéo dài trong vài giờ, trong khi nhật thực toàn phần chỉ kéo dài trong vài phút tại bất kỳ vị trí nào do kích thước nhỏ hơn của bóng của Mặt trăng.

Theo Mai Chi - https://baomoi.com

Chia sẻ code intro cho blogspot

Chia sẻ code intro cho blogspot

Nguyễn Đình Diện       Comment   

Chào tất cả các bạn, hôm nay mình sẽ chia sẻ các bạn mẫu code intro cho blogspot. Và mẫu này mình bên highhay.com về và convert sang blogspot.

Demo hình ảnh:

Download
Xem demo

Để nhận template này thì bạn làm các yêu cầu sau:
1. Chia sẻ bài viết này lên facebook (tùy tâm)
2. Comment xuống bên dưới với nội dung:
- Link chia sẻ: ... (không chia sẻ thì thôi)
- Địa chỉ Email: ...
* Mình sẽ tổng hợp lại và gửi template này đến các bạn nhanh nhất có thể

Tạo menu Responsive cho blog của bạn

Tạo menu Responsive cho blog của bạn

Nguyễn Đình Diện       Comment   

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo menu cho blog Responsive với tất cả các màn hình.

Hướng dẫn cách làm

Bước 1: Thêm đoạn code menu này vào chỗ bạn muốn nó hiển thị

<!-- Menu List -->
<div id='header-tail'>
<div class='menu section row' id='menu'>
<ul id='nav'>
<li><a href='/'><i class='fa fa-home'/> Home</a></li>
<li class='hasSub'>
<a href='#'>
<i class='fa fa-lightbulb-o'/> THỦ THUẬT</a>
<ul id='sub-menus'>
<li class='menu-items'>
<a href='/search/label/Facebook?&amp;max-results=9'>Thủ thuật Facebook </a>
</li>
<li class='menu-items'>
<a href='/search/label/Blogspot?&amp;max-results=9'>Thủ thuật Blogspot </a>
</li>
</ul>
</li>
<li class='hasSub'>
<a href='#'>
<i class='fa fa-picture-o'/> HÌNH ẢNH</a>
<ul id='sub-menus'>
<li class='menu-items'>
<a href='/search/label/Ảnh%20Đại%20Diện'>Ảnh đại diện</a>
</li>
<li class='menu-items'>
<a href='/search/label/Ảnh%20Bìa%20Facebook'>Ảnh bìa Facebook</a>
</li>
<li class='menu-items'>
<a href='/search/label/12%20Cung%20Hoàng%20Đạo'>12 cung hoàng đạo</a>
</li>
</ul>
</li>
<li class='hasSub'>
<a href='#'>
<i class='fas fa-cog'/> CÔNG CỤ</a>
<ul id='sub-menus'>
<li class='menu-items'>
<a href='/p/photoshop.html'>Photoshop online </a>
</li>
<li class='menu-items'>
<a href='/p/font-awesome.html'>Font Awesome </a>
</li>
<li class='menu-items'>
<a href='/p/viet-chu-gach-ngang_22.html'>Status gạch ngang </a>
</li>
<li class='menu-items'>
<a href='/p/viet-chu-nguoc.html'>Status chữ ngược </a>
</li>
<li class='menu-items'>
<a href='/p/html-editor.html'>Kiểm tra Code </a>
</li>
<li class='menu-items'>
<a href='/p/nen-css.html'>Nén CSS </a>
</li>
<li class='menu-items'>
<a href='/p/ma-hoa-html.html'>Mã hóa Html </a>
</li>
</ul>
</li>
<li class='hasSub mega-menu'><a href='#add'><i class='fas fa-ellipsis-h'/></a>
<ul class='sub-menu1' style='width:450px;background:#fff'>
<div class='colst1'>
<li class='stb'><a href='/search/label/Blogger?&amp;max-results=9'>Template blogspot</a></li>
<li><a href='/search/label/Blogger?&amp;max-results=9'>Template blogger</a></li>
</div>
<div class='colst2'>
<li class='stb'><a href='#'>Thủ thuật blogger</a></li>
<li><a href='/search/label/Blogger?&amp;max-results=9'>Thủ thuật blogspot</a></li>
</div>
<div class='colst3'>
<li class='stb'><a href='#'>Hướng dẫn</a></li>
<li><a href='/search/label/Blogger?&amp;max-results=9'>Fix lỗi blogspot</a></li>
</div>
</ul>
</li>
</ul>
</div>
</div>

Bước 2: Thêm đoạn JS này lên trên thẻ </body> cho nó Responsive

<script type='text/javascript'>
//<![CDATA[
// Sub menu
(function(c){c.fn.hoverTimeout=function(d,e,f,g){return this.each(function(){var a=null,b=c(this);b.hover(function(){clearTimeout(a);a=setTimeout(function(){e.call(b)},d)},function(){clearTimeout(a);a=setTimeout(function(){g.call(b)},f)})})}})(jQuery);
(function(e){e.fn.replaceText=function(t,n,r){return this.each(function(){var i=this.firstChild,s,o,u=[];if(i){do{if(i.nodeType===3){s=i.nodeValue;o=s.replace(t,n);if(o!==s){if(!r&&/</.test(o)){e(i).before(o);u.push(i)}else{i.nodeValue=o}}}}while(i=i.nextSibling)}u.length&&e(u).remove()})}})(jQuery);
window.selectnav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="selectnav" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"›",u=n.label||"MENU",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){selectnav('nav');selectnav('nav1');selectnav('nav3');});
$(document).ready(function(){$("ul#sub-menus").parent("li").addClass("hasSub");$("#header-search .search-icon").click(function(){var e=$("#header-search input");if(e.is(":hidden")){e.fadeIn(300);$(this).removeClass("icon-search");$(this).addClass("icon-cancel");$("#menu").hide()}else{e.fadeOut(300);$(this).removeClass("icon-cancel");$(this).addClass("icon-search");$("#menu").show()}return false});$(document).bind("click",function(e){if($(e.target).parents("#header-search").length===0){$("#header-search input").fadeOut(300);$("#header-search .search-icn").removeClass("icon-cancel");$("#header-search .search-icn").addClass("icon-search");$("#menu").show()}});$(".menu li").each(function(){$(this).hoverTimeout(0,function(){$(this).children("ul").slideDown()},0,function(){$(this).children("ul").hide()})});var e="[";var t="]";$(".menu li *").replaceText(e,'<span class="msubtitle">');$(".menu li *").replaceText(t,"</span>");$(".menu #nav").show()});
//]]>
</script>

Bước 3: Thêm CSS này lên trên thẻ ]]></b:skin>

#header-tail{position:relative;float:left;width:100%;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;line-height:1.66}
.menu #nav{display:none}
.selectnav{display:none}
.selectnav{font:normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;border:0}
.sub-menu{display:none}
#menu li,#menu ul{transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease}
.menu ul li{float:left;padding:5px 0;display:inline;position:relative}
.menu ul li a{text-transform:uppercase;font-size:14px;color:#222;font-weight:500;padding:0 10px;display:block;height:35px;margin:0;position:relative;line-height:34px;}
.menu ul li a:hover{color:#3b5998}
.menu ul li ul li{padding:0;margin:0;display:block;float:none;background-color:#fff}
.menu ul li ul a:hover{color:#222}
.menu ul .hasSub a{text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;overflow:hidden;-webkit-box-orient:vertical;padding-right:30px}
.hasSub>a:after{right:11px}
.hasSub>a:after{content:'\f101';font-family:'Font Awesome 5 Solid';top:0px;position:absolute;color:#222;font-size:14px}
.mega-menu a:after{display:none}
.hasSub>a:after
.hasSub ul a:after{content:'';line-height:0}
.has-Sub:after{position:absolute;right:7px;top:50%;display:inline-block;content:'';width:0;height:0;border:4px solid transparent;border-top:4px solid #bbb}
.menu ul li ul{box-shadow:0 3px 10px 1px rgba(0,0,0,0.14);border-top:2px solid #3c8dbc;position:absolute;visibility:hidden;z-index:999;padding-top:0px;display:none;width:200px;-moz-transform:inherit;-o-transform:scale(0.7);-webkit-transform:scale(0.7);transform:scale(0.7);transition:all .3s ease-in-out!important;display:block!important;opacity:0;margin-top:3px}
.hasSub:hover>ul{visibility:visible;opacity:1;-moz-transform:scale(1.0);-o-transform:scale(1.0);-webkit-transform:scale(1.0);transform:scale(1.0)}
.menu ul li ul a{text-transform:none;color:#222;height:auto;line-height:16px;line-height:35px;height:35px;font-size:14px;font-weight:400}
.menu ul .mega-menu a{padding:0 11.4px!important}
.mega-menu li .hasSub>a:after{display:none}
.colst1,.colst2,.colst3{width:33.3333333%;padding:0 10px}
.colst1{float:left}
.colst2,.colst3{float:right}
.iconmn{margin:0 5px 0 0}
.stb{border-bottom:1px dotted rgba(0,0,0,0.15)}
@media screen and (max-width: 980px) {
#header-tail{background:#dddfe2;border:0}
.menu.section.row{width:100%!important}
.menu #nav{display:none!important}
.selectnav{display:block!important}
.menu .selectnav{float:left;width:100%;box-sizing:border-box;background-color:#f4f4f4;color:#222;border:2px solid #dddfe2!important;border-radius:3px;position:relative;top:0;height:45.3px;padding:10px}
}

Xem demo

Xem cách làm

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