Thứ Sáu

THU GỌN CÁC BÀI VIẾT MỚI HIỂN THỊ TRÊN TRANG CHỦ

Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript. 

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.



Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây trước dòng ]]></b:skin>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span> 
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng 

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).

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


[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.

Tạo thanh Navbar luôn hiển thị phía trên (dưới) của blog


[FD's BlOg] - Một thủ thuật đơn giản cho phép bạn tạo một thanh Navbar hiển thị nội dung cố định trên blog của bạn. Thủ thuật cho phép bạn có thể đặt thanh Navbar này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom)...


Với thủ thuật này, bạn có thể tạo nhiều ứng dụng, ví dụ như:

+ Tạo một thanh menu truy cập
+ Tạo một dòng thông báo
+ Tạo một danh sách các bài viết hot (kèm theo hiệu ứng chạy chữ)
+ Hoặc bất cứ thứ gì mà bạn muốn hiển thị (một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn)


Và đây là hình minh họa 1 ví dụ về cách tạo một danh sách các bài viết hot.


Bây giờ ta 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 đọan code CSS này vào trước dòng code ]]></b:skin>

div.fixed-navbar {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
div.fixed-navbar a:hover {
color: #00f;
}

- đọc hiểu code:

background-color: #ccc; : màu nền của thanh navbar, nếu bạn dùng ảnh nền thì đổi code lại thành background: #ccc url(link ảnh) ;
+ position: fixed; top: 0; left: 0; : code xác định vị trí hiển thị của thanh navbar trên blog. Thuộc tính fixed là để cho thanh cố định khi di ta di chuyển chuột. còn thuộc tính left top dùng để xác định vị trí (cái này mình sẽ nói thêm ở bên dưới)
width: 100%; : độ rộng của thanh Navbar
border: 2px #00f solid; tạo đường bo cho thanh navbar, nếu bạn không thích thì cứ bỏ nó đi.


5. Save template.
6. Tạo 1 widget HTML/javascript và dán code HTML bên dưới vào:

<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên thanh navbar}
</div>


☼ Sau đây là một số ví dụ về các vị trí hiển thị
a. Hiển thị trên cùng với độ rộng là 100% :(hình minh họa như ở phía trên).
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; top: 0; left: 0;
width: 100%;


b. Hiển thị phía bên dưới bên trái với độ rộng là 200px
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; bottom: 0; left: 0;
width: 200px;

Hình minh họa:


Còn các vị trí : bên dưới bên phảiphía trên bên phải thì cũng tương tự, bạn chỉ cần thay vào là bottom:0; right: 0; hoặc top: o; right: 0;

☼ New update (29/05/2009)
Khắc phục lỗi không hiển thị được trên IE6.

- Với code trên, thủ thuật thì thủ thuật không hiển thị tốt trên IE6, và dưới đây là cách khác phục.
- Bạn chỉ thay thế code CSS trên bằng đọan code bên dưới:

div.nicetitle {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align: left;
width: 200px;
border: 2px #00f solid;
position: fixed;
_position:absolute;
left: 0px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); 
}

- code màu đỏ là code được thêm vào.
- Với code trên thì thanh Navbar sẽ hiển thị ở góc trái bên dưới. Nếu muốn hiển thị bên góc phải bên dưới thì sửa code màu xanh (right) thành left.
- Vớilênh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.
- Còn 2 vị trí góc trái (phải) phía trên thì mình vẫn chưa fix được.

Hình minh họa

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

Gắn thanh phát nhạc Streampad lên Blogger


(Huynh Nhat Ha's Blog) -- Tình cờ trong một lần lướt web tôi phát hiện một ứng dụng chơi nhạc tự động được thiết kế như một tiện ích gắn vào các trang blog hoạt động trên các nền như Tumblr, Wordpress, TypePad, Blogger… Ứng dụng đó là Streampad. Nó tự động hiển thị thông tin về bài hát và người trình bày và chứa đầy đủ các nút cần thiết đối với một trình chơi nhạc. Bạn có thể tùy ý điều chỉnh thông số màu sắc cho ứng dụng.

Một điểm khá độc đáo đối với thanh phát nhạc này là nó sẽ phát tất cả các file nhạc MP3 mà bạn đặt liên kết trong bài viết trên Blog của bạn.

Lấy ví dụ dưới đây là một số file nhạc MP3 mà tôi đã đặt liên kết trong bài viết này để làm demo. Bạn hãy thử nhấn nút Play trên thanh Streampad và sẽ thấy kết quả ngay.

1. Hotel California

2. Cherish

3. Careless Whisper

4. Beautiful Sunday

5. Heal The World

6. Caravan of Life

7. Casablanca

8. Those Were the Days

9. Lemon Tree

Thật thú vị phải không bạn? Gắn Streampad vào Blogger thật là đơn giản. Bạn chỉ việc dán toàn bộ đoạn mã dưới đây vào trong một tiện ích HTML/Javascript ở phần Footer là được.
<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-blogger.js&expsec=86400&ver=11&bgcolor=#4e5369&trackcolor=#dddded&clickimg=true&progressfrontcolor=b85353&progressbackcolor=000000&btncolor=white-gray"></script>
Chú ý trên đoạn mã ở trên, bạn có thể điều chỉnh các thông số màu sắc cho bgcolor, trackcolor, progressfontcolor, progressbackcolor, btncolor theo ý thích của bạn.

ẩn thông báo trạng thái và kết quả phân loại


hi tìm kiếm bài viết của blog bằng công cụ tìm kiếm có trên thanh công cụ Blogger, hoặc khi chọn một nhãn (label) nào đó để xem các bài đăng cùng nhãn, nếu quan sát kỹ bạn sẽ thấy một thông báo nhỏ hiển thị ngay phía trên kết quả (Xem hình).
<b:includable id='status-message'>
<!-- 
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
-->
</b:includable>


Cách 2: Thêm đoạn CSS sau đây vào bất kỳ vị trí nào giữa <b:skin><![CDATA[/* và ]]></b:skin> trong template của blog:

.status-msg-wrap {
  display: none;
}


Hãy thử hai gợi ý trên biết đâu có hiệu quả đấy!

các trang web hỗ trợ làm banner,button,logo cho blog


ó nhiều cách thu hút lưu lượng truy cập vào blog, một trong những cách đó là trao đổi link, button, logo hay banner của bạn với một người khác cùng làm blog. Một nút bấm được thiết kế đẹp sẽ "ăn điểm" trước nhiều nút bấm khác. Nếu bạn là dân đồ họa, sẽ chẳng khó. Còn như tôi và nhiều người khác cũng chẳng cần phải gác tay lên trán suy nghĩ làm việc đó như thế nào mà chỉ cần biết các trang web hỗ trợ.


Kích thước các button cho blog thông thường là 80x15 pixels. Ngoài ra bạn có thể thiết kế các banner hoặc logo dạng chuẩn khác tùy theo nhu cầu của mình.

Dưới đây tôi hướng dẫn bạn cách tạo button ở trang http://www.invision-graphics.com/button_generator.html


Choose your border colors: Chọn các màu đường viềng.

Outer border: Đường viềng ngoài
Inner border: Đường viềng trong
Bar Position: Vị trí vạch ngang

Customize the left box: Tùy chỉnh box trái.

Text: Text nhập vào
Background: Màu nền
Text start: Vị trí pixel mà text bắt đầu.

Tương tự cho Customize the right box (Tùy chỉnh box phải).

Để dễ hiểu hãy xem hình minh họa sau:


Xin lưu ý bar position (vị trí vạch ngang) và text stat (vị trí pixel text bắt đầu) củaright box phải cân đối trên chiều dài tối đa 80 pixels. Ví dụ tôi ước lượng chữ THU THUAT sẽ chiếm khoảng 52 pixel trái, vì vậy vạch ngang sẽ nằm ở khoảng pixel thứ 52 và text stat của right box sẽ nằm ở vị trí lệch về phải một chút, pixel thứ 55 chẳng hạn (Hình phía trên). Nào hãy xem, nhìn rất chuyên nghiệp!


Ngoài trang web trên, bạn có thể tìm thấy các địa chỉ dưới đây.


Tương tự như vậy, bạn có thể làm banner và logo cho blog yêu của mình với các thao tác chọn màu, kiểu, kích thước.

Một vài trang tạo banner:

Nhiều trang web 2.0 tạo logo, rất đẹp!


Nào, hãy nhanh tay thiết kế một button hoặc logo và gửi lại thông tin của bạn dưới bài viết này.

Related Posts with Thumbnails

Tạo hiệu ứng bóng đổ cho liên kết với thuộc tính box-shadow

(Huynh Nhat Ha's Blog) -- Thuộc tính box-shadow của CSS3 là một trong những thuộc tính mới rất hữu ích trong việc tạo CSS. Ở đây tôi xin giới thiệu cách sử dụng thuộc tính này để tạo hiệu ứng bóng đổ cho các liên kết.

Bạn có thể xem Demo dưới đây, rê con trỏ vào các liên kết để xem hiệu ứng.

Theo Wikipedia: Vi phạm bản quyền là sao chép lại tác phẩm của người khác mà không xin phép, thậm chí công bố công trình đó là của mình sáng tạo ra.

Trong tiếng Việt còn có từ đạo văn chỉ việc ăn cắp bản quyền các văn bản. Một từ tương tự là đạo nhạc, ăn cắp các giai điệu nhạc sáng tác bởi người khác.

Để làm được như vậy, trước tiên cần viết CSS như bên dưới và đặt trước thẻ </head>.

<style type="text/css">
a.box {
color: #FFF;
padding: 0 5px;
border: 1px solid #2DAEBF;
}
a.box:hover {
background-color: #2daebf;font-size: 1.5em;
-moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
-webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
}
</style>

Tiếp theo là tạo cấu trúc HTML cho liên kết như sau.

<a class="box" href="#">text liên kết</a>

Chèn icon vào sau liên kết


Chèn icon đại diện vào sau liên kết một cách tự động  là một phương pháp phân biệt các kiểu liên kết khác nhau trên trang web của bạn. Các kiểu liên kết khác nhau đó gồm liên kết đến các trang video (như Youtube), các trang hình ảnh (như Flickr), các liên kết cho file có đuôi mở rộng (extension), liên kết Messenger Chat, các liên kết đến các trang xã hội, trang wiki… 

Bạn có thể xem Demo.

Để thực hiện điều này, bạn hãy đặt đoạn code CSS sau đây vào trước thẻ </head>.

<style type="text/css">
/* Video Websites */
a[href *="youtube.com/watch?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/youtube.gif) no-repeat center right; } a[href *="metacafe.com/watch/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/metacafe.gif) no-repeat center right; }
/* Image Websites */
a[href *="flickr.com/photos/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/flickr.jpg) no-repeat center right; } a[href *="imageshack.us"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/imageshack.jpg) no-repeat center right; } a[href *="photobucket.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/photobucket.png) no-repeat center right; } a[href *="picasaweb.google"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/picasa.gif) no-repeat center right; }
/* Extensions */
a[href$='.doc'], a[href$='.rtf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/word.gif) no-repeat center right; } a[href$='.txt'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/txt.gif) no-repeat center right; } a[href$='.xls'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xls.png) no-repeat center right; } a[href$='.rss'], a[href$='.atom'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rss.gif) no-repeat center right; } a[href$='.torrent'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/torrent.gif) no-repeat center right; } a[href$='.vcard'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/vcard.gif) no-repeat center right; } a[href$='.exe'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/exe.gif) no-repeat center right; } a[href$='.pps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pps.gif) no-repeat center right; } a[href$='.pdf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pdf.gif) no-repeat center right; } a[href$='.xpi'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xpi.png) no-repeat center right; } a[href$='.fla'], a[href$='.swf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/swf.png) no-repeat center right; } a[href$='.zip'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/zip.gif) no-repeat center right; } a[href$='.rar'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rar.png) no-repeat center right; } a[href$='.ical'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ical.gif) no-repeat center right; } a[href$='.css'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/css.png) no-repeat center right; } a[href$='.ttf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ttf.png) no-repeat center right; } a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/jpg.jpg) no-repeat center right; } a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mpg.png) no-repeat center right; } a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mp3.gif) no-repeat center right; }
/* Messenger */
a[href ^="aim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/aim.gif) no-repeat center right; } a[href ^="msnim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/msn.gif) no-repeat center right; } a[href *="edit.yahoo.com/config/send_webmesg?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/yim.gif) no-repeat center right; } a[href ^="skype:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/skype.gif) no-repeat center right; }
/* Mail */
a[href ^="mailto:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/email.png) no-repeat center right; }
/* Social Networks */
a[href *="facebook.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/facebook.jpg) no-repeat center right; } a[href *="twitter.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/twitter.gif) no-repeat center right; }
/* Other */
a[href *="wikipedia.org/wiki"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/wikipedia.png) no-repeat center right; } 
/* External Links */
a[target="_blank"]
{padding: 5px 20px 5px 0;background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/external.gif) no-repeat center right;}
/ * Use this class if you want your images not to be added with the icon * /
.imagelink { padding: 0px !important; background-image: none !important; }
</style>

Trong đoạn code CSS ở trên, bạn có thể xóa bỏ phần CSS bất kỳ liên quan đến kiểu liên kết mà bạn không cần sử dụng. 

Về cấu trúc HTML, bạn tạo cấu trúc thông thường cho liên kết dưới dạng:
<a href="URL_liên kết">Liên kết</a>

Đối với hình ảnh, nếu bạn không muốn hiển thị icon thì sử dụng cấu trúc HTML sau đây:

<a class="imagelink" href="URL_liên kết hình ảnh"><img src="URL_liên kết hình ảnh"/></a>

Đối với liên kết ngoài bạn muốn hiển thị icon sau liên kết thì sử dụng cấu trúc HTML sau đây:

<a target="_blank" href="URL_liên kết ngoài">Liên kết ngoài</a>

Thủ thuật này áp dụng tốt cho cả Blogger. 

Tạo diễn đàn mini bằng hệ thống nhận xét Disqus

(Huynh Nhat Ha's Blog) -- Trước đây tôi đã dùng Hệ thống nhận xét Disqus trong một khoảng thời gian và tôi nhận thấy hệ thống nhận xét này có nhiều điểm tích cực. Nếu bạn đã dùng trong một thời gian lâu thì nên duy trì nó. Hiện nay tôi quay sang dùng lại Hệ thống nhận xét của Blogger bởi vì blog của tôi chuyên về thủ thuật Blogger cho nên cần phải sử dụng hệ thống nhận xét của chính Blogger. 

Phải chăng khi quay trở lại sử dụng Hệ thống nhận xét của Blogger thì tôi sẽ không bao giờ dùng đến Hệ thống nhận xét Disqus? Không. Tôi cho rằng nó vẫn còn hữu ích đấy. Tại sao chúng ta không tạo một diễn đàn mini sử dụng Hệ thống nhận xét Disqus (Disqus Mini-Forum). Tôi đã nghiên cứu và áp dụng thành công thủ thuật này. 

Bước đầu tiên là tạo một blogspot dùng riêng cho diễn đàn mini Disqus. Đăng nhập Blogger đến bảng điều khiển của blogspot đó, vào Design >> Edit HTML. Dùng tổ hợp phím Ctrl + A rồi xóa toàn bộ code trong Template. Đặt toàn bộ nội dung code dưới đây vào trong Template.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body {background: #FFF; color: #777; font-family: Arial; font-size: 12px; margin: 0; text-align: center;}
#navbar {display: none; height: 0; visibility: hidden;}
a:link, a:visited {color: #006400; font-family: arial; text-decoration: none;}
a:hover {color: #3F9CC7; text-decoration: underline;}
#header-wrapper {background-color: #000; margin: 0 auto; text-align: center;}
#header-wrapper h1 {color: #92C72A; font-size: 50px; font-weight: normal; line-height: 100px; margin: 0;}
#outer-wrapper {margin: 0 auto; padding: 10px; text-align: left;}
#content-wrapper {margin: 0 auto; width: 600px;}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<h1>Diễn đàn Mini</h1>
</div>
<div id='content-wrapper'>
<div id='disqus_thread'/>
<script src='http://disqus.com/forums/tencuaban/embed.js' type='text/javascript'/>
<noscript><a href='http://disqus.com/forums/tencuaban/?url=ref'>Xem thảo luận</a></noscript>
</div>
</div>
</body>
</html>

Ở trong đoạn code trên, chú ý thay tencuaban bằng shortname trong tài khoản Disqus của bạn. 

Chú ý tham số width: 600px, điều chỉnh chiều rộng tương đương với chiều rộng của trang mà bạn muốn đặt diễn đàn mini. 

Lưu Template. Sau đó xem trang blogspot này để lấy liên kết của blog (URL_blog).

Bước tiếp theo là Đăng nhập blogspot chính của bạn. Tạo một trang tĩnh có tên là Diễn đàn mini và đặt đoạn code sau đây vào phần nội dung trang ở chế độ Edit HTML trong trang.

<div align="center"><iframe scrolling="yes" style="width:100%;height:500px;" frameborder="0" marginheight="0" src="URL_blog" marginwidth="0" align="middle"></iframe></div>

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

 

Blogger news

Blogroll

About