blogcongnghe: Thủ thuật cho blog

Đăng kí | Quên mật khẩu ?

Cùng nhau khám phá thế giới công nghệ thông tin

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Sự kết hợp hoàn hảo

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Enter để bước vào thế giới Công nghệ thông tin

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Công nghệ thông tin có những biến đổi vượt bậc

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Đột phá mang tính sáng tạo

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Blogger cải thiện và nâng cấp tính năng Label

Blogger

Label/Tag Cloud - Mây thẻ, là 1 trong những widget thường thấy ở cả 2 nền Blog như Blogger (Blogspot) và Wordpress. Đối với Blogger vào lúc trước, widget Label rất thô sơ và chỉ có mỗi kiểu danh sách, nếu muốn trang trí đòi hỏi người dùng phải chèn nhiều đoạn mã vào Mã nguồn Template. Trong đợt thăm dò ý kiến người dùng vừa rồi, Blogger đã thỏa mãn yêu cầu của nhiều người sử dụng bằng việc cải tiến thêm widget Label trong dịch vụ của mình.

Mặc dù được giới thiệu khá trễ, nhưng "Có còn hơn không", việc Blogger tích hợp sẵn chế độ Label Cloud trong Blogger sẽ góp phần làm hoàn thiện hơn nền tảng Blog nổi tiếng này, giúp các blogger mới dễ dàng sử dụng dù chưa có kinh nghiệm.

Các tùy chỉnh trong widget Label.

Hơn thế, Blogger còn cho phép người dùng được quyền lựa chọn các nhãn sẽ xuất hiện theo ý thích. Điều này có nghĩa là bạn có thể tạo nhiều widget Label chứa các nhãn riêng biệt - một tính năng hoàn toàn mới.

Tính năng chọn nhãn.

Bạn có thể tạo nhiều Label trong Blog.

Hy vọng sự cải tiến của Blogger sẽ làm các bạn hài lòng hơn về nền tảng Blog của 'ông lớn' Google. Và theo như Blogger Buzz, thì đây chỉ là 1 trong nhiều tính năng mới mà Blogger sẽ 'khai trương' trong sinh nhật lần thứ 10! Hãy cùng chờ xem nhé

.

Đọc thêm »

Tạo Khung Accordion với jQuery

jQuery

Dạo qua nhiều blog, chắc hẳn các bạn đều đã từng thấy tab-widget thường hay được sử dụng trên Blogger. Nếu đã cảm thấy nhàm chán với loại tab-widget ấy, thì hôm nay mình xin giới thiệu đến các bạn một loại widget mới có tên Accordion.

Accordion

Widget Accordion là một dạng box-widget có khả năng trượt Hiện/Ẩn khi click chuột. Được viết trên nền jQuery , Accordion sẽ hoạt động khá 1 mượt khi sử dụng thay vì đơn giản như các loại widget thông thường.

Lúc trước, template của Blog Tin Học đã từng cài widget này, nhưng do cảm thấy vị trí phân bố không thích hợp nên đành gỡ bỏ. Nếu bạn cảm thấy ưng ý với Accordion, hãy thực hiện các bước sau để tạo widget này cho Blog mình nhé :

Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
Thêm đoạn code bên dưới vào ngay trên thẻ </head>
<script src='http://code.jquery.com/jquery.js' type='text/javascript'/>
<style type='text/css'>

/* Main accordion container */
.accordion{
width:500px;
}

/* accordion content div, default display is hidden */
.accContent{
display:none;
border:1px solid #CCCCCC;
padding:3px;
}

/* Title links (clickable to show their content and hide others) */
.acctitle{
display:block;
width:100%;
padding:3px 3px 3px 3px;
background-color:#CC0000;
color:#FFFFFF;
cursor:pointer
}

/* Default accordion class (usually first one so it is always visible) */
.defaultAccordion{
display:block;

}
</style>
Thêm đoạn code bên dưới vào ngay dưới thẻ </head>
<script type='text/javascript'>
$(function(){
    // loop though each link
    $("a.acctitle").each(function(){
        // add an event on click
        $(this).click(function(){
            // hide all div's with accContent class
            $(".accContent").each(function(){
                $(this).hide("slow");
            });

            // the main point of this script - Fetch ref attribute of
            // title link and display the hidden div with that id
            $("#"+$(this).attr("ref")).show("slow");
                return;
            });
    });
});
</script>
Save lại template, rồi chuyển sang tab Phần tử trang (Page Elements) . Tạo một widget HTML/Javascript với nội dung như sau :
<div class="accordion">
    <a ref="first_section" class="acctitle">First Section (đây là title)</a>
    <div id="first_section" class="accContent defaultAccordion">
    <p>First Accordion Section (đây là content)</p>
    </div>

    <a ref="second_section" class="acctitle">Second hidden Section</a>
    <div id="second_section" class="accContent">
        <p>2nd Accordion Section</p>
    </div>

    <a ref="third_section" class="acctitle">Third Hidden Section</a>
    <div id="third_section" class="accContent">
        <p>Last Accordion Section</p>
    </div>
</div>
Hiệu chỉnh nội dung widget trên theo ý thích rồi save lại template.

Hiệu chỉnh Accordion

- Đầu tiên, bạn cần thay những vùng text được tô màu đỏ thành những nội dung từ Blog bạn.
- Bạn lưu ý thứ tự của các section trong 2 mục ref= và id= phải giống nhau.
- Ngoài ra , bạn còn có thể hiệu chỉnh các thông số của code màu lục để khung Accordion mang dáng vẻ phù hợp với Blog của bạn.
- Cuối cùng, để thêm section khác cho khung Accordion, bạn chỉ việc copy đoạn code tương ứng, tăng thứ tự của section trong 2 mục ref= và id= và tinh chỉnh vùng text được tô màu đỏ .

P/s : Nếu còn thắc mắc, hãy để lại comment cho mình. Mình sẽ cố gắng trả lời nhanh nhất. Hy vọng bạn thích thủ thuật này. Chúc thành công !

Đọc thêm »

SocioFluid - Widget Bookmark dạng Dock cho Blog

SocioFluid

Có khá nhiều tiện ích bookmark dành cho Blog như Addthis, AddtoAny, Sharethis hay widget được tùy chỉnh ... Nếu bạn muốn có một widget Bookmark mang giao diện Dock hoàn toàn mới lạ, hãy dùng thử tiện ích của SocioFluid.

Để cài đặt tiện widget Bookmark này, bạn thực hiện các bước sau :

Truy cập vào SocioFluid.
Bạn có thể giữ nguyên widget mặc định, hoặc tùy chỉnh nó theo ý thích.
Tùy chỉnh Widget
Nhấn Generate Widget để xem trước demo. Sau khi ưng ý, bạn chỉ việc click Add to Blogger và xác nhận việc cài đặt. Vậy là xong.
Preview và Add to Blogger

Xác nhận cài đặt

Screenshot kết quả dưới đây :

Demo

Vậy là bạn đã tạo được widget Bookmark dạng Dock cho Blog rồi đấy. Chúc vui!

Đọc thêm »

Đổi màu quét khối mặc định với CSS3

Blogger

Nếu Blog của bạn được thiết kế sử dụng một phông màu nhất định để mang phong cách riêng, vậy tại sao không thay đổi màu sắc của đoạn quét khối cho đồng bộ! Một chút ngôn ngữ CSS bên dưới đây sẽ giúp bạn đấy.

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ ]]></b:skin> trong template, và thêm phía trên nó đoạn code sau :
::-webkit-selection {
    background: #FF9933;
    }
::-moz-selection {
    background: #FF9933;
    }
Lưu ý : Bạn có thể dùng mã màu khác tùy vào Blog của mình.
Save lại template. Vậy là bạn đã thiết lập được hiệu ứng đổi màu quét khối.
Code ở bước 2 sẽ thay đổi màu của bất kì đoạn quét khối nào. Nếu chỉ muốn thay đổi 1 đoạn chỉ định, bạn hãy sử dụng mã sau :
.color::-webkit-selection {
background: #FF9933;
}
.color::-moz-selection {
background: #FF9933;
}
kèm theo cú pháp :
<div class="color">Nội dung</div>

Bạn có thể xem screenshot dưới đây để thấy kết quả :

Kết quả

Hy vọng chút thủ thuật nhỏ này sẽ khiến Blog bạn trở nên hoàn thiện hơn. Chúc vui !

Đọc thêm »

Tạo Pop-under Ads cho Blogger

Blogger

Đối với các Blogger, việc đặt các banner quảng cáo (ads) trên Blog sẽ gây phiền hà đối với người đọc. Tuy nhiên, đôi khi bạn có nhu cầu đặt ads để quảng cáo một dịch vụ nào đó, vậy hãy dùng Pop-under Ads.

Đây là một giải pháp tốt dùng để thay cho các Pop-up Ads thông thường. Không như pop-up (quảng cáo tự nhảy ra, tạo 1 cửa sổ mới), ở đây pop-under chỉ trượt kèm theo trỏ chuột, và người đọc hoàn toàn có thể tắt nó một cách dễ dàng. Nếu bạn muốn tạo Pop-under ads, hãy thực hiện các bước dưới đây.

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ ]]></b:skin> trong template, và replace nó bằng đoạn code sau:
    #popad{
        padding:5px;
        border:1px solid #999;
        background:#eee;
        width:X px;
    }
    #popad_footage{
        width:X px;
        height:Y px;
        background:url(Link hình ads) top left no-repeat;
    }
    #popad_footage a{
        display:block;
        width:X px;
        height:Y px;
        text-indent:-600px;
        overflow:hidden;
    }
    #popad.dynamic #popad_footage{
        width:X px;
        height:Y+Z px;
        background:url(Link hình ads có kèm nút Close) top left no-repeat;
    }
        #popad.dynamic #popad_footage a#popad_close{
        color:#ddd;
        height:Z px;
    }
    #popad.dynamic{
        position:absolute;
        top:3em;
        right:15%;
    }
    html>body #popad.dynamic{
        position:fixed;
    }
]]></b:skin>
    <script src='http://boyprodx.110mb.com/BlogTools/popundermagic.js' type='text/javascript'/>
Lưu ý : Đoạn CSS từ ]]></b:skin> trở lên trên cần phải hiệu chỉnh, mình sẽ hướng dẫn ở dưới.
Save lại template và chuyển sang tab Page Elements.
Tạo 1 phần tử HTML với nội dung :
<div id="popad"><div id="popad_footage">
<a href="Link liên kết"></a>
</div></div>
Save lại phần tử và kiểm tra kết quả.

Hiệu chỉnh bước 2

Các giá trị :
- X : Chiều rộng ads.
- Y : Chiều cao ads.
- Z : Độ dài khoảng cách từ nút Close tới ads.

Giá trị

Để biết được chính xác các giá trị này, đơn giản nhất hãy bật chế độ xem Title trong PC.

Bật chế độ xem Title

Thiết lập vị trí xuất hiện của ads trên Blog :
- #popad.dynamic{position:absolute;top:3em;right:15%;} : Ads sẽ cách phía trên 3em và bên phải 15% chiều rộng trình duyệt.

Kết quả
Xem Screenshot bên dưới hoặc Demo tại đây (View Source để hiểu thêm về đoạn code).

Kết quả

Hy vọng thủ thuật tạo Pop-Under Ads sẽ hữu ích đối với bạn. Chúc vui !

Đọc thêm »

Tạo hiệu ứng viền và chú thích cho ảnh

Thay vì chỉ upload ảnh thông thường không hiệu ứng khi viết Blog, tại sao bạn không trang trí thêm cho chúng để tạo vẻ sinh động! Một vài dòng lệnh CSS dưới đây sẽ khiến ảnh của bạn trở nên độc đáo.

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
.pict{
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    padding: 3px;
    font: 11px Arial;
    margin-left: auto;
    margin-right: auto;
    }
.pict img{
    border: 1px solid #CCCCCC;
    vertical-align:middle;
    margin-bottom: 3px;
    }
Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
Để sử dụng hiệu ứng viền có kèm chú thích, bạn áp dụng cú pháp sau lên link ảnh:
<div class="pict" style="width:Chiều rộng ảnh gốc + 2px;"><img src="Link ảnh"/>Chú thích</div>

Để dễ hình dung hơn, mình sẽ đưa ra một cú pháp thử kèm theo demo :

<div class="pict" style="width:252px;"><img src="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png"/><div style="text-align: center;">Blog Tin Học</div></div>

Blog Tin Học

Vậy là xong rồi đấy, rất đơn giản đúng không. Nếu bạn có thắc mắc thêm về việc tùy chỉnh, hãy comment bên dưới. Hy vọng với tí đoạn CSS này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Chúc vui!

Đọc thêm »

Tạo hiệu ứng bo tròn góc bằng CSS

CSS là một trong những ngôn ngữ lập trình rất được ưa chuộng vì sự đơn giản, gọn nhẹ, dễ sử dụng và tương thích với nhiều nền tảng web khác nhau. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo hiệu ứng bo tròn góc với CSS.

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
#round {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width:250px;
background:#eeeeee;
border-color:#DEDEDE;
}
.round-content {
padding: 10px;
}
Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
Để sử dụng hiệu ứng bo tròn, bạn dùng cú pháp sau :
<div id="round" class="round-content">
Nội dung
</div>

Mở rộng bước 2

1/ 2 dòng code màu đỏ sẽ thiết lập mặc định bo tròn tất cả 4 góc (Xem ảnh dưới để thấy kết quả)

Nếu bạn chỉ muốn bo tròn từng góc riêng biệt, hãy thay thế nó bằng các cặp code dưới đây :

Bo tròn góc trái bên trên.

-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;

Bo tròn góc phải bên trên.

-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;

Bo tròn góc trái bên dưới.

-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;

Bo tròn góc phải bên dưới.

-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;

2/ Với thông số màu lục, nó sẽ thiết lập chiều rộng của khung được bo tròn. Bạn chỉ việc chỉnh lại sao cho vừa với kích thước của Blog (VD: 100px, 200px ...) hoặc để chế độ tự động canh (width:auto;).

3/ Bạn có thể tạo nhiều lần đoạn mã ở bước 2 (cần đặt thêm số thứ tự round1, round2 ... để không trùng nhau) với nội dung tùy chỉnh nếu muốn. Và khi sử dụng, hãy nhớ đổi tên id trong cú pháp nhé!

Vậy là xong rồi đấy. Hy vọng chút thủ thuật nhỏ này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Thân !

Đọc thêm »

Tạo tính năng Link-Thumbnail cho Blog

Chắc các bạn Blogger cũng đã từng biết qua Websnapr, công cụ giúp người đọc xem trước nội dung của liên kết. Tuy nhiên, do công cụ đó được Websnapr mặc định và không thể sửa đổi nên khiến một số bạn không ưng ý. Vì thế mà một blogger trên Internet - arc90 đã tự tùy chỉnh lại mã JS của công cụ với một số ưu điểm sau :

Chỉ hiển thị ảnh thumbnail.
Không có link quảng cáo.
Có thể sử dụng với từng link riêng biệt hoặc tất cả .
Tốc độ load nhanh.
Dung lượng file JS khá nhẹ (~5.4 KB).

Bạn có thể xem screenshot dưới đây để thấy kết quả :

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ </head> và dán đoạn code dưới đây vào ngay bên trên :
<style type='text/css'>
    .arc90_linkpic {
        display: none;
        position: absolute;
        left: 0;
        top: 1.5em;
        width: 160px;
        height: 120px;
    }
    .arc90_linkpicIMG {
        padding: 0 4px 4px 0;
        background: transparent url(http://boyprodx.googlepages.com/linkpic_shadow.gif) no-repeat bottom right;
        width: 160px;
        height: 120px;
    }
</style>
Tiếp theo, dán đoạn code dưới đây ở phía trên thẻ </body>
<script src='http://boyprodx.googlepages.com/arc90_linkthumb.js' type='Text/JavaScript'/>
Save lại template.
Tới đây bạn có 2 lựa chọn :
- 1 là sử dụng Link-Thumbnail cho từng link riêng biệt với cú pháp :
<a class="linkthumb" href="Đường Link">Tên hiển thị</a>
- 2 là sử dụng Link-Thumbnail cho toàn bộ link bằng cách dán kèm đoạn code này vào ngay bên dưới file JS ở bước 3 :
<script type='text/javascript'>
arc90_linkThumbUseClassName = false;
</script>

Vậy là bạn đã tạo được chức năng Link-Thumbnail cho Blog của mình rồi đấy. Khuyến khích các bạn đang dùng công cụ của Websnapr cũng như các bạn chưa dùng nên sử dụng tính năng này, đảm bảo sẽ vừa ý hơn.
Hy vọng thủ thuật này sẽ giúp ích cho bạn. Thân !

Đọc thêm »

Tạo tính năng Tooltips với CSS

Tooltips là công cụ nhỏ gọn cho phép Blogger có thể chèn một đoạn thông tin ngắn vào bất kì nội dung nào trong Blog, giúp người đọc có thể hiểu rõ hơn về giao diện của mình. Có khá nhiều cách để tạo Tooltips như JS, jQuery ... ; tuy nhiên do các cách trên hơi dài dòng nên trong bài viết này, mình sẽ hướng dẫn các bạn tạo Tooltips bằng ngôn ngữ CSS nhỏ gọn.

Toàn bộ code của thủ thuật này chỉ chiếm dung lượng <1KB nên bạn không phải lo ảnh hưởng đến tốc độ truy xuất Blog. Đồng thời nó hoạt động tốt trên mọi trình duyệt, kể cả IE6 lỗi thời. Bạn có thể xem screenshot của Tooltips ngay bên dưới đây:

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ a:hover trong template như hình dưới:
rồi dán đè lên nó bằng đoạn code dưới đây :
a:hover {background:#ffffff; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:150px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Save lại template. Vậy là bạn đã thiết lập được tính năng Tooltips cho Blog.
Để sử dụng chức năng này, bạn sử dụng cú pháp :
<a class="tooltip" href="#">Tiêu đề<span>Nội dung hiển thị trong Tooltips</span></a>

Vậy là bạn đã tạo được chức năng Tooltips cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !

Đọc thêm »

Tạo chức năng Hide/Show nội dung với Javascript

Lúc trước, mình có giới thiệu đến các bạn thủ thuật tạo tag Spoiler để ẩn nội dung bài viết giống các forum, dùng thẻ DIV để hoạt động. Nếu bạn thích dùng Javascript hơn, hãy sử dụng thủ thuật Hide/Show ở bài viết này.

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây. Nhưng trước tiên, mời bạn xem qua kết quả của thủ thuật :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Dán đoạn code dưới đây vào ngay trên thẻ </head> :
<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>
Save lại template. Vậy là bạn đã thiết lập chế độ Hide/Show cho Blog.
Để sử dụng chức năng trong bài viết, bạn chèn đoạn code dưới đây vào khung soạn thảo :
<a href="javascript:togglecomments('ID-Name')">Click để Ẩn/Hiện nội dung</a><br />
<div class="commenthidden" id="ID-Name">Nội dung</div>
Note : Để chức năng hoạt động, bạn cần đặt ID-Name trùng khớp với nhau và ở trạng thái xuất bản (Trong trình soạn thảo sẽ không thấy hoạt động).

Vậy là bạn đã tạo được chức năng này cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !

Đọc thêm »

Tạo Multi-Style Label cho Blogger

Có nhiều cách để trang trí cho widget Label trong Blogger, chẳng hạn dùng Flash Label hay sử dụng link định hướng đầu trang chủ (Navigation) ... Nếu bạn muốn dùng nhiều kiểu Label khác nhau để gây chú ý cho người đọc, hãy xem qua bài hướng dẫn này.

Multi-Style Label là widget tổng hợp 3 kiểu giao diện khác nhau cho Label như List danh sách thông thường, Menu Drop-down và Zoom (khá giống Tag Cloud). Bạn có thể tùy chỉnh dạng giao diện ưa thích bằng cách nhấn vào các nút điều khiển sẵn có trên widget. Ngoài ra, nó còn có chế độ Ẩn để tiết kiệm một phần không gian cho Blog. Mời bạn xem qua screenshot của Multi-Style Label :

Chế độ Ẩn (Nút ngoài cùng).

Dạng List (Nút thứ 2).

Dạng Menu Drop-down (Nút thứ 3).

Dạng Zoom (Nút cuối).

Để tạo được widget Label này, bạn hãy thực hiện tuần tự các bước sau :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm đoạn code sau : (Template của bạn phải cài Label)
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Note: Nếu không tìm thấy, hãy search với từ khóa Label1.
Copy đoạn code sau và dán đè lên code mới tìm :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<div align='center'><a href='javascript:void' onclick='javascript:nullStyle();' title='Ẩn'><img src='http://img2.pict.com/ed/77/63/1284680/0/blank.png'/></a>
<a href='javascript:void' onclick='javascript:linkStyle();' title='Hiển thị dạng danh sách'>
<img src='http://img2.pict.com/67/5d/ae/1284679/0/list.png'/></a>
<a href='javascript:void' onclick='javascript:menuStyle();' title='Hiển thị dạng Menu'>
<img src='http://img2.pict.com/8e/d4/d6/1284682/0/menu.png'/></a>
<a href='javascript:void' onclick='javascript:zoomStyle();' title='Hiển thị dạng Zoom'>
<img src='http://img2.pict.com/61/60/bc/1284683/0/zoom.png'/></a></div><br/>

<div class='widget-content'>
<div id='LabelDisplay' align='center'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function nullStyle() {
     var display = "";

     obj = document.getElementById('LabelDisplay');
     obj.innerHTML = display;
}

function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
linkStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
Save lại template và kiểm tra kết quả.

Mặc định Label sẽ hiển thị dạng danh sách (List), nếu không thích, bạn hãy sửa mục // set default to zoom style thành dạng khác (nullStyle, menuStyle hay zoomStyle). Mình đã test thử và thấy Label chạy rất nhẹ, không tốn thêm bao nhiêu thời gian load Blog.
Hy vọng widget Multi-Style Label này sẽ làm bạn hài lòng. Chúc vui !

[Nguồn : nekki1409.blogspot.com]

Đọc thêm »

Tổng hợp bộ emoticons dành cho Blogger Comment Form

Sau khi giới thiệu các bộ emoticons dành cho khung comment của Blogger (như Yahoo, Onion Head, Yoyo & Cici), mình nhận được nhiều ý kiến phản hồi trên Blog tin học (Một số báo rằng code hoạt động, một số lại không ). Hôm nay đành phải ngồi mò lại code và chỉnh sửa, cuối cùng cũng tạm ổn nên đăng lên cho mọi người kiểm tra.

Hiện tại thì mình đã tích hợp Emoticons của Onion Head, Yoyo&Cici và Liva Panda (không bao gồm Yahoo) vào 1 file Javascript duy nhất để các bạn không phải chèn nhiều link rườm rà. Các bạn hãy click vào đây để xem toàn bộ Emo có thể sử dụng, và truy cập trang Blog phụ của mình để test thử.

Nếu các bạn muốn thử nghiệm Emoticons vào Comment Form trong Blog của bạn, hãy thực hiện các bước sau nhé :

Đăng nhập vào Blogger > Layout > Edit HTML (Mở rộng Mẫu tiện ích).
Dán đoạn code bên dưới ở trước thẻ </body>
<script src='http://boyprodx.googlepages.com/Full_Emoticons_Comment_Blogger_ver_1.js' type='text/javascript'/>
Dán đoạn code bên dưới ở trước thẻ ]]></b:skin>
.emoticons {
    background: #eef4f9;
    border: 1px solid #ddd;
        line-height : 36px;
    padding: 3px;
    margin: 5px;
}
Tìm thẻ <b:if cond='data:post.embedCommentForm'> và dán đoạn code này vào 1 trong các vị trí ở hình bên dưới :
<div class='emoticons'><b>Bạn muốn sử dụng emoticons trong comment ư? <a href='http://boyprodx.googlepages.com/Full_Emoticons_Code_ver_1.htm'>CLICK HERE</a> và copy mã số emo vào khung comment nhé!
</b></div>
Save lại template và kiểm tra kết quả.

Lưu ý :
- Lần này mình tạm thời sử dụng Google Pages để Upload file JS + HTML thay vì 110mb như thường lệ (Vì Google Pages hoạt động tốt hơn). Nếu file bị xóa, mình sẽ re-upload nên các bạn an tâm.
- Bước 4, 5 chỉ để trang trí thêm cho phần giới thiệu bảng mã Emo, tạo sự chú ý của người đọc (Xem hình). Bạn có thể tùy chỉnh lại theo ý thích.

- Nếu có lỗi xảy ra, bạn hãy nhắn qua comment cho mình kèm theo screenshot nhé. Mình sẽ cố gắng khắc phục.

P/s: Hy vọng đợt cập nhập thủ thuật chèn Emoticons cho Blogger Comment Form này sẽ làm các bạn hài lòng. Chúc vui !

Đọc thêm »

Tạo tiện ích 'Gửi bài viết qua Yahoo' cho Blogger

Ngày hôm qua, mình nhận được comment của một bạn yêu cầu hướng dẫn cách tạo tiện ích 'Gửi bài viết cho bạn bè qua Yahoo' cho Blogger. Vì thế mình xin chia sẻ thủ thuật này cho các bạn qua bài viết này.
Các bạn tiến hành lần lượt những bước sau :

Đăng nhập vào Blogger > Layout > Edit HTML (Mở rộng Mẫu tiện ích).
Tìm với từ khóa post-footer-line trong template.
Copy code dưới đây ...
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<img align='middle' height='30' src='http://www.iscvn.com/skin/yahoo.gif' title='Gửi tin cho bạn bè' width='40'/> Nếu bạn thích bài viết này, hãy copy liên kết sau và gửi tới bạn bè nhé:<br/> <script>document.write('<input id="smsinput" name="smsinput" onclick="this.select()" readonly="readonly" size="80" value="'+document.title+' : '+window.location+'"/>');</script>
</b:if>
... và dán vào bên dưới 1 trong những thẻ post-footer-line vừa tìm được (Xem hình).
Save lại template và kiểm tra ở các trang bài viết (Tiện ích sẽ không hiển thị tại trang chủ).

Vậy là bạn đã tạo được tiện ích 'Gửi bài viết qua Yahoo' cho Blog của mình rồi đấy. Chúc vui !
Thanks bác Ẹt đã cung cấp code cho Blog tin học.

Đọc thêm »

Tạo 3 Cột Phần tử ở phần Footer của Template

Nếu Blog bạn chứa nhiều phần tử (element), thì việc tiết kiệm không gian trong template là điều rất cần thiết để tạo ra một bố cục hợp lý và gọn gàng cho Blog. Nhưng không phải Template nào cũng được thiết lập sẵn để cho phép sắp xếp phần tử ở vị trí tùy thích.
Chẳng hạn như đối với giao diện hiện tại của Blog tin học, mặc định template chỉ có 1 sidebar nên đã bị mất đi khá nhiều khoảng trống, chưa kể phần Footer thì chỉ có 1 cột (column) càng khiến cho Blog không thể chèn thêm nhiều tiện ích. Nếu Blog của bạn cũng gặp trường hợp tương tự, thì bài viết hôm nay sẽ giúp bạn giải quyết tình trạng này, bằng cách tạo 3 column cho Footer.

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Thay thế thẻ <b:section class='footer' id='footer'/> bằng đoạn code dưới đây :
<div id='customize-footer-column'>
<div id='Footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='Footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='Footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Hình mẫu
Tìm thẻ <b:section class='footer' id='footer'/>

Và thay thế nó với đoạn code trên
Tìm thẻ ]]></b:skin> và dán đoạn code này ngay bên trên
#customize-footer-column {
clear:both;
}
.footer-column {
padding: 10px;
}
Save lại template và chuyển sang tab Page Elements (Phần tử trang để xem kết quả)

Vậy là mình đã hướng dẫn xong cách tạo 3 column ở phần Footer cho Template của Blogger rồi đấy. Hy vọng thủ thuật này sẽ giúp bạn tùy biến giao diện cho Blog của mình một cách đẹp mắt. Chúc vui !

Đọc thêm »

Tạo một bức ảnh luôn xuất hiện trên Blog

Nếu bạn muốn tạo một bức ảnh luôn xuất hiện trên trang Blog của mình để trang trí, hoặc để làm một bảng thông báo nho nhỏ thì thủ thuật hôm nay mình xin giới thiệu sẽ giúp cho bạn đấy. Mời bạn xem screenshot bên dưới.

Các bạn tiến hành theo thứ tự những bước sau đây :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm đến thẻ ]]></b:skin> và thêm đoạn code dưới đây ngay bên trên nó :
#top_image {
position:fixed;
bottom:5px;
right:5px;
clip:inherit;
Lưu ý : Với đoạn code này, mình đã thiết lập cho hình luôn xuất hiện ở vị trí góc Cuối/Phải . Nếu không thích vị trí này, bạn hãy thế Bottom/Right thành Top/Left (góc Trên/Trái) hay đại loại thế.
Tìm tiếp thẻ </body> và thêm đoạn code này vào :
<div id='top_image'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png'/></div>
Lưu ý : Bạn hãy chỉnh lại Link hình bên trên thành Link hình của bạn (Hãy dùng hình có kích cỡ nhỏ để ít tốn thời gian load Blog và không gây phiền phức cho người đọc). Đồng thời, nếu muốn chèn URL vào hình, hãy sử dụng thẻ <a href="URL"><img src="Link hình"></a>.
Save lại template và kiểm tra kết quả.

Vậy là bạn đã thực hiện xong thủ thuật chèn ảnh luôn nổi trên Blog rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !

Đọc thêm »

Tạo Form đăng kí nhận tin qua RSS với Feedburner

Để người đọc luôn kịp thời cập nhật các thông tin mới nhất từ blog của bạn, thì công cụ này tuyệt đối không thể thiếu đối với 1 Blogger. Vì thế hôm nay mình xin hướng dẫn cách tạo công cụ này. (Thật ra thì việc này cũng không quá xa lạ với các Blogger 'lành nghề' , nhưng do có một số bạn còn thắc mắc nên hôm nay mình đăng luôn 1 bài post để làm tài liệu cho những bạn mới tham gia vào Blogger .)

Lưu ý : Thủ thuật này được viết trong bối cảnh người xem đã có tài khoản Google và tạo Blog. Nếu chưa biết về Feedburner, hãy đọc bài viết bình thường. Nếu đã tạo Feed với Feedburner, hãy 'nhảy' xuống bước 3 mà đọc nhé

.

Bây giờ chúng ta bắt đầu tiến hành tạo Form đăng kí nhận bài viết qua Email.

Đầu tiên, bạn truy cập vào Feedburner và Sign in.
Đối với những ai lần đầu đăng nhập vào Feedburner, sẽ thấy được giao diện như hình bên dưới.
- Nếu bạn đã có Feed bên trang chủ Feedburner, hãy nhấn CLAIM để tiến hành chuyển về máy chủ của Google. Khi đã chuyển xong, bạn đọc sang bước 3 nhé.
- Nếu chưa tạo Feed, hãy nhập đường link RSS của Blog bạn (có dạng http://tênblog.blogspot.com/feeds/posts/default) vào khung dưới và nhấn Next. Khung I am a Podcaster chỉ dành cho những Blog chuyên đăng nhạc online.
- Sau khi nhấn Next, Feedburner sẽ tiến hành nhập dữ liệu từ Blog của bạn. Bạn sẽ thấy được hình dưới đây sau khi Feedburner hoàn tất quá trình nhập RSS.
  Hãy đặt lại tên và địa chỉ cho Feed theo ý thích và nhấn Next để tiếp tục.
- Xin chúc mừng, bạn đã hoàn tất quá trình tạo Feed , rất nhanh đúng không. Giờ bạn chỉ việc hiệu chỉnh thêm cho Feed của mình, hoặc bỏ qua và đến Bảng điều khiển chính của Feedburner.
  Giao diện của phần Hiệu chỉnh thêm.
Bây giờ là phần quan trọng đây . Sau khi đã hoàn tất tạo Feed, bạn hãy chuyển về Bảng điều khiển chính. Ở hàng menu ngang bên trên, hãy chọn Tab Puclicize . Sau đó, bên cột trái SERVICIES, hãy chọn tab Email Subscriptions. Tại đây, bạn kích hoạt dịch vụ này bằng cách nhấn Active.
Sau khi kích hoạt xong, bạn sẽ thấy một giao diện như hình bên dưới :
Code bên trên dùng để tạo form Đăng kí nhận bài qua Email mà các bạn cần, còn bên dưới thì chỉ là một đoạn link nhỏ dẫn tới form đăng kí.
Copy đoạn code của Form đăng kí và dán vào Template dưới dạng 1 phần tử HTML/Javascript rồi save lại. Vậy là bạn đã hoàn tất.

Tạo 1 phần tử HTML/JS rồi thêm code vào, thế là xong . Nếu rành về HTML và CSS, bạn có thể thiết kế lại form theo phong cách riêng của mình.

Vậy là mình đã hướng dẫn xong thủ thuật tạo Form nhận bài viết qua Email cho các bạn rồi đấy. Hi vọng nó sẽ giúp cho các bạn quen với các dịch vụ chuyên dùng cho Blogger. Chúc vui !

Đọc thêm »

Đăng ký: Bài đăng (Atom)

blogcongnghe © 2012 | Thiết kế bởi Tâm Nguyên