Ẩn ngày đăng bài viết

Người đăng: yeu mai em on Thứ Tư, 27 tháng 5, 2009

[FD' BlOg] - Khi vào xem mỗi bài viết, ta sẽ thường thấy phần hiện thị ngày đăng bài viết ở phía trên tiêu đề của bài viết. Nếu ai không thích điều này, thì có thể tham khảo bài viết này để ẩn nó đi. Và chỉ với lệnh display là ta có thể thực hịên được điều này.


Hình ảnh minh họa:

Trước khi thực hiện

Sau khi thực hiện



Thủ thuật này rất đơn giản, bạn chỉ cần thêm dòng lệnh display:none; vào trong class h2.date-header
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Tìm dòng code CSS sau

h2.date-header {
margin:1.5em 0 .5em;
}

5. Thêm dòng code màu đỏ vào như bên dưới:

h2.date-header {
margin:1.5em 0 .5em;
display:none;
}

6. Save template.

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

Remove Header và thay thế bằng Ảnh

Người đăng: yeu mai em

[FD's BlOg] - Có nhiều cách khác nhau để trang trí, chỉnh sửa Header của blog, và đây là một trong những cách đó. Thủ thuật này rất cơ bản và đơn giản, thích hợp cho những bạn mới bắt đầu làm quen với việc chỉnh sửa giao diện của blogspot.




Hình ảnh minh họa:

trước khi thực hiện thủ thuật


sau khi thực hiện thủ thuật


Với thủ thuật này, ta sẽ có 2 bước thực hiện : bước 1 là làm ẩn header, bước 2 thay thế vùng header đã bị ẩn bằng 1 ảnh (banner)

☼ Bước 1: Ẩn header
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện (expand widget template)
5. Tìm đọan code CSS của header như bên dưới (hoặc code tương tự)

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

6. Thêm dòng code màu đỏ như bên dưới:

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

7. Khoan save template lại, tiếp tục thực hiện sang bước 2

☼ Bước 2: Thay thế header đã bị ẩn bằng 1 ảnh (banner)
1. Tiếp tục bước 1, xuống phía dưới, tìm đọan code sau:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header' locked='true' title='Blog FD | Tips For Blogger' type='Header'/>
</b:section>
</div>

2. Thêm vào sau đọan code vừa tìm được đọan code bên dưới:

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_IMAGE(BANNER)" alt="Home" /></a>

3. Save template.

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

Modify sidebar : bo góc header và tạo border (đường viền) cho các widget ở sidebar

Người đăng: yeu mai em

[FD's BlOg] - Một cách khá phổ biến cho việc trang trí các widget ở sidebar là bo các góc. Ở bài viết này mình sẽ giới thiệu một thủ thuật nhỏ để bo góc cho header của widget với ảnh nền, và trang trí 1 chút cho khung hiển thị nội dung với việc tạo đường viền.


Hình ảnh minh họa :


Ở trong hình minh họa ta thấy có 2 phần cần phải chỉnh sửa, đó là phần headercontent của widget, do đó ta sẽ tìm trong code CSS của template 2 class sau: ".sidebar h2" và ".sidebar .widget" .(hoặc class tương tự)

☼ Ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Tìm đọan code CSS sau (hoặc tương tự):

.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}

- Thay thế nó bằng code bên dưới:

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

- Lưu ý : bạn nên download ảnh nền (code màu xanh) trong code về, và thay đổi màu sắc cũng như độ rộng để phù hợp với blog của bạn. Việc này khá đơn giản với các phần mềm đồ họa.

5. Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):

.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}

- Và thay thế nó bằng code như bên dưới :

.sidebar .widget {
font-size:86%;
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
line-height: 1.4em;
}

- các code màu xanh chính là code tạo đường viền cho khung hiển thị nội dung của widget.

6. Save template.

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

Tạo cửa sổ popup khi rê chuột vào ảnh trong blogger

Người đăng: yeu mai em

Create Popup Image Viewer Using CSS in Blogger
[FD's BlOg] - Với vài đọan code CSS nhỏ ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới javascript. Thủ thuật cho phép hiện thị của sổ popup của ảnh gốc khi ta rê chuột vào.


Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/popup-images-view.html

Hình ảnh minh họa:


Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code template:
- Đăng nhập blog
- Vào bố cục
- Vào chỉnh sửa code HMTL
- Chèn đọan code CSS bên dưới vào trước dòng code </head>

<style type='text/css'>

.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.img-thumbnail span img{
border-width: 0;
padding: 2px;
}

.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px;
}

</style>

- Dòng code màu đỏ chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất trên blog của bạn.

- Save template.

Và sau cùng là code HTML:

<a class="img-thumbnail" href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>


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

More about

Modify Form comment : Bài 8 - Tạo số đếm cho các comment

Người đăng: yeu mai em

Comment numbering in Blogger
[FD's BlOg] - Thêm một thủ thuật nữa để trang trí cho form comment của bạn, thủ thuật sẽ tự động đánh số thứ tự cho các bài comment.


Hình minh họa:


☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào Chỉnh sửa code HTML
4. Chọn mở rộng mẫu tiện ích
5. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px;
text-align: right;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: bold;
}

6. Tiếp tục xuống phía dưới, tìm đọan code như bên dưới:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


7. Thay thế tất cả bằng đọan code bên dưới:

<dl id='comments-block'>

<script type='text/javascript'>
var CommentsCounter=0;
</script>


<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

<script type='text/javascript'>
CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
</script>

</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>


8. Save template.

Nguồn : Blog Anol

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

Modify Form comment : Bài 7 - Form comment mới cho blogger từ DISQUS

Người đăng: yeu mai em on Thứ Ba, 26 tháng 5, 2009

Pro form comment for blogger
[FD's BlOg] - Chúng ta có lẽ khá quen với form comment của blogger, với tính năng hiển thị thời gian comment, tên người comment... Hôm nay mình sẽ hướng dẫn các bạn tạo một form comment pro cho Blogger. Đây là một tiện ích được cung cấp bởi DISQUS, với nhiều tính năng mới như: cho phép reply từng comment, cung cấp link RSS cho các comment của bài viết, có thể sắp xếp comment theo nhiều cách...

Hình minh họa form comment:


Hiển thị các bài comment:


☼ Sau đây mình sẽ giới thiệu các tính năng của form comment này.
1. Bố cục chung:
- Đầu tiên , mặc định khi bạn cài đặt form này, thì form comment chính sẽ được hiển thị ngay sau bài viết, và các bài comment sẽ hiển thị bên dưới form comment chính. (xem hình bên dưới)



2. Sơ lược về form comment:
- Do là tiện ích của DISQUSS, nên form chỉ có 2 chọn lựa cho việc chọn tên hiển thị, 1 là Khách (Guest), 2 là tài khỏan từ DISQUS

Khách


tài khỏan từ DISQUS


3. Các tính năng nổi bật:

a. Cho phép hiển thị các bài comment theo 4 cách:

- Phổ biến nhất (Popular)
- Đánh giá cao nhất (Best Rating)
- Mới nhất (Newest list)
- Cũ nhất (Oldest list)


b. Cung cấp link RSS cho tất cả các comment của từng bài viết.


c. Hiển thị thông tin của người post 1 cách chuyên nghiệp:


d. Hiển thị thời gian comment đến từng phút


e. Cho phép trả lời các bài comment


f. Hiển thị form comment phụ cho mỗi lần reply


☼ Bây giờ ta bắt đầu phần cài đặt:
1. Đầu tiên bạn download file code template của bạn về máy:

- File download về có dạng .xml, hãy lưu vào một nơi nào đó trong máy, để chuẩn bị cho bước 3.
2. Vào trang http://disqus.com bạn sẽ thấy như hình bên dưới:

Nhấn Get Start để bắt đầu. và hãy đăng kí cho mình một tài khỏan tại DISQUS

Sau khi đăng kí xong, nó sẽ đưa ta tới trang như bên dưới :


Chọn biểu tượng của Blogger để tiếp tục.

3. Upload code template của blog bạn lên DISQUS
- Sau khi nhấp chọn biểu tượng Blogger, sẽ xuất hiện form upload như bên dưới:
- Ở đây ta có 2 lựa chọn cho việc cài đặt:

+ Nếu bạn chọn "Use Disqus on future blog entries only", thì form comment mới cài đặt sẽ chỉ hiển thị ở các bài viết mới từ khi bạn bắt đầu cài đặt form comment này vào blog của bạn, còn các bài viết cũ vẫn xài form comment cũ.
+ Nếu bạn chọn cách thứ 2 "Use Disqus on all entries. This will hide existing comments" thì form comment này sẽ hiển thị ở tất cả các bài viết của bạn, như thay vào đó thì các comment cũ sẽ bị ẩn đi.

- Sau khi đã lựa chọn xong. Nhấn browse để thêm file code template mà bạn đã download về ở bước 1.
- Sau đó nhấn upload.
- Đợi 1 lúc ta sẽ thấy 1 form chứa code như bên dưới.


- Code này chính là code mà chúng ta sẽ thay thế cho code template cũ.

4. Thay thế code template cũ bằng code template từ DISQUS
- Các bạn vào blog
- Vào bố cục
- Vào chỉnh sửa code HTML
- Chọn mở rộng mẫu tiện ích
- Thay thế tất cả code cũ bằng code mà bạn đã có ở bước 3.
- Save template lại là xong.

5. Và cuối cùng để hiển thị được form, bạn phải cài đặt lại trong phần nhận xét:
- Vào bảng điều khiển
- Vào phần cài đặt
- Vào tiếp phần nhận xét
- Tìm phía dưới mục "Mặc định nhận xét cho bài đăng" » chọn "Bài mới không có nhận xét"

Như vậy đã xong, chúc các bạn thành công.
More about

Khắc phục nhược điểm từ thủ thuật "Tạo thanh menu nằm ngang có sổ dọc"

Người đăng: yeu mai em

[FD's BlOg] - Ở thủ thuật "Tạo thanh menu nằm ngang với hiệu ứng sổ dọc các menu con" (xem thêm ở đây) có 1 nhược điểm nhỏ là : chưa tùy chỉnh lượng bài viết hiển thị ở mỗi menu con (mỗi nhãn). Do đó khi nhấp vào 1 menu con (tức là 1 nhãn nào đó) thì số bài viết hiển thị của nhãn đó trên 1 trang khá nhiều. Bài viết này sẽ khắc phục nhược điểm đó.

Đối với những ai chưa thực hiện thủ thuật "Tạo thanh menu nằm ngang với hiệu ứng sổ dọc các menu con" thì xem ở đây để thực hiện thủ thuật này, sau đó tiến hành các bước như bên dưới để khắc phục nhược điểm không tùy chỉnh được lượng bài viết hiển thị ở mỗi nhãn.

☼ Bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Tìm đến widget của "Thủ thuật menu nằm ngang với hiệu ứng sổ dọc các menu con", vào chỉnh sửa


5. Tìm trong đọan code javascript đọan code sau sau :

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}

hình minh họa:


Và thêm vào nó đọan code màu cam vào trong đọan code trên(như bên dưới):

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'?max-results=5\'">'+submn_text+'</td></tr>');
}

Hình minh họa:

- Các bạn có thể thay đổi số "5" thành số bài viết mà bạn muốn hiển thị ở mỗi trang của mỗi nhãn.

6. Save widget là xong.
Chúc các bạn thành công.
More about