Thứ Sáu

thêm tiện ích đánh giá vào blog


Để giúp người đọc gắn kết với blog, Blogvn đề nghị một công cụ đánh giá bài viết khá hay từ trang JS-Kit. 5 sao là mức đánh giá cao nhất cho một bài đăng. Đây là một công cụ viết bằng JavaScript và dễ dàng chèn vào Template (Mẫu) của Blogger như hướng dẫn của người đề nghị trên. Tuy nhiên tôi xin cung cấp thêm vị trí đặt code khác hay hơn.

Sau khi đăng nhập Blogger, bạn chọn Layout (Mẫu) -> Edit HTML (Chỉnh sửa HTML) và đánh dấu chọn Expand Widget Templates (Mở rộng tiện ích mẫu). Bạn cũng nên sao lưu template của mình trước khi thực hiện tiếp.

Chúng ta sẽ chèn vào vị trí phía ngay sau tiêu đề của bài đăng và nằm cùng bài viết.

Bây giờ kéo thanh trượt hoặc nhấn phím Ctrl + F để tìm đoạn code này:

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

Bạn chỉ việc dán đoạn code dưới đây phía ngay sau đoạn code trên:

<div style="float: left; margin: 5px;" class="js-kit-rating" title="Đánh giá bài viết này" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>

Thay left bằng right nếu muốn công cụ xuất hiện bên phải.

Trường hợp sử dụng Read more (Đọc thêm) chỉ muốn công cụ xuất hiện khi bài đăng hiện ra đầy đủ, ví dụ như blog này, hãy dùng đoạn code sau:

<b:if cond='data:blog.pageType == "item"'>
<div style="float: left; margin: 5px;" class="js-kit-rating" title="Đánh giá bài viết này" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>
</b:if>


Hình. Hiển thị bên phải

flash dep cho blog

Demo:
http://imgfree.21cn.com/free/flash/8.swf
http://imgfree.21cn.com/free/flash/9.swf
http://imgfree.21cn.com/free/flash/5.swf
http://imgfree.21cn.com/free/flash/6.swf
http://imgfree.21cn.com/free/flash/13.swf
http://imgfree.21cn.com/free/flash/14.swf
http://imgfree.21cn.com/free/flash/17.swf
http://imgfree.21cn.com/free/flash/21.swf
http://imgfree.21cn.com/free/flash/23.swf
http://imgfree.21cn.com/free/flash/25.swf
http://imgfree.21cn.com/free/flash/27.swf
http://imgfree.21cn.com/free/flash/33.swf
http://imgfree.21cn.com/free/flash/35.swf
http://imgfree.21cn.com/free/flash/40.swf
http://imgfree.21cn.com/free/flash/45.swf
http://imgfree.21cn.com/free/flash/49.swf
http://imgfree.21cn.com/free/flash/51.swf
http://imgfree.21cn.com/free/flash/52.swf
http://imgfree.21cn.com/free/flash/54.swf
http://imgfree.21cn.com/free/flash/55.swf
http://imgfree.21cn.com/free/flash/57.swf
http://imgfree.21cn.com/free/flash/61.swf
http://imgfree.21cn.com/free/flash/62.swf
http://imgfree.21cn.com/free/flash/66.swf
http://imgfree.21cn.com/free/flash/67.swf
http://imgfree.21cn.com/free/flash/81.swf
http://imgfree.21cn.com/free/flash/82.swf
http://imgfree.21cn.com/free/flash/88.swf
http://imgfree.21cn.com/free/flash/113.swf
http://imgfree.21cn.com/free/flash/129.swf
http://imgfree.21cn.com/free/flash/129.swf
http://imgfree.21cn.com/free/flash/140.swf
http://imgfree.21cn.com/free/flash/141.swf
http://imgfree.21cn.com/free/flash/100.swf
http://imgfree.21cn.com/free/flash/22.swf
http://imgfree.21cn.com/free/flash/1.swf
http://imgfree.21cn.com/free/flash/2.swf
http://imgfree.21cn.com/free/flash/3.swf
http://imgfree.21cn.com/free/flash/4.swf
http://imgfree.21cn.com/free/flash/10.swf
http://imgfree.21cn.com/free/flash/11.swf
http://imgfree.21cn.com/free/flash/12.swf
http://imgfree.21cn.com/free/flash/15.swf
http://imgfree.21cn.com/free/flash/16.swf
http://imgfree.21cn.com/free/flash/18.swf
http://imgfree.21cn.com/free/flash/19.swf
http://imgfree.21cn.com/free/flash/20.swf
http://imgfree.21cn.com/free/flash/22.swf
http://imgfree.21cn.com/free/flash/24.swf
http://imgfree.21cn.com/free/flash/26.swf
http://imgfree.21cn.com/free/flash/28.swf
http://imgfree.21cn.com/free/flash/29.swf
http://imgfree.21cn.com/free/flash/30.swf
http://imgfree.21cn.com/free/flash/31.swf
Đó là link có thể sem trực tiếp khi click vào link hoặc dùng flashget copy toàn bộ link rồi down 1 lần luôn (nhanh hơn là sài IDM)
Những link trên là giới thiệu thôi còn mún xem thêm thì sửa link lại

Tạo tuyết rơi cho blog.


Tạo tuyết rơi cho blog.

Xem demo thực hiện trên blog của tôi:

Hướng dẫn:
Vào Bố Cục > Thêm Tiện ích > HTML/JavaScript và dán đoạn code dưới đây vào .

<style type="text/css">body {background: url('http://www.boomspeed.com/sfhelpers/backgrounds/80.gif') fixed}</style><b style=position:absolute;left:10;top:2;ptsize:3pt;> </b>

hiệu ứng link cho blog


Hiệu ứng link cho blog !

Các đường link là không thể thiếu với bất kỳ trang web, 4rum hay blog nào. Có một số hiệu ứng với đường link có thể khiến đường link nổi bật hẳn lên.

Đầu tiên là hiệu ứng cho đường link lúc bình thường có cú pháp như sau

a{properties:value;} 
Trong code trên các bạn có thể thay properties:value bằng nhiều thuộc tính khác nhau. Ví dụ như thay màu sắc cho link thì thêm color, thêm nền cho link thì thêm background ... và nên nhớ mỗi thuộc tính phải cách nhau bởi dấu ";" nhé. Sau đây là một số hiệu ứng mà Beta Plus cho áp dụng

color:#FFFFFF
Chỉnh màu sắc cho link, có thể thay #FFFFFF bằng mã màu khác.

background:transparent url(link hình) top center 
Thay link hình bằng link bạn muốn
font-size:Apx
Thay đổi độ lớn của tên link, thay A bằng số thích hợp

font-family:Tahoma
Thay đổi kiểu font, có thể thay Tahoma bằng tên font bạn muốn

font-style:italic
Chỉnh font chữ nghiêng

font-weight:bold
Chỉnh font chữ đậm

text-decoration:underline
Thay đổi thuộc tính cho link, có thể thay underline (gạch dưới) bằng none (không gạch), overline (gạch đầu), line-through (gạch giữa), blink (nhấp nháy). Lưu ý blink không hiển thị trên IE

text-shadow: 0px 0px 10px #f0f,0px 0px 10px #f0f,0px 0px 10px #f0f


border-top:1px dashed #fff;border-right:1px dashed #fff;border-left:1px dashed #fff;border-bottom-style:dashed;border-bottom-color:#fff;border-bottom-width:1px;


Hiệu ứng đường viền. Trong toàn bộ code trên thì 1px là độ "dày" của đường viền, có thể thay 1 bằng số khác. dashed là kiểu đường viền có thể thay bằng dotted, solid, double, groove, ridge, inset, outset, inherit. Còn #fff là màu đường viền, có thể thay bằng mã màu khác

Ví dụ code cho link đậm, nghiêng, có hình nền


Quote:
a{background:transparent url(http://img13.imageshack.us/img13/2715/48337911.gif) top center;font-style:italic;font-weight:bold;} 


Nhớ giữa các thuộc tính phải có dấu ";" nhé 

Ở phần trên là hiệu ứng cho đường link lúc bình thường. Ngoài ra còn hiệu ứng cho link ở nhiều trạng thái


Hiệu ứng đã click vào link và quay trở lại xem trang đó, visited nghĩa là được viếng thăm. Code này có tác dụng đánh dấu các link đã xem khi ta quay lại trang chủ.

a:visited{properties:value;} 
Hiệu ứng khi di chuột vào link


a:hover{properties:value;}
 
Hiệu ứng khi click vào link và chưa buông ra


a:active{properties:value;}
 
Trong các code trên ở phần properties:value các bạn thay tương tự như phần cho link lúc bình thường.

Ví dụ code hiệu ứng khi di chuột vào link, link hiện nền và chữ đậm


Quote:
a:hover{background:transparent url(http://img13.imageshack.us/img13/2715/48337911.gif) top center;font-weight:bold;} 

Tùy vào từng hiệu ứng và thuộc tính mà các bạn có thể tự sáng tạo cho đường link blog của mình. Và điều cuối cùng olympia nhắc các bạn nên nhớ là các thuộc tính phải ngăn cách nhau bởi dấu ";" Còn ai muốn tìm hiểu rõ hơn thì tham khảo ở trang sau >>> http://www.w3schools.com/CSS/css_link.asp

Hiển thị nhãn (label) hoặc danh sách liên kết link list theo kiểu đóng mở trên blogger


Làm thế nào để các nhãn bài viết hay một danh sách các link được tạo bằng các tiện ích này có thể đóng/mở (ẩn/hiện) chỉ bằng một thao tác nhấn chuột? Với một danh sách liên kết thật dài, hay một blog có rất nhiều nhãn bài viết ví dụ như blog này, việc cho chúng ẩn đi sẽ làm giao diện blog trở nên gọn hơn. Khi người đọc có nhu cầu họ dễ dàng click xem nội dung.

Công việc có thể tiến hành qua các bước:

Bước 1. Đăng nhập Blogger, hãy kiểm tra bạn đã dùng tiện ích Label (Nhãn) nào chưa trên Layout (Trình bày). Nếu chưa nhấn Add a Page Element (Thêm phần tử trang) để thêm.


Bước 2. Nhấn Edit HTML (Chỉnh sửa HTML) để sao lưu template bạn đang dùng.

Bước 3. Chép đoạn code phía dưới đây dán phía trên thẻ </head> trong khung Edit Template (Chỉnh sửa mẫu) và lưu lại.


<style type='text/css'>
.commenthidden {display:none}
.commentshown {display:inline}
</style>

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown")
{ whichpost.className="commenthidden"; }
else
{ whichpost.className="commentshown"; }
}
</script>
Bước 4. Nhấn vào ô Expand Widget Templates (Mở rộng mẫu tiện ích). Bây giờ hãy tìm vị trí của từ khóa id='label1' (Dùng hai phím Ctrl + F để hiện hộp thoại và tìm kiếm với từ khóa này). Nếu bạn sử dụng cho nhãn thứ hai hãy dùng từ khóaid='label2'.


Đoạn mã mà bạn nhìn thấy sẽ như bên dưới.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Bước 5. Hãy bổ sung phần chữ in đậm vào đúng vị trí hoặc bạn chép hết code này thay thế đoạn code trên và thay đổi những chữ màu đỏ và xanh (nếu cần).

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[+] MỞ</a>
<div class='commenthidden' id='PHANLOAI'>

  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>

<a aiotitle='click to expand' href='javascript:togglecomments("PHANLOAI")'>[-] ĐÓNG</a>
</div>

</b:includable>
</b:widget>

Giải thích thêm, các chữ màu đỏ PHANLOAI là một tên phân biệt duy nhất, giống nhau ở một tiện ích, bằng tiếng Anh hoặc Việt không dấu. Không trùng khi bạn dùng kiểu hiện thị này cho nhiều tiện ích khác. Nghĩa là nếu bạn dùng cho hai tiện ích nhãn ở cùng một blog, bạn phải đặt chúng phân biệt, chẳng hạn PHANLOAI1,PHANLOAI2. Chữ màu xanh [+] MỞ hay [-] ĐÓNG là chữ hiển thị mà bạn nhìn thấy trên blog. Thật ra giữa mở và đóng chỉ có một đoạn code, bạn nhấn trên [+] MỞ khi danh sách nhãn bài viết hiện ra cũng chính là đóng!

Tương tự bạn có thể tìm với từ khóa id='LinkList1'id='HTML1' ... nếu muốn ẩn các tiện ích Link List, HTML/JavaScript...

Chúc thành công!

Related Posts with Thumbnails

chèn flash game vào trong blog


Ngày nay, chơi game là một thú tiêu khiển hấp dẫn giới trẻ. Nếu thường xuyên truy cập Internet tại các điểm công cộng bạn sẽ không lạ gì những trò chơi online mà mọi người ở đây chơi. Nào là Võ Lâm Truyền Kỳ, Tam Quốc Chí, Thế Giới Hoàn Mỹ, Boom… đặc biệt đối với các bạn nữ: Audition.
Nếu thích bạn có thể chèn vào blog của mình vài trò chơi flash nhỏ giúp người đọc vừa đọc vừa thư giản. Dưới đây là ba trang web mà tôi tìm thấy cung cấp game miễn phí cho blog của bạn.

http://www.miniclip.com/games/en/webmaster-games.php
http://www.freegamesforyourwebsite.com/
http://www.addictinggames.com/gotd/games_for_your_site.html
Công việc của bạn rất đơn giản, chỉ cần chép lại code và đưa vào HTML/JavaScript (Template (Mẫu) -> Add a Page Element (Thêm phần tử trang) -> HTML/JavaScript) hoặc đưa thẳng vào bài viết (tại cửa sổ viết bài click Edit Html, dán code vào đó, thay vì bạn chọn Compose).
Lấy code lần lượt các trang có địa chỉ từ trên xuống như hình.
Hình 1.
Hình 2.
Hình 3.
Tùy theo kích thước của main-wrapper, bạn có thể định lại chiều rộng (width) và cao (height) của flash game cho cân đối. Ví dụ đoạn code mà bạn lấy được như sau:
<embed src=”http://farm.addictinggames.com/D78AQSAKQLQWI9/3965.swf” type=”application/x-shockwave-flash” width=”480″ height=”480″></embed><br><a href=”http://www.addictinggames.com” target=”_blank” title=”Play Games”>Play Games at AddictingGames</a>
Ở đây chiều rộng (width=”480″) và cao (height=”480″), tôi sẽ định lại cho width=”468″ và height=”468″.
Nào, bạn đã thấy kết quả bên dưới chưa. Thưởng thức trò chơi này đi nhé!
Còn đây là trò Boom
Code của trò chơi này:
<embed allowscriptaccess=”none” width=”400″ src=”http://vtc.vn/uploadfiles/file_293_Boom.swf” height=”385″ type=”application/x-shockwave-flash”></embed>

đăng kí tên miền co.cc cho blogger ,blogyahoo


Cách đây không lâu Phamen có một bài viết hướng dẫn đăng ký tên miền miễn phí dạng YOURBLOG.uni.cc kết hợp với EveryDNS.net để sử dụng cho Blogger nhằm giúp các đọc giả sử dụng mạng VNPT không bị ngăn khi truy cập đến địa chỉ blog có dạng *.BlogSpot.com. Tác giả đánh giá đây là sự kết hợp tuyệt vời giữa hai dịch vụ.

Tuy nhiên có một dịch vụ tương tự như vậy còn tuyệt vời hơn khi không những miễn phí đăng ký tên miền còn được khuyến mãi luôn cả quản lý DNS! Như vậy đồng nghĩa với việc chúng ta không cần phải đăng ký để sử dụng DNS trung gian, giảm đi một công đoạn và một tài khoản! Bên cạnh đó những người sử dụng Yahoo! 360 hay các dịch vụ blog khác cũng có thể dùng dịch vụ này để tạo thêm một địa chỉ đến blog của mình. Đó là dịch vụ tên miền có dạng co.cc.

Đầu tiên bạn gõ tên miền mình muốn vào khung dưới đây để kiểm tra có người đăng ký chưa:



Khi tìm đã tìm được tên miền ưng ý. Bạn tiến hành đăng ký. Nếu không rành tiếng Anh, hãy đổi sang tiếng Việt ở menu chọn ngôn ngữ nằm trên góc phải.


SỬ DỤNG CHO BLOGGER:

Với Blogger (Blog*Spot) hỗ trợ CName, chúng ta sẽ chỉnh sửa trên Zone Records. Các giá trị Record ở đây thiết lập như bảng sau:



Lưu ý: Ở khung điền Host bạn chỉ cần gõ www các phần còn lại tên miền sẽ tự động được điền. Đến đây bạn có thể tiến hành khai báo tên miền mới cho blog và chờ tên miền này hoạt động trong vòng 1 giờ sắp tới.

CÁCH SỬ DỤNG CHO YAHOO! 360 PLUS VÀ YAHOO! 360:

Tên miền co.cc cũng hỗ trợ chuyển tiếp tới một địa chỉ khác, ở đây chúng ta sẽ chuyển tiếp đến blog Yahoo! 360. Để sử dụng bạn chọn URL Forwarding và nhập thông tin.

  • Redirect To: Địa chỉ chuyển tiếp đến blog của bạn. Ví dụ:vn.myblog.yahoo.com/dv2n (Yahoo! 360 Plus) hay 360.yahoo.com/dv2n(Yahoo! 360)
  • Page Title: Tên blog. Ví dụ: Thủ thuật blog
  • Frame: Chọn Path Forwarding (Display real address) để chuyển tiếp đến địa chỉ blog của bạn, hiển thị địa chỉ thật của blog. Chọn còn lại nếu bạn muốn dấu địa chỉ blog thật của mình.
  • Meta Description: Miêu tả blog.
  • Meta Keywords: Các từ khóa của blog.
Hai thẻ meta này giúp các công cụ tìm kiếm đánh chỉ mục và tìm thấy blog của bạn trong các máy chủ tìm kiếm của họ.



Cuối cùng nhấp Setup để hoàn thành. Vậy là bạn có thể truy cập blog với một địa chỉ khác địa chỉ mặc định của nhà cung cấp. Hãy thử truy cập blog Yahoo! 360 Plus của tôi xem nhé: http://www.ttblog.co.cc.


Ngày nay tên miền quốc tế có giá khá rẻ, nếu không thích sử dụng miễn phí như vậy bạn có thể đầu tư một khoản nhất định mua tên miền, blog của bạn sẽ chuyên nghiệp hơn chẳng khác nào một website!

Nếu bạn muốn chơi blog một cách chuyên nghiệp thì việc bỏ ra 10$ để có một tên miền riêng là một khoảng đầu tư cần thiết. Xin gợi ý bạn một nhà cung cấp tên miền và dịch vụ hosting được nhiều người lựa chọn đó là GoDaddy.com.

hiệu ứng tuyết rơi cho blogger


Khi những chiếc lá vàng cuối thu lìa cành cũng là lúc mùa đông đang về. Dù đang lang thang ngoài phố hay trên mạng, bạn vẫn cảm nhận được khí trời thay đổi. Lát đát một vài website khoát lên mình bộ áo mới dành riêng cho mùa đông. Những ai chưa kịp sắm sửa thì bằng cách này hay cách khác vẫn có mùa đông riêng mình trên ngôi nhà ảo.



Một trong những cách tạo nên không khí mùa đông trên blog chính là thêm hiệu ứng tuyết rơi. Còn nhớ cách đây khá lâu Thủ Thuật Blog có hướng dẫn bạn cách chèn hiệu ứng này. Tuy nhiên hôm nay chúng ta sử dụng đoạn JavaScript mà WordPress.com vừa thông báo gửi đến người dùng của mình, hiệu ứng này được sử dụng cho đến ngày 04/01. Đọc hướng dẫn sau đây để biết các bước thực hiện.

Đối với WordPress.com, đăng nhập tài khoản tại yourblog.wordpress.com/wp-admin hoặc wordpress.com

  • Chọn Giao diện
  • Nhấn Extras
  • Và đánh dấu chọn dòng Show falling snow on my blog (Only until January 4th) trước khi nhấn Update Extras


Đối với WordPress sử dụng trên host và tên miền riêng (self-hosted WordPress) có ba cách sau để chèn đoạn JavaScript hiệu ứng:
  • Cách 1. Đăng nhập tài khoản quản lý tại địa chỉ www.yourdomain.com/wp-admin, nhấp thực đơn xổ xuống Appearance (Giao diện) -> Editor, chọn file header.php ngay bên phải và dán đoạn code dưới đây ngay trên thẻ </head> trước khi nhấn Update File (ngay bên dưới). Lưu ý file header.php phải ở chế độ cho phép cập nhật. Nếu tệp tin này không ở trạng thái cho phép cập nhật thì xem cách 2.

<script src='http://s1.wp.com/wp-content/plugins/snow/snowstorm.js?m=1291226695g&ver=1291226695' type='text/javascript'/>

  • Cách 2. Đăng nhập vào host thông qua tài khoản quản lý hosting hoặc bằng FTP vào thư mục gốc chứa Theme đang dùng mở file header.php và chèn ngay phía trên thẻ </head>

Trong khi sử dụng Blogger (BlogSpot) hãy dán đoạn code trong cách 1 trên trước thẻ </head>. Việc này được thực hiện bằng cách đăng nhập blog, chọn Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), tìm và dán ngay phía trên thẻ </head>trước khi nhấn lưu template. Nếu bạn gặp lỗi hãy thay & trong địa chỉ đoạn JavaScript (ngay sau 1291226695g) bằng & a m p ; (viết liền, không có khoảng trắng).

Để không bị giới hạn về thời gian, hãy tải đoạn JavaScript trên về host riêng của mình (nếu có, có thể sử dụng host miễn phí 110mb.com) và tha hồ cho tuyết rơi hết mùa đông!

Bạn có thể thấy kết quả ngay trên blog này vào thời điểm bài viết này được đăng.

gửi link bài viết cho bạn bè qua yahoo mensenger


Tiếp theo hướng dẫn kèm biểu tượng chia sẻ bài viết qua Yahoo! Messenger lần này chúng ta sẽ đến với cách đính kèm link dưới bài viết giúp cho đọc giả có thể dễ dàng chia sẻ cho bạn bè của mình qua các chương trình tin nhắn tức thời. 
<div class='post-footer-line post-footer-line-3'>
      <!-- Nơi chèn code -->
       <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>
      


Hãy thay <!-- Nơi chèn code --> bằng đoạn mã bên trên và lưu lại.

Box này chỉ xuất hiện phía dưới bài viết ở trang con. Nếu bạn không sử dụngReadmore hãy comment để được giúp đỡ.

Xong!


 

Blogger news

Blogroll

About