Tạo một blog giống như NewVina tại Blogger.com

Chỉ giống thôi và bạn có thể tùy biến nó theo ý thích của mình. Ngoài ra, tại Blogger.com, bạn có thể đăng ký tài khoản Google Adsense cho blog để đăng quảng cáo như một cách kinh doanh nhỏ.

Ảnh trang trí cho bài đăng

Có một bạn hỏi mình kinh nghiệm tạo một blog chuyên nghiệp. Có thể ý của bạn là giao diện ưa nhìn và giống 1 trang web. Tuy nhiên, mình cũng xin nhắc lại rằng chất lượng của bài đăng trên blog mới là yếu tố quyết định nhưng giao diện dễ nhìn thì thu hút thêm người xem hơn, nhất là giới trẻ. Và nó gián tiếp khiến cho đọc giả nghĩ rằng bạn không những giởi về kiến thức xã hội mà còn sành điệu về thiết kế, lập trình.

Hiện tại mình không còn đăng bài mới trên NewVina nữa mà đăng trên Vibay.blogspot.com.

Lưu ý: Để quá trình thiết kế không bị lỗi, bạn vui lòng đọc tất cả những hướng dẫn dưới đây.

Bạn cần chú ý những điều sau đây:
1- NewVina là blog 3 cột và mỗi cột hoàn toàn có thể được điều chỉnh độ rộng theo ý của chủ blog. Ở cột nội dung (bài đăng) bạn lưu ý độ rộng bao nhiêu là tốt nhất để đọc giả dễ đọc nhất, thường là 550 đến 630 pixel vì nó dễ cho đọc giả đọc xuống dòng và không bị nhảy dòng.

2- Ở ứng dụng slider ( bài đăng trượt ) là bài đăng trượt qua trượt lại ờ trang chủ. Các bài đăng này hiển thị theo nhãn (lable) để không trùng với các bài đăng phía dưới. Ví dụ: bạn có 3 bài đăng và bạn đăng nó trong các nhãn "Đặc biệt", "Chính trị", "Cuộc sống",... hay gì gì đó thì ứng dụng slider sẽ lần lượt hiển thị 3 bài đó chứ không hiển thị bài đăng có nhãn khác.

3. NewVina được thiết kế bằng ngôn ngữ lập trình XHTML, là ngôn ngữ lập trình chuẩn được phát triển từ HTML. Và XHTML đáp ứng được mọi nhu cầu xuất bản phức tạp nhất.

Và những điều khác sẽ nói ở cuối bài. Bây giờ chúng ta hãy bắt đầu.

1. Trước tiên bạn hãy tạo một blog mới để thiết kế thử. Việc này thì ai cũng làm đươc. Tuy nhiên, nếu bạn đã tạo 1 blog rồi thì sau khi đăng nhập vào Bảng điều khiển (Dashboard), bạn nhấp vào Tạo Blog để được cấp blog mới. Bạn có thể tạo nhiều blog với cùng một tài khoản.

2. Sau khi tạo blog mới xong, bạn tải xuống mã nguồn của NewVina tại đây. Yên tâm nó không có virus, nếu không yên tâm thì Nhấp vào đây https://sites.google.com/site/newvina/ để vào trang web chứa nó, chổ NewVina Template, nhấp vào Download để tải về máy.

3. Trở lại Bảng điều khiển của Blogger.com, tại Bảng điều khiển/ Dashboard, Lưu ý ở Blog bạn mới tạo, đừng đụng tới blog "đinh" của bạn nhé. Bạn nhấp vào Thiết kế/ Design, cửa sổ thiết kế hiện ra, nhấp vào Chỉnh sửa HTML/ Edit HTML. Bạn sẽ nhìn thấy câu "Tải mẫu lên từ một tệp trên ổ cứng của bạn" . Kế tiếp nhấp vào nút Chọn tệp tin, bạn hãy chọn tệp (file) mẫu template mà bạn đã tải xuống lúc nãy ( nó có dạng template-4106562514....xml). Sau khi chọn xong, nhấp vào nút Tải lên.

Bạn cứ yên tâm vì việc thay đổi giao diện không làm mất đi các bài mà bạn đã đăng. Nghĩa là nội dung của blog vẫn còn nguyên.

4. Bạn sẻ nhìn thấy câu cảnh báo giống như thế này:

Cảnh báo: Mẫu mới của bạn không bao gồm các tiện ích con sau:

HTML1
BlogArchive1
Profile1
Bạn muốn giữ các tiện ích này trên blog của mình hay xoá chúng đi?
Không thể hoàn tác thao tác xoá tiện ích.

Bạn nhấp vào nút XÓA TIỆN ÍCH, chờ gây lát cho blogger tải mã nguồn lên. Sau đó bạn sẽ thấy câu "Những thay đổi của bạn đã được lưu. Xem Blog". Nhấp vào Xem Blog để xem blog mới của bạn.

Tuy nhiên, bạn chỉ mới đi được nữa đường. Để tạo nên sự khác biệt theo ý thích, bạn cần phải chỉnh sửa lại màu sắc và các ứng dụng,.... bằng cách can thiệp vào mã HTML của nó.



Giờ bạn hãy thay đổi nội dung cho blog

1. Vào chỉnh sửa HTML.
* Thay đổi liên kết cho thanh Menu (Trình đơn chính)

Nhấn tổ hợp phím Ctrl+F, một công cụ tìm kiếm thông tin trên màn hình hiện ra. Nhập từ khóa "Trang Chủ" vào, bạn nhìn thấy trình đơn "Trang chủ" được tô đậm màu vàng ( đối với trình duyệt Google Chrome) hiện ra trong trình biên tập HTML của blog.

Nó có dạng <a expr:href='data:blog.homepageUrl'>Trang Chủ</a>. Mã này tự động link đến trang chủ blog của bạn nên bạn không cần thay đổi. Tuy nhiên, nếu muốn thì bạn vẫn có thể sửa link đến trang chủ của bạn. Ví dụ trang chủ blog của bạn là http://ddkmaithanh.blogspot.com thì bạn sửa mã trên thành
<a href="http://ddkmaithanh.blogspot.com">Trang Chủ</a>

Tương tự, thay đổi link cho các liên kết còn lại trên trình đơn

Ví dụ: Đổi <a href='http://newvina.blogspot.com/view/flipcard' target='_blank'>Sinh động</a> thành <a href="http://ddkmaithanh.blogspot.com/2011/10/phia-tam.html">PHÍA TẤM</a>
thì bạn sẽ có Link PHÍA TẤM trên menu.

Tiếp tục cho đến khi thay đổi hoàn toàn các menu còn lại.

* Thay đổi nội dung cho bản tin trượt (bản tin Slider), còn gọi là Featured Content Slider.

- Vào trình chỉnh sửa HTML của blog ( Nhớ là blog mới, đừng đụng tới blog "đinh"). Tìm đoạn mã

<!--Bài đặc biệt 1, theo nhãn-->. Có thể nhấn tổ hợp phim Ctrl+F để tìm.

Dưới đoạn mã trên là đoạn mã này:

<!--Bài đặc biệt 1, theo nhãn-->
<div class='fp-post'>
<div class='fp-thumbnail'><script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif&quot;;
showRandomImg = true;
zaBold = false;
numposts = 1;
label = &quot;Việt Nam&quot;;
home_page = &quot;http://vibay.blogspot.com/&quot;;
</script>
<script src='http://vibay-dpost.googlecode.com/files/dpost3.js' type='text/javascript'/></div>
</div>
<!--Đóng mã-->

Thay đổi các giá trị màu đỏ cho phù hợp với blog của bạn. Trong đó Việt Nam là tên một nhãn của blog. Những bài đăng mới nhất của nhãn này sẽ hiển thị trên bản tin trượt. Giả sử blog của bạn có nhãn là VĂN HÓA - XÃ HỘI, bạn đổi Việt Nam thành VĂN HÓA - XÃ HỘI. Đổi vibay.blogspot.com sang tên blog của bạn.

Lưu ý: Tên nhãn không được viết sai bất kỳ ký tự nào, nếu không trình duyệt sẽ không đọc được nó. Tốt nhất là sao chép và dán.

Tương tự, thay đổi bản tin trượt cho các bài Đặc biệt 2, 3,...

Chúng nằm trong các đoạn mã này:

<!--Bài đặc biệt 2, theo nhãn -->

<!--Bài đặc biệt 3, theo nhãn -->

Trong bản tin trượt của NewVina chỉ có 3 bài đăng, nếu muốn nhiều hơn bạn chỉ việc sao chép đoạn mã của Bài đặc biệt 1 rồi dán vào dưới đoạn mã của bài đặc biệt 3. Sau đó sửa tên nhãn là được. Lưu ý, chỉ nên tạo tối đa 5 đến 7 bản tin thôi, nhiều quá sẽ làm nặng blog, mất thời gian để đọc giả tải blog về trình duyệt của họ.

* Thay đổ độ rộng cho nội dung bài đăng ( còn gọi là post body )

Thay đổi độ rộng của bài đăng thì phải thay đổi độ rộng của sidebar

Các bước thực hiện:

- Vào trình chỉnh sửa HTML, Tìm đoạn mã này:

/* Header-----------------------------------------------*/

Dưới nó là đoạn này:

#header-wrapper{width:970px;margin:0 auto 0;height:35px;padding:10px 0;overflow:hidden;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;}
#header h1{color:#0000ff;margin-top:0px;margin-left:0px;padding:0px 0px 0px 10px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:40px;line-height:30px;}
#header .description{padding-left:15px;color:#0000ff;font-size:14px;padding-top:0px;margin-top:-25px;}
#header h1 a,#header h1 a:visited{color:#0000ff;text-decoration:none}
#header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:51%;overflow:hidden;}
#header2 .widget{padding:0px 10px 0 10px;float:right}

/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{width:970px;margin:0px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background: #fff;border-top: 1px solid #BBBBBB;}
#content-wrapper{background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUz09_eEOt5ctoRjlxZJJosYTDCa4g-DJD9rri7kgAWFWQRriTMVzU-TlYvbtmVK7WpjkUfuStYuV4NP-Gcy-UCKRuzR-UQ0pWe6Tke8bfrZdeV1lCo_BrXhrwKjUrIAq4Wl3a62F-Dw/s1600/main-bg.png) 520px top repeat-y;}
#main-wrapper{width:520px;padding-left:1px;padding-right:5px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
#lsidebar-wrapper{width:280px;float:left;margin-left:10px;margin-right:5px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
#rsidebar-wrapper{width:135px;float:right;margin-right:10px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}

Trong đó, header-wrapper là độ rộng của header. Độ rông header của NewVina là 970px, bạn có thể tahy đổi độ rộng này cho phù hợp với blog của mình. Trường hợp người ta muốn nó thích hợp với mọi màn hình máy tính thì chia độ rộng theo tỉ lệ phần trăm. Ví dụ: width:95%

#outer-wrapper{width:970px là độ rộng phần thân của blog.

#main-wrapper{width:520px là độ rộng của bài đăng. Độ rộng của bài đăng tốt nhất là trong khoảng 550 đến 600 px.

#lsidebar-wrapper{width:280px là độ rộng của sidebar chính giữa blog.

#rsidebar-wrapper{width:135px là độ rộng của sidebar bên phải của blog.

Lưu ý cái này, tổng độ rộng của bài đăng và các sidebar phải bằng hoặc nhỏ hơn độ rộng của blog ( 520+280+135 = 935, tức là nhỏ hơn 970 )

* Thay đổi màu sắc của Giao diện, các ứng dụng Javascript, các tiện ích bài mới đăng, bài đăng liên quan dưới mỗi bài, tạo công cụ tìm kiếm cho blog và một mớ bồng bông khác theo ý thích của bạn

Sẽ cập nhật sau

- Thay đổi màu sắc của sidebar:
Các mã màu html có dạng giống như thế này color: #4E4E4E;

Tìm đoạn mã mã này trong trình chỉnh sửa HTML của Blog:

/* Sidebar Content----------------------------------------------- */
.sidebar{margin:0 0 10px 0;color: #4E4E4E;}
.sidebar a{text-decoration:none;color: #0000ff;}
.sidebar a:hover{text-decoration:none;color:#0000ff;}
.sidebar h2{color:#fff;background:#0000ff


Thay đổi mã màu theo ý thích. Lưu ý cái này .sidebar h2{color:#fff;background:#0000ff

Nhấp vào đây để lấy mã màu HTML.

Tương tự, bạn có thể thể thay đổi màu sắc bất kỳ đâu trong blog của bạn.

- Tiện ích bài mới đăng ở sidebar:

Vào Thiết kế, bạn sẽ thấy tiện ích bài Mới Đăng, nhấp vào chỉnh sửa.
Dán mã dưới đây vào tiên ích:

<!-- Recent Posts Start -->
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://vibay.blogspot.com/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End -->

Thay đổi các giá trị màu đỏ cho phù hợp với blog của bạn. Trong đó 10 là số bài đăng mới sẽ hiển thị.

- Thay đổi màu sắc cho tiêu đề của blog: Như bạn thấy, tiêu đề của NewVina là NewVina màu xanh dương. Bạn có thể thay đổi màu của nó như sau:

+Vào chỉnh sửa HTML, tìm đoạn mã như dưới đây:

#header h1 a,#header h1 a:visited{color:#0000ff;text-decoration:none}

Sửa giá trị màu đỏ theo ý thích của bạn.

*Tạo công cụ tìm kiếm cho blog:

Google Tìm kiếm tùy chỉnh có thể tìm thấy bất cứ thứ gì có trong blog của bạn. Rất dễ dàng để đăng ký một công cụ tìm kếm tại đây. Sau khi đăng ký xong, lấy mã của nó để nhúng vào blog như sau:

+ Vào trình chỉnh sửa HTML, tìm đoạn mã như dưới đây:

<!--Google custom search-->

Dưới đoạn mã trên là đoạn này:

<form action='http://www.google.com.vn/cse' id='cse-search-box'>
<div>
<input name='cx' type='hidden' value='partner-pub-2546779154038653:7843516140'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input name='q' size='30' type='text'/>
<input name='sa' type='submit' value='Tìm Ki&#7871;m'/>
</div>
</form>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&quot;elements&quot;, &quot;1&quot;, {packages: &quot;transliteration&quot;});</script>
<script src='http://www.google.com/cse/t13n?form=cse-search-box=vi%2Cru%2Car%2Cel%2Cml%2Cam%2Cpa%2Cta%2Cgu%2Cmr%2Cte%2Cti%2Csa%2Cne%2Chi%2Cbn%2Ckn%2Cfa%2Csr%2Cur' type='text/javascript'/>

<script src='http://www.google.com.vn/coop/cse/brand?form=cse-search-box&amp;lang=vi' type='text/javascript'/>

Thay thế chúng bằng đoạn mã tìm kiến tùy chỉnh mà bạn vừa tạo ở Google Tìm kiếm tùy chỉnh.

* Tạo liên kết (link): Có 3 liên kết, liên kết thông thường, nâng cao và siêu liên kết.

-Liên kết thường: là link khi nhấp vào nó trình duyệt web sẽ tải trang web mới về thay thế cho trang bạn đang xem. Nghĩa là trang bạn đang xem biến mất.

Mã của nó được viết như sau:

<a href="URL">Tên liên kết</a>

Ví dụ: <a href="http://www.youtube.com/watch?v=_Olcb71C_wY&feature=related">Nghệ thuật đặt câu hỏi trong giao tiếp.</a>

Kết quả: Nghệ thuật đặt câu hỏi trong giao tiếp.

- Liên kết nâng cao: Là link mà khi nhấp vào, trình duyệt sẽ tải trang web về và mở ở tab mới. Trang web mà bạn đang xem vẫn còn trong trình duyệt ở tab trước để tiện cho đọc giả quay lại xem nếu muốn. Cái này được sử dụng cho các bài điểm tin của Nhật báo Ba Sàm.

Mã của nó như sau:

<a href="URL" target="_blank">Tên liên kết</a>

Ví dụ:
<a href="http://www.youtube.com/watch?v=_Olcb71C_wY&feature=related" target="_blank">Nghệ thuật đặt câu hỏi trong giao tiếp</a>

Kết quả: Nghệ thuật đặt câu hỏi trong giao tiếp

- Siêu liên kết: Thường dùng để nhúng liên kết tải phần mềm, bài hát nào đó một cách trực tiếp trên blog/ web của bạn.

Ví dụ: <a href="http://hn.nhac.vui.vn/download.php?id=22044">Nhìn Những Mùa Thu Đi - Elvis Phương</a>

Kết quả: Nhìn Những Mùa Thu Đi - Elvis Phương

Bạn thử nhấp vào link trên xem điều gì sẽ xảy ra.

Cách thực hiện như sau:

Vào trang web http://nhac.vui.vn

Gõ từ khóa "Nhìn những mùa thu đi - elvis phương" để tìm

Đi đến bài hát, tại trình phát bài hát, bạn nhìn thấy nút , trỏ chuột lên nút này và nhấp phải chuột, xuất hiện một trình đơn sổ xuống, nhấp chọn "sao chép địa chỉ liên kết/ Copy URL address"

Trở về trình biên tập bài đăng của blog, tạo một đoạn mã <a href=""></a>

Dán địa chỉ liên kết mà bạn sao chép từ Nhac.vui.vn vào mã như thế này;

<a href="http://hn.nhac.vui.vn/download.php?id=22044">Nhìn Những Mùa Thu Đi - Elvid Phương</a>

Khi đọc giả xem blog của bạn và nếu họ nhấp chuột vào link này thì trình duyệt sẽ tự động tải bài hát về máy tính của họ. Đối với những đọc giả chưa biết gì về tạo liên kết, họ sẽ rất bàng hoàng vì nghĩ rằng blog của bạn có chứa tập tin của bài hát đó và họ tự hỏi, làm thế nào mà blog của bạn có chứa file cho phép download về máy như thế ? Trong khi thật sự blog của bạn chẳng có lưu trử một file nhạc hay phần mềm nào cả.

Sau khi bạn đã làm được mọi thứ theo ý muốn ở blog mà bạn thiết kế thử, bạn bắt đầu thiết kế cho blog "đinh" của bạn như sau:

Tại bảng điều khiển của blog thiết kế thử, nhấp vào Thiết kế, tiếp theo nhấp vào Chỉnh sửa HTML, cửa sổ mới hiện ra, bạn nhìn thấy câu "Tải xuống Mẫu đầy đủ". Nhấp vào link này để tải mã nguồn của nó về máy tính.

Sau đó tải lên cho blog "đinh" của bạn. Nhớ trước khi tải lên, bạn phải tải xuống mẫu cũ của nó để lưu lại để có thể sử dụng lại nếu muốn.

Lưu ý: Nếu blog của bạn có số lượng truy cập lớn mỗi ngày, bạn phải chọn thời điểm ít truy cập nhất, lúc nữa đêm chẵng hạn, để thiết kế lại nó và phải có câu thông báo đại loại như "Blog này đang thiết kế lại giao diện để phục vụ bạn tốt hơn. Chúng tôi sẽ hoàn thành sau 30 phút nữa. Chúc bạn online vui vẽ!"

Bạn phải nhấp vào Lưu Mẫu thì mọi thay đổi mới có hiệu lực.

Còn tiếp

Posted in: Chơi Blog