• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

www.freeblogsites.info

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips Thiet-ke Thu-Thuat [Tips] - Share templates blogspot đầy đủ thành phần

[Tips] - Share templates blogspot đầy đủ thành phần

cngdirdet2022@gmail.com 05:25 Blog Series Blog-Tips Thiet-ke Thu-Thuat
cngdirdet2022@gmail.com
Mấy ngày hôm nay có nhiều bạn là newbi muốn tập rip blogspot nên xin mình mẫu templates blogspot  trắng đầy đủ thành phần mà mình chưa kịp send, nên hôm nay tiện đây mình xin chia sẻ cho các bạn templates blogspot trắng tinh đầy đủ các thành phần cho các bạn rip blogspot.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...;
}
#main-outer{
Background:#113366;
}
#footer{
Background:#6600ee;
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
}
#main{
Background:#646853;
width:590px;
float:left;
}
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>
<div id='box'>
Nội Dung Blog
<div id='header'>
Nội Dung header
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
</b:section>
</div>
<div id='main-outer'>
<div id='sidebar1'>
Nội Dung sidebar1
<b:section class='sbar1' id='sbar1' showaddelement='yes'/>
</div>
<div id='main'>
Nội Dung Bài Viết
<b:section class='mainpost' id='mainpost' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar2'>
Nội Dung sidebar2
<b:section class='sbar2' id='sbar2' showaddelement='yes'/>
</div>
<div style='clear:both'/>
</div>
<div id='footer'>
Nội Dung Footer
</div>
</div>
</body>
</html>
Phần thẻ <head> gồm có <b:include data='blog' name='all-head-content'/>
Sử dụng hàm include được tạo sẵn trong Blogger nó ẩn và không thể chỉnh sửa được, có thẻ bạn cần đọc qua các thẻ include của mình.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>
</b:if>
Bạn hãy tham khảo qua các bài viết về thẻ lập trình của mình về thẻ điều kiện và thẻ data thì bạn sẽ hiểu, nếu không bạn cứ để như vậy la được rồi
<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...;
}
#main-outer{
Background:#113366;
}
#footer{
Background:#6600ee;
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
}
#main{
Background:#646853;
width:590px;
float:left;
}
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>
Thẻ b:skin là thẻ chứa css tùy chỉnh cho trang của bạn, nó sẽ tự chuyển sang thẻ style khi người dùng xem trên website. (Bạn vẫn có thể sử dụng thẻ style trong code bình thường không sao cả)Cái cuối cùng bạn cần biết để hiểu về Blogger là đây section và widget, các ví dụ dưới đây sẽ khác với code trên template ở đầu
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section> Trong thẻ section gồm có những thuộc tính sau:
  • id - (Bắt buộc) Tên này không được trùng với tên khác, chỉ gồm chữ và số.
  • class - (Tùy chọn) Người ta thường đặt là 'navbar,' 'header,' 'main,' 'sidebar,' hoặc 'footer.' Nhưng bạn có thể đặt bất kì cái gì mà bạn muốn.
  • maxwidgets - (Tùy chọn) Số lượng tối ra widget section này có thể chứa.
  • showaddelement - (Tùy chọn) Có 2 lựa chọn là 'yes' và 'no,' nếu không đặt 'yes' sẽ là mặc định. Cái nay quyết định section đó có cho phép "Thêm Tiện ích" vào hay không.
  • growth - (Tùy chọn) Có 2 tùy chọn 'horizontal' và 'vertical,' nếu không đặt 'vertical' sẽ là mặc định. Cái này quyết định cho section đó ở sắp xếp widget như thế nào.Thẻ widget là những tiện ích bạn thêm vào bố cục của trang web
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
Thẻ này gồm có các thuộc tính sau:
  • id - (Bắt buộc) Cũng giống như của section, nó phải là tên duy nhất, chỉ bao gồm chữ và số.
  • type - (Bắt buộc) Thuộc tính này chỉ ra loại của widget đó, và nó chỉ có thể sử dụng các loại trong danh sách mình liệt kê phía dưới.
  • locked - (Tùy chọn) Có thể đặt là 'yes' hoặc 'no,' với 'no' là mặc định nếu bạn không đặt. Nếu widget bạn đặt locked='yes' thì widget đó không thể di chuyển trong section cũng như giữa các section với nhau.
  • title - (Tùy chọn) Tiêu đề cho widget. Nếu như bạn không đặt, mặc định nó sẽ là 'List1' (nên đặt).
  • pageType - (Tùy chọn) Có thể là 'all,' 'archive,' 'main,' hoặc 'item,' với 'all' là mặc định nếu bạn không đặt. Thuộc tính này giúp widget chỉ hiện thị trên các trang được chỉ định, bạn nên xem bài viết về thẻ điều kiện trên website của mình để biết các kiểu trang ở trên.
  • mobile - (Tùy chọn) Có thể chọn 'yes', 'no,' hoặc ‘only’ với 'default' được chọn là mặc định. Cái này quyết định widget này có hiện trên điện thoại hay không. Chỉ có các widget Header, Blog, Profile, PageList, AdSense, Attribution sẽ hiện trên điện khoại khi nhận được giá trị 'default.'
Danh sách các loại widget có thể sử dụng:
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar
Những thẻ section và widget sẽ được chuyển đổi thành thẻ <div> khi người dùng xem blog các bạn có thể tùy chỉnh bằng css bằng class hoặc id mà bạn đã đặt như sử dụng html bình thường. Section trong code về template ở đầu trang mình nghĩ chắc không cần phải nói nữa, đây là cái quan trọng cần phải có
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
Widget này thuộc tính thì chắc mình khỏi phải nói, còn công dụng của nó là lấy toàn bộ nội dung trong blog của bạn ra trang chủ.Tiếp tục nếu bạn lưu lại giao diện với đoạn code trên trang web của bạn đã sử dụng được, bạn hãy refresh lại trang và vào lại Bố cục>>Chỉnh sửa HTML bạn sẽ thấy những thẻ widget sẽ bung ra rất nhiều đoạn mã riêng của nó, nếu các bạn muốn tùy chỉnh nó các bạn phải đọc về "Thẻ lập trình Blogger".

Trong đó :
Thẻ section là nơi để chứa các widget của blog chúng ta, khi bạn vào phần bố cục, tất cả những vị trí của mọi thành phần đều nằm trong section này.

Lưu ý : là một template tối thiểu phải có một thẻ section bên trong nó. Mình nghĩ nhiêu đây là đủ để các thiết kế lại một giao diện riêng cho bạn để thiết kế một template đơn giản. Minh biết bài viết có hơi lủng củng, khó hiểu, do đó nếu không hiểu về bất kì thứ gì trong bài viết này, hãy để lại nhận xét bên dưới.
Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

Bài Viết Cùng Chủ Đề

Next
« Prev Post
Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Icon CommentsIcon Comments

Đăng Nhập để bình luận chém gió.
Đăng ký: Đăng Nhận xét (Atom)
Được tạo bởi Blogger.

Blog Tự Học Seo Online

Popular

  • [Share] - Setiva Blogger Template Responsive
    Giao diện  Responsive là giao diện được rất nhiều blogger chọn hiện nay cho cả wordpress và blogspot , bởi vì  Responsive blogger templates...
  • [Tips] - Đặt backlink như thế nào là đúng?
    Chào các bạn khi chúng ta nói đến  backlink thì hầu như seoer nào cũng dùng tới nó vì đây là một lối seo blogspot nói riêng và seo website...
  • Blogspot không bị chặn nếu bạn gắn doman đúng cách cho nó
    Khi tự học seo bạn nên tự sắm cho mình một doman riêng để trải nghiệm cũng là để tạo riêng cho mình một thương hiệu. Và việc tiếp theo là ...
  • Kỹ thuật SEO mũ trắng và SEO mũ đen
    Trong seo các bạn thường nghe tới seo mũ trắng và seo mũ đen, nhưng thật chất là có seo mũ trắng, seo mũ đen, seo mũ xám ... Nhưng bài này t...
  • [Tips] - Làm sao để title, description, keywords cho mỗi trang khác nhau
    Chào các bạn nói đến  title, description, keywords thì chắc ai cũng biết nếu làm blog, đối với seo thì chúng ta có rất nhiều kiểu seo blogs...
  • Blogger Template Seo Friendly HTML5/W3C
    Blogger Template Seo Friendly thì hôm bữa tôi đã giới thiệu cho các bạn một mẫu template blogspot tốt rồi đúng không nào nhưng chuẩn  HTML...
  • Seo từ khóa lên top 10 nhanh nhất với google plus
    Có nhiều bạn đặt vấn đề với tôi bằng những câu hỏi khá ngay ngô rằng " Làm Sao Để Seo Từ Khóa Lên Top 10 Nhanh Nhất ", tôi cũng đã...
  • SEO và nỗi lòng của những người làm SEOer
    Tôi chỉ là một anh chàng chuyên chia sẻ kinh nghiệm seo blogspot nên tôi không dám nhận mình là một seoer, nhưng những người bạn của tôi, h...
  • Học SEO Blog - Cách Seo Site Mới Với Blogspot
    SEO 1 site mới bằng blogspot đối với các bạn tự làm seo là 1 điều hoàn toàn bỡ ngỡ, không biết nên bắt đầu từ đâu, và seo như thế nào? Và nh...
  • Khám Phá Blog chia sẻ ebook seo onet
    Ebook seo là một cuốn sách dậy seo do trường đào tạo seo cung cấp cho học viên khi các bạn đi học seo tại trung tâm đó. Và cũng chính vì l...

Lưu trữ Blog

  • ►  2016 (8)
    • ►  tháng 3 (1)
    • ►  tháng 2 (4)
    • ►  tháng 1 (3)
  • ▼  2015 (225)
    • ►  tháng 11 (9)
    • ►  tháng 10 (14)
    • ►  tháng 9 (9)
    • ►  tháng 8 (27)
    • ►  tháng 7 (39)
    • ▼  tháng 6 (50)
      • 7 forum đi baclink dofollow chuẩn nhất hiện nay
      • Khám Phá Blog chia sẻ ebook seo onet
      • Quy trình đào tạo seo của Khám Phá Blog
      • Có nên tự học seo qua ebook seo hay không?
      • Chuyển pdf sang word trực tuyến không bị lỗi font
      • Làm sao để xây dựng Domain Authority, backlink tự ...
      • [Tips] - Bạn đã có định hướng seo cho mình chưa?
      • [Tips] - Tự làm code chuẩn seo cho blogspot
      • [Share] - 200 Forum đi link có kèm chỉ số Pagerank
      • [Share] - Templates blogspot chuẩn seo tuyệt đối 100%
      • [Tips] - Thủ thuật khống chế css và js mặc định củ...
      • [Tips] - Hướng dẫn tối ưu blogspot chuẩn PageSpeed...
      • [Share] - Download Free Betastore Blogger Template...
      • [Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5
      • Tối ưu liên kết giữa các video Youtube
      • Tối ưu nội dung khi đăng video youtube
      • [Tips] - Những thủ thuật blogspot cần phải có cho ...
      • [Tips] - Quy trình để seo blogspot từ A đến Z
      • [Tips] - Mẫu PopularPosts đẹp mà bạn nên dùng
      • [Tips] - Tabber widget chuyên nghiệp cho blogspot ...
      • [Tips] - Menu chuyên mục Css full Responsive cho B...
      • [Tips] - Share templates blogspot đầy đủ thành phần
      • [Share] - Chia sẻ bản quyền Avast 2 năm miễn phí
      • [Tips] - Google đã thay đổi thuật toán về seo
      • [Share] - Templates blogspot chuyên nghiệp chuẩn seo
      • [Share] - Simple SEO templates blogspot chuẩn seo
      • [Share] - Share templates blogspot bán hàng chuyên...
      • [Tips] - 6 Lời khuyên bạn nên làm khi seo blogspot
      • [Tips] - Lấy data và cách phòng tránh bị ăn cắp da...
      • [Tips] - Tầm quan trọng của liên kết nội bộ (inter...
      • [Tips] - Recent Posts dạng tin tức cho blogspot
      • [Tips] - Bài viết liên quan đơn giản cho blogspot
      • [Tips] - Menu Responsive Blogspot
      • [FB] - 9 Tiêu chí SEO Fanpage Facebook lên top google
      • [Share] - Templates blogspot bán hàng mydeal.vn
      • [Vip7] - Templates blogspot bất động sản Responsive
      • [Tips] - Câu hỏi tại sao của newbi về seo blogspot
      • [Tips] Làm sao để thêm bài viết liên quan cho blog...
      • [Tips] - Menu responsive cho blogspot
      • [Tips] - Vô hiệu hóa JS mặc định giúp blogspot loa...
      • [Tips] - Làm sao để title, description, keywords c...
      • [Vip6] - Templates blogspot tin tức chuẩn seo
      • [Share] - Templates blogspot bán hàng miễn phí đẹp...
      • [Share] - Templates chia sẻ video blogspot miễn phí
      • [Vip5] - Templates blogspot bán sticker dán tường
      • [Share] - Templates blogspot đã được tối ưu seo
      • [Tips] - Đặt backlink như thế nào là đúng?
      • [Share] - Giao diện blogspot tin tức chuẩn seo
      • [Tips] - Hướng dẫn chi tiết cách tích hợp Responsi...
      • [Tips] - Popup like box với chỉ dẫn đẹp cho blogspot
    • ►  tháng 5 (77)

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu