Showing posts with label Blogtips. Show all posts
Showing posts with label Blogtips. Show all posts

Thursday, November 18, 2010

Ten Reasons Why Grad Students Should Blog

By Drew Conway, on June 8th, 2010

Drew Blogging!Tomorrow is the two year anniversary of ZIA. In keeping with thetradition started last year there are some changes afoot for the website itself, but I will keep those under wraps until the actual birthday (wouldn’t want to open your gift early, yes?). Rather, today I would like to be more reflective. A few days ago, as the two year anniversary approached, I began thinking back on not just what I accomplished this year at ZIA but also how much the blog has provided me. Upon this reflection it occurred to me that this endeavor has been incredibly beneficial. As such, it seemed logical to me that this would also be the case for many other grad students; which was immediately triggered the question: then why do so few do it?

There are a few notable exceptions, but for the most part it is thefaculty that partake in blogging. Perhaps this is simply a function of my particular discipline, in which I—admittedly—do most of my blog reading. I have, however, been to many corners of the blogosphere, and at least within my N=1 sample this appears to be a common phenomenon. I welcome others to show me that this is not the case in other disciplines, but even so, more grad students should be publishing online.

As I thought longer about the vacant state of grad student blogging I wondered if it could be explained as a “they don’t know what they don’t know” situation. Perhaps by standing from the outside looking in, my fellow grad students simply do not know all of the benefits that can come from participating in an online discourse. To remedy this informational problem, and in an attempt to encourage more grad students to begin blogging, I present (in no particular order) my ten reasons why grad students should blog:

 

  1. You actually have something to say – This is perhaps the best reason why you should be blogging. One of the most frustrating characteristics of the blogosphere is its inherent infinitesimal signal-to-noise ratio. As a grad student, especially those in PhD programs, you have already been deemed qualified to participate in the discussion at a very high level by a panel of distinguished scholars, i.e., the admission committee. Why keep all that smart analysis to yourself?
  2. Honing your craft – At its core, graduate school is preparing you to be an active member of the academy. While we may struggle through our preliminary methods classes as we build our technical expertise, it is the application of these tools to interesting research questions that builds successful careers. A blog provides a wonderful lab for experimentation, both in terms of the technical application of methods and toying with research questions in sub-fields of your discipline you may not have otherwise tested.
  3. Establishing an identity – If you are in graduate school to be the “best kept secret in academia,” you are making a fatal mistake. As with any other job market, getting the preverbal foot in the door for a job talk at a university is a critical first step. As a graduate student it can be incredibly difficult to navigate the sea of senior faculty, their research agendas, and how that fits into your career goals. Having a blog provides you an independent beacon upon which you can broadcast your own ideas. Consider this, ZIA is but a tiny blip within the academic blogosphere, but in the last year my CV has been downloaded by over 875 unique visitors, or more than twice a day.
  4. Extending your network outside of academia – Though it is often hard to imagine this from within the cozy confines of the ivory tower, there are a lot of brilliant people outside of academia interested in exactly the same things you are. The difficulty, however, is connecting with them. The Internet is a powerful networking device, and if you are willing to put yourself out there these people will seek you out (Kevin Costner knows what I am talking about). Your bonafides are already largely taken care of (see point reason #1), now you have to impress the Internet with your brilliant musings.
  5. The faculty in your department will not think less of you – I have been asked several times by fellow grad students some form of the following question: “Weren’t you worried what your advisors would think about your blog?” Of course, I never even thought about this question, as I started blogging before actually matriculating to NYU (note that ZIA’s anniversary is early-June and most universities begin the Fall semester in late August). This, however, is besides the point. No, I was never worried about what my advisors would think. The things I write about on ZIA are exactly the same kinds of things I say in seminar and write for term papers (in fact, these ideas often flow both ways). Furthermore, most of those faculty who might actually view blogging in a negative light are also those most unlikely to ever read your blog.
  6. Instant and broad criticism of your work – Part of the maturation process for any grad student is developing the ability to receive, absorb, and convert criticism. Much of this will come from rote academic traditions contained within the classroom and conferences, but a blog offers an alternative channel for this criticism. Not only will you get criticism from fellow academics, but criticism from non-academics can illuminate aspects of your research that can be improved to allow for broader understanding.
  7. Sharpening your own critical eye – What is the primary thrust of most graduate seminars? Read a series of papers, and spend the next 120 or so minutes tearing them apart. This is meant to help students recognize the difference between good and great work, but also begin to discover where the more fertile patches exist within the landscape of possible research agenda. There are, however, many more papers published in a semester than any one seminar could possibly hope to cover. Also, many seminars are focused on seminal works, not cutting edge research—the same cutting edge research you are most likely already reading in your free time. A blog provides you a platform upon which to criticize this new work, and if you are very lucky (as I have been on afew occasions) an opportunity to interact with the authors in a public forum.
  8. Oh, the places you’ll go – A combined effect of reasons #1-5 is you will be given the opportunity to travel all over the world and participate in many conferences, seminars, panels, etc. Without a public voice on the Internet I would have never had the opportunity to present to the Bay Area R User’s Group or the University of Michigan’s Center for the Study of Complex Systems. As you extend your network outside of academia it will take you to places you could never have thought possible without the blog.
  9. Building technical expertise – Not all of the work you put into your blog will go toward writing noteworthy posts. Some of the effort, particularly at the outset, will be focused on building the actual site. This will require you to learn technical skills you would have otherwise never had the need or desire to. This is incredibly useful in and of itself, but these skills can be applied beyond blogging. Considering how charts from a paper will look in the online version of your paper (the version most readers will see) is something you may only have thought of after several iterations of trial and error posting it to your blog.
  10. It is just plain fun – You are a nerd. You enjoy writing. In many ways, a blog sells itself. But, the additional joy you will feel as you watch your daily hits go up, and the frequency of (non-SPAM) comments increases, will become a powerful motivating force in your day-to-day. A wonderful side effect of which is that the overall quality of your work will also increase, as you become a better writer, researcher and conveyer of complex ideas.

I realize that this will not motivate everyone to navigate over to WordPress and being their own blogs, but I hope it has helped you understand some of the benefits of having your own presence on the Web. I welcome your own thoughts, either as a grad student blogger, or as someone unmoved by the above reasons.

Photo: Me, hard at work on another blog post…

Saturday, March 28, 2009

Sử dụng kỹ thuật mở rộng bài đăng theo kiểu hiển thị Peekaboo


Như bạn thấy, mỗi bài đăng trên blog này chỉ hiển thị phần đầu và mỗi khi bạn bấm trên Đọc tiếp... thì bài viết mới hiện ra đầy đủ, không phải tải lại, giúp blog nhanh hơn. Kỹ thuật này được phát triển bởi Ramani, khác với cách chèn đọc thêm (bài đăng phải tải lại một lần nữa) mà tôi có dịp giới thiệu trước đây. Để sử dụng kỹ thuật này trên blog, hãy thực hiện theo các bước sau:
<span id="fullpost">

Bước 1: Đăng nhập vào Blogger và chọn thẻ Template để sao lưu template của bạn. 

Bước 2: Tại Edit HTML (Chỉnh sửa HTML) bạn kéo thanh trượt tìm tìm thẻ</head> (có thể nhấn đồng thời hai phím Ctrl + F để tìm) sau đó chép toàn bộ đoạn code dưới đây, dán phía trên thẻ này và lưu lại.

 
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>

</b:if>


Bước 3: Bạn click chọn Expand Widget Templates sau đó tìm id='post' (có thể dùng Ctrl + F để tìm) có trên đoạn mã. Bây giờ hãy bổ sung các đoạn mã màu đỏ nằm đúng vị trí như dưới đây. Lưu ý: Một số template sẽ không có uncustomized-post-template nhưng bạn cũng không phải lo.

 
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>

<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Đọc thêm ...</a></p>

</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Tóm tắt ...</a></p>
</span>
<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>



Bạn có thể tùy biến 
Đọc thêm ... và Tóm tắt ... nằm trong đoạn mã trên theo ý thích của mình.

Bước 4: Thay đổi cách đăng bài. Bây giờ mỗi bài đăng của bạn phải thực hiện theo cấu trúc sau:

 
Phần đầu hay tóm tắt
<span id="fullpost">
Phần còn lại hay mở rộng
</span>


Bạn có thể tham khảo thêm nội dung 
Sử dụng kỹ thuật mở rộng bài viết của Template ba cột mà trước đây tôi có dịp giới thiệu để biết cách dùng chi tiết hơn.

Cập nhật thêm (Bước 3):


Để thao tác đơn giản hơn, thay vì bổ sung các đoạn mã màu đỏ như 
bước 3 ở trên bạn hãy copy hết tất cả mã nằm trong khung đó và thay thế đoạn mã nằm trong khung dưới đây có trong Edit HTML (Nhớ check Expand Widget Templatesở trên khung quản lý đoạn mã trước):

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


<\span>

Vài lưu ý về sử dụng hình nền

Kết quả thống kê từ công cụ tìm kiếm cho thấy nhiều bạn đọc quan tâm đến hình nền cho blog của mình. Vì vậy tôi quyết định viết thêm một số bài liên quan đến sử dụng hình nền. Ở bài viết này, chúng ta sẽ lưu ý một số điều về việc sử dụng hình nền.

Kích thước của hình nền thiết kế

Một blog đẹp hẳn phải có một hình nền đẹp, kết hợp màu sắc, kiểu chữ cộng với cách bố trí giao diện hợp lý. Muốn có một hình nền theo phong cách “không đụng hàng” bạn phải tự thiết kế cho mình. Các chương trình xử lý đồ họa như Adobe Photoshop, Google Picasa,… giúp bạn thực hiện việc này. Vậy kích thước cho hình nền bao nhiêu?

Kích thước ngang của blog

Đăng nhập vào blogger.com, chọn layout ->Edit HTML (Trên Template) và kéo thanh trượt để tìm outer-wrapper.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 883px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Đây là kích thước chiều ngang (width) của blog, đơn vị tính px (pixel). Chiều dọc không bị giới hạn. Tất cả theo mặc định. Tất nhiên không ai cấm bạn thay đổi. Phụ thuộc vào cách trình bày và giao diện theo template, bạn có thể thay đổi width cho template 2 cột bằng 800, hay 1024 cho 3 cột trở lên.

Để hình nền hiển thị, bạn phải chèn đoạn mã hướng dẫn bên dưới vào vị trí bên dưới.


background-image:url(http://www.vidu.com/hinh.jpg);

Vị trí chèn:

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
background:#ffffff;
background-image:url(
http://www.vidu.com/hinh.jpg);
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Hãy thay http://www.vidu.com/hinh.jpg (liên kết đến hình nền của bạn), như: http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/ttcbloggerbg1.jpg


Theo tôi, một trong ba cách dùng hình nền như sau có thể được sử dụng.

Cách 1. Dùng các ảnh có kích thước màn hình chuẩn (ngang x dọc) như: 800 x 600, 1024 x 768, …Hình nền sẽ bao phủ toàn bộ blog. Và đoạn mã sau dành cho cách này:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center center;


Giải thích:
background-repeat: no-repeat; (hình nền bao phủ hết trang nên chúng ta không cần để nó lặp lại) background-attachment:fixed; (cố định hình nền ở một vị trí nhất định)
background-position:center center;(canh giữa ngang và dọc cho trang)


Cách 2. Hình nền có kích thước không theo màn hình chuẩn.

Trường hợp 1: Bạn sử dụng ảnh có width bằng kích thước ngang của màn hình chuẩn, ví dụ: 1024, 800,…
Và đoạn mã này phù hợp cho bạn:


background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: repeat-y;
background-position:center center;


Giải thích:
background-repeat: repeat-y; (hình nền lặp lại theo chiều dọc phủ đầy trang)
background-position:center center;(canh giữa ngang và dọc cho trang)

Trường hợp 2: Bạn sử dụng ảnh có width không bằng kích thước ngang của màn hình chuẩn. Và đoạn mã này phù hợp cho bạn:


background-image: url(http://www.vidu.com/hinh.jpg);
background-position:center center;


Giải thích:
background-position:center center;(canh giữa ngang và dọc cho trang)
Hình ảnh sẽ lặp phủ đầy trang, theo mặc định.

Trường hợp 3. Tối ưu trường hợp 2, ảnh nền của bạn dùng có kích thước dài rộng bằng nhau. Hãy tưởng tượng những viên gạch lót nền có hoa văn giống nhau và gắn kết với nhau hoàn chỉnh bộ nền nhà. Bạn chỉ cần là một viên gạch để làm hình nền, viên gạch này sẽ lặp lại và bao phủ hết màn hình. Ví dụ: 20x20, 50 x 50, …Đoạn mã tương tự như trên.

Bài viết sau tôi sẽ hướng dẫn dùng hình nền cho từng thành phần riêng rẻ, và bài viết tiếp đó hướng dẫn hình nền cong góc của mỗi thành phần. Mời bạn đón đọc.

Chúc một tuần học tập và làm việc hiệu quả!

Hình nền cho từng thành phần của blog

Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọcbài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).

Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).


Hiển thị
Hình 2. Layout


Các thành phần trên layout
Hình 1. Mô hình hiển thị


Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.

A. Thành phần Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

B. Thành phần Main

#main-wrapper {
width: 410px;
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 */
}

C. Thành phần Sidebar

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

D. Thành phần Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:

background-image:url(http://www.vidu.com/hinh.jpg);

Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:

#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cách chèn tương tự cho các thành phần khác.

Kích thước hình nền cho từng thành phần

Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.

Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:

background-repeat: repeat-y;

Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:

background-position: center center;

Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.

Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background

Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:

background:#ffffff;

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

Kỹ năng CSS liên quan đến text dành cho việc chỉnh sửa Template

Blogger cho phép bạn tự thay đổi mã nguồn và bất kỳ yếu tố nào mình muốn. Để chỉnh sửa thành công bạn phải am hiểu được những gì mình cần làm và ý đồ mình muốn thực hiện. Để làm chủ được Template (Mẫu) của Blogger, sau bài viết về margin và padding, bài viết này cung cấp cho bạn một số kỹ năng về CSS liên quan đến text có trong mã nguồn Template (Mẫu).

FONT CHỮ

Như đã biết, một vài Template của Blogger không hiển thị đúng tiếng Việt của chúng ta. Vậy thì làm thế nào để khắc phục? Bạn có thể đọc bài viết
trước đây để khắc phục. Tuy nhiên hôm nay chúng ta sẽ làm theo một cách khác: Sửa trực tiếp từ Edit HTML (Chỉnh sửa HTML). Đăng nhập Blogger.com, vào Template (Mẫu), chọn Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và bạn quan sát dòng (Ở đây là ví dụ):







Trong đó:

bodyfont: Font bài đăng
headerfont: Font tiêu đề
pagetitlefont: Font tên blog
descriptionfont: Font miêu tả blog
postfooterfont: Font footer

default là giá trị mặc định được người thiết kế Template chọn, value là giá trị hiện thời mà blog bạn sử dụng. Để hiển thị được tiếng Việt có dấu bạn phải dùng một trong các font này: Verdana, Times, Arial. Trong ví dụ trên, giá trị mặc định của headerfont: normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif lần lượt là font-style, font-weight, font-size, font-family. Đây là dạng viết tắt của các thuộc tính font trong CSS.

Tên của biến này được dùng ở nhiều vị trí nên người ta đã định nghĩa nó ở phía trên và sử dụng dùng cho một thành phần nào đó phía dưới, dấu $ được thêm vào trước tên biến phía trước chẳng hạn #header h1{ font: $pagetitlefont;}. Tương tự như vậy bạn thấy $descriptionfont, $postfooterfont,..

MÀU CHỮ

Giống như font chữ, thuộc tính màu chữ cũng được tạo bằng các biến. Bạn có thể dùng trang
web hay link này hoặc chọn từ đây để lấy mã màu cho blog của mình.

bgcolor: Màu nền
textcolor: Màu chữ
linkcolor: Màu link
pagetitlecolor: Màu tên blog
descriptioncolor: Màu miêu tả blog
titlecolor: Màu tiêu đề bài đăng
bordercolor: Màu đường viềng
sidebarcolor: Màu tiêu đề trên sidebar
sidebartextcolor: Màu chữ trên sidebar
visitedlinkcolor: Màu link đã đọc


Cú pháp

color: #sáu_ký_tự;


Ví dụ: Màu trắng

color:#ffffff;

KÍCH THƯỚC CHỮ

font-size: từ_khóa;


Các từ khóa
xx-small, x-small, small, medium, large, x-large, và xx-large lần lượt cho kích thước từ nhỏ đến lớn. Ví dụ: font-size: medium;

Ở đây người tạo Template đã dùng %. Ví dụ: font-size: 200%;

NÉT CHỮ

font-weight: từ_khóa;


Các số từ
100 -> 900 thể hiện nét chữ nhạc nhất đến đậm nhất. Ngoài ra bạn có thể dùng các từ khóa: normal (400), bold (700), bolder (900) và lighter (100). Ví dụ: font-weight: bolder;


KIỂU CHỮ


font-style: từ_khóa;


Các từ khóa
normal, italic lần lượt cho các kiểu chữ bình thường (mặc định), nghiêng,

VỊ TRÍ CHỮ


text-align: từ_khóa;


Các từ khóa
left, right, center, justify lần lượt dùng để canh vị trí trái phải, giữa hoặc đều cả hai bên cho chữ hoặc văn bản.

TRANG TRÍ TEXT

text-decoration: từ_khóa;


Các từ khóa
none, underline, overline, line-through lần lượt dùng để xóa thuộc tính gạch dưới cho liên kết, gạch dưới, gạch trên đầu, và gạch ngang qua text.


CHUYỂN DẠNG CHỮ


text-transform: từ_khóa;


Các từ khóa
capitalize, uppercase, lowercase, hoặc none lần lượt chuyển văn bản sang viết hoa ký tự đầu, viết hoa, viết thường hoặc bình thường. Ví dụ: Tại header (với các template có header) bạn sẽ thấy: text-transform: uppercase;

KHOẢNG CÁCH GIỮA CÁC DÒNG
(Trong MS Word là line spacing)

line-height: giá_trị;


Giá trị là số, chiều dài hoặc %. Ví dụ: ….

KHOẢNG CÁCH GIỮA CÁC TỪ

(Ví dụ: Hello là một từ)

word-spacing: giá_trị;


Chúc bạn chỉnh sửa thành công.

Tìm hiểu margin và padding

Để có một blog đẹp chúng ta phải chỉnh sửa mã nguồn cho các thành phần trở nên cân đối và hài hòa. Bài viết này sẽ hướng dẫn các bạn làm quen với margin và padding, canh lề và canh đệm. Những ai đã từng học qua CSS thì không lạ gì với hai tag này.


MARGIN

Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang,hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.

Margin


Bốn giá trị:

margin 10px 5px 0 5px;

Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px

Ba giá trị:

margin: 30px 20px 70px;

Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 30px, 20px, 70px, 20px

Hai giá trị:

margin: 30px 20px;

Lề trên và dưới: 30px
Lề trái và phải: 20px

Một giá trị:

margin: 100px;

Tất cả các lề đều được canh một khoảng cách 100px

Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

(Các con số ở đây là ví dụ)

PADDING

Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó. Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.

Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).

Padding

Ví dụ:

padding: 15px 30px 25px 0;

Trên 15px, phải 30px, dưới 25px, trái 0px

Ngoài ra người ta có thể dùng:

padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;

(Các con số ở đây là ví dụ)

Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!

Thursday, March 19, 2009

Chen nhieu anh cho Banner

Rotating image banners for blogger



Some of you were curious to find out how to create a rotating banner in blogger, here's how I managed to do it:

1) Enabling image header display on blogger first.
Theoratically, this is not necessary if you knew your way around blogger's template language, but since I embed my code inside the useImageconditional block, it has to be enabled before header images will be shown. Select the Template->Page Elements tab and click 'edit' on the (Header)element, which the following window appears:



Select the image that you want, from an external URL. You won't be using the 'From your computer' option, because there's no way you can know how the url of the image is managed in order to use it. The actual picture doesn't matter, but it is usually the one you want to be showing when javascript is not enabled. Click on 'Save changes' once you are done selecting the image.

Blogger is stingy in the sense that it only allows one image to be uploaded at a time, so you'll need to use an external hosting site to host your other pictures in order for rotation. You can use any image hosting site, and I useflickr for this task.

2) Modifying the blogger template.
The template needs to be modified to use javascript to perform the random image rotation. Select the Edit HTML tab, and find the following lines in your template, and insert the modification highlighted in red:


<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--Show image as background to text-->
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
<!-- Start Modification. -->
<script type='text/javascript'>
var banner= new Array()
banner[0]="http://your.image.url"
banner[1]="http://your.image.url"
banner[2]="http://your.image.url"
banner[3]="http://your.image.url"
banner[4]="http://your.image.url"
var random=Math.round((banner.length-1)*Math.random());
document.write("<img src='"+banner[random]+"' style='display: block'/>");
</script>
<noscript>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</noscript>
<!-- End Modification. -->

</b:if>

Make sure you replace "http://your.image.url" with the actual url of your images, which should now allow you to display changing image banners for blogger.

Tham khao blog nay: http://7seeds-pro.blogspot.com/