Thứ Ba

Đặt nút Share phía dưới tiêu đề bài viết


Nút Share rất hữu ích cho blogspot khi nó tích hợp nhiều trang mạng xã hội với liên kết chia sẻ bài viết góp phần phổ biến blog của bạn ra cộng đồng. Thông thường các blogger thích đặt nút Share ngay dưới tiêu đề bài viết, có thể ở vị trí bên trái hoặc dạt sang bên phải.




Để đặt nút Share như vậy, bạn hãy thực hiện như sau.

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

Tìm dòng <div class='post-header'> và đặt trước nó với đoạn code sau đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AddThis Button BEGIN -->
<div style="float:right" class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4d2267003d6799cf" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf"></script>
<!-- AddThis Button END -->
</b:if>

Nếu muốn nút Share nằm ở bên trái thì đổi float:right thành float:left.

Nếu muốn nút Share gọn hơn thì bỏ phần được đánh dấu màu đỏ trong đoạn code nói trên.

Tạo Bookmarks ở cuối bài viết

SexyBookmarks là một plugin như một menu gồm nhiều icon đại diện cho các trang mạng xã hội được đặt ở cuối mỗi bài viết giúp cho phép người đọc dễ dàng đưa bài viết của bạn lên các trang mạng xã hội phổ biến nhất một cách tự động.

Bài viết này giới thiệu cách cài đặt một vài kiểu Bookmarks ở cuối bài viết Blogger.

Kiểu 1 như hình minh họa bên dưới.



Cách cài đặt như sau. 

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

Đặt đoạn code bên dưới vào sau dòng ]]></b:skin>.

<style type='text/css'>
div.sexy-bookmarks{height:54px;background:url('http://img191.imageshack.us/img191/8540/sharingsexys.png') no-repeat left bottom;position:relative;width:540px}
div.sexy-bookmarks span.sexy-rightside{width:17px;height:54px;background:url('http://img191.imageshack.us/img191/8540/sharingsexys.png') no-repeat right bottom;position:absolute;right:-17px}
div.sexy-bookmarks ul.socials{margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px}
div.sexy-bookmarks ul.socials li{display:inline-block !important;float:left !important;list-style-type:none !important;margin:0 !important;height:29px !important;width:48px !important;cursor:pointer !important;padding:0 !important}
div.sexy-bookmarks ul.socials a{display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important}
.sexy-furl,.sexy-furl:hover,.sexy-digg,.sexy-digg:hover,.sexy-reddit,.sexy-reddit:hover,.sexy-stumble,.sexy-stumble:hover,.sexy-delicious,.sexy-delicious:hover,.sexy-yahoo,.sexy-yahoo:hover,.sexy-blinklist,.sexy-blinklist:hover,.sexy-technorati,.sexy-technorati:hover,.sexy-facebook,.sexy-facebook:hover,.sexy-twitter,.sexy-twitter:hover,.sexy-myspace,.sexy-myspace:hover,.sexy-mixx,.sexy-mixx:hover,.sexy-script-style,.sexy-script-style:hover,.sexy-designfloat,.sexy-designfloat:hover,.sexy-syndicate,.sexy-syndicate:hover,.sexy-email,.sexy-email:hover{background:url('http://img72.imageshack.us/img72/6690/sexyspriter.png') no-repeat !important}
.sexy-furl{background-position:-300px top !important}
.sexy-furl:hover{background-position:-300px bottom !important}
.sexy-digg{background-position:-500px top !important}
.sexy-digg:hover{background-position:-500px bottom !important}
.sexy-reddit{background-position:-100px top !important}
.sexy-reddit:hover{background-position:-100px bottom !important}
.sexy-stumble{background-position:-50px top !important}
.sexy-stumble:hover{background-position:-50px bottom !important}
.sexy-delicious{background-position:left top !important}
.sexy-delicious:hover{background-position:left bottom !important}
.sexy-yahoo{background-position:-650px top !important}
.sexy-yahoo:hover{background-position:-650px bottom !important}
.sexy-blinklist{background-position:-600px top !important}
.sexy-blinklist:hover{background-position:-600px bottom !important}
.sexy-technorati{background-position:-700px top !important}
.sexy-technorati:hover{background-position:-700px bottom !important}
.sexy-myspace{background-position:-200px top !important}
.sexy-myspace:hover{background-position:-200px bottom !important}
.sexy-twitter{background-position:-350px top !important}
.sexy-twitter:hover{background-position:-350px bottom !important}
.sexy-facebook{background-position:-450px top !important}
.sexy-facebook:hover{background-position:-450px bottom !important}
.sexy-mixx{background-position:-250px top !important}
.sexy-mixx:hover{background-position:-250px bottom !important}
.sexy-script-style{background-position:-400px top !important}
.sexy-script-style:hover{background-position:-400px bottom !important}
.sexy-designfloat{background-position:-550px top !important}
.sexy-designfloat:hover{background-position:-550px bottom !important}
.sexy-syndicate{background-position:-150px top !important}
.sexy-syndicate:hover{background-position:-150px bottom !important}
.sexy-email{background-position:-753px top !important}
.sexy-email:hover{background-position:-753px bottom !important}
</style>

Bước 2. Đặt đoạn code bên dưới vào trước dòng <div class='post-footer'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>
</b:if>

Trong đoạn code trên bạn cần thay YOUR-FEEDBURNER-ID bằng id của trang Feedburner cho blog của bạn đã tạo tại Feedburner.com.

Lưu Template là OK.

Tạo thanh điều hướng breadcrumbs trên Blogger

Thanh điều hướng kiểu breadcrumbs (kiểu theo dấu vết ruột bánh mì) là thanh điều hướng cho phép người lướt web truy tìm nội dung theo chủ đề. Nó bắt nguồn từ câu chuyện dấu vết những cái ruột bánh mì bị bỏ lại bởi Hansel và Gretel trong truyện cổ tích nổi tiếng của anh em nhà Grimm.

Chuyện là thế này: Hansel và Gretel là 2 đứa trẻ trong một gia đình rất nghèo. Bố mẹ chúng nghèo quá đến nỗi không có gì để cho con cái ăn. Họ đã quyết định đem những đứa trẻ vào rừng và bỏ mặc chúng cho thú hoang ăn thịt. Hansel và Gretel đã phát hiện ra kế hoạch khủng khiếp này và có những biện pháp đề phòng trước. Chúng mang theo một cái bánh mì và thả rơi những mẫu ruột bánh mì dọc theo đường đi để tìm đường về nhà. Nhưng chẳng may chúng đã không tìm được đường về nhà và bị bắt giữ bởi một mụ phù thủy độc ác.

Từ câu chuyện này, ngày nay chúng ta có thể thấy thanh điều hướng theo kiểu “truy tìm đường theo mẫu ruột bánh mì” trên nhiều website để tìm lối trở lại Trang chủ.
Thanh điều hướng breadcrumbs xuất hiện nằm ngang trên đầu trang web, thường nằm dưới hoặc trên tiêu đề bài viết. Chúng cung cấp đường dẫn trở lại trang trước, đến một chủ đề nào đó hoặc trở về trang chủ. Nhìn chung người thiết kế thường sử dụng các dấu phân cách như > hoặc ».

Thanh điều hướng breadcrumbs điển hình trông như thế này:
Home » Thủ thuật Blogger » Tạo thanh điều hướng breadcrumbs trên Blogger

Sau đây là hướng dẫn thiết lập thanh điều hướng breadcrumb cho Blogger:
Bước 1: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML).
Nhớ backup Template của bạn và chọn Mở rộng Mẫu tiện ích (Expand Widget Template).

Bước 2: Tìm đoạn code sau đây (Nhấn Ctrl+F để tìm):

<b:include data='top' name='status-message'/>

Thay thế đoạn code trên bằng đoạn code sau đây:

<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>

Kế đến tìm đoạn code như bên dưới:

<b:includable id='main' var='top'>

và thêm trước nó với đoạn code sau đây:


<b:includable id='breadcrumbs' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumbs on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumbs for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Bước 3: Thêm đoạn code dưới đây vào trước dòng ]]></b:skin>.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Lưu Template lại là xong. Lúc này bạn có thể kiểm tra thanh điều hướng breadcrumbs hoạt động trên blog của bạn rồi đấy.

Lưu ý nếu bạn sử dụng nhiều nhãn (label) cho một bài viết thì breadcrumbs chỉ hiển thị nhãn cuối cùng mà bạn đã thêm vào. Thủ thuật trên đã thử thành công trên các Template dạng layout. Tôi đã có một số điều chỉnh nhỏ cho thích hợp với blog có ngôn ngữ tiếng Việt.

Tạo nút Trở về trang chủ cho website

Trong một trang web, nút Trở lại trang chủ hay Back Home cũng rất cần thiết để người lướt web có thể dễ dàng sử dụng. Có nhiều cách khác nhau để thực hiện điều này khi thiết kế web. Sau đây là một cách thực hiện bằng các cú pháp Javascript.

Bạn chỉ việc đặt đoạn mã này tại vị trí muốn hiển thị nút Back Home.


<script>
function gohome(){
if (document.layers)
window.home()
else if (document.all)
window.location="about:home"
else
alert("You need NS 4+ or IE 4+ to go back home!")
}
</script>

<form>
<input type="button" onClick="gohome()" value="Back Home!">
</form>

Nếu bạn muốn sử dụng nút dạng hình thay vì dạng form thì sử dụng đoạn mã dưới đây để thay cho đoạn mã màu đỏ.

<a href="javascript:gohome()"><img src="URL cua button hinh"></a>

Tham khảo theo DynamicDrive.

Tạo liên kết Đặt làm trang chủ cho Blogger

Liên kết “Đặt làm trang chủ” (Set as Homepage) giúp cho người đọc lưu trang web của bạn làm trang chủ mỗi khi công cụ trình duyệt được mở. Nó giúp làm tăng lượng truy cập cho trang web của bạn.

Đặt làm trang chủ Đặt làm trang chủ

Bài viết ngắn này giúp bạn thực hiện được ý định đơn giản này nhưng không kém phần hữu ích. 

Trước tiên đặt đoạn code dưới đây vào trước thẻ </head>.

<script type='text/javascript'>
function setAsHomePage(i)

if (document.all) {
i.style.behavior='url(#default#homepage)';
i.setHomePage('http://huynh-nhat-ha.blogspot.com');

}
</script>

Bạn cần thay dòng được đánh dấu màu đỏ bằng địa chỉ website/webblog của bạn.

Tiếp theo là thiết lập cấu trúc HTML cho liên kết “Đặt làm trang chủ” như sau:

<a onclick="javascript:setAsHomePage(this)"><img src="http://bit.ly/hhcDq7" style="vertical-align:middle;" alt="Đặt làm trang chủ" /> Đặt làm trang chủ</a>

Đặt đoạn code nêu trên tại vị trí bạn muốn tạo liên kết “Đặt làm trang chủ (nằm giữa 2 thẻ <body>, </body>).

Đưa Google Talk vào blogspot


Google Talk là một trong những công cụ chat phổ biến nhất hiện nay. Tiện ích Google Talk trước đây là một addon trên Gmail và nay đã được Google tích hợp thành một tiện ích cho Blogger. Tiện ích Google Talk (Google Talk Gadget) giúp bạn dễ dàng gửi tin nhắn, chuyển file tài liệu, gọi điện Internet (qua người dùng Google Talk khác) và để lại tin nhắn thoại. Ngoài ra, nếu bạn dán một đường dẫn (URL) trên Picasa Web hay YouTube vào khu vực chat thì tiện ích cũng cho bạn xem trước về hình ảnh và video đó.

Bạn có thể xem Demo. Thử đăng nhập bằng tài khoản Google Talk của bạn (hoặc nếu chưa có thì bắt đầu đăng ký) và bắt đầu chat với bạn bè của bạn đi nào.

Cài đặt tiện ích này cũng khá đơn giản. Đăng nhập Blogger, vào Design >> Page Elements. Trên phần sidebar hoặc lowerbar, thêm một tiện ích HTML/JavaScript và đặt đoạn code dưới đây vào phần Nội dung của tiện ích.

<iframe width="300" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350"></iframe><p style="margin:-8px 0">&nbsp;<a style="font-size:60%;text-decoration:none" href="http://huynh-nhat-ha.blogspot.com/2011/01/add-google-talk-to-your-blog.html">Add To Your Blog</a></p>

Bạn có thể điều chỉnh các tham số width="300" và height="350" để chỉnh chiều rộng và chiều cao của tiện ích theo ý thích của mình.

Công cụ hỗ trợ giải mã HTML

Đối với các bạn khi thiết kế blog trên Blogger, việc đăng các bài viết có trình bày các đoạn mã HTML khá dài thì việc phân tích giải mã bằng thủ công rất tốn thời gian. Để khắc phục điều này, có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.

Trước tiên hãy vào địa chỉ Escape HTML, kéo xuống dưới sẽ thấy giao diện trông như hình bên dưới:


Bạn chỉ việc dán đoạn code mà bạn cần chuyển đổi vào khung dưới dòng chữ Parse HTML rồi nhấn Parse sau đó trang web tự động hiển thị đoạn code đã được mã hóa ở khung đầu tiên, bạn chỉ việc copy đoạn code được mã hóa đó rồi sử dụng cho việc đăng bài; nếu muốn mã hóa tiếp đoạn code khác, thì bạn tiếp tục dán đoạn code đó khung thứ 2 nằm ở dưới khung thứ nhất.

Sau đó trang web sẽ tự động hiển thị đoạn code đã được mã hóa. 
Bạn có thể liên tục xoay vòng thao tác dán code đến n lần cũng được.

Có một trang web khác cho phép giải mã (encode) HTML và làm ngược lại (decode) rất thuận tiện cho việc đăng bài viết có giới thiệu code. Đó là trang centricle.com.

Hiển thị đoạn mã trong bài đăng Blogger

(Huynh Nhat Ha's Blog) -- Đối với các bạn sử dụng Blogger đặc biệt trong trường hợp muốn giới thiệu các đoạn mã (code) để cùng chia sẻ với cộng đồng Blogger, việc hiển thị các đoạn mã là điều khó khăn, đôi khi không thể đối với người mới dùng (newbie) Blogger. 
Trường hợp muốn hiển thị mã HTML trong các bài đăng thì phải sử dụng các ký tự XHTML để thay thế:

"&quot;
&&amp;
<&lt;
>&gt;


Trường hợp bạn muốn trình bày các đoạn mã phức tạp trong các bài đăng, bạn nên theo các bước sau đây:
Bước 1: Đăng nhập vào tài khoản Blogger đến phần Bố cục (Layout) trong Bảng điều khiến. Sau đó đến phần Chỉnh sửa HTML (Edit HTML).
Bước 2: Thêm đoạn mã CSS bên dưới trên phần ]]></b:skin> (ấn tổ hợp phím Ctrl + F để tìm cho nhanh).


.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Bạn có thể tùy chỉnh các thông số trong đoạn mã trên theo ý thích của mình.
Bước 3: Mỗi khi bạn tạo bài đăng mới có trình bày các đoạn mã (CSS, Scripts, HTML, …) thì chỉ cần đặt đoạn mã đó trong phần div như sau:

<div class="codeview">
Chèn đoạn mã bạn muốn hiển thị
</div>

Làm đẹp code trong bài viết bằng SyntaxHighlighter


(Huynh Nhat Ha's Blog) -- Nếu bạn muốn đặt một số đoạn mã HTML, JavaScript hay các ngôn ngữ lập trình khác trong bài viết Blogger theo một cách có thể làm nổi bật code và hiển thị số thứ tự dòng code thì bạn có thể sử dụng công cụ SyntaxHighlighter do Alex Gorbatchev phát triển.

Công cụ này giúp làm đẹp code hơn song điểm yếu của nó là phải sử dụng nhiều file javascript nên tốc độ load trang hơi nặng một chút. Khuyến cáo các blogspot chứa nhiều file javascript nặng rồi thì không nên sử dụng công cụ này.

Xem Demo.

Để cài đặt công cụ này cho blogspot của bạn, bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào trước thẻ </body> trong Template.

<!-- Syntax Highlighter --> 
<link href='http://huguogang.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script> 
<script class='javascript'> 
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf = 
//"http://huguogang.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>

Nếu blog của bạn chuyên giới thiệu về các ngôn ngữ lập trình thì có thể lựa chọn trong danh sách dưới đây để thêm vào đoạn code ở trên.

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>

Khi bạn muốn đưa một đoạn code vào bài viết thì trước tiên mã hóa chúng (bằng công cụ mã hóa) sau đó đặt như sau khi viết bài ở chế độ Chỉnh sửa HTML.

<pre name="code" class="js"> 
Đặt code đã giải mã ở đây…
</pre>

Hoặc

<textarea name="code" class="js"> 
Đặt code đã giải mã ở đây…
</textarea>

Thay thế js bằng các định dạng ngôn ngữ tương ứng như: cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt.
 

Blogger news

Blogroll

About