Học Cùng Con Yêu

logo

Giới thiệu

Với mong muốn chia sẻ tới Quý vị phụ huynh, các em Học Sinh những cuốn sách, những phương pháp, những bài giảng ...để giúp các em học tập được vui vẻ hơn, bớt áp lực và hiệu quả hơn.

Hãy Vững Tin

Cố gắng lên
Đừng bao giờ gục ngã
Dù cuộc đời lắm bão tố phong ba
Hãy vững tin mà bước về
phía trước
Đừng bao giờ lùi bước lại
phía sau
Thôi bỏ đi những gì là quá khứ
Hãy đón chờ những thứ của
ngày mai
Và biết đâu trên những chặng
đường dài
Ta tìm thấy những gì mình
đã mất
(st)

Contact form

Người theo dõi

Tổng số lượt xem trang

FB

Design by - Blogger Templates | Distributed by Blogger Templates

Ngôn Ngữ

Made with Love by

Quick Spot Template is Designed Theme for Giving Enhanced look Various Features are available Which is designed in User friendly to handle by Piki Developers. Simple and elegant themes for making it more comfortable

Bánh trung thu nhập khẩu từ Malaysia

Mua hàng tại Nguyễn Kim

Bài đăng mới

quang cao
Sự kiện tiêu biểu

Tự thiết kế giao diện cho blogspot (dành cho người không biết code)

(Blogtamsu) -   Tạo một trang blog trắng tinh tình tình  Để tạo một trang web không có nội dung gì, các bạn đăng nhập vào blogger:  https://www.blogger.co....

Công Nghệ Webblog - Chuyên nhận rip, thiết kế, cung cấp: Template blogspot, template blogger chuẩn SEO, Tối ưu website, tích hợp tin tức, giỏ hàng cho blogger bán hàng...

 

Tạo một trang blog trắng tinh tình tình 

Để tạo một trang web không có nội dung gì, các bạn đăng nhập vào blogger: https://www.blogger.com 
  1. Nhấn vào Chủ đề
  2. Nhấn vào Chỉnh sửa HTML

Trong khung mà mình tô màu xanh da trời các bạn xóa hết nội dung bên trong đó đi. Click chuột trái vào trong khung, Ctrl + A, delete. Vậy là xóa xong hết code cũ.

Giờ các bạn copy đoạn code sau rồi patse vào chỗ bạn vừa xóa
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Vui cười lê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>
<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>
Lưu chủ đề lại thế là xong, giờ các bạn vào lại trang blog của mình sẽ thấy trang đó chẳng hiển thị cái gì và cũng không báo lỗi cái gì luôn. OK!

Các thành phần cơ bản trong code của blogspot

Trong một website thường có các thành phần cơ bản là header, menu, main, sidebar, footer ... Trong blogspot cũng không ngoại lệ, các bạn cũng có thể tạo đầy đủ các thành phần như một trang web thông thường. 
Như trang blogspot vui cười lên, sẽ có các thành phần như các bạn đang thấy. Để cho các bạn không rành về code cũng như không giỏi tiếng anh mình sẽ tạm gọi các phần của web theo tiếng Việt cho dễ nhé (các bạn nào học code nhìn sẽ khó chịu lắm đấy). Ok
Các thành phần cơ bản trong code của blogspot gồm:
Phần khai báo 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
HTML 
<html> ... </html>
Phần đầu trang head
<head> ... </head>
Khai báo CSS (nằm trong head)
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
Thân trang body
<body> ... </body>

Phần khai báo thường chỉ cần vậy thôi là ok. HTML là thể bắt buộc phải có rồi cũng không có gì phải bàn. Head cũng là thành phần không thể thiếu, sau này có rất nhiều thứ bạn cần phải đặt trong head đấy. Khai báo CSS được tập trung hết ở trong đoạn <b:skin> bạn muốn sửa gì giao diện thì vô đây là ok. Phần thân trang là phần hiển thị ra bên ngoài blog, tùy bạn xây dựng bố cục giao diện như thế nào thì nó sẽ hiển thị ra như vậy.

Xây dựng bố cục giao diện ban đầu cho blogspot

Bố cục của trang blogvuicuoilen sẽ có dạng như sau:
Để tạo được giao diện cơ bản này các bạn cần biết chút chút về HTML và CSS nhé, ai chưa biết thì xem thêm hai bài viết này nhé:
  1. CSS cơ bản cho người mới (đủ dùng để sửa giao diện web)
  2. HTML cơ bản cho người mới bắt đầu
Còn nếu chưa biết thì cũng không vấn đề gì, cứ đọc kỹ bài viết của mình sau đó copy, paste đúng chỗ là ok hết =_=

Tạo giao diện cơ bản cho blog của bạn

Code HTML: 
HTML giống như là bộ khung trong web của các bạn, mình sẽ hướng dẫn các bạn xây dựng bộ khung như hình ảnh demo phía trên nhé.
Đầu tiên, các bạn vào Chỉnh sửa HTML tìm đến đoạn <body> và </body>. Nếu khó tìm các bạn click chuột vào chỗ code rồi nhấn Ctrl + F. Nó sẽ hiện một khung seach ở ngay góc trên bên phải của khung HTML đó. Các bạn gõ vào <body> rồi nhấn Enter sẽ tìm được ngay chỗ có đoạn <body> trong HTML. Đây cũng sẽ là cách để các bạn rà soát code của mình nhé.
Sau khi tìm được đoạn <body>, các bạn xóa toàn bộ code giữa <body> và </body> sau đó paste đoạn code sau vào thay cho đoạn vừa xóa.
<div class='web'>
<div class='dau-trang'>
<div class='logo'></div>
<div id='dau-trang-phai'></div>
</div>
<div class="clear"/>
<div class='menu'></div>
<div class='than-web'>
<div id='than-web-trai'></div>
<div id='than-web-phai'></div>
</div>
<div class="clear"/>
<div class='chan-trang'>
<b:section class='chan-trang' id='chan-trang-cha' maxwidgets='1' showaddelement='yes'/>
</div>
</div>
Code CSS:
CSS các bạn có thể hiểu là code để định dạng cho HTML. Các bạn có thể hiểu nôm na như khi các bạn xây nhà, các bạn nói với thợ xây tôi muốn xây một cái nhà. Cái nhà mà các bạn nói chính là HTML, còn xây nhà to bé ra sao, kích thước thế nào nó chính là CSS. Mềnh giải thích mọi người hiểu chứ ... nếu chưa hiểu thì ... chịu!
Sau khi chèn đoạn HTML bên trên, các bạn tiếp tục tìm <![CDATA[ (cách tìm như phía trên mình hướng dẫn nhé). Copy đoạn CSS sau paste vào sau <![CDATA[
.web {
width:100%;
}
.dau-trang {
width:100%;
max-height: 100px;
}
.menu {
width: 100%;
min-height: 40px;
background: red;
}
.than-web {
width:85%;
margin:auto;
}
.chan-trang {
width:100%;
min-height: 200px;
background: green;
}
.logo {
width: 35%;
min-height: 100px;
background: orange;
float:left;
}
#dau-trang-phai {
width: 65%;
min-height: 100px;
background: #42c8fa;
float:right;
}
#than-web-trai {
width: 70%;
min-height: 300px;
background: yellow;
float:left;
}
#than-web-phai {
width: 30%;
min-height: 300px;
background: purple;
float:right;
}
Rồi, sau khi các bạn đã paste đoạn HTML vào trong cặp thẻ <body> và CSS trong <b:skin> các bạn Lưu chủ đề lại và xem lại xem web của các bạn như nào rồi (nhìn webs các bạn sẽ hơi shock đấy ^_^)
Do phần này cũng đơn giản nên mình không chụp lại ảnh demo nhé. Vậy là xong phần thiết kế bộ khung cho Blogspot rồi. Sau các bạn chỉ cần trang trí và đặt cho nội dung hiển thị vào các vị trí thích hợp là Ok.
Ai có thắc mắc gì hay không làm được để lại comment mình sẽ giải đáp nhé!

Thiết kế Prime X1 sang trọng nhưng giá bán chưa tới 4 triệu

Với mức giá chưa đến 4 triệu đồng, Prime X1 xứng đáng là smartphone có thiết kế đẹp, cấu hình mạnh mẽ và phù hợp với phân khúc tầ.

Xem thêm>>

Xem thêm>>

Đóng liên hệ [x]
hotline0916 72 69 59