Thứ Tư, 27 tháng 5, 2009

Modify Form comment : Bài 8 - Tạo số đếm cho các comment

Comment numbering in Blogger
[FD's BlOg] - Thêm một thủ thuật nữa để trang trí cho form comment của bạn, thủ thuật sẽ tự động đánh số thứ tự cho các bài comment.


Hình minh họa:


☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào Chỉnh sửa code HTML
4. Chọn mở rộng mẫu tiện ích
5. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px;
text-align: right;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: bold;
}

6. Tiếp tục xuống phía dưới, tìm đọan code như bên dưới:

<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'>
<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>
</b:loop>
</dl>


7. Thay thế tất cả bằng đọan code bên dưới:

<dl id='comments-block'>

<script type='text/javascript'>
var CommentsCounter=0;
</script>


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

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

<script type='text/javascript'>
CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
</script>

</a>
</span>

</dt>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>


8. Save template.

Nguồn : Blog Anol

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

Thứ Ba, 26 tháng 5, 2009

Khắc phục nhược điểm từ thủ thuật "Tạo thanh menu nằm ngang có sổ dọc"

[FD's BlOg] - Ở thủ thuật "Tạo thanh menu nằm ngang với hiệu ứng sổ dọc các menu con" (xem thêm ở đây) có 1 nhược điểm nhỏ là : chưa tùy chỉnh lượng bài viết hiển thị ở mỗi menu con (mỗi nhãn). Do đó khi nhấp vào 1 menu con (tức là 1 nhãn nào đó) thì số bài viết hiển thị của nhãn đó trên 1 trang khá nhiều. Bài viết này sẽ khắc phục nhược điểm đó.

Đối với những ai chưa thực hiện thủ thuật "Tạo thanh menu nằm ngang với hiệu ứng sổ dọc các menu con" thì xem ở đây để thực hiện thủ thuật này, sau đó tiến hành các bước như bên dưới để khắc phục nhược điểm không tùy chỉnh được lượng bài viết hiển thị ở mỗi nhãn.

☼ Bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Tìm đến widget của "Thủ thuật menu nằm ngang với hiệu ứng sổ dọc các menu con", vào chỉnh sửa


5. Tìm trong đọan code javascript đọan code sau sau :

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}

hình minh họa:


Và thêm vào nó đọan code màu cam vào trong đọan code trên(như bên dưới):

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'?max-results=5\'">'+submn_text+'</td></tr>');
}

Hình minh họa:

- Các bạn có thể thay đổi số "5" thành số bài viết mà bạn muốn hiển thị ở mỗi trang của mỗi nhãn.

6. Save widget là xong.
Chúc các bạn thành công.

8 thủ thuật để thiết kế 1 blog chuyên nghiệp với Blogger

8 Tips to design professional blog using Blogger
[FD's BlOg] - Blogger đó là một nền tảng rất mạnh mẽ để giúp bạn tạo 1 blog. Nó hoàn toàn miễn phí và với một số tính năng như : bạn có thể tùy chỉnh code template như thế nào bạn thích, mà không có giới hạn.
Trong bài này mình sẽ minh họa một số mẹo có thể giúp bạn cải thiện mẫu Blogger của bạn giúp nó trở nên chuyên nghiệp hơn.

1.Bắt đầu tạo một bản mẫu
Một mẫu đẹp là rất quan trọng cho sự thành công của blog của bạn trong việc truy cập và kiếm tiền với AdSense. Trước khi bắt đầu tùy chỉnh mẫu của bạn, bạn có thể tải xuống một mẫu đơn giản của Blogger, ví dụ như "Minima" (một mẫu khá phổ biến, và được nhiều người dùng): sau đó ta xóa tất cả code CSS trong thẻ <b:skin> và như thế thẻ <b:skin> chỉ còn lại như bên dưới:

<b:skin> /*</b:skin>


Sau đó ta sẽ thay thế bằng các code CSS cho riêng mình vào trong thẻ <style>

<style type="text/css">

{code CSS của bạn}

<style>

Ví dụ như ta có code như bên dưới:

<b:skin> /*</b:skin>
/*----------------------------*/
/*--- RESET HTML TAG ---*/
/*----------------------------*/
<style type="text/css">
body{
width:650px;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial;
font-size:11px;
color:#333333;
background-color:#FFFFFF;
}

a:link, a:visited, a:hover{text-decoration:none;}

h2 {
clear:both;
padding-top:20px;
}
ul {
list-style:none;
margin:0;
padding:0;
}

li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}

li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}

li a {
background:url(image.jpg) repeat 0 0;
}

li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}

<style>
...
...
...

- Và lúc này bạn có thể thêm các id, class, các thành phần, yếu tố mới cho mẫu của bạn.

2. Tạo tiêu đề và miêu tả cho blog của bạn
- Để tạo một ấn tượng riêng, phong cách riêng cho bạn, thì tiêu đề của bạn phải nói lên được nội dung blog của bạn. Cơ bản thì trong mỗi template blog đều có dòng code tiêu đề của blog
<title><data:blog.pageTitle/></title>

Và hãy thay đổi chúng, ví dụ như blog của mình sẽ là:
<title>Tips For Blogger | BlOg FD</title>

- Ngòai ra, bạn nên tạo thêm một thẻ <meta> để viết vài dòng mô tả blog của bạn, để làm điều này bạn copy đọan code bên dưới và dán vào sau dòng <head>
<meta name="Description" content="Add here a short description of your site" />

hãy thay code màu xanh thành 1 vài câu để mô tả blog của bạn, ví dụ như blog của mình sẽ là
<meta name="Description" content="BlOg FD - tips for blogger, hack widget, modify template and design layout" />


Và khi đó bạn sẽ thấy các tiêu để và mô tả đó được hiển thị trên cỗ máy tìm kiếm google như hình bên dưới:



3. Tạo favicon cho blog của bạn
- Một trong những cái để tạo nên phong cách riêng cho bạn đó chính là biểu tượng trên thanh address (favicon). Thông thường, các blogspot đều có favicon mặc định là biểu tượng của Blogger


- Để thay thế favicon của blogger thành favicon của mình thì bạn chỉ cần thêm code bên dưới vào trước thẻ </head>

<link href='URL of favicon.ico' rel='shortcut icon' type='image/x-icon'/>

- Các bạn có thể vào đây để tạo một file favicon cho riêng mình.

4. Tạo một thanh menu chính.
- Đơn giản nhất là bạn tạo một thanh menu nằm ngang và đặt nó trên cùng của blog bạn, và tạo các liên kết cho các menu đó. Ví dụ như blog của mình, mình sẽ tạo các menu chính như : About us, Contact, RSS, ...


5. Tạo các chuyên mục với các chuyên mục con trong nó:
- Nếu blog của bạn có nhiều nhãn, chuyên mục, hãy gôm chúng chung lại thành một chuyên mục nào đó. Và bên trong nó sẽ chứa các nhãn có nội dung liên quan tới chuyên mục đó. Và một dạng menu nhiều tầng là thích hợp nhất với việc này. Với menu lớp cao nhấtchuyên mục mà bạn đặt để gôm chung các nhãn có cùng nội dung, và các lớp menu nhỏ hơn sẽ là các nhãn...


Các bạn có thể tham khảo bài viết này để tạo một thanh menu nhiều cấp như trên.

6. Hiển thị vài tiện ích HTML ở trang chủ
- Đôi khi rất hữu ích khi cho một tiện ích HTML nào đó chỉ được phép hiển thị ở trang chủ, và để làm điều này, bạn chỉ cần sử dụng thẻ <b:if> của blogger là được, xem đọan code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- ... HTML code if you want to display only on home page here... -->

</b:if>

Bằng cách này, nếu trang bạn đang hiển thị không phải là trang chủ thì tiện ích đó sẽ không được hiển thị.

7. Tạo các widget "Bài viết mới nhất" và các "comment mới nhất" từ link RSS
- Thông thường blogger đều có hỗ trợ link RSS cho bài viết và comment của bạn. Và nó có dạng như bên dưới:

link RSS bài viết
http://YOURBLOG.blogspot.com/feeds/posts/default
link RSS comment
http://YOURBLOG.blogspot.com/feeds/comments/default

-Ngòai ra các nhãn của bài viết bạn cũng được cấp link RSS, và có dạng như bên dưới:

http://YOURBLOG.blogspot.com/feeds/posts/default/-/Label

- Tuy nhiên bạn cũng có thể tạo link RSS cho bài viết từ FeedBurner, và bạn sẽ sử dụng được nhiều tiện ích từ feedburner, thông dụng nhất là tiện ích nhận bài viết từ blog của bạn qua mail.
Và link RSS của feedburner có dạng như bên dưới:

http://feeds2.feedburner.com/yourname-RSSlink

Và bạn có thể vào đây để tạo một link RSS cho cái bài viết của bạn.

8. Add các trang xã hội vào blog của bạn
- Các trang xã hội mà một trong những cách để cho người khác biết đến blog của bạn
Chúc các bạn thành công.

Thủ thuật yêu cầu : Chèn biểu tượng vui vào khung sọan thảo của bài viết

Install Emoticons To Post Editor
[FD's BlOg] - Sau thủ thuật chèn biểu tượng vui vào form comment. Có bạn hỏi mình, là thủ thuật có áp dụng cho bài viết được không. Và mình có trả lời là có thể. Và hôm nay mình cũng xin post 1 bài hướng dẫn cái chèn các biểu tượng vui vào phần sọan thảo bài viết.

Hình ảnh minh họa:


Kết quả hiển thị ngòai layout:

Trước khi thực hiện thủ thuật, mình xin lưu ý là : Muốn thực hiện thủ thuật này, bạn phải dùng trình duyệt web là Firefox. Do vậy, bạn cũng sẽ phải dùng Firefox để sọan thảo bài viết. Và 1 điều nữa là thủ thuật này(các biểu tượng trong khung sọan thảo) chỉ hiển thị với firefox đã cài đặt tiện ích này, tức là chỉ hiển thị với máy của bạn. Còn kết quả hiển thị ngòai layout thì ta ko cần phải lo.
Nếu bạn nào chưa có cài đặt Firefox thì có thể download ở đây về để cài vào máy của mình.

Bây giờ ta bắt đầu với các bước sau::
☼ Bước 1 : Mở trình duyệt Firefox
☼ Bước 2 : Cài đặt Greasemonkey , các bạn nhấp vào link này https://addons.mozilla.org/en-US/firefox/addon/748 , sau đó nhấn vào nút Add to Firefox (xem hình bên dưới)


- Sau khi cài đặt xong nó sẽ đòi bạn phải restart firefox, nhấn vào nút restart firefox để restart (như hình bên dưới)


Sau khi restart Firefox, một cửa sổ popup hiện lên thông báo "Đã cài đặt Greasemonkey" vào firefox , và bên dưới góc phải của Firefox sẽ có 1 biểu tượng nho nhỏ (như hình bên dưới)



☼ Bước 3: Cài đặt bộ biểu tượng vui của Yahoo, các bạn nhấn vào đây để cài đặt. Sau khi nhấn vào file, một của sổ popup hiên ra (như hình bên dưới) và nhấn Install để cài đặt:

Kết quả:

-Nếu các bạn muốn cài đặt thêm bộ Onion Emoticons (như hình bên dưới), thì tiếp tục nhấn vào link này, một cửa sổ popup cũng hiện ra tương tự như trên, và ta cũng nhấn install để cài đặt, và kết quả như bên dưới:



☼ Bước 5 :
- Vào bảng điều khiển
- Vào Bố cục (Layout)
- Vào chỉnh sửa code HTML
- Tìm dòng code ]]></b:skin> và dán lên trên nó đọan code CSS bên dưới:

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

- Save template.

Như vậy đã xong. Chúc các bạn thành công.

Thứ Hai, 25 tháng 5, 2009

11 ways to increase your RSS feed subscribers count

[FD's BlOg] - As a blogger or freelancer, you can have different goals and ways to measure your success. My goal as a freelancer has always been to have dedicated clients, not to change all the time. As a blogger, I value feed subscribers more than visitors or page views. Following are some tips to make people subscribe to your feed more.

1. Give something unique to your subscribers

This could be an e-book, Photoshop brushes or whatever (on Designer Daily it’s free animal vectors). To make this available only to your subscribers, install the great RSS footer plugin and put the link to the goodie in the RSS footer.

2. Advertise that freebie

If the freebie you’re offering is really valuable (and it should be if you want more subscribers), advertise directly to its landing page. You can try a Google Adwords or BuySellAds campaign, I wouldn’t recommend using StumbleUpon ads for that.

3. Use Feedburner to track your subscriber count

This one probably sounds obvious for all seasoned bloggers, but Feedburner is a very useful service. It lets you count your subscribers, which is important if you want to track your progress. If you don’t want a third-party service hosting your feed, take a look at the Feed Statistics plugins for WordPress.

4. Install the Feedsmith plugin for WordPress

Now that you have a Feedburner feed, you should definitly use the Feedsmith plugin to redirect all your feeds to it.

5. Enable email subscription

This is another thing made easy by Feedburner, in your admin just go to Publicize > Email subscriptions, activate it and customize the messages. Again, if you’re not using Feedburner, you can try the Subscribe2 WordPress plugin.

6. Point the auto-discovery feature to your Feedburner feed

The auto-discovery feature of your browser is the little RSS icon in your adress bar. Wordpress themes have it included by default, to replace it you should look for the following code in your header:

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />


And replace it by this:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="Replace this by your feed’s adress” />

7. Track your subscribers with Google Analytics

If you’re going to improve your blog’s subscribers count, you should definitly check what sources are bringing you the most subscribers. For example, I learned that getting links from authority design blogs is the best way to gain subscribers (2% to 10% conversion on Designer Daily), right after offering freebies (15% to 20% conversion on Designer Daily). To learn how to track RSS subscribers, read this article.

8. Offer full feeds

I’ve been reading this advice very often, and I must admit that I tend to subscribe more often to blogs that offer full feeds. I’ve noticed that I unsubscribe quicker if the blog doesn’t provide full feed. Getting subscribers is good, keeping them is even better!

9. Optimize your subscription options display

First, your subscription options should be displayed above the fold and made unmissable either by having a big RSS button or by having enough space around it. Another strategic place to include your RSS subscription options is at the end of every post, the spot where your reader finished the article and looks for what to do next.

10. Submit your feed to directories

Blog directories will often give you the opportunity to also submit your feed, just make sure that they won’t scrape all your content. Of course, to save yourself some time you can ask some SEO company to do it for you (I would recommend Submit Comfort).

11. Run a contest

This is a pretty good way to make people subscribing happily, obviously some people will unsubscribe right after the contest, but you’ll get some new subscribers for sure. The number of new readers is likely to be related to the attractiveness of the gift. If you’re interested by this technique, learn how to track RSS subscribers in a blog contest.

Source Daily Designer

Chủ Nhật, 24 tháng 5, 2009

Tab Menu cực cool cho blog với jQuery

Create Tabbed Side Menu with jQuery
[FD BlOg] - Một ứng dụng khác từ jQuery, bài viết sẽ hướng dẫn các bạn tạo tab menu, với 5 tab con chứa nội dung. Và tiêu để của các tab sẽ được biểu thị bằng hình ảnh.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/jquery-tab-menu/index.html

Hình minh họa :



- Đầu tiên các bạn download gói hình ảnh của thủ thuật về máy, rồi up lên host để sử dụng cho thủ thuật. (images.rar)
Để đơn giản, ta sẽ chép tất cả code của thủ thuật vào 1 widget HTML/Javascript.
- Tạo widget HTML/Javascript ở nơi muốn đặt tab
- Dán tất cả code bên dưới vào:

//Code Javascript
<script src="http://data.fandung.com/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {


//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

// Code CSS
<style>

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(images/boxTop.gif) no-repeat;height:11px;clear:both}
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.gif) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>

// Code HTML
<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">
<ul>
<li>Post 1.</li>
<li>Post 2.</li>
<li>Post 3.</li>
<li class="last">Post 4.</li>
</ul>
</div>

<div id="comments">
<ul>
<li><a>Commet 1. <span> - Author 1</span></a></li>
<li><a>Commet 2. <span> - Author 2</span></a></li>
<li><a>Commet 3. <span> - Author 3</span></a></li>
<li class="last"><a>Commet 4. <span> - Author 4</span></a></li>
</ul>
</div>

<div id="category">
<ul>
<li><a href="#">css-html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">logo</a></li>
<li class="last"><a href="#">Blogger</a></li>
</ul>
</div>

<div id="famous">
<ul>
<li>List famous 1.</li>
<li>List famous 2.</li>
<li>List famous 3.</li>
<li class="last">List famous 4.</li>
</ul>
</div>

<div id="random">
<ul>
<li>Random post 1.</li>
<li>Random post 2.</li>
<li>Random post 3.</li>
<li class="last">Random post 4.</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

- Chú ý : các class "posts, comments, category, famous, random" là các tiêu đề của 5 tab. Và để ý ta thấy ở class posts có thêm dòng selected, dòng này để mặc định tab "posts" sẽ hiển thị mỗi lần load.
- Dòng code : .box {width:227px} : là độ rộng của tab chính.

-Save widget.

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

Thứ Bảy, 23 tháng 5, 2009

Modify Form comment : Bài 6 - Thêm biểu tượng vui cho comment + Ẩn hiển bảng chú thích các biểu tượng

Add emoticons to comment form and Show/Hide tab emoticon
[FD's BlOg] - Thủ thuật này có lẽ khá quen thuộc với nhiều người, tuy nhiên một số bạn sẽ chưa biết, hơn nữa thủ thuật này trên blog mình chưa có, nay mình xin post 1 bài hướng dẫn luôn. Ngoài ra thủ thuật này sẽ có kèm theo hiệu ứng ẩn hiện tab chú thích những kí hiệu cho các biểu tượng.


Hình minh họa:


Minh họa thủ thuật ẩn hiện tab chú thích:




Để các biểu tượng được hiển thị khi ta gõ các phím tắt thay thế thì ta phải dùng tới 1 đọan code javascript, đọan javascript này có tác dụng thay thế các kí tự chữ cho các hình ảnh. Do đó cơ bản ta hòan tòan có thể thay thế các kí tự và các hình ảnh tương ứng với nó thành các kí tự và hình ảnh khác.
Để minh họa điều này mình sẽ mình sẽ cho các bạn xem 1 đọan code nhỏ trong file smiles.js:

_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");

- Với đọan code trên: code màu đỏ sẽ là các kí tự thay thế, code màu xanh chính là hình ảnh tương ứng với kí tự đó.
- Để đổi ảnh khác, bạn chỉ việc thay thế link ảnh khác.
- Lưu ý: điều này mình chỉ giới thiệu cho các bạn biết thêm, nếu ai không rành thì không nên sửa code javascript, có thể sau khi sửa code sẽ không chạy được. Do đó cứ để nguyên mà xài thì vẫn tốt hơn.

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Trước tiên chèn đọan code javascript bên dưới trước dòng </body>

<script src='http://data.fandung.com/js/smiley.js' type='text/javascript'/>


6. Tìm đến đọan code như bên dưới:

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/> </h4>

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
<data:post.iframeColorizer/>
</div>

7. Thêm đọan code màu đỏxanh vào như bên dưới:

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/> </h4>

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

<script type='text/javascript'>
//<![CDATA[


if(typeof(rnd) == 'undefined') var rnd = '';

rnd = Math.floor(Math.random()*1000);

rnd = 'id-' + rnd;

document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="text-decoration : none;float:left;margin-right:5px;">');


//]]>

</script>[▼/▲]


<script type='text/javascript'>
//<![CDATA[

document.write('</a>');


//]]>

</script>


<b> More Emoticons </b>

<script type='text/javascript'>
//<![CDATA[

document.write('<div id="' + rnd + '" style="display:none;">');

//]]>

</script>

<div style='width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf;'>

<b>

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/>
:))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))

</b>


</div>


<script type='text/javascript'>
//<![CDATA[
document.write('</div>');

//]]>

</script>


<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
<data:post.iframeColorizer/>
</div>

- code màu xanh là code tạo hiệu ứng đóng mở khung tab chú thích, code màu đỏ là code của khung tab chú thích.

8. Save template.

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