Thủ thuật BlOg : Làm cho blogspot trông pro hơn.

Biến BlOgsopt thành WEB
(dành cho người mới bắt đầu với blogspot)

[FD's BlOg] - Bài viết hôm nay mình sẽ giới thiệu tổng quát để làm cho blogspot trông pro hơn, đẹp mắt hơn. (ở đây mình chỉ giới thiệu những cái cơ bản, tức là sửa chữa lại từ các nền tảng có sẵn của các Theme. Còn phần sửa lại hòan tòan bố cục của BlOg (HTML lẫn CCS ), thì mình không đề cập ở đây).

BlOg gồm có 3 phần chính :
+ Header : gồm thanh Navbar và Banner.
+ Body : gồm phần đăng bài + các Widget
+ Footer : phần này bạn có thể tạo thêm các widget để trông pro hơn.

►Bắt đầu
1. Header:
- Để trông blog của bạn giống 1 Web hơn, điều đầu tiên là phải dấu thanh Navbar đi.

"Blogger NavBar là một thanh điều hướng và thanh công cụ có biểu mẫu cho phép mọi người tìm kiếm chỉ trong weblog của bạn sử dụng tính năng SiteSearch của Google và cho bạn khả năng xem những gì đang xảy ra với những blog khác mới được công bố gần đây chỉ bằng một nhấp. Thanh này thay thế các quảng cáo từng được hiển thị phía trên cùng của một số blog."

Để làm việc này, rất đơn giản, bạn vào phần chỉnh sửa Code HTML (bên phần layout- Bố cục), tìm đến dòng :
]]></b:skin>

thêm vào đoạn mã sau:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Thế là xong, thanh Navbar đã biến mất. Thật đơn giản . Và bạn cũng hoàn toàn yên tâm, việc làm này không vi phạm những quy định cũng như chính sách sử dụng dịch vụ của Google Blogger.

- Tiếp đến là việc chèn 1 Banner vào Header. Việc này tùy vào mỗi người, có thể tự tạo ra banner hay 1 logo... mang phong cách riêng cho blog của bạn. Phần này mình cũng chưa hài lòng lắm với blog của mình.

2. Body:
a. Về các Widget :
- Khuyến cáo các bạn nên tự tạo các widget riêng cho mình, không nên xài những cái có sẵn mà blogspot hỗ trợ, sở dĩ mình nói như vậy là để tạo ra 1 cái riêng cho blog mình, và làm như thế mới thu hút người xem.
- Dễ nhất là tạo các widget HTML/Javascript mà blogspot hỗ trợ, rồi viết code vào đó để tạo ra 1 widget (nhớ để trống tiêu đề của widget HTML/Javascript khi bạn chèn vào). Như vậy widget hiện lên sẽ không có tiêu đề (chỉ có phần nội dung), không s ao, bạn có thể tự viết 1 tiêu đề cho từng widget này (viết vào phần đầu mỗi code khi bạn chèn code vào widget HTML/Javascript).
- Thông thường các widget (sidebar) này nằm ở bên trái hoặc phải phần bài đăng. Nếu các bạn muốn nó hiện ở phần bài đăng (trên hoặc dươi bài đăng), thì các bạn có thể tạo nó ở bên sidebar, rồi di chuyển chúng tới nơi muốn đặt, việc di chuyển chỉ đơn giản là nhấp và kéo chuột.(phần này bạn thực hiện trong bố cục --> phần tử trang).

b.Phần bài đăng
- Để trông pro hơn, các bạn nên sử dụng Nút "xem thêm..." ở mỗi bài v iết. Điều này rất có lợi cho việc load trang chính (đối với các bài có nhiều hình hay bài dài, việc này ảnh hưởng nhiều tới việc load trang chính), ngòai ra còn về việc thẩm mỹ. Điều này sẽ làm cho bố cục của trang chính trông gọn gàng hơn.
- Để làm điều này bạn có thể xem chi tiết tại đây.

c. Tạo các menu truy cập:
- Để làm việc này bạn tạo 1 cái widget HTML/Javascript. Các widget này cái bạn có thể đặt ở đâu tùy, thông thường đặt ngay trên đầu, ngay sau banner, hoặc đặt ở các sidebar bên trái.
- Ở đây mình giới thiệu 2 lọai menu : menu đơn thuần, và menu dạng cha con.

menu đơn thần
Menu kiểu cha con

- Hướng dẫn tạo menu đơn thuần : Các bạn có thể tham khảo đọan code bên dưới

<style type="text/css">
.nav2sub{ // CCS của menu
background:#F57900; //màu nền
margin-top:1px;
padding:1px;
color: #fff;; //màu chữ
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #fff solid; //màu và độ rộng của đường viền
cursor:pointer;
}
</style>
<script type="text/javascript">

function otab()
{
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background='#39'" onmouseout="this.style.background='F57900'" class="nav23sub" onclick="window.location.href=\'http://fandung.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>'); // tác động đổi màu khi rê chuột vào, các bạn có thể thay đổi màu tùy thích
}

function ctab(){
document.write('<\/table>');
}
function otab(child_id)
{
document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-">');
}

// end of define functions!

</script>
<table border="0" bordercolor="#999" style="background-">
<tr><td onmouseover="this.style.background='#039'" onmouseout="this.style.background='#F57900'" class="nav2sub" onclick="window.location.href='http://fandung.blogspot.com'">HOME</td></tr>
<tr><td onmouseover="this.style.background='#039'" onmouseout="this.style.background='#F57900'" class="nav2sub" onclick="window.location.href='http://fandung.blogspot.com/2009/02/nghe-nhac.html'">MUSIC</td></tr>
<tr><td onmouseover="this.style.background='#039'" onmouseout="this.style.background='#F57900'" class="nav2sub" onclick="window.location.href='http://fandung.blogspot.com/2009/02/test.html'">PICTURE</td></tr>
<tr><td onmouseover="this.style.background='#039'" onmouseout="this.style.background='#F57900'" class="nav2sub" onclick="window.location.href='http://fandung.blogspot.com/2009/02/push-button-publishing-phan-tien-dung.html'">ABOUT ME</td></tr>
<tr><td onmouseover="this.style.background='#039'" onmouseout="this.style.background='#F57900'" class="nav2sub" onclick="window.location.href='http://fandung.blogspot.com/2009/02/contact-me.html'">CONTACT ME</td></tr>
</table>

- Hướng dẫn tạo menu cha & con : mình đã có viết 1 bài hướng dẫn, các bạn có thể xem tại đây.

3. Footer:
- Phần này tùy vào bạn. Có thể tham khảo footer của mình.

Chúc các bạn thành công.