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

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

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

2 nhận xét:


Cùng tham gia bình luận bài viết này nhé!