Advertise Here ?
Showing posts with label thủ thuật BLOG. Show all posts
Showing posts with label thủ thuật BLOG. Show all posts

Bảng mã màu hệ Hecxa

- Click vào màu muốn chọn rồi xem mã bên dưới .

- Khi muốn tạo một màu mới bạn nhập mã màu mình chọn vào ô đầu tiên ( ô mã màu ) rồi nhấn
Precisely sẽ hiển thị màu bạn chọn bên dưới .




Nguồn : http://kieuphong1109.googlepages.com/mamau.html
>> more...


Chèn hình đại diện (avatar) vào trong phần Comment của Blogger

Hôm nay rảnh rỗi đi "dạo weblog " thấy trang boyprodx.blogspot.com có thủ thuật này hay hay nên post lên cho mọi người cùng tham khảo ( không biết có quá cũ không nhỉ ? vì lâu quá rồi tôi không đụng tới thủ thuật blog nữa)

Như các bạn đã biết, các blog 360 của Yahoo, WordPress đều có chế độ hiển thị hình đại diện (avatar) của mỗi người khi comment trên blog. Tuy nhiên, cho đến nay thì Blogger vẫn chưa có tính năng đó. Vậy phải làm sao để thêm được tính năng này ? Bài viết hôm nay sẽ giúp cho các bạn đấy



Đầu tiên, để mình trưng bày tác phẩm của thủ thuật này cho các bạn xem qua nhé

Hình đại diện được lấy từ ảnh trong Blogger Profile , chính vì thế mà chỉ có những blogger đã đăng nhập, đồng thời có hình trong Blogger Profile thì khi comment mới xuất hiện được avatar. Đối với các trường hợp còn lại thì sẽ xuất hiện hình này
Các bạn thấy thủ thuật này như thế nào ? Rất tuyệt đúng không. Nào , chúng ta cùng thực hiện nhé :
  • Đầu tiên, các bạn đăng nhập vào Blogger > Layout > Edit HTML > Bật Mở rộng mẫu tiện ích (nhớ backup lại template nhé)


  • Tìm thẻ </head> và thêm đoạn code dưới đây vào ngay trước thẻ </head> nhé

    <script src='http://boyprodx.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>

    <script type='text/javascript'>

    //<![CDATA[

    addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});

    //]]>

    </script>

  • Bây giờ các bạn hãy tìm đoạn code này nhé

    <dl id='comments-block'>

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

    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>

    <a expr:name='data:comment.anchorName'/>

    <b:if cond='data:comment.author == data:post.author'>


    <a expr:href='data:blog.homepageUrl'>

    <data:comment.author/></a><b:else/>

    <b:if cond='data:comment.authorUrl'>

    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>

    <b:else/>

    <data:comment.author/>

    </b:if></b:if>


    <data:commentPostedByMsg/>

    </dt>

    <b:if cond='data:comment.author == data:post.author'>

    <dd class='blog-author-comment'>

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

    </dd>

    <b:else/>

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

    </b:if>


    <dd class='comment-footer'>

    <span class='comment-timestamp'>

    <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>

    <data:comment.timestamp/>

    </a>

    <b:include data='comment' name='commentDeleteIcon'/>

    </span>

    </dd>


    </b:loop>

    </dl>

  • Thay thế toàn bộ đoạn code trên bằng đoạn code dưới đây

    <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'>

    <div class='commentphoto' style='float:left;margin:5px;'/>

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

    <div style='clear:both;'/>

    </b:loop>

    </dl>

  • Lưu lại template và xem kết quả.


  • Theo:boyprodx.blogspot.com

    >> more...


    Google Blogger hỗ trợ sao lưu, phục hồi dữ liệu

    Mới đây, Google đã giới thiệu một trong những tính năng được mong đợi nhất của nền tảng blog Blogger trứ danh của mình đó là khả năng import và export. Nói cách khác, người dùng Blogger đã có thể sao lưu và phục hồi nguyên trạng blog của mình với một vài thao tác đơn giản.

    Từ đây, việc chăm lo cho đứa con tinh thần của người dùng trên nền tảng này đã trở nên đơn giản hơn trước rất nhiều. Khác với những blog sử dụng hosting, tên miền, cơ sở dữ liệu riêng, các nền tảng cộng đồng như Wordpress.com, Blogger vv...có thể dễ dàng sử dụng, nhưng người dùng không thể sao lưu phục hồi cơ sở dữ liệu của mình. Điều này làm không ít blogger đã mạnh tay khước từ thuỷ chung với các nền tảng công cộng và xây dựng những trang nhật kí riêng dựa hoàn toàn vào chi phí cá nhân.

    Với sự nâng cấp chắc chắn sẽ được cộng đồng vui mừng chào đón này, Google cho thấy Blogger vẫn sẽ là thị trường quảng cáo đáng kể và nhật kí cá nhân trên mạng vẫn sẽ là trào lưu chưa thể thui chột trong nay mai. Với sự nâng cấp đáng kể này, người dùng sẽ có thêm động lực để quyết định trung thành với Blogger, vốn ban đầu không thuộc sở hữu Goolge.

    Chỉ cần vài thao tác đơn giản để bảo vệ "blog yêu"

    Nguy cơ bị xoá sạch blog của người dùng đã được loại bỏ, người dùng có thể nhập nhiều blog làm một. Ngoài ra, theo giới thiệu từ một số trang blog, trong tương lai, người dùng còn hi vọng sở dữ liệu từ Blogger có thể được "tái chế" trên những tền tảng thay thế khác như Wordpress, Typepad, LiveJournal vv...

    Để thực hiện việc nhập-xuất cơ sở dữ liệu, chỉ cần vào Blog Tools--> Setting | Basic tab và chọn Import and Export.

    Trong khi Google luôn được coi là nhà cung cấp thường xuyên nâng cấp các dịch vụ của mình thì có thể nói, lần nâng cấp Blogger lần này mới thực sự là sự kiện đáng ghi nhớ gần đây của hãng.

    *** Như vậy người dùng Blogger sẽ có thể backup dữ liệu của mình lên một Host khác để cho an toàn và cải thiện tốc độ truy xuất khi có nhu cầu . Theo tôi Google sẽ từng bước khắc phục nhược điểm của mình để vươn lên dẫn đầu trong các nhà cung cấp DV Blog . (kieuphong)



    Theo:thongtincongnghe.com

    >> more...


    Chèn tiện ích "Top of Page" cố định trên màn hình trong khi di chuyển cho blogspot

    Dùng tiện ích Top of Page không thể thiếu trong mỗi một blog hay website, nó giúp cho khách ghé thăm có thể tiết kiệm thời gian, lướt blog (website) nhanh chóng !
    Hôm nay tôi sẽ giới thiệu với các bạn một cách có thể chèn tiện ích Top of Page sao cho nó luôn luôn xuất hiện cố định tại một góc bên phải-dưới của màn hình, giúp cho khách ghé thăm thuận tiện trong thao tác di chuyển.

    Theo tác rất đơn giản, bạn chỉ cần thực hiện theo các bước sau:

    1.Đâu tiên bạn hãy Download file javascript sau: topbottom .

    2.Upload lên host của bạn. Cũng như AnhVõ giới thiệu, bạn nên upload lên googlepages của mình nó sẽ tồn tại mãi mãi.

    3.Tạo đoạn code:


    Còn nếu như bạn lười, bạn có thể lấy luôn đoạn code của tôi:

    Tiếp theo có 2 trường hợp xảy ra:

    -Bạn dùng template classic thì bạn chèn đoạn code dưới :



    -Bạn dùng template layout thì bạn chèn đoạn code dưới:



    Bạn có thể tham khảo thêm cách chèn khác tại bài Chèn tiện ích "Top of Page", Top of Post"

    Vậy là xong rồi đó !
    Bạn có thể xem trước kết quả để xem nó như thế nào tại blog của tôi: http://sinhhoc.org

    Tô Cương

    >> more...


    Chèn Icon nhỏ trước tiêu đề bài đăng

    Theo mẫu mặc định thì thanh tiêu đề bài đăng trên Blog của bạn là một dòng chữ đơn thuần và bạn có thể thay đổi màu sắc của nó trong "Chỉnh sửa HTML", "kiểu chữ và màu". Với nhiều bạn thì như vậy là quá đủ , nhưng cũng có nhiều bạn muốn chèn thêm 1 icon nhỏ phía trước để trang trí , tạo ấn tượng cho bài viết đối với người đọc.

    * Cách chèn :...


    + Trước tiên thì bạn phải chọn cho mình một hình ảnh (gif , png ....),flash hoặc bất cứ thứ gì bạn muốn chèn . Nhưng lưu ý là bạn nên chọn kích thước nhỏ ( nhỏ hơn 16.16 px) cho phù hợp với thanh tiêu đề và có gí trị thẩm mỹ .
    + Khi đã có ảnh rồi thì bạn up lên đâu đó để lấy link ( Tôi thường up lên googlepages ) và "chèn ảnh" theo cú pháp sau:

    <img boder="0" width="11" height="11" src='http://kieuphong1109.googlepages.com/ngoisao1.png'/>


    + Đăng nhập vào Blogger.com -> Trình bày ( Template layout) -> chỉnh sửa HTML -> Mở rộng Mẫu Tiện ích.
    - Kéo thanh trượt xuống và tìm dòng :( Nên dùng tổ hợp phím Ctrl+F để tìm )



    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'>Vị Trí Chèn <data:post.title/></a>

    - Chèn hình ảnh ( hoặc cái bạn muốn chèn ) như VD hình bên dưới :

    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><img boder="0" width="11" height="11" src='http://kieuphong1109.googlepages.com/ngoisao1.png'/> <data:post.title/></a>



    * Thay đổi: http://kieuphong1109.googlepages.com/ngoisao1.png bằng link dẫn tới hình ảnh của bạn và các giá trị : boder="0" width="11" height="11" sao cho phù hợp . -> Save temp lại ( Lưu Mẫu ). Đến đây là xong rồi đấy . chúc bạn thành công !

    * Lưu ý : bạn nên để 1 khoảng trống giữa hình ảnh và tiêu đề như thế này : ngoisao1.png/> <data:post.title/>
    * Hướng dẫn này chỉ dành cho Blogspot

    kieuphong


    >> more...


    Chèn hình ảnh , khung ảnh chuyển động vào Blog


    Liên kết bloggers
    metavn OnlineDELGRO
    Để trang web, Blog của bạn thêm phần sinh động bạn nên chèn thêm hình ảnh , khung ảnh , chữ chuyển động …trang trí cho Blog yêu !!!


    1 . Chèn hình ảnh vào widget , bài viết trên Blog

    * . Sử dụng tag <img/>
    : Muốn chèn hình ảnh lên widget hoặc bài viết bạn sử dụng đoạn mã sau


    <img src="http://kieuphong1109.googlepages.com/dung8.gif" border="0" height="176" width="350" />



    - src : là nguồn gốc , đường link dẫn tới ảnh ( bạn chỉ việc thay những chữ màu đỏ bằng đường link dẫn tới ảnh bạn muốn chèn )
    - boder : đường viền bao quanh ảnh ( Bạn có thể chọn giá trị bằng 0, 1, 2, 3…tùy thích )
    - width : chiều rộng của ảnh
    - height : chiều cao của ảnh


    <div align=”right” ><img src="http://images7.dantri.com.vn/Uploaded/duykhanh/JHook001.jpg" border="0" height="176" width="350" /></div>



    - Với đoạn mã như trên thì hình ảnh sẽ hiển thị phía bên phải widget ( bài đăng ) của bạn
    - Nếu muốn nó nằm về phía bên trái thì bạn chỉ việc thay chữ “right” bằng “left “, và nếu muốn nó nằm giữa thì bạn thay bằng “center
    Đa số blog có giá trị mặc định là phía bên trái . nếu muốn nó nằm ở giữa bạn chỉ cần đặt hình ảnh vào giữa hai tag <center></center> cho nhanh .
    - Có thể thêm liên kết cho ảnh băng cấu trúc sau
    <div align=”right” >
    <a href=”liên kết bạn muốn chèn
    > <
    img src="http://images7.dantri.com.vn/Uploaded/duykhanh/JHook001.jpg" border="0" height="176" width="350" />
    </a>
    </div>



    2 . Tạo khung hình , chữ chạy với thẻ <marquee>


    Mời bạn tham khảo đoạn mã sau .


    <marquee onmouseover="this.stop();" onmouseout="this.start();" direction="up" hspace="5" height="200" width=”200” loop="-1" scrollamount="1" scrolldelay="30" >
    vị trí chèn</marquee>


    - Muốn cho khung hình chạy bạn chỉ việc thay chữ vị trí chèn bằng hình ảnh ( như ở trên ) ,chữ , flash …hoặc bất cứ thứ gì bạn muốn
    • Chú thích :
    - direction="up" : hướng chuyển động . lên hoặc xuống, qua trái hoặc qua phải ( Bạn thay chữ "up" bằng "down" nếu muốn nó chạy từ trên xuống , "right" -> chạy qua phải , "left" -> chạy qua trái )
    - height="200": chiều cao
    - width=”200” : chiều rộng
    - scrollamount="1" : Tốc độ ( Bạn chọn số lớn hơn thì tốc độ chạy càng nhanh)
    - scrolldelay="30" : Số vòng chạy ( Bạn có thể chọn bằng bao nhiêu tùy thích . VD : bạn chọn =”1” thì nó sẽ chạy 1 vòng rồi dừng lại )
    - onmouseover="this.stop();" onmouseout="this.start();" : Giá trị này cho phép người dùng rà chuột vào nó sẽ dừng lại

    Để trang trí cho đẹp bạn có thể tạo khung bằng thẻ <table>

    - VD : tôi chèn vào khung bằng đoạn mã sau


    <table border="1" align="center" cellpadding="0" cellspacing="1" width="150">
    <tbody><tr>
    <td bgcolor="#000000" height="20" width="100%"><div align="center">Liên kết bloggers</div></td></tr>
    <tr>
    <td align="center" bgcolor="#41627e"><marquee onmouseout="this.start()" direction="up" behavior="scroll" scrollamount="1" scrolldelay="20" height="80" onmouseover="this.stop()" align="center">
    <a target="_blank" href="http://online.metavn.com/"><img alt="metavn Online" src="http://freecodeweb.googlepages.com/M1.gif" title="metavn Online" height="60" width="130" /></a>

    <a target="_blank" href="http://delgro.blogspot.com/"><img alt="DELGRO" src="http://buidung269.googlepages.com/Link.gif" border="0" height="60" width="130" /></a>

    <a href="http://sideduck.blogspot.com/" target="_blank" title="Free download Photoshop resources"><img src="http://sideduck.googlepages.com/130x60.gif" border="0" height="60" width="130" /></a>

    </marquee></td></tr></tbody></table>

    *** Bạn có thể coppy , sử dụng đoạn code trên và thay đổi lại những thông số màu xanh cho phù hợp

    Và nó sẽ hiển thị như hình bên dưới.



    metavn OnlineDELGRO


    metavn OnlineDELGRO


    metavn OnlineDELGRO


    metavn OnlineDELGRO


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

    kieuphong

    >> more...


    Thêm công cụ tìm kiếm cho Blog


    Như các bạn đã biết , mỗi trang web hay blog đều có công cụ Search để người đọc có thể dễ dàng tìm kiếm thông tin . Trang của bạn chưa có hộp tìm kiếm ? ..Xin mời tham khảo môt số mẫu sau ....


    1. Hộp tìm kiếm đơn giản ( tham khảo từ thuthuatblog )



    <p align="left">

    <form id="searchthis" action="LIÊN KẾT/search" style="display:inline;" method="get">

    <strong>Tìm kiếm<br/></strong>

    <input id="b-query" maxlength="100" name="q" size="20" type="text"/>

    <input id="b-searchbtn" value="Search" type="submit"/>

    </form></p>



    - Bạn chỉ việc coppy đọan mã trên rồi paste vào 1 widget ( trình bày -> thêm phần tử trang -> HTML/javascript ) và thay đổi những chữ màu đỏ cho phù hợp với trang của bạn

    * LIÊN KẾT : thay chữ "LIÊN KẾT" bằng địa chỉ blog của bạn (VD: http://kieuphong.blogspot.com)
    * Tìm kiếm : Bạn có thể thay chữ này bằng chữ Search hoặc chữ khác tùy thích . Nếu không thích nó hiển thị thì bạn có thể xóa nó đi cũng được .
    * 100 : Ðây là số kí tự tối da . Bạn có thể thay đổi cho nó lớn thêm hoặc nhỏ đi tùy thích , nhưng thường là ban nên chọn con số 100 là vừa.
    *20 : số kí tự hiển thị ( chiều dài của hộp ) . Bạn có thể thay đổi cho nó tăng lên hoặc giảm đi cho phù hợp với chiều ngang widget .
    * Search : Có thể thay chữ này bằng chữ "tìm kiếm " hoặc chữ khác tùy thích .
    - Bây giờ thì lưu thay đổi lại ....và bạn đã có một hộp tìm kiếm rất gọn và đơn giản .



    2. Hộp tìm kiếm lấy từ Google Adsense.

    Những bạn nào chưa đăng kí được Google Adsense mà vẫn muốn sử dụng công cụ Search của nó thì tham khảo đọan mã này.



    <!-- SiteSearch Google -->
    <form action="http://www.google.com.vn/custom" target="_top" method="get">
    <table border="0" bgcolor="#ffffff">
    <tr><td nowrap="nowrap" valign="top" height="32" align="left">
    <a href="http://www.google.com/">
    <img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif" align="middle"/></a>
    <br/>
    <input value="kieuphong.com" name="domains" type="hidden"/>
    <label for="sbi" style="display: none">Nhập các thuật ngữ tìm kiếm của bạn</label>
    <input maxlength="255" id="sbi" value="" name="q" size="28" type="text"/>
    <label for="sbb" style="display: none">Nộp mẫu đơn tìm kiếm</label>
    <input id="sbb" value="Tìm kiếm" name="sa" type="submit"/>
    </td></tr>
    <tr>
    <td nowrap="nowrap">
    <table>
    <tr>
    <td>
    <input id="ss0" value="" name="sitesearch" type="radio"/>
    <label for="ss0" title="Tìm Kiếm trên Web"><font color="#000000" size="-1">Web</font></label></td>
    <td>
    <input id="ss1" checked value="kieuphong.com" name="sitesearch" type="radio"/>
    <label for="ss1" title="Tìm kiếm kieuphong.com"><font color="#000000" size="-1">kieuphong.com</font></label></td>
    </tr>
    </table>
    <input value="pub-6532491234052803" name="client" type="hidden"/>
    <input value="1" name="forid" type="hidden"/>
    <input value="ISO-8859-1" name="ie" type="hidden"/>
    <input value="ISO-8859-1" name="oe" type="hidden"/>
    <input value="active" name="safe" type="hidden"/>
    <input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
    <input value="vi" name="hl" type="hidden"/>
    </td></tr></table>
    </form>
    <!-- SiteSearch Google -->



    *** Bạn chỉ việc thay những chữ kieuphong.com bằng địa chỉ blog của bạn và thay số 28 "size=28" bằng 1 con số nào đó cho vừa với widget trên trang của bạn là được .

    *** Bạn cũng có thể vào trang này đăng nhập bằng tài khoản Gmail.......và tự tạo cho mình một Custom Search Engine

    3. Nếu bạn vẫn chưa hài lòng với 2 hộp tìm kiếm trên thì có thể vào trang này
    và dùng tài khoản Gmail của mình để đăng nhập .Ở trang Google Gadgets này có rất nhiều công cụ cho bạn chọn như hộp tìm kiếm , G Talk, cá cảnh , đồng hồ ....... để trang trí cho Blog yêu của bạn .
    kieuphong

    >> more...


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


    Theo mẫu mặc định Blog của bạn 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).


    Muốn thay đổi hình nền cho từng thành phần bạn cần làm theo những bước sau ( Bạn nào chưa biết cách chèn thì xem lại bài 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;







    >> more...


    Tạo chatbox cho bog của bạn.

    Ðể giao luu với bạn bè, những người xem blog của bạn một cách nhanh nhất là sử dụng hộp Chat ngay trên giao diện chính Blog của bạn .( Người xem blog của bạn sẽ không tốn nhiều thời gian để viết comment)....

    Cách tạo Chatbox.

    Ðể làm công việc này cũng có rất nhiều trang web hỗ trợ trực tuyến cho bạn như Meebo , Cbox.ws , Shoutmix.com....? Ở đây tôi chỉ giới thiệu với các bạn trang Cbox.ws , những trang còn lại cách lfm cũng tương tự.

    - Click vào link này để liên kết đến Cbox.ws
    - Click Sign up , điền đầy đủ thông tin trên form đăng kí -> chọn một mẫu mà bạn thích -> tùy chỉnh chiều rộng, ngang sao cho phù hợp với nơi bạn muốn đặt nó .
    - get your code : Coppy đoạn code này và paste vào 1 widget hoặc bài đăng .( Trình bày -> thêm phần tử trang -> HTML/java ....đối với blogspot)

    *** Nếu sau này bạn muốn đặt nó vào chỗ khác thì bạn có thể tự sửa đoạn code này cho phù hợp ( Tìm đến dòng width="..." height="..." để thay đổi chiều rộng, cao của Chatbox)

    *** Nếu bạn muốn tùy chỉnh thêm ( Thêm hình ảnh , biểu tượng vui ....) ?
    - Ðăng nhập vào Cbox.ws bằng tài khoản bạn đã tạo.

    1. My Account:

    Tại đây cho phép bạn thay đổi email, passowrd, ngôn ngữ của giao diện chatbox...

    2. Cbox Options:

    Bạn có thể thay đổi các thông số của chatbox như chiều rộng, cao,... Thông thường bạn chỉ thay chiều rộng, chiều cao, những thứ còn lại hãy để mặc định.

    3. Color & Fonts:

    Nơi chỉnh màu và Font chữ cho chatbox, account free chỉ có 2 tab là Presets và Simple Edit. Hãy sử dụng tab Presets để chọn các mẫu có sẵn hơn là phải dùng Simple Edit để chỉnh sửa từng thành phần một. Nếu bạn không biết về mã màu thì lại càng rắc rối.

    4. Smiles:

    Tab hiệu chỉnh, thêm bớt các biểu tượng vui. Tab Preset Smilies khôi phục các mặt cười có sẵn, Customize Smilies để thêm bớt các mặt cười , hình ảnh tùy chọn.

    * Customize Smilies: thêm hình ảnh vào Cbox .

    Giả sử bạn thích 1 ảnh có đường link :
    http://kieuphong1109.googlepages.com/download1.gif
    và muốn cho nó vào Cbox của bạn ?

    Coppy đường link dẫn tới hình ảnh rồi paste vào list link ( có thể thay thế link mặt cười cũng được)
    Bạn có thể nhấn nút x để xóa một smile mà bạn không thích , nếu muốn thêm một smile hoặc hình ảnh khác nữa thì bấm New Row. Khi dã ưng ý rồi thì nhấn Save để lưu cài đặt.

    5 . messenge

    Tab này cho phép bạn xóa tin nhắn mình không thích trên hộp chat và xem IP của người đã gửi tin nhắn cho bạn .
    Chúc bạn vui vẻ và thành công

    - kieuphong-

    >> more...


    Tạo FavIcon - Biểu tượng trước địa chỉ

    Khi duyệt web bạn thường thấy 1 icon nhỏ nằn trước địa chỉ của trang web đó ? Đó là 1 FavIcon của trang web .
    Theo mặt định của Blogger.com, trước địa chỉ blog của bạn luôn có biểu tượng màu cam hình bai trùm hình chữ B. Vậy làm thế nào chúng ta thay đổi nó bằng cái của chúng ta.

    ***Nếu bạn đang dùng trình duyệt Firefox hoặc IE7 bạn có thể thấy được biểu tượng Favicon

    Trước hết bạn cần có một hình ảnh thông thường để convert sang hình ảnh với phần mở rộng là .ico. Bạn có thể dùng các chương trình đồ họa như Microsoft Paint (Stat->Programs->Accessories->Paint), Adobe Photoshop hay bất cứ chương trình nào khác để thiết kế cho mình một cái.

    Ngoài ra còn rất nhiều trang web hỗ trợ trực tuyến cho công việc này .Ở đây tôi chỉ giới thiệu với các bạn 1 trang thôi ( đủ xài là được rồi không cần nhiều đâu )

    http://www.htmlkit.com/services/favicon/ có thể giúp bạn mà bạn không cần cài đặt gì.

    Đầu tiên, bạn mở trang đó lên, click nút Browse để tìm đến file hình ảnh lưu trên máy. Bấm nút Generate FavIcon.ico để thực hiện. Trang kết quả hiện ra như bên dưới.



    Click vào Test in Browser để xem trước. Nếu bạn ứng ý thì click Download FavIcon đề download về máy.

    Bạn sẽ nhận được file hình ảnh có phần mở rộng .ico.

    Bây giờ thì làm sao để bạn tìm được nơi lưu trữ file này. Rất tiếc các công cụ chia sẻ ảnh không hỗ trợ hình ảnh có phần mở rộng như vậy.

    Có một giải pháp là bạn dùng Google Page Creator. Đây là một trong những lý do mà tôi đã khuyên bạn đăng ký Google Account trước khi tạo blog. Hãy kích hoạt chức năng này của Google nếu nó yêu cầu. Sau đó bạn upload file ảnh lúc nãy lên đây. Xong, bạn click phải vào file đã upload tìm liên kết đến file FavIcon có dạng như: http://tentaikhoan.googlepages.com/ttcb_favicon.ico


    Nơi upload favicon trên Google Page Creator


    Bạn chép (nhớ sửa lại liênkếnđếnfileFavIcon)

    <link rel="shortcut icon" href="liênkếnđếnfileFavIcon"/>

    Rồi paste đoạn mã này vào giữa hai tag <head> .... </head> ở Edit HTML (Template->Edit HTML). Save lại để hoàn tất. Chúc bạn thành công!

    *** Khi bạn đã có tài khoản Google rồi thì chỉ cần đăng nhập -> mở thêm một trình duyệt web rồi gõ địa chỉ googlepages.com vào rồi Enter. nó sẽ tự tìm đến page cảu bạn .






    >> more...


    Thống kê số người viếng thăm và đang online trên blog của bạn

    có rất nhiều trang web hỗ trợ cho bạn công việc này . Nhưng theo kinh nghiệm sử dụng tôi chỉ giới thiệu với các bạn 1 trang rất được các webmaster cũng như những blogger tin dùng .......

    TRang web tôi muốn nói đến là www.histats.com .trang này có rất nhiều mẫu đẹp cho bạn chọn và thống kê rất chính xác.
    - bạn click vào đây để liên kết tới histats.com
    - Bạn có thấy dòng chữ này không "Register now!!!"??
    - Điền địa chỉ blog (web ) của bạn vào đấy rồi nhấn register
    Sẽ có một form hiện ra . Bạn điền đầy đủ thông tin vào ( nhớ là phải điền đầy đủ đấy nhé - thiếu 1 chi tiết là nó không chịu đâu )
    - Đánh dấu kiểm vào dòng "I have read and agreePublisher Agreement Terms " rồi nhấn continue.
    - Một dãy những kiểu bảng thống kê hiện ra . Bạn chọn cho mình một kiểu tùy thích.( chọn mẫu nào thì đánh dấu kiểm vào cái đó ) sau đó nhấn continue
    - Nó sẽ hiện ra một bảng tùy chỉnh ( nếu bạn không thích chỉnh thêm thì nhấn continue để tiếp tục) Bạn có thể tùy chỉnh cách hiển thị tổng số người ghé thăm, tổng số trang trong ngày ,số người đang online, ....
    - Tiếp tục nhấn continue và chờ trong ít phút
    - khi có một bảng mã java "Javascriipt counter code" hiện ra , bạn coppy và paste vào nơi bạn muốn để bảng thống kê trên trang của bạn ( Thêm 1 phần tử trang -> HTML/Javas..- đối với blogspot)

    *** nếu bạn muốn cho nó nằm giữa widget thì đặt đoạn code ấy vào giữa hai thẻ <center> và </center>


    VD bảng thống kê của tôi :







    Nếu bạn không thích thống kê bằng Histats tôi sẽ bổ xung , giới thiệu với các bạn vài trang nữa có giao diện rất đẹp . mời các bạn đón xem .
    - kieuphong -

    >> more...


    Cách tạo Read more ( đọc thêm ) cho mỗi bài đăng

    Để trang trí blog của bạn một cách ngắn gọn thì bạn nên để trên giao diện chính phần đầu của bài đăng ( phần thân bài sẽ được ẩn đi để không tốn diện tích trên trang của bạn. Khi người đọc muốn xem tiếp thì click vào " xem tiếp" để xem hết phần thân bài. Sau đây là các bước hướng dẫn để bạn tạo " xem tiếp" cho bài đăng.

    Bước 1: Đăng nhập vào Blogger và chọn thẻ Trình bày -> chỉnh sửa HTML(nên sao lưu 1 bản template của bạn để đề phòng )

    Bước 2: Tại Edit HTML (Chỉnh sửa HTML) bạn kéo thanh trượt xuống và tìm thẻ </Head> (có thể nhấn tổ hợp 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 "Mở rộng mẫu tiện ích" 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ể thay chữ Đọc thêm bằng Read more hoặc xem tiếp ...tùy 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 vào phần Cài đặt -> Đang định dạng . Coppy đoạn code trên và paste vào phần " mẫu bài đăng " sau đó lưu cài đặt lại .

    *** khi đăng bài : bạn đăng phần muốn hiển thị trên trang ( phần đầu )ở trên thẻ <span id="fullpost">. Phần thân bài ( phần ẩn ) ở giữa hai thẻ <span id="fullpost"> và </span>




    >> more...


    Cách tạo thêm "Các Bài Liên Quan" sau bài viết

    Chắc hẳn các bạn cũng biết, ở các trang tin tức như vnexpress.net, dantri.com.vn,... mỗi khi ta mở xem một tin nào đó, thì ở dưới mỗi bài viết đều có các tin tức liên quan hiện ra. Điều đó là cho người đọc có thể xem nhanh các bài liên quan mà không phải ngồi mày mò, tệ hơn họ có thể không thấy được các bài viết khác có cùng chủ đề trong blog của bạn. Blogspot mặc định không hỗ trợ tính năng này. Tuy nhiên bạn đừng lo, bài viết sau sẽ giúp bạn chèn thêm nó. Đây là một thủ thuật của Hoctro (hoctro.blogspot.com), tôi trình bày lại chi tiết hơn và chỉ biến đổi chút đỉnh cho phù hợp với blogspot của bạn.


    - Trước tiên: bạn vào Trình bày -> Chỉnh sửa HTML, nhớ sao lưu một bản Full Template trước khi chỉnh sửa.
    - Click chọn : Mở rộng Mẫu Tiện ích
    - Bạn có thể bấm Ctrl+F để bật hộp tìm kiếm của trình duyệt, xong gõ từ khóa cần thiết đề tìm dòng <p class='post-footer-line post-footer-line-3'/> . Bạn sẽ thấy 1 đoạn code có dạng như sau:




    - Chèn đoạn CODE 1 này ngay dưới thẻ </div> thứ hai và bên trên dòng </b:includable>

    CODE 1:

    <b:if cond='data:blog.pageType == "item"'>
    <div class='widget-content'>
    <h2>Các bài liên quan</h2>
    <div id='data2007'/><br/><br/>
    <div id='hoctro' style="display:none">Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a>
    </u></div>
    &lt;script type=&quot;text/javascript&quot;&gt;
    homeUrl3 = &quot;kieuphong.com&quot;;
    maxNumberOfPostsPerLabel = 5;
    maxNumberOfLabels = 10;

    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+21);
    label = decodeURIComponent(label);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;h4&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }
    var labelArray = new Array();
    var numLabel = 0;
    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;

    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    &lt;/script&gt;
    </div>
    </b:if><br/>


    *** Lưu ý: Trước khi Copy và Paste vào template, các bạn hãy thay các thông số màu đỏ cho phù hợp. Cụ thể:

    + Các bài liên quan: tiêu đề mà bạn thích
    + kieuphong.com : địa chỉ blog của bạn
    + maxNumberOfPostsPerLabel = 10 : số bài tối đa của mỗi label mà bạn muốn hiện
    + maxNumberOfLabels = 5 : số label tối đa mà bạn muốn hiện

    - Save template lại: Thế là xong rồi đó.




    .




    >> more...


    Cách lấy RSS từ Yahoo 360 sang Yahoo Mash


    Bạn đang "chuyển nhà " từ Yahoo 360 sang Yahoo Mash.
    Ngôi nhà mới của bạn chưa có RSS?
    Bài viết này sẽ hướng dẫn các bạn cách
    lấy RSS từ Yahoo 360 sang Yahoo Mash.

    Trước tiên trong Yahoo Mash của bạn cần phải thêm Blog Module (RSS 2.0). Bạn vào Customize this page by adding cool stuff!, chọn Blog Module (RSS 2.0), nhấn Do it !


    Khi đó bạn sẽ thấy có thêm một Module mới
    có chức năng tương tự như Feeds trong Yahoo 360


    Sau đó, bạn chỉ cần chép lại địa chỉ blog 360 ở dạng RSS
    rồi paste vào khung RSS 2.0 Feed URL là OK .


    Muốn lấy RSS từ blog 360 thì blog bạn phải ở dạng public đồng thời phải check vào ô cho phép lấy RSS. Để làm điều này, bạn vào Yahoo!360 >> Settings >> Blog Settings, trong phần Who can see your blog bạn để chế độ public và check vào ô Yes, publish my blog as an RSS 2.0 feed. (Note: If you want a web feed for your blog, your blog must have a “public” setting. Entries marked as “mature” are not displayed in the feed.). Sau đó Save lại.


    Trong trang My blog kéo thanh cuộn xuống
    cuối trang bạn sẽ thấy biểu tượng RSS



    Trong trang My blog kéo thanh cuộn xuống
    cuối trang bạn sẽ thấy biểu tượng RSS

    Click vào RSS để lấy link và paste vào khung RSS 2.0 Feed URL bên Yahoo!Mash là xong.







    >> more...


    Tài liệu hướng dẫn sử dụng Dreamweaver 8.0




    Đây là một ebook rất hay rất hữu ích với các bạn khi lập trình web đặc biệt là Web động


    Các bạn có thể tải trực tiếp tại đây
    Chúc bạn thành công



    Theo 3c.com





    >> more...


    Căn bản PHP



    Tài liệu hướng dẫn các bạn mới bắt đầu thiết kế web với ngôn ngữ thông dụng hiện nay là PHP. Sách điện tử này cũng có thể làm tài liệu tham khảo cho các bạn đã quen với PHP.


    Tác giả: Phạm Hữu Khang
    Kích thước: 1246 KB
    Các bạn tải tại đây




    Theo 3C.com








    >> more...


    Cách làm ẩn Navbar ( blogspot )

    *** Navbar (navigation bar). Biểu tượng là một thanh ngang nằm ở phía trên cùng giao diện blog của bạn?

    *** Tác dụng : Navbar cho phép bạn tìm kiếm trên blog ,và nó còn cho phép bạn duyệt blog kế tiếp của bạn

    *** Cách làm ẩn Navbar :



    <style type='text/css'>
    #navbar-iframe {
    height: 0px;
    }
    </style>




    *** Copy đoạn mã trên và paste vào phía trên tag </head> trong chỉnh sửa HTML ( Trình bày -> Chỉnh sửa HTML – Bạn có thể dùng tổ hợp phím Ctrl + F để tìm tag </head> )
    *** Khi bạn muốn cho hiển thị lại Navbar thì chỉ cần thay đổi chiều cao của Navbar ( height: 30px; hoặc bạn tìm đến dòng code trên và xóa nó đi là được .
    Chúc bạn thành công



    - kieuphong -
    >> more...


    Tạo template 3 cột cho blogspot.

    1. Lý thuyết:
    Các template của blogger sử dụng tag
    để "định nghĩa" và định vị các wrapper (gói). Phần header (đầu) nằm trong header-wrapper. Phần sidebar nằm trong sidebar-wrapper. Phần main (chứa bài viết) nằm trong main-wrapper. Phần footer (chân) nằm trong footer-wrapper. Main-wrapper và Sidebar-wrapper nằm trong Content-wrapper. Header, Content, Footer Warapper nằm trong Outer-wrapper.

    Có thể hình dung cách bố trí như vậy theo sơ đồ sau:......



    2. Thực hành

    Bây giờ chúng ta thực hành tạo thêm cột bên trái (leftsidebar) cho blog của mình. (bài này hướng dẫn với mẫu Minima, các mẫu khác cũng làm tương tự).

    Vào Edit Template, có 2 chỗ cần chỉnh sửa, đó là CSS và BODY.

    - Edit CSS:

    Tìm đến đoạn code có dạng như sau:

    CODE 1:


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

    #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 */
    }

    #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 */
    }


    #outer-wrapper: Bạn hãy để ý các chữ màu đỏ, 660 đó là độ rộng mặc định của toàn bộ blog của bạn. Bạn hãy thay đổi con số này lớn hơn một tí để khi thêm sidebar bên trái vào blog của bạn nhìn không hẹp phần giữa. Ví dụ tôi thay 660 bằng 970.

    #main-wrapper: Độ rộng thể hiện bài viết là 410. Bạn có thể thay bằng một số lớn hơn, nên chọn 500 hoặc 550. Tôi thay bằng 550

    #sidebar-wrapper: hiện tại chúng ta chỉ có 1 sidebar, độ rộng là 220. Hãy chú ý dòng float: right; , dòng này cho biết sidebar sẽ hiển thị bên phải.

    Như vậy, để thêm một sidebar bên trái nữa, ta chỉ cần copy đoạn code của #sidebar-wrapper và chỉnh chữ "right" thành "left". Nhưng bạn phải hiệu chỉnh bề rộng của các sidebar (các dòng width: 220px; ), sao cho tổng bề rộng của 2 sidebar-wrapper và main-wrapper nhỏ hơn outer-wrapper. (Ví dụ bài này là 550+ 200 + 200 =950 )

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

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

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

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

    Tiếp theo, tìm trong CSS đoạn code như sau:

    CODE 3:


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

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

    Hãy thay các số 660 (độ rộng của #header-wrapper và #footer) bằng với độ rộng của #outer-wrapper mà lúc nãy bạn đã thay. Ví dụ của tôi là 970.

    Như vậy đoạn CODE 3 và CODE 4 sẽ trở thành:

    CODE 5:


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

    CODE 6:

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

    - Edit BODY: Lưu ý là không đánh dấu chọn Mở rộng mẫu tiện ích với thao tác này.

    Tìm sau thẻ đoạn code "tương tự" như sau:

    CODE 7:

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

    Copy toàn bộ đoạn CODE 8 này vào "ngay phía trên" đoạn CODE 7 vừa tìm được. Sở dĩ phải "ngay phía trên" là vì leftsidebar sẽ hiển thị bên trái của main-wrapper.

    CODE 8:

    <div id='leftsidebar-wrapper'>
    <b:section id='leftsidebar' class='sidebar' preferred='yes'/>
    </div>

    Như vậy phần EDIT BODY nhận được là:

    CODE 9:

    <div id='leftsidebar-wrapper'>
    <b:section id='leftsidebar' class='sidebar' preferred='yes'/>
    </div>

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>

    Xong rồi, bây giờ bạn Save Template lại, vào Thêm phần tử trang để thêm các Widget bình thường.
    *** Bằng cách tương tự, bạn có thể tạo thêm 1,2 sidebar nữa tùy thích miễn sao cho phù hợp là được rồi !!!

    chúc bạn thành công


    >> more...


    Chèn video vào blog

    Giống như cách chèn nhạc vào blog, sử dụng cách này bạn có thể chèn video ( Windows Media Player)vào blog của mình một cách dễ dàng . Nếu chưa rõ bạn có thể xem lại bài này.

    Chép và sử dụng đoạn mã bên dưới . Thay đổi những giá trị màu đỏ sao cho phù hợp
    + Liên kết đến Video : Thay bằng đường dẫn tới Video bạn chọn
    + width , height : chiều rộng , cao của màn hình hiển thị
    + Những gía trị còn lại bạn có thể chỉnh sửa hoặc giữ nguyên .


    <embed showdisplay="0" showstatusbar="1" showcontrols="1" autostart="0" type="application/x-mplayer2" src="Liên kết đến video" space="0" align="middle" height="350" width="400"></embed>


    Kết quả hiển thị như hình bên dưới:



    * Có một cách khác khá phổ biến là bạn dùng video chia sẻ trên các trang chia sẻ video như YouTube, Grouper, ....Ở Việt Nam hiện nay có trang Clip.vn .Trang này lưu trữ và chia sẻ rất nhiều video, nhạc Việt .
    * Ở những trang chia sẻ Video, nhạc sẽ có những dòng code được tạo sẵn . bạn chỉ việc coppy ( code nắm trong tag Embed) rồi paste vào bài viết hoặc widget trên blog của bạn.
    * Lưu ý là bạn cũng có thể thay đổi kích thước và những giá trị khác sao cho phù hợp với trang của bạn



    chúc bạn thành công

    kieuphong

    >> more...


    Tự làm giao diện cho trang Yahoo Mash

    Công cụ cần chuẩn bị:

    - Một tài khoản Yahoo Mash để đăng ký tại http://mash.yahoo.com. Tên tài khoản chính là nick YM, hòm thư Yahoo và Yahoo 360 sẵn có của bạn. Do còn trong giai đoạn thử nghiệm, Yahoo Mash chỉ chấp nhận những nick được mời từ một tài khoản Mash có sẵn

    - Một hình nền có kích cỡ lớn, như 1042 x 768 pixel đã được đăng lên website nào đó. Nếu bạn không có website chứa ảnh riêng, có thể dùng công cụ Flickr của Yahoo hay Photobucket để đưa ảnh này lên.
    Thao tác thực hiện

    Cách 1. Basic Mode


    Trong phần Style this profile, bạn nhập vào ô Background image URL địa chỉ đường dẫn tới ảnh đã được tải lên trang web nào đó.

    Ví dụ: khi mở một bức ảnh trên Flickr, nhấn chuột phải vào ảnh ở mục Large Size, chọn Properties, bạn sẽ thấy đường dẫn ảnh dưới dạng http://farm3.static.flickr.com... hoặc thấy luôn trong ô Grab the photo's URL. Hãy copy đường dẫn này vào ô Background image URL.

    Nếu đánh dấu vào ô Fixed position, bức ảnh sẽ luôn ở một vị trí khi bạn trượt thanh cuộn. Ngoài ra còn có lựa chọn Tile ("lát nền", nghĩa là bức ảnh sẽ lặp lại ở các vị trí thiếu), Center (ảnh nằm giữa trang)...

    Sau đó, nhấn Apply để lưu nền này.

    Cách 2. Dùng mã CSS

    Nhấn vào dòng Show Advanced CSS. Đây là công cụ dành cho những người hiểu biết về lập trình web để họ tùy biến theme đa dạng hơn. Tuy nhiên, những chỉ dẫn dưới đây sẽ giúp người "ngoại đạo" có thể hiểu dễ dàng.

    Một theme sẽ bao gồm nhiều yếu tố như kích thước, màu sắc, phông chữ, được chỉ định bằng những câu lệnh nhập vào trong ô trắng trong mục Style this profile.

    - Định màu nền bằng cách gõ

    body { background: #99000;}

    Giải thích: #99000 là mã màu "đỏ thẫm". Muốn biết các mã màu khác nhau, có thể tham khảo trong bảng sau.

    Hoặc cho nền một ảnh riêng bằng cách gõ

    body {
    background: #333333 url(http://trangweb.com/anh.jpg) no-repeat;
    background-position:top center;
    }

    Giải thích: http://trangweb.com/anh.jpg là đường dẫn tới ảnh đã đăng lên website, lấy tương tự như trong Cách 1.

    no-repeat là ảnh không lặp lại (không "lát" trên bề mặt trang Mash). Muốn thay đổi, bạn gõ repeat-x (tham số cho chiều ngang) hoặc repeat-y (tham số cho chiều dọc) hoặc repeat-xy (lát cho cả 2 chiều).

    #333333 là màu sẽ được hiển thị ngay sau bức ảnh nếu bạn không chọn chế độ lặp ảnh. Ví dụ, phần cuối trang bị trống vì ảnh không dài tới đó thì sẽ được chèn màu này vào. Nếu không cần, bạn có thể bỏ mã số này khỏi câu lệnh.

    top center là vị trí ảnh nền được đặt, ở đây là đặt chính giữa, phía trên. Bạn có thể thay đổi bằng cách dùng các lệnh khác top right (phái trên bên phải), top left (phía trên bên trái), bottom right (phía dưới bên phải), bottom center (ở dưới chính giữa), bottom left (ở dưới bên trái), center (ở giữa), top (bên trên), right (bên phải).

    - Định font chữ

    body {
    font-family: Arial, Georgia, Verdana;
    font-size: 12px;
    color:#FFFFFF;
    font-strength: normal
    }

    Giải thích: Arial, Georgia, Verdana là font chữ bạn chọn để người khác xem. Do không phải tất cả các máy tính đều có cùng font nên bạn cần chọn hệ thống font được nhiều người dùng nhất.

    12px là kích cỡ của font chữ, bạn có thể đổi con số tùy theo ý thích.

    font-strength thường được đặt chế độ normal hoặc nếu không, bạn có thể gõ bold (để có chữ đậm) hoặc oblique (nghiêng).

    - Định module chung

    .mod {
    background:#555555 url(http://trangweb.com/anh.jpg) repeat-x;
    border: #33000 2px dashed;
    }

    - Định module-link

    .mod a {color:#990000;}
    .mod a:visited {color:#660000;}
    .mod a:hover {color:#330000;}

    Giải thích: a có nghĩa là link. Ở đây, bạn đặt màu khác nhau tùy thuộc vào trạng thái của link, như bình thường thì có màu #990000, khi được bấm vào thì có màu #660000, lúc rê chuột qua thì hiện màu #330000.

    - Định module nền

    #ypf-coreid .mod-content, #dragLeft .mod-content, #dragRight .mod-content {
    background: url(http://trangweb.com/anh.png) repeat scroll bottom right;
    }

    Ở đây bạn có thể thay đổi đường dẫn tới ảnh và dùng mã màu cho nền background:#colorcode

    - Định cách hiển thị tiêu đề

    #dragLeft .hd, #dragRight .hd {
    background: url(http://trangweb.com/anh.png) repeat-x scroll top left; color: beige;
    }

    Giải thích: Bạn có thể đổi hình ở chỗ này và dùng mã màu background:#colorcode;

    color:beige là màu của tiêu đề module.

    Ngoài ra, còn có một danh sách các mã CSS dành cho những module khác:

    #ypf-coreid : ảnh hoặc lời trích dẫn của người dùng
    #ypf-mystuff : My Mash Stuff
    #dragLeft : cột lớn bên trái
    #dragRight : cột lớn bên phải
    #ypf-mosh-rss2-randomnumber : thay một số ngẫu nhiên bằng số... (module cho RSS)
    #ypf-guestbook : dành cho Guestbook
    #guestbook-entries : các entry cho Guestbook
    #ypf-contacts : danh sách bạn bè
    #ypf-tags: thẻ hồ sơ Your Mash
    #ypf-blurt : module Blurt
    #ypf-profile : module About Me
    .mod-content : nội dung của module mà bạn xác định
    .user-name : tên người sử dụng
    .user-images : avatar của bạn

    Bạn có thể đặt chế độ không cho người khác lấy cắp "tài sản" như theme, nhạc... bằng cách gõ:

    .grab
    {
    display:none;
    }

    Khi xong việc, nhấn Apply.

    Dưới đây là một đoạn mã ví dụ, bạn có thể dùng ngay hoặc thay đổi tùy thích:

    body { background: url(http://farm3.static.flickr.com/2135/2028288316_8c7dded9f0_o.jpg) repeat fixed top center; color: #FFFFFF; }
    body a, a:visited { color: #E5E5E5; }
    a:link, #nickname { color: #FF3300; }
    .ft a:link { color: #E5E5E5; }
    .mod { border: none; }
    #ypf-coreid, #dragLeft .mod, #dragRight .mod { background: url(http://farm3.static.flickr.com/2119/2028403034_239899173b_m.jpg) repeat scroll top left; border: 1px outset #a9a9a9; }
    #ypf-coreid .mod-content, #dragLeft .mod-content, #dragRight .mod-content { background: url(http://farm3.static.flickr.com/2098/2027597441_3610794aa3_m.jpg) repeat scroll bottom right; }
    #dragLeft .hd, #dragRight .hd { background: url(http://farm3.static.flickr.com/2115/2028403564_020cdde828_t.jpg) repeat-x scroll top left; color: beige; }
    #tagline-edit .hover, div.hover, #ypf-blurt .hover .blurt-msg { background-color: #9acd32; }
    #ypf-blurt .hover .timestamp { color: #FFFFFF; }
    chúc bạn thành công

    kieuphong sưu tầm

    >> more...