Thursday, January 20, 2011

Tiện ích Xuất bản lên Twitter cho blogspot

Viết blog là một thú vui đầy thú vị. Viết blog giúp con người đầy trí tưởng tượng và sáng tạo hơn trong công việc. Khi viết blog, tôi luôn mong muốn biến blog của mình thành một cổng thông tin để mọi người cùng chia sẻ, ngoài ra còn là nơi để mình thể hiện ý tưởng và giải trí vào những thời gian rảnh rỗi thường ngày. Blogspot không chỉ là nơi bạn đăng những bài viết, mà còn có thể là nơi bạn nghe nhạc, xuất bản bài viết lên các trang mạng xã hội… Với ý tưởng ngay tại blogspot mà có thể dễ dàng xuất bản bài viết lên Twitter, tôi đã hiện thực hóa ý tưởng này bằng cách tạo ra tiện ích Xuất bản lên Twitter (Publish on Twitter Widget).

Xem Demo.

Để cài đặt tiện ích này, bạn Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript và đặt đoạn code sau đây vào phần nội dung của tiện ích.

<!-- Publish on Twitter Widget by Huynh Nhat Ha -->
<style style="text/css">
#twitterbrand{float:right;color:#A5ACB2;}
.charlimit {font-family:arial;font-size:14pt;border:0px;color:#A5ACB2;}
#publishbtn {float:right;margin-top:10px;background:#F6F6F6;border:#D9D9D9;border-style:solid;border-width:1px;text-decoration:none;padding:5px 10px 5px 15px;font-size:15px;font-family:tahoma,arial;display:inline-block;_display:inline;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;line-height:16px; color:#2B60DE;}
#publishbtn:hover{float:right;margin-top:10px;background:#A5ACB2;border:#EBEBEB;border-style:solid;border-width:1px;text-decoration:none;padding:5px 10px 5px 15px;font-size:15px;font-family:tahoma,arial;display:inline-block;_display:inline;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;line-height:16px; color:#fff;}
.textinput {font-family:arial;font-size:10pt}
</style>
<script type="text/javascript">
content_textarea = ""
num_char_allowed = 200
function validate_length(){
num_char= document.forms[0].text.value.length
if (num_char<= num_char_allowed){
content_textarea = document.forms[0].text.value
}else{

document.forms[0].text.value = content_textarea
}
if (num_char>= num_char_allowed){
document.forms[0].character.style.color="#ff0000";
}else{
document.forms[0].character.style.color="#A5ACB2";
}
account ()

}
function account(){
document.forms[0].character.value=document.forms[0].text.value.length
}
function gotwitter()
{
window.location='http://twitter.com/home?status='+document.forms[0].text.value+''
}
</script>
<form action="#" method="yyy"><img src="http://a2.twimg.com/a/1295550980/images/logos/logo_twitter_withbird_1000_allblue.png" style="width: 75px;height: 15px;float:left" />
<div id="twitterbrand">
<input type="text" class="charlimit" value="200" name="character" size="1" />
</div>
<textarea style="width:98%; height:60px" class="textinput" name="text" onkeydown="validate_length()" onkeyup="validate_length()"></textarea><br />
<a id="publishbtn" href="#" onclick="gotwitter()">Xuất bản lên Twitter</a>
</form>
<!-- www.huynh-nhat-ha.blogspot.com -->

Trong đoạn code trên bạn có thể thay số 200 bằng số ký tự tối đa cho phép trong khung nhập text của tiện ích.

Lưu tiện ích là OK.

No comments:

Post a Comment