003. Tự tạo cho mình 1 cái theme(giao diện chính của BLOG)./ a♥JJAP

Bạn vào trang google tìm kiếm theme cho bloger miễn phí.

Chọn vài cái giao diện chơi cho quen dần đã rồi hãy bắt đầu chỉnh sữa.

Rồi sai này nếu thích có thể từ thiết kế cho mình ở phần nâng cao.

NÂNG CAO:

Cấu trúc của một trang web cơ bản:

<?xml version="1.0" encoding="UTF-8" ?><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>
✔ LINK ICON CỦA TRANG WEB:
<link href='LINK ICON CỦA BẠN' rel='icon' type='image/x-icon'/>
<b:skin><![CDATA[

✔ Những đoạn css qui định về thuộc tính các module trên blog
body{Thuộc tính toàn blog..;}
‪#‎box{thuộc tính trang được hiển thị nội dung}
‪#‎header{}
‪#‎main-outer{}
‪#‎footer{}
#main{}

✔ Ẩn thanh điều hướng của blog:
‪#‎navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}

]]></b:skin>
</head>
<body>

✔ Thanh điều hướng của blog:
<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>

✔ Các module hiển thị trên blog:
<div id='box'>
<div id='header'>Nội Dung header</div>

<div id='main-outer'>
<div id='sidebar1'>Nội Dung sidebar1</div>
<div id='main'>Nội Dung Bài Viết</div>
<div id='sidebar2'>Nội Dung sidebar2</div>
</div>

<div id='footer'>Nội Dung Footer</div>

</div></body> </html>

Sau đâu là những cách thường dùng để CSS(Thuộc tính trang modun, tiện ích)

<b:skin><![CDATA[

]]></b:skin>
Hoặc có thể dùng:

</style>

Hoặc ta lưu lại file đó dưới dạng .css .js rồi đưa lên mạng
<link href="Link-CSS" type="text/css" rel="stylesheet" />

Còn ở dưới là cách để các Javascript:

1. Điều chỉnh sidebar.
(Tạo mục Thêm Tiện Ích của blogspot cho sidebar).

Bạn chèn Ở giữa thẻ: thay “thẻ đóng” thành.

<b:section class='sbar1' id='sbar1' showaddelement='yes'/>

KẾT QUẢ _____( Khi làm nhiều tiện ích NHỚ THAY 1 => 2,3 kẻo khi lưu bị lỗi ko lưu được).

Lưu Lại.

2. Điều chỉnh header.

(Tạo header như mẫu header mẫu của blogspot).

Header mặc định của blog là một tiện ích cho phép thay đổi tiêu đề và mô tả của blog. ngoài ra còn cho phép thay đổi banner cho header.

Bạn chèn đoạn code sau:

<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>

</b:section>

Lưu Lại.

3. Điều chỉnh phần bài đăng (main) (hiển thị nội dung các bài viết ra blog).

Trong template này mình đã cho các bài viết nằm trong ID main. Để hiển thị nội dung các bài viết ra blog bạn chỉ việc thực hiện như sau:

Bạn chèn đoạn code sau:

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

KẾT QUẢ _____________________

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

Lưu Lại.

CSS bạn có thể tam khảo ở đây:
<b:skin><![CDATA[.........]]></b:skin>

✔ Những đoạn css qui định về thuộc tính các module trên blog.

/*-----------------------------------------------

Blogger Template Style

Name: Lê Quý Giáp

Blog: http://giapqb.blogspot.com/

----------------------------------------------- */

/*-----------NEN + LINK CUA TOAN BO TRANG---------*/

body{background:url("http://3.bp.blogspot.com/.../JiyeKMpLRe8/s000/wrapper1.jpg") repeat-x scroll 0 0 #44AC50;color:#333;font:small Georgia Serif;margin:0;}

#box{Background:#F0F2F3;Width: 1024px;Margin:0 auto;border:1px solid #CBCBCB;font-size:12px;} /*-----TOAN TRANG-----*/

#main-outer{Background:#F0F2F3;border:0px solid #CBCBCB;margin:0px;;word-wrap:break-word;font-size:12px;} /*BAI VIET + MODUN PHAI */

a:link,a:visited{color:#2024DC;text-decoration:none;outline:none;}

a:hover{color:#FF00FF;text-decoration:underline;outline:none;}

a img{border-width:0}

h2.date-header{margin:1.5em 0 .5em;display:none;color:#2024DC;}

.jump-link {color:#d7034e;float:right;margin-right:0px;padding:0; text-align: right;}

.jump-link a{color:#d7034e;float:right;margin-right:0px;margin-top:-13px;padding:0; text-align: right;}

.jump-link a:hover{color:#FF00FD}

.outer-wrapper{height:768px;}

/* -----------BAI VIET --------------- */

#main{Background:#FFFFFF;width:700px;float:left;margin-left:2px;margin-top:3px;padding:5px;border:1px solid #CBCBCB;font-family:Arial,Helvetica,Sans-serif;}/*----BAI VIET----*/

.main{border-bottom:1px solid #CBCBCB;padding:5px 10px 0 10px;margin-bottom:2px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold; }

.main-title{color:#D108C0;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:16px;line-height:24px;font-weight:bold;}

.wrapfullpost{}

.post-body img {max-width:99% !important;}

.post{border-bottom:1px solid #CBCBCB;padding:5px 10px 0 10px;margin-bottom:2px;}

.post-title{color:#D108C0;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:14px;line-height:24px;font-weight:bold;}

.post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;color:#2E00B8;text-decoration:none;}

.post-title strong,.post-title a:hover{color:#D108C0;text-decoration:none;}

.post-body{margin:0px;padding:0px 10px 0px 0px;font-family: Arial, Verdana;font-size: 14px;line-height: 20px;}

.post-footer{margin:5px 0;}

.postmeta-primary{color:#EFE7D9;font-size:14px;text-transform:uppercase;padding:0 0 5px 0}

.postmeta-secondary{color:#EFE7D9;font-size:14px;padding:0 0 15px 0}

.postmeta-primary a,.postmeta-secondary a{color:#D108C0}

.postmeta-primary a:hover,.postmeta-secondary a:hover{color:#DAED07}

/*----------------SIDEBAR TONG HOP-----------------*/

#sidebar{width:302px;Background:#EDFEEC;float:right;border:1px solid #CBCBCB;font-size:16px;margin-right:2px;margin-top:3px;word-wrap:break-word; overflow:hidden;}

#sidebar h2{color:#F0F8FF;text-align:center;font-size:16px;line-height:28px;font-family:Arial;font-weight:bold;margin:0 0 0px 0;padding:0px 0 0px 0;text-transform:uppercase;background: #DF0C10 url(https://lh6.googleusercontent.com/.../nen+tren+thanh+tien...) left bottom repeat-x;}

#sidebar ul{list-style-type:none;list-style:none;margin:0px;padding: 3px 10px 0px 10px;}

#sidebar ul li{padding:0px 0px 2px 0px;margin:0px 0 0 0;background:url(https://sites.google.com/site/giapqb/c5.png) left bottom repeat-x;}

#sidebar .widget{margin: 0 0 2px 0;padding:0px;}

#sidebartren {clear:both;padding:0px 0px 5px 0px;color:#1A1818;background:#F0F2F3;font-size:14px;;padding:0px;margin:0px;}

#sidebartren a{text-decoration:none;color:#1A1818;}

#sidebarduoi {font-weight:bold;clear:both;padding:0px 0px 5px 0px;color:#1A1818;background:#B5FBB1;font-size:12px;}

#sidebarduoi a{text-decoration:none;color:#1A1818;}

#sidebarduoi a:hover{text-decoration:none;color:#D108C0;}

#sidebarduoi h2{color:#FF00FF;text-align:center;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:7px 0 7px 0;text-transform:uppercase;background:url() left bottom repeat-x;}

#sidebarduoi ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}

#sidebarduoi ul li{padding:0px 0px 5px 0px;margin:0px 0 0 0;background:url(http://1.bp.blogspot.com/.../Kmjp9ta.../s000/widget-line.png) left bottom repeat-x;}

#header{clear:both;padding:0px 0px 5px 0px;color:#1A1818;background:#F0F2F3;font-size:14px;;padding:0px;margin:0px;}

#footer{margin-top:0px}

#footer{color:#F4F4F4;text-align:center;padding:4px 0;background:#232323;text-shadow:0 1px 0 #000}

#footer a{color:#F4F4F4}

#footer a:hover{color:#F4F4F4;text-decoration:none}

/* ___________XOA BO DONG ATOM______________ */

.feed-links{display:none !important;}

.posts-feeds, .feed-links {display:none !important;visibility:hidden !important}

003. Tự tạo cho mình 1 cái theme(giao diện chính của BLOG).

Xem Nhiều

Thủ thuật Máy tính

Thủ thuật Bloger

Phần mềm Hay

Dịch vụ của tôi.

GIỚI THIỆU VỀ CHÚNG TÔI

Giới thiệu về chúng tôi

Nhắn tin để được tư vấn miễn phí.