Share Template Trắng Tinh Cho Người Mới Bắt Đầu Học Rip/Dev !!!

Are you sure?

You want to turn off ads.

BÀI VIẾT CÙNG CHUYÊN MỤC

LỜI NÓI ĐẦU

Bài viết này dành cho những bạn mới học rip, mới tập develop hay là mod một giao diện cho web. Nói chung là noob giống mình ... hihi
DEMO
TEMPLATE 1
Đây là giao diện trắng tinh không khai báo thêm bát kì thẻ điều kiện nào.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>
TIÊU ĐỀ TRANG WEB CỦA BẠN
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[
 /* Chèn CSS vào đây */
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây !
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
TEMPLATE 2
Đây là mẫu giao diện mình đã cho thêm thẻ:
  • <meta>: dùng để cung cấp thêm "thông tin về trang web" cho trình duyệt và các công cụ tìm kiếm (những thông tin này không hiển thị lên màn hình, tuy nhiên trình duyệt và các công cụ tìm kiếm có thể đọc và hiểu được)
  • <link href='#' rel='dns-prefetch'/>: Dùng để tăng tốc trang web
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- Meta tags share --> 
 <b:if cond='data:view.isMultipleItems'>
    <meta content='summary' name='twitter:card'/>
    <meta content='' name='twitter:site'/>
    <meta content='' name='twitter:creator'/>
    <meta expr:content='data:blog.title' name='twitter:title'/>
    <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <meta content='https://i.imgur.com/X4hSa0G.jpg' name='twitter:image'/>
    <meta content='' property='fb:app_id'/>
    <meta content='' property='fb:admins'/>
    <meta content='' property='og:site_name'/>
    <meta content='website' property='og:type'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <meta content='https://i.imgur.com/X4hSa0G.jpg' property='og:image'/>
    <meta expr:content='data:blog.title' property='og:image:alt'/>
    <meta content='website' property='og:type'/>
    <meta expr:content='data:blog.canonicalUrl' itemprop='og:url'/>
    <meta expr:content='data:blog.title' itemprop='og:headline'/>
    <meta expr:content='data:blog.metaDescription' itemprop='og:description'/>
    <meta content='https://i.imgur.com/X4hSa0G.jpg' property='og:image'/>
 </b:if>
 <!-- DNS prefetch --> 
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<title>
TIÊU ĐỀ TRANG WEB CỦA BẠN
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin><![CDATA[
 /* Chèn CSS vào đây */
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<!-- Thêm nội dung trang web vào đây -->
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

LỜI KẾT

Trên đây là 2 mẫu template trắng mà mình hay sử dụng, các bạn tham khảo nha. Nếu có thắc mắc hãy để lại một comment phía dưới, mình sẽ trả lời nhanh nhất có thể. Chúc các bạn một ngày học tập và làm việc hiệu quả !
@Copyright Lê Anh Đức
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!