Note Thông báo: Từ ngày 25/05/2021 hệ thống ngừng hoạt động, mọi vấn đề hay thắc mắc trên đây sẽ không được giải quyết. Hãy truy cập Code Pro để được hỗ trợ!
Home free template

SHARE TEMPLATE TRẮNG TINH DÙNG ĐỂ RIP/LẬP TRÌNH/MOD CHO NGƯỜI MỚI BẮT ĐẦU

Tác giả: Lê Anh Đức
Xuất bản:
Loading...

LỜI MỞ ĐẦU

Đối với dân code, develop chuyên nghiệp thì bài viết này không dành cho các bạn. Hôm nay mình share template này mục đích là cho những người mới chập chững bước chân vào blog muốn học tập, rip, mod một giao diện. Chúng ta bắt đầu nào =))

DEMO

TEMPLATE

TEMPLATE I:

Đây là mẫu giao diện trắng tinh không có bất cứ thẻ điều kiện hay khai báo gì cả:
<?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 II:

Đâ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

Viết bình luận (2)
Xếp theo