Loading post navigation ...
 
 

Pro page

31
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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.


Enter your mail address:

31

Nhạc sĩ HOÀNG THANH TÂM

Chào bạn fandung,

Cám ơn bạn đã có những bài viết về thủ thuật blog rất hữu ích cho các blogger. Tôi có một thắc mắc nhỏ cho bài viết này là: Nếu dấu thanh navbar đi thì làm sao mình sign in vào blog của mình được? Rất mong câu trả lời của bạn để giải đáp thắc mắc này.
Xin cảm ơn,
Hoàng Thanh Tâm

fandung

À, có lẽ anh mới làm quen với Blogger :).

Thực ra lúc mới bắt đầu làm quen với blogger, em có bắt gặp ở 1 số blogspot có làm ẩn thanh Navbar, và em thấy hay hay. Nhưng lại nghĩ như anh "Làm ẩn rồi sao đăng nhập vô blog để post bài". Và để trả lời cho câu hỏi này, rất đơn giản là ta chỉ cần vào trang http://blogger.com rồi đăng nhập là được.

Cám ơn Nhạc sĩ đã ghé thăm Blog FD

tmtvietnam

Chào Dũng,cho mình hỏi chút nhé:

1-Làm thế nào để làm cái Footer như của bạn được?
Bạn cho mình CSS với nhé. Dĩ nhiên là mình không làm y hệt của bạn được.
2-Làm cái header pro như của bạn nữa?
3-Cách làm cái Previous Home và Next nữa?

Cảm ơn bạn nhé.
My blog: http://tmtvietnam.blogspot.com

Phan Dũng

1. Về cái footer, bạn có thể download code này về để tham khảo :
http://sites.google.com/site/fdblogsite/Home/codefooter.txt

2. Cái Header thì bạn phải tự thiết kế 1 cái banner, còn cái menu sổ dọc thì ban tham khảo ở đây:
http://fandung.blogspot.com/2009/04/tao-thanh-menu-nam-ngang-co-so-doc-dung.html
3. Còn về phần cái Previous Home và Next thì bạn vô đây xem hướng dẫn:
http://fandung.blogspot.com/2009/04/thay-oi-lien-ket-bai-ang-cu-hon-bai-ang.html

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

Finance

bạn cho hỏi làm thế nào có thể post hình vào comment hoặc chỉ đường dẫn hình tới comment nhỉ. cảm ơn bạn trước

Phan Dũng

@Finace: muốn post hình vào comment, bạn phải cài bản comment Media cho blog thì mới post đc. Cái này bạn có thể search trên google là có, hình như ở 1 site thủ thuật Việt đó, mình quên là site nào rồi.

Còn bạn nói chỉ đường dẫn hình tới comment là sao mình ko hiểu.

Finance

cảm ơn bạn đã reply. đúng là dùng phần mềm comment Media. mình cũng tìm trên google có mày blog viết hướng dẫn nhưng đều lấy về từ một blog thủ thuật nhưng bây giờ blog đó cũng " chuyển nhà rồi nên ko còn nữa bạn có còn phần mềm đó không cho mình xinh, cảm ơn bạn trước.

ý mình nói là đưa đường dẫn link ảnh từ web nào đó và phần comment đó chứ ko phải up từ PC lên

Finance

CHO minh nói thêm tý, ý mình nói là muốn post một tấm hình nên ở comment thứ 2 đấy nhé. ví bây giờ mình muốn post một tấm hình nên vài viết này thì làm như thế nào. vì ở khung comment này không thấy chỗ upload hình nên
mình vừa tìm được comment media roi. Entry đàu tiên thì vẫn post được hình nhưng comment tiếp theo thì chỉ được type thoi chứ ko được post hình nên. bạn giúp mình với

tmtvietnam

Chào Dũng,cho mình hỏi một số câu nhé:

1-Làm thế nào để có cái nút lên xuống 2 mũi tên như của bạn được?
Bạn cho mình CSS với nhé. Dĩ nhiên là mình không làm y hệt của bạn được.
2-Làm cái mục "thông tin" pro như của bạn (visit,traffic rank...)?
3-Cách làm cái Logo liên kết các blog hình chạy như của bạn nữa?
Rất mong hồi âm của Dũng

Cảm ơn bạn nhé.
My blog: http://tmtvietnam.blogspot.com

fandung

@Finance : cái comment Media mình ko có code của nó bạn ơi. tại cái này ít người dùng nên mình ko quan tâm mấy tới nó.

An : cái nút lên xuông này bạn có thể tham khảo bài viết ở link bên dưới (có 2 cách luôn)

http://fandung.blogspot.com/2009/05/tao-nut-len-au-trang-voi-hieu-ung-tu.html
http://fandung.blogspot.com/2009/04/lenh-nhay-len-xuong-trang-on-gian-voi.html

- Còn cái mục thông tin blog đó là bạn đăng kí bên http://www.histats.com rồi nó sẽ cho bạn code. còn xếp hạng của alexa thì miễn phí, bạn vào đây http://alexa.com/siteowners/widgets rồi điền địa chỉ Blog của ban vào là nó sẽ cho code.
- còn cái code logo : ban có thể tham khảo code của mình, link đây:
http://sites.google.com/site/fdblogsite/Home/code-logo.txt

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

Finance

cảm ơn Phandung đã reply. cho minh hỏi thêm chút là nếu mình muốn post 1 tấm hình đi kèm với comment này thì làm như thế nào ?

và làm thế bạn có được More Emoticons đấy nhỉ, chỉ mình với được không?

- ở blogspot này mình thấy nó không chuyên nghiệp như Opera thì phải bạn nhỉ? như ở opera thì mình có thể Edit được comment của khách và post hình bất cứ ở comment nào, còn ở blogspot thì mình thấy chỉ có thể xóa comment được thôi chứ không thấy Edit, không post hình dược từ commemt thứ nhất của entry phải không bạn?

fandung

Finance : đây là thủ thuật tạo bảng More Emoticons như của mình
http://fandung.blogspot.com/2009/05/modify-form-comment-bai-6-them-bieu.html

Finance

cảm ơn fandung nhiều mình làm được cả rồi :D

WINDSOR - THE WORLD OF VINYL

Cảm ơn bạn rất nhiều

hysoka

=))

Unknown

mình làm theo cách của bạn mà sao ko đc bạn ah. ko biết có thiếu bước gì ko nữa

Khách (ẩn danh)

alo anh Phan Dung anh add nick: vuilendi_t2_cl_qt_vn nha. thank

whiskyre

Bác Dũng ơi! cho em hỏi muốn tạo cái menu sổ giống trang nhaccuatui.com thì làm thế nào?
^^
thanks bác nhé!
web thân thiện hướng dẫn bằng hình ảnh trình bày rất hay

Quyền

oh.thnsk bài viết .m muốn nó chỉ là một trang blog cá nhân ///pro xíu thoy.hj

Unknown

Chào bạn..Nếu có thể ,bạn dành chút thời gian chỉnh sửa blog cá nhân giúp mình với được không ,về chi phí thì bạn có thể xem thế nào cho phù hợp cũng được ,cảm ơn bạn
yahoo của mình đây : future_Designer_v
hoặc phone : 01222249995
Chào bạn nhé !

Khách (ẩn danh)

Đã áp dụng 1 số vào blog em hi

Khách (ẩn danh)

:X

GeniePro

bai viet cua ban rat hay. minh hien dang lam blogger, con mot so diem minh chua lam duoc. minh muon chen banner tren header de nhin giong web hon. ban co the huong dan minh cach chen then banner ko. thanks nhe

kurabe1838

Bạn ơi blog minh có 2 cột mà giờ mình muốn là khi bos bài thì bấm vào tiêu dề cột bên đây thì bên kia bài viết hiện lên mà không biết làm thế nào mong bạn chỉ giúp.thanks

ADMIN

cho mình hỏi chút về mấy cái BODY, Header,... ở đâu vậy

Phạm Tuấn Minh

Bạn cho mình hỏi làm sao có thể vào chỉnh sửa CSS của blogspot đươc?

KT

cho mình hỏi cách thêm widget dưới chân (footer ) đi bro :)

Unknown

cho mình hỏi cách thêm widget dưới chân (footer ) đi bro

loc

fandung làm 1 bài hướng dẫn tất tần tật về cách làm blog có giao diện và cách trình bày giống blog FD đi, chưa có thủ thuật tổng quát để chế biến 1 blog giống FD, ai cũng đang chờ

Gia Khanh

điều chỉnh chiều rộng của menu ở đâu hả anh

Khách (ẩn danh)

cho minh hoi blog spot vs sites google cai nao seo tot hon



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home