Make a chat room for blog with Xat.com

Gần đây, khá nhiều blogger sử dụng các công cụ được cung cấp bởi trang web xat.com để làm tăng phần hấp dẫn cho blog của mình. Với công cụ của xat.com, bạn có thể tạo một chat room đúng nghĩa cho mình và bạn bè để khi vào blog có thể cùng chat mà không cần tạo blog hay đăng nhập nick.

Tại trang chủ xat.com, vào mục chat để bắt đầu tạo chat room. Bạn có thể chọn các mẫu ảnh có sẵn hay một bức ảnh tùy chọn của mình để làm hình nền cho chat room. Sau khi chọn được hình nền vừa ý, bạn tiếp tục bấm vào phím Update & Get Code để cập nhật thêm những tính năng nâng cao khác.

Tại phần tính năng nâng cao - Extra Chat Box Feature, Lobby Feature là tính năng tương tự chat room công cộng của xat.com, khi bật chế độ này, những người vào phòng chat của bạn sẽ được liên kết đến chat room công cộng với những người dùng khác của xat.com. Tại mục Status Button, blogger có thể copy đoạn mã này và dán vào forum, comment trên blog của bạn bè hay email để hiển thị tình trạng online hoặc mời bạn bè vào chat room của mình.

Sau khi hoàn tất việc chỉnh sửa các tính năng cho chat room, chỉ cần bấm vào nút Update & Get Code là chat room đã được thiết kế hoàn chỉnh. Lúc này, người dùng chỉ cần copy đoạn mã, bỏ vào entry bất kỳ trên blog của mình là đã có được một chat room hoàn hảo với đầy đủ các biểu tượng cảm xúc. Người chat cũng có thể click chuột vào nickname mặc định để thay đổi nickname cũng như avatar hiển thị cho mình.

Thăm dò ý kiến, trắc nghiệm trên blog

Ngoài chat room, trang xat.com còn cung cấp công cụ để tạo các bảng thăm dò ý kiến (poll) hoặc các đố vui dạng trắc nghiệm (quiz) cho blog của mình. Tại phần Quiz, bạn có thể chọn số câu hỏi cho mục đố vui của mình. Sau đó, điền lần lượt câu hỏi và câu trả lời vào các ô tương ứng. Với phần câu trả lời, ô đầu tiên bạn điền đáp án đúng, các ô sau bạn điền những đáp án sai. Với phần Poll, bạn tùy chọn số câu trả lời từ 2 đến 12. Sau đó điền lần lượt câu hỏi thăm dò và các câu trả lời vào bảng.

Tương tự như chat room, bạn có thể chọn lại hình nền cho hai mục này. Sau cùng, bấm vào Update & Get Code để lấy đoạn mã cho Poll hoặc Quiz của mình. Khi chèn các đoạn mã này vào blog, bạn sẽ có những tính năng vui để làm blog mình sinh động hơn. Sau khi hoàn tất việc trả lời đố vui hoặc thăm dò, người chơi ngay lập tức sẽ nhận được kết quả dưới dạng cột 3D như tỉ lệ % số người có đáp án giống mình, tỉ lệ % số người trả lời được các câu hỏi...


Đây là đoạn mã thêm vào cho chat room. (Bạn tạo 1 widget Html/Javascript rồi paste đoạn code này vào)

<embed pluginspage="http://xat.com/update_flash.shtml" quality="high" allowscriptaccess="sameDomain" align="middle" flashvars="id=13924329" src="http://www.xatech.com/web_gear/chat/chat.swf" type="application/x-shockwave-flash" height="405" bgcolor="#000000" width="600" name="chat"/><small></small></embed>

Nhớ thay đổi mã ID màu đỏ thành mã của bạn khi đăng ký trên Xat.com và tùy chỉnh kích thước nhé

How to created Tabview widget on blogger

Hôm nay tôi sẽ giới thiệu cho các bạn tạo 1 Tabview trên blogger giúp tiết kiệm không gian cho blog và trình bày được nhiều thứ hơn.





Trước tiên các bạn đăng nhập vào blog --> chọn Layout --> Edit HTML và tìm đoạn ]]></b:skin> rồi copy đoạn Css này vào phía trên nó

/*----------Tab view css-----------*/
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width:  98px;
text-align: center;
height:      24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: url(http://img2.pict.com/f5/18/8d/c0c7240dfdb297e223b1d806e4/ff5Xf/tim.png);
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #202020;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

rồi tiếp tìm đoạn </head> đặt đoạn code này phía trên

<script src='http://sites.google.com/site/love4all1080/3-button/tabview.txt' type='text/javascript'/>

Click Save Template

Rồi tiếp theo vào phần Page Elements cũng trong phần Layout tạo mới 1 cái HTML/Javascipt và copy đoạn code này vào

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs">
<a>Recent Post</a>
<a>Top Cmt</a>
<a>Chat</a>
</div>
<div style="width: 330px; height: 350px;" class="Pages">

<div class="Page">
<div class="Pad">
   Noi dung tab 1
</div>
</div>

<div class="Page">
<div class="Pad">
Noi dung tab 2
</div>
</div>

<div class="Page">
<div class="Pad" align="center">
Noi dung tab 3
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Save lại. Tùy theo nội dung của bạn mà trong từng tab bạn đặt code vào đó. Chúc thành công !

How to add jQuery calendar widget to blogger

Theo như yêu cầu hôm tay tôi sẽ hướng dẫn các bạn add 1 widget Calendar lên blog của bạn giống như trên hình.

Đây chỉ là 1 dạng tờ lịch hiển thị chứ không phải giống như mấy Calendar trên blog yahoo hay dùng. Calendar trên yahoo ngoài việc hiển thị ngày tháng ra thì bạn có thể xem các bài viết theo từng ngày bằng cách click ngay trên tờ lịch nó. Nhưng widget calendar hôm nay tôi giới thiệu cho các bạn đơn giản chỉ là 1 tờ lịch trang trí mà thôi.

Đầu tiên các bạn đăng nhập vào blog -> Layout -> Edit HTML rồi copy đoạn CSS dưới vào phía trên đoạn code ]]></b:skin>

#datepicker_div, .datepicker_inline {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 14px;
 padding: 0;
 margin: 0;
 background: #DDD;
 width: 300px;
}
#datepicker_div {
 display: none;
 border: 1px solid #FF9900;
 z-index: 10;
}
.datepicker_inline {
 float: center;
 display: block;
 border: 0;
}
.datepicker_dialog {
 padding: 5px !important;
 border: 4px ridge #DDD !important;
}
button.datepicker_trigger {
 width: 25px;
}
img.datepicker_trigger {
 margin: 2px;
 vertical-align: middle;
}
.datepicker_prompt {
 float: center;
 padding: 2px;
 background: #DDD;
 color: #000;
}
*html .datepicker_prompt {
 width: 185px;
}
.datepicker_control, .datepicker_links, .datepicker_header, .datepicker {
 clear: both;
 float: center;
 width: 100%;
 color: #FFF;
}
.datepicker_control {
 background: #FF9900;
 padding: 2px 0px;
}
.datepicker_links {
 background: #E0F4D7;
 padding: 2px 0px;
}
.datepicker_control, .datepicker_links {
 font-weight: bold;
 font-size: 80%;
 letter-spacing: 1px;
}
.datepicker_links label {
 padding: 2px 5px;
 color: #888;
}
.datepicker_clear, .datepicker_prev {
 float: left;
 width: 34%;
}
.datepicker_current {
 float: left;
 width: 30%;
 text-align: center;
}
.datepicker_close, .datepicker_next {
 float: right;
 width: 34%;
 text-align: right;
}
.datepicker_header {
 padding: 1px 0 3px;
 background: #83C948;
 text-align: center;
 font-weight: bold;
 height: 1.3em;
}
.datepicker_header select {
 background: #83C948;
 color: #000;
 border: 0px;
 font-weight: bold;
}
.datepicker {
 background: #CCC;
 text-align: center;
 font-size: 100%;
}
.datepicker a {
 display: block;
 width: 100%;
}
.datepicker .datepicker_titleRow {
 background: #B1DB87;
 color: #000;
}
.datepicker .datepicker_daysRow {
 background: #FFF;
 color: #666;
}
.datepicker_weekCol {
 background: #B1DB87;
 color: #000;
}
.datepicker .datepicker_daysCell {
 color: #000;
 border: 1px solid #DDD;
}
#datepicker .datepicker_daysCell a {
 display: block;
}
.datepicker .datepicker_weekEndCell {
 background: #E0F4D7;
}
.datepicker .datepicker_daysCellOver {
 background: #FFF;
 border: 1px solid #777;
}
.datepicker .datepicker_unselectable {
 color: #888;
}
.datepicker_today {
 background: #B1DB87 !important;
}
.datepicker_currentDay {
 background: #83C948 !important;
}
#datepicker_div a, .datepicker_inline a {
 cursor: pointer;
 margin: 0;
 padding: 0;
 background: none;
 color: #000;
}
.datepicker_inline .datepicker_links a {
 padding: 0 5px !important;
}
.datepicker_control a, .datepicker_links a {
 padding: 2px 5px !important;
 color: #000 !important;
}
.datepicker_titleRow a {
 color: #000 !important;
}
.datepicker_control a:hover {
 background: #FDD !important;
 color: #333 !important;
}
.datepicker_links a:hover, .datepicker_titleRow a:hover {
 background: #FFF !important;
 color: #333 !important;
}
.datepicker_multi .datepicker {
 border: 1px solid #83C948;
}
.datepicker_oneMonth {
 float: left;
 width: 300px;
}
.datepicker_newRow {
 clear: left;
}
.datepicker_cover {
 display: none;
 display/**/: block;
 position: absolute;
 z-index: -1;
 filter: mask();
 top: -4px;
 left: -4px;
 width: 300px;
 height: 200px;
}

Xong rồi sau đó bạn Page Elements thêm 1 widget mới (HTML/Javascript) và paste đoạn code dưới và đặt vào nơi bạn muốn hiển thị

<center>
<script src="http://projects.ischool.washington.edu/tabrooks/343INFO/jQueryCalendar/jquery-1.2.3.min.js" type="text/javascript"></script>

<span id="inlineDemo" style="float: center; padding: 10px"></span>
<script src="http://projects.ischool.washington.edu/tabrooks/343INFO/jQueryCalendar/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$('#inlineDemo').datepicker({
minDate: new Date(2009, 1 - 1, 1),
maxDate: new Date(3000, 12 - 1, 31),
 onSelect: function(dateText)
  {
   var i = document.getElementById("heading");
   i.innerHTML = dateText;
  }
});
</script>
</center>

Chú ý :Các bạn điều chỉnh kích cỡ trong phần CSS để hiển thị chuẩn trên blog của bạn.Tránh trường hợp đoạn mã không thực hiện được các bạn hãy tải file script jquery-1.2.3.min.js và ui.datepicker.js rồi upload lên host của bạn.

Xem demo trên blog của tôi.

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

Hot Shoutbox for Blogger

Cái Shoutbox này quả thật rất hay nếu tích hợp vào Blogger. Demo nhé

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="http://www.ajaxdaddy.com/ajax/jquery/shoutbox/"> <style type="text/css"> body {color: white;background: #52616F;} a { color: white; } </style> <meta equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>jQuery</title> <style type="text/css"> #daddy-shoutbox { padding: 5px; background: #3E5468; color: white; width: 600px; font-family: Arial,Helvetica,sans-serif; font-size: 11px; } .shoutbox-list { border-bottom: 1px solid #627C98; padding: 5px; display: none; } #daddy-shoutbox-list { text-align: left; margin: 0px auto; } #daddy-shoutbox-form { text-align: left; } .shoutbox-list-time { color: #8DA2B4; } .shoutbox-list-nick { margin-left: 5px; font-weight: bold; } .shoutbox-list-message { margin-left: 5px; } </style> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/jquery.form.js"></script> </head> <body> <center> <div id="daddy-shoutbox"> <div id="daddy-shoutbox-list"></div> <br /> <form id="daddy-shoutbox-form" action="daddy-shoutbox.php?action=add" method="post"> Nick: <input type="text" name="nickname"> Say: <input type="text" name="message"> <input type="submit" value="Submit"> <span id="daddy-shoutbox-response"></span> </form> </div> </center> <script type="text/javascript"> var count = 0; var files = ''; var lastTime = 0; function prepare(response) { var d = new Date(); count++; d.setTime(response.time*1000); var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds(); var string = '<div class="shoutbox-list" id="list-'+count+'">' + '<span class="shoutbox-list-time">'+mytime+'</span>' + '<span class="shoutbox-list-nick">'+response.nickname+':</span>' + '<span class="shoutbox-list-message">'+response.message+'</span>' +'</div>'; return string; } function success(response, status) { if(status == 'success') { lastTime = response.time; $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />'); $('#daddy-shoutbox-list').append(prepare(response)); $('input[@name=message]').attr('value', '').focus(); $('#list-'+count).fadeIn('slow'); timeoutID = setTimeout(refresh, 3000); } } function validate(formData, jqForm, options) { for (var i=0; i < name="'+formData[i].name+']').css('background'," src="'+files+'images/loader.gif">'); clearTimeout(timeoutID); } function refresh() { $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) { if(json.length) { for(i=0; i < j =" i-1;" lasttime =" json[j].time;" timeoutid =" setTimeout(refresh," options =" {" timeoutid =" setTimeout(refresh,"> </body> </html>

Widget lấy avatar yahoo

Với Widget này bạn có thể cung cấp một tiện ích khá phổ biến trong cộng đồng Chat Yahoo! đó là lấy Avatar của nick yahoo, rất tiện lợi chỉ cần nhập tên nick yahoo cần lấy vào khung và nhấn "Lấy Avatar" và lưu về máy tính.

Bạn hãy chèn đoạn code dưới đây vào trong tiện ích "HTML/JavaScrip" và đặt bất cứ đâu trên blog mà bạn thích:

<center><span style="font-weight: bold; "><< Yahoo! ID >></span>
<iframe frameborder="0" width="180" src="http://www.geocities.jp/betterboyhpmylove/getavtar.html" height="195"></iframe></center>

DEMO thử bên dưới nhé
<<>>

Widget lấy tin tức từ các trang báo điện tử cho blog

Trên mạng có rất nhiều các trang báo điện tử cập nhật các tin tức hàng ngày 1 cách nhanh chóng.Để giúp cho Blog của bạn thêm phần phong phú giúp người đọc vừa có thể ghé thăm đọc blog của bạn và vừa cập nhật được các tin tức sự kiện nóng hổi diễn ra hàng ngày, hôm nay tôi sẽ giới thiệu cho các bạn 1 số widget giúp các bạn tích hợp nhanh chóng vào blog mà không mất thời gian chỉnh sửa nhiều.

Đối với việc tích hợp thêm widget cho blog chắc mọi người ai cũng biết nên tôi ko cần phải giới thiệu nhiều. Nó chỉ là việc đơn giản là thêm vào 1 phần tử cho Blog là đoạn mã HTML/Javascript sau đó save lại là ok.

1. Đây là đoạn mã Javascript lấy tin từ trang dantri.com trên trang wowzio cung cấp,các bạn copy và thêm đoạn mã này vào blog để lấy tin

<div id="wow_wwrapfadf" rel="photo"><script src="http://widgets.wowzio.net/widgets/jscript?wtype=photo&w=auto&h=230&ti=Dantri.com.vn&tc=FFFFFF&hc=444444&bc=000000&txc=555555&lc=FFFFFF&ni=50&tx=DESIGNER_DARK&ap=yes&ps=7&sb=yes&sv=3&cid=0&ef=fade&ids=30544" type="text/javascript"></script><div id="wow_signfadf"><a id="wow_srfadf" href="http://Free-Style-Love.blogspot.com" title="Slideshow Blog Widgets">Free-Style-Love</a><div id="wow_slfadf"><a id="gwl_fadf" class="wow_bl bl_f" href="http://www.free-style-love.blogspot.com/widgets/designer?ids=30544&wtype=photo&cid=0" title="grab/edit this widget">grab this</a> &middot; <a id="sml_fadf" class="wow_bl" href="http://www.free-style-love.blogspot.com/widgets/seewidgets?ids=30544&cid=0" title="widgets for Tin m%u1EDBi nh%u1EA5t - Dân trí %u0111i%u1EC7n t%u1EED Dantri.com.vn">widgets</a><div class="wowclear"></div></div></div></div>

2.Mã lấy tin từ trang Baomoi.com

<script type="text/javascript">
epi_id = 'epi-widget-container';
epi_width = 'auto';
epi_height = 'auto';
</script>
<script type="text/javascript" src="http://www.baomoi.com/Widget/JS/Widget.js"></script>
<script type="text/javascript" src="http://www.baomoi.com/Widget/GenerateJS.aspx?zone=-1&count=10&ntype=popular&dtype=1&target=0"></script>

Trên trang này các bạn có thể trực tiếp vào theo địa chỉ này ( Widget Bao moi ) để chỉnh sửa lại Style cho phù hợp với Blog của mình

Ngoài ra còn 1 số trang khác như Vnexpress.net .... hay 1 số trang tin tức nước ngoài. Nếu ai có hứng thú thì tìm hiểu thêm phần lấy tin từ các trang khác = cách đọc Feed Rss

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

Translate Blog Widget (using Flags)

Let your readers easily translate your blog with this highly compact widget. These super-mini flags are powered by Google Translate. The languages available at the click of a flag are Chinese, German, French, Japanese, Korean, Russian, and Spanish. It can easily be added to any blog platform or website! Just click "get this translation widget" below to get yourself started.

Widget Danh ngôn ngẫu nhiên

Có tổng cộng 1.103 câu danh ngôn, thuộc hầu hết các lĩnh vực của cuộc sống sẽ xuất hiện ngẫu nhiên trên Blog .Hãy Click button bên dưới để Install vào blog của bạn

Make your Button widget free

Just enter the name and code for your widget in the top text boxes, press the Create button, and you get the code to add to your website. The code renders as a button, and we’re done. Easy!