Học Cùng Con Yêu: thu-thuat-blogpost

Học Cùng Con Yêu

Sự kiện tiêu biểu

Tin hot

Hiển thị các bài đăng có nhãn thu-thuat-blogpost. Hiển thị tất cả bài đăng

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

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

Nhấn vào Chủ đề
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:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>

<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>

</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é:

CSS cơ bản cho người mới (đủ dùng để sửa giao diện web)
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é!

chia-se-kt, thu-thuat-blogpost

Hoàng Thiên

Tạo nút cuộn trang cho Blogspot bằng CSS cực đơn giản

Đầu tiên các bạn cần có một nút cuộn trang cho riêng mình. Để làm một nút cuộn trang các bạn hãy dùng các phần mềm như photoshop hoặc coreldraw nhé. Một cách nữa là các bạn có thể lên google tìm một số hình icon cuộn trang đẹp và tải về. Ví dụ mình tìm được một cái ảnh có đuôi .PNG như dưới đây.

Sau khi tải về máy mình tải ảnh đó lên trang này và lấy được link ảnh như sau:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPZ7Smf-v4Ss1lnz-XZ5WF0w7OyrXkfeAVzMQS4p8JUClJt5i3seWssOGDEkV9XCyShDNHZoqh3MDuxyb4REQoqepoZI4yizMnKDva6jHvHbc-mQGTVyRs0RTigRIBJFj9uho4JnA03Q/s1600/Top.png

Tiếp theo, các bạn vào Bố cục -> Thêm tiện ích (thêm ở đâu cũng được) --> HTML/Javascript

Phần tiêu đề: bỏ trống

Phần nội dung: Paste đoạn sau vào phần nội dung:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;z-index:1000;" href="#" title="Back to Top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPZ7Smf-v4Ss1lnz-XZ5WF0w7OyrXkfeAVzMQS4p8JUClJt5i3seWssOGDEkV9XCyShDNHZoqh3MDuxyb4REQoqepoZI4yizMnKDva6jHvHbc-mQGTVyRs0RTigRIBJFj9uho4JnA03Q/s1600/Top.png" alt="nút cuộn đầu trang"/>
</a>

Phần màu đỏ các bạn thay bằng link ảnh mà các bạn có nhé. Nếu không có ảnh thì cứ để nguyên như của mình cũng được. Trang của mình hiện đang dùng code này nên các bạn có thể xem demo trên trang này luôn.

Chúc các bạn thành công, nếu có vấn đề gì để lại comment mình sẽ giải đáp nhé.