adamz template

1. Tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

<script type='text/javascript'> //<![CDATA[ //CSS Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("Link CSS 1");loadCSS("Link CSS 2"); //]]> </script>

<script type='text/javascript'> //<![CDATA[ //CSS Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("http://fonts.googleapis.com/css?family=Oswald");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); //]]> </script>

2. Tăng tốc độ tải trang khi dùng JavaScript

<script src='http://quocbaoblog.xyz/myScript.js' type='text/javascript'></script>

 <script type="text/javascript"> //<![CDATA[ Chèn code JavaScript vào đây //]]> </script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script> 

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script> 

lời kết

Kì thi THPT Quốc Gia vừa kết thúc chắc có nhiều anh em đang muốn theo học thiết kế ^^. Hôm nay tình cờ thấy Bộ Ebook tổng hợp kiến thức cơ bản dành cho người mới bắt đầu khá hay nên mình share cho các bạn.

Ebook được viết hoàn toàn bằng tiếng Việt do ColorMe biên soạn. Nó tổng hợp kiến thức cơ bản nhất từ con số 0 cho người mới bắt đầu học thiết kế đồ họa. Tất cả được chứa đựng trong 1 File PDF duy nhất bao gồm 8 chương như sau:

• Kiến thức cơ bản về thiết kế kỹ thuật số.
• Các bố cục thường gặp.
• Cách phối hợp và sử dụng màu sắc.
• Kiến thức về hòa phối chữ viết (Typography).
• Giải thích về các hiệu ứng cơ bản.
• Cách nhận diện thương hiệu.
• Hướng dẫn thiết kế CV bằng Photoshop.
• Các xu hướng thiết kế mới hiện nay và cách tự cập nhật xu hướng cho bản thân.

HƯỚNG DẪN THỰC HIỆN

https://www.quocbaoblog.xyz/p/demo.html

<b:if cond='data:blog.url != "https://www.quocbaoblog.xyz/p/demo.html"'>

<b:else/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type='text/css'>
body{background:#fff}
#view{padding:0;margin:0;border:0;position:fixed;top:60px;left:0;right:0;bottom:0;width:100%;height:93%;transition:all .4s ease-out}
#tab-demo{width:100%;height:60px;top:0;left:0;background:#34495e;color:#fff;z-index:99999;position:fixed;-webkit-transform:translateZ(0)}
.closebutton{background:#2ecc71;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:0;line-height:60px;cursor:pointer;color:#fff;right:20px;transition:all .3s}
.closebutton:before{content:'\f00d';position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
a.closebutton {color:#fff;text-decoration:none;}
.closebutton:hover {background:#27ba66}
.closebutton:hover:before {transform:rotate(360deg);}
.dlbutton,a.dlbutton{background:#3f5870;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:146px;line-height:60px;cursor:pointer;color:#fff;text-decoration:none;transition:all .3s}
.dlbutton:before{content:'\f019';position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
.dlbutton:hover {background:#2c3e50}
.dlbutton:hover:before {transform:rotate(360deg);content:'\f00c';}
.demologo,a.demologo{padding-left:75px;font-size:18px;font-weight:700;text-transform:uppercase;line-height:60px;left:20px;position:fixed;color:#fff;letter-spacing:.5px;text-decoration:none}
.demologo:before{content:'\f108';position:absolute;left:0;background:#2ecc71;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;}
.demologo:after {content: '- Quốc Bảo Blog Demo Page';text-transform:capitalize;opacity:0;visibility:hidden;padding-left:5px;transform:scale(0.9) translate(-34px,0);transition:all.3s;}
.demologo:hover:after {opacity:1;visibility:visible;transform:scale(1.0) translate(0,0);}
</style>
<script type='text/javascript'>
//<![CDATA[
// Demo Page
document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only
function getQueryVariable(e){for(var r=window.location.search.substring(1),t=r.split("&"),n=0;n<t.length;n++){var a=t[n].split("=");if(a[0]==e)return a[1]}return!1}window.onload=function(){var e=getQueryVariable("url"),r=getQueryVariable("download");document.getElementById("view").src=e,document.getElementById("dl").href=r};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='https://ww.quocbaoblog.xyz'>Quốc Bảo Blog</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&#39;tab-demo&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;view&#39;).style.top=&#39;0&#39;;document.getElementById(&#39;view&#39;).style.height=&#39;100%&#39;'>Remove</a>
</div>
<iframe id='view'></iframe>
</b:if>

https://quocbaoblog.xyz/p/demo.html?url=Địa_chỉ_link_demo&download=Địa_chỉ_link_download 

Xin chào các bạn, vì có một số bạn yêu cầu nên mình quyết định viết bài này, để hướng dẫn TẠO WIDGET DẠNG TAB CHO BLOG. À!! Mình có một chuyện muốn nói, chuyện là blog mình mới lắp một "em" GA nên nếu bạn nào thấy AD thì hãy kick để ủng hộ mình  nha :V Xin cảm ơn rất nhiều :33

HƯỚNG DẪN THỰC HIỆN

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[$(document).ready(function(){$('a.number').click(function(){var an=$('a.set').attr('title');$('div#'+an).hide();$('a.set').removeClass('set');$(this).addClass('set');var hien=$(this).attr('title');$('div#'+hien).show();})});//]]></script><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

BƯỚC 2: THÊM CSS

div#tabs {display: -webkit-inline-box;width: 100%;background: #ccc;  font-family:Roboto;}
#tab2 {display: none;   font-family:Roboto;  }
#tab3 {display: none;    font-family:Roboto;}
.number.set p {background: #fff;font-weight: bold;  color:#019875    }
div#tabs p {margin: 0;padding: 10px 20px;border-left: 1px solid;border-right: 1px solid;border-top: 1px solid;border-color: #ccc;
}
.tab-content {border-left: 1px solid;border-right: 1px solid;border-bottom: 1px solid;border-color: #ccc;padding: 30px 20px 0;background: #fff;margin-top: -16px;    font-family:Roboto;}

BƯỚC 3:THÊM HTML

<div class="title" id="tabs"><a class="set number" title="tab1"><p>Tab 1</p></a><a class="number" title="tab2"><p>Tab 2</p></a><a class="number" title="tab3"><p>Tab 3</p></a></div><div class="tab-content"><div id="tab1">Nội dung Tab 1, có thể là text hay HTML tùy ý!</div><div id="tab2">Nội dung Tab 2, có thể là text hay HTML tùy ý!</div><div id="tab3">Nội dung Tab 3, có thể là text hay HTML tùy ý!</div></div>

TỔNG KẾT

5 TRANG WEB MIỄN PHÍ GIÚP BẠN TÌM FONT CHỮ ĐẸP

1. Google Fonts

2. DaFont

3. Font Squirrel

4. Behance

5. FontSpring

HƯỚNG DẪN THỰC HIỆN

LỜI KẾT

#mayyoulike {height: 42px;line-height: 41px;background: #fff;border-radius:50px 0 0 0;margin-bottom:8px;box-shadow:0 0 12px rgba(0,0,0,0.1);border:1px solid #d5d5d5;}.mayyoulike-text {background:#ef6f66 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1VFlU7XczUQxUVnERmj5NnKacJi7PeO2oU4nRTmTIs46gwUOhMSpY-olUQA2Ub5xFo9TguT6sdWtfLNJA8h4C1Ixrr6v3p2L7_b-e8B2fEzG_wgIftKYHzswuUU7UP31tGnxNymMIXLCf/s1300/wave-bg-bacsiwindows.jpg) no-repeat center center;background-size:cover;line-height: 42px;float: left;border-radius:50px 0 50px 0;font-size: 18px;padding-left: 35px;padding-right: 35px;color: #FFF;font-weight:600;position: relative;margin-right: 35px;}#mayyoulike a {font-size:17px;color: #2a2a2a;transition: .3s;}  #mayyoulike a:hover{letter-spacing: 1.0px; color:#5c5c88; font-weight:600}#mayyoulike img {float: right;width: 35px;padding-right: 10px;}

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div class='row' id='mayyoulike'><div class='mayyoulike-text'>THÔNG BÁO <i class='fas fa-bullhorn'/></div><a href=''>MÌNH SẼ CỐ GẮNG RA NHIỀU BÀI VIẾT HAY CHO CÁC BẠN NHÉ!</a><img alt='hot' original='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkPENzePj8Na-rvUHrEnBjSOKV_Uq6iv7aFOVKcT2T60K4Le7yRUzTS5toCK_nIO4Pk0sU8Dxjzo8q1cbQOENNpGZfn5oP6qx1gu9-FXJ7qMODRO_05qlIx6h8tAp7u6CrllGj-ixeXI/s1600/icon-hot.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkPENzePj8Na-rvUHrEnBjSOKV_Uq6iv7aFOVKcT2T60K4Le7yRUzTS5toCK_nIO4Pk0sU8Dxjzo8q1cbQOENNpGZfn5oP6qx1gu9-FXJ7qMODRO_05qlIx6h8tAp7u6CrllGj-ixeXI/s1600/icon-hot.png'/></div></b:if> 

LỜI KẾT