* Hiển thị bài viết mới nhất chạy marquee chiều ngang

Có nhiều kiểu tiện ích Bài viết mới nhất với những kiểu dáng và đặc điểm riêng biệt. Hôm nay tôi xin giới thiệu một kiểu tiện ích Bài viết mới nhất chạy marquee chiều ngang (Horizontal Marquee Recent Posts Widget) rất hữu ích cho blogspot. Tiện ích này hiển thị những bài viết mới nhất cho blogspot với kiểu trình chiếu chạy ngang ( không có ảnh đại diện ), với đặc trưng tiết kiệm không gian web là một ưu điểm có thể nhìn thấy dễ dàng so với các kiểu tiện ích cùng loại.

Để cài đặt tiện ích này, bạn chỉ cần Đăng nhập Blogger sau đó đặt toàn bộ đoạn code dưới đây vào phần nội dung của một tiện ích HTML/Javascript là OK.

<style type="text/css">
.feedmarquee a:link{
font-size: 11px;
text-decoration: none;
color:#fff;
}
.feedmarquee {
font-size: 12px;
color:#FEE405;
position:absolute;
background: #C0C0C0;
padding:2px;
width: 640px;
}
</style>

<script src="http://hacodeproject.googlecode.com/files/recentpostsscrollerha.js" type="text/javascript"></script>
<div class="feedmarquee">
<script type="text/javascript">
var nMaxPosts = 20;
var sBulletChar="-" ;
var nWidth;
var nScrollDelay = 155;
var sDirection="left";
var sOpenLinkLocation="p";
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerha" type="text/javascript"> </script>
</div>

Trong đoạn code trên, bạn có thể điều chỉnh chiều rộng bố trí tiện ích tại tham số width: 640px, điều chỉnh số bài viết tối đa được trình chiếu tại tham số var nMaxPosts = 20 đồng thời cần thay huynh-nhat-ha bằng tên blogspot của bạn.

nguồn: http://www.bloggerism.tk

Read more »

* Tạo hiệu ứng gallery ảnh sử dụng Tomorrow again Script

Tomorrow again là một script do Dhteumeuleu phát triển dùng cho gallary ảnh với một hiệu ứng khá độc đáo.

Bạn cũng có thể áp dụng hiệu ứng này cho website hoặc blogspot của bạn theo các bước sau đây theo thứ tự Script >> CSS >> HTML.

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head> .

<script type='text/javascript' src='http://hacodeproject.googlecode.com/files/tomorrowagain.js' ></script>

Hoặc nếu bạn không muốn sử dụng file nguồn như trên thì sử dụng đoạn code sau đây.

<script type='text/javascript'>
//<![CDATA[
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,

run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
var div = document.createElement("div");
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
// if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function() { panel.over = this; }
div.onclick = function() {
document.getElementById('imagenREAL').src=this.children[0].src;
}

this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
//]]>
</script>

Bước 2. Đặt đoạn CSS sau đây vào trước thẻ </head> .

<style type='text/css'>
#screen { /* the container */
margin: 0 auto;
overflow: hidden;
/* the width and height we will calculate according to the size defined in panel */
height: 500px;
width: 400px;
}

/* the images */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* this is the width and height of each square which have the effect */
height: 150px;
width: 150px;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* the image you see in reality */
#imageREAL {
display:block;
margin:0 auto;
/* if you don’t limit the size of images, remove it */
max-height: 350px;
max-width: 350px;
}
</style>

Bạn có thể điều chỉnh các tham số về chiều rộng (width) và chiều cao (height) tùy theo ý thích.

Bước 3. Thiết lập cấu trúc HTML như sau và đặt tại vị trí cần bố trí gallery ảnh, trong phần thân trang web.

<div id="screen">
<img class="panel" src="URL_hình ảnh 1" />
<img class="panel" src="URL_hình ảnh 2" />
<img class="panel" src="URL_hình ảnh 3" />
<!-- tiếp tục thêm các thẻ img theo cấu trúc tương tự -->
</div>
<img id="imageREAL" src="URL_hình ảnh 1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>

Nguồn: http://huynh-nhat-ha.blogspot.com

Read more »

* Trình chiếu nội dung và hình ảnh sử dụng jQuery

Mày mò, lụm lặt bữa giờ mới ra được cái mã trình diễn ảnh kèm nội dung sử dụng jQuery cực đẹp này, hôm nay xin chia sẻ với các bạn. Cùng làm ngay bây giờ nào!



Xem: Demo

Trước hết bạn chèn đoạn mã sau vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

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



(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

Chèn tiếp đoạn mã sau vào trước thẻ ]]></b:skin>

#s3slider {
width: 620px;
height: 300px;
position: relative;
overflow: hidden;
margin-top: 17px;
margin-bottom: 10px;
*margin-bottom: 0px;
background:#ffffff;
border: 1px solid #000;

}
#s3sliderContent {
width: 620px;
height:300px;
background:#ffffff;
position: absolute;
top: -13px;
*top: 0px;
padding: 0px;
list-style:none;
margin-left: 0;
overflow: hidden;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}

.s3sliderImage span {
position: absolute;
right: 0;
font:Georgia, serif;
padding: 10px 13px;
font-size:12px;
width:180px;
height:300px;
*max-height:300px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
top: 0;
overflow: hidden;
}

.s3sliderImage strong a{
color:$titlecolor;
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-size:20px;
}

Cuối cùng là tạo một HTML và dán đoạn mã sau vào:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Link_anh_1" />
<span><strong><a href="Link_lien_ket_1">Ten _anh_1</a></strong>

<p>Noi_dung_1</p>
</span>
</li>

<li class="s3sliderImage">
<img src="Link_anh_2" />
<span><strong><a href="Link_lien_ket_2">Ten _anh_2</a></strong>

<p>Noi_dung_2</p>
</span>
</li>

<li class="s3sliderImage">

<img src="Link_anh_3" />
<span><strong><a href="Link_lien_ket_3">Ten _anh_3</a></strong>

<p>Noi_dung_3</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Tùy chỉnh Link cho phù hợp và Save.

~libra~

Read more »

* Tạo copyright và menu mini cuối blog cho Blogspot

Bạn Kira [ http://freejapanesemovies.blogspot.com/] có hỏi mình cách làm menu mini và copyright như phía cuối blog của mình, bữa giờ bận thi nhiều quá nên bây giờ mình mới có bài viết này. Mình cũng chỉ là tay ngang mới bước chân vào thế giới Blogspot, tập tành làm blog nên biết gì thì mình chỉ cái đó thôi.

Mã bài viết này mình lấy từ blog của mình và đem lên đây chia sẻ với các bạn thôi chứ ko phải do mình viết đâu, mã cũng tương đối đơn giản và dễ thao tác.

Đầu tiên là khi lấy một theme nào trên mạng đều có hiển thị bản quyền tác giả phía cuối blog, điều này có hơi hạn chế một xíu, có nhiều bạn sẽ ko thích, nên bước đầu tiên là cần phải ẩn hoặc xóa nó đi để blog để blog đẹp hơn một xíu và mang tính riêng của mình hơn. Nó sẽ có dạng như sau:


Vào Thiết kế -> Chỉnh sửa HTML, ko cần chọn Mở rộng tiện ích. Bấm Ctrl + F để tìm dòng chữ Attribution, sau đó bạn sẽ nhìn thấy đoạn mã sau:

<b:widget id='attribution1' locked='true' title='' type='attribution'/> </b:widget>

Xóa nó đi là Ok, hoặc ẩn nó bằng cách làm như sau:

<!--
<b:widget id='attribution1' locked='true' title='' type='attribution'/>
</b:widget>-->

Cuối cùng lưu lại và xem thử blog của bạn nha!

Tiếp theo là tạo menu mini cuối blog.


Vào Thiết kế -> Chỉnh sửa HTML, chèn đoạn mã sau vào trước thẻ ]]></b:skin>

#credits{
width:840px;/*độ rộng tiện ích*/
padding:10px 0px 5px 0px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzclRhvj2NA7rvcy8w1HnlP6giIjPvmgarhoJvYlNufgghnIyXNm59DRwItSlZuCWHvvltURCIteFKTkbdiwHASYq2fxUi54IyriKkscVB7XKpyq6cH-cGllAYHKdtfsfTxYahBF5CFyw/s1600/80percentblack.png") repeat scroll 0 0 transparent;/*link màu nền tiện ích, ở đây là màu đen*/
position:relative;
font-size:13px;
border:1px solid #404040;/*màu chữ hiển thị ko có link liên kết*/
margin-left:180px;/*khoảng cách so với lề trái*/
height:30px;/*chiều cao tiện ích*/
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-moz-box-shadow:1px 1px 5px #000000;
}

#credits_left {
float:left;
padding-left:40px;
}

#credits_right {
float:right;
padding-right:20px;
}

#credits a {
color:#D54E21;/*màu chữ hiển thị khi có liên kết link*/
}

#credits a:hover {
font-color:#AA0000;/*màu chữ hiển thị khi click chuột*/
text-decoration:underline;
}

Tiếp tục thêm đoạn mã sau vào trước thẻ </body>

<div id='credits'>
<div id='credits_left'>
Copyright 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div id='credits_right'>
<p>
<a expr:href='data:blog.homepageUrl' title='Home'>Home</a> | <a href='Link_lien_ket_1'><span>Ten_link_1</span></a> | <a href='Link_lien_ket_2'><span>Ten_link_2</span></a> | <a href='Link_lien_ket_3'><span>Ten_link_3</span></a> | <a href='Link_lien_ket_4'><span>Ten_link_4</span></a> |

</p>
</div>
</div>

Save lại là xong rồi đó.

Note: các bạn chú ý khi điều chỉnh khoảng cách so với lề trái thì phải điều chỉnh luôn cả chiều rộng của tiện ích để có được khoảng cách đẹp nhất trên blog. Nếu thấy hay đừng quên để lại comment nha!

~libra~

Read more »

* Tiện ích Danh Ngôn Thay Đổi dành cho blogspot

Một tiện ích rất hay dành cho blog của bạn. Danh ngôn sẽ thay đổi mỗi lần bạn click, rất nhiều câu danh ngôn hay sẽ hiện ra...và quan trọng nhất là đoạn mã của nó, vô cùng ngắn gọn. Bạn chỉ cần copy và paste vào nơi bạn muốn hiện những câu danh ngôn này.

<script type="text/javascript" src="http://javascriptbank.com/service/getFreeQuote.php"></script>

~libra~

Read more »

* Tiện ích dịch Blog / Web sang 52 ngôn ngữ

Chỉ cần sao chép và dán mã sau vào vị trí mà bạn muốn đặt tiện ích. Tiện ích này sử dụng AJAX và các ngôn ngữ của Google API. Điểm đặc biệt ở đây là trang web của bạn sẽ được dịch sang 52 ngôn ngữ khác nhau, rất nhiều phải ko nào?

Dạng hiển thị là một button cực kì nhỏ gọn, rất đẹp trên blog / web của bạn:


Cuối cùng là đoạn mã đây:

<!-- Begin TranslateThis Widget -->

<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

<!-- End TranslateThis Widget -->

Nếu thấy hay thì đừng quên comment cho mình nha!

Read more »

* Chèn game Sudoku vào Blogspot

Bạn thấy thế nào nếu vừa vào blog của mình vừa chơi Sudoku nhỉ? Rất tiện đúng ko nào ^^









Vô cùng đơn giản, chỉ cần tạo một tiện ích mới rồi dán đoạn mã sau vào là OK

<iframe src="http://www.odyssey.ie/sudoku/sudoku-google.html" frameborder="0" width="200" height="230" scrolling="no"></iframe>

Giờ thì chơi thử nào!

Read more »

* Trình diễn slide ảnh đơn giản trong blogspot

Hôm nay mình xin chia sẻ với các bạn thủ thuật tạo slide ảnh vô cùng đơn giản và gọn nhẹ. Thủ thuật này có ưu điểm là load rất nhanh.








Đầu tiên các bạn vào Thiết kế -> Thêm tiện ích -> HTML/Javascript, sau đó dán toàn bộ đoạn mã sau vào tiện ích, chỉnh sửa Link_anh và Link_lien_ket_den_anh là OK:

<embed type="application/x-shockwave-flash" src="http://img694.imageshack.us/img694/7500/beautifuldreamblogslide.swf?http://i465.photobucket.com/support/http://vn.myblog.yahoo.com/cindy-babylove" flashvars="config=4&amp;bcastr_flie=Link_anh1|Link_anh2&amp;bcastr_link=Link_lien_ket_den_anh1|Link_lien_ket_den_anh2" wmode="transparent" width="500" height="300"></embed>

Bây giờ là phần chỉnh sửa:
* config=4: tốc độ thay đổi ảnh 1 -> 10, số càng lớn, tốc độ thay đổi ảnh càng nhanh, nên chọn 4 là phù hợp nhất.
* Link_anh1: thay bằng link ảnh của bạn
* Link_lien_ket_den_anh1: thay bằng kink liên kết đến một trang nào đó mà bạn thích ( thứ tự phù hợp với link ảnh nha bạn)
* width=500, height=300: bạn tùy chỉnh chiều dài và chiều rộng ảnh hiện thị tại đây.

Cuối cùng Save lại là xong. Nếu thấy hay thì đừng quên để lại comment cho mình nha!

Read more »

* Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger

Cách cài đặt thật quá đơn giản.





Khi chỉnh sửa Template, bạn hãy dán toàn bộ đoạn mã dưới đây vào trước thẻ </body> (nên ở chế độ chọn Expand Widget Templates) là OK.

<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Posts and Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

if(!document.getElementById) {return;} // no support

bodyText = document.getElementById('main-wrapper');


theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
theText = theText.replace(/:2\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" />');
theText = theText.replace(/:3\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" />');
theText = theText.replace(/:4\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" />');
theText = theText.replace(/:5\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" />');
theText = theText.replace(/:6\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" />');
theText = theText.replace(/:7\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" />');
theText = theText.replace(/:8\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" />');
bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>

Bây giờ tôi xin hướng dẫn thêm một số điều cơ bản để bạn có thể tự làm thêm với thủ thuật này.

Bạn cần biết toàn bộ phần nội dung bài viết (post-body) và nhận xét (comments-block) nằm trong phần main của Template. Xét về yếu tố HTML thì post-body là class trong khi comments-block lại là id. Nếu muốn đưa biểu tượng cảm xúc vào cả bài viết lẫn nhận xét thì ta chỉ cần gán chức năng biểu tượng cảm xúc cho một id chứa cả post-body và comments-block. Id đó chính là main-wrapper hoặc content (có thể với mỗi Template sẽ có tên khác nhau do người tạo Template đặt ra). Id này nằm trước dòng

<b:section class='main' id='main' showaddelement='yes'>

cũng có thể là:

<b:section class='main' id='main' showaddelement='no'>

Như vậy trong phần code ở trên, bạn cần thay thế tên id tương ứng cho Blog của bạn.

Bạn có thể tự tăng thêm biểu tượng cảm xúc cho danh mục thật dễ dàng. Chú ý đến dòng code sau đây:

theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');

Bạn hãy tìm biểu tượng cảm xúc trên mạng Internet (quá dễ mà), lấy đường link hoặc lưu vào máy tính rồi upload lên webhost nào đấy hoặc lên chính Blogger để lấy đường link. Sau đó lần lượt gán theo thứ tự như thế này:

theText = theText.replace(/:9\)/g,'<img src="URL_9" />');
theText = theText.replace(/:10\)/g,'<img src="URL_10" />');
theText = theText.replace(/:11\)/g,'<img src="URL_11" />');
…
…

Cứ theo thứ tự như thế bạn sẽ thêm vào đoạn code nêu trên để tăng số lượng biểu tượng cảm xúc theo ý thích của bạn.

Sau khi cài đặt thành công, mỗi khi muốn chèn biểu tượng cảm xúc vào bài viết và nhận xét thì chỉ cần đánh nhóm ký tự gồm dấu : và một số thứ tự bất kỳ (từ 1 đến 99) thì sau khi xuất bản bài viết, biểu tượng cảm xúc sẽ hiển thị ngay trên tất cả các công cụ trình duyệt.

Nếu bạn thấy thủ thuật này bổ ích thì bạn cứ thử nhé, và đừng quên để lại một nhận xét thật chân thành cho kỳ công này của tác giả.

Nguồn http://huynh-nhat-ha.blogspot.com

Read more »

* Tiện ích Nhận xét mới nhất có ảnh đại diện

Có một blogger hỏi tôi rằng, cộng đồng Blogger đã có nhiều thủ thuật tạo tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnai Widget) và từ đó cũng xuất hiện tiện ích Nhận xét mới nhất (Recent Comments Widget). Tuy nhiên vẫn chưa thấy có bài viết nào nói về tiện ích Nhận xét mới nhất có ảnh đại diện (Recent Comments width Thumbnail Widget).



Tiện ích Nhận xét mới nhất có ảnh đại diện hiển thị những nhận xét mới nhất kèm theo ảnh đại diện của người nhận xét, bao gồm Admin, Blogger user và nặc danh (Anonymous).

Để cài đặt tiện ích này vào Blog của bạn, chỉ cần đặt toàn bộ phần code dưới đây vào một tiện ích HTML/Javascript là xong.

<style type="text/css">
.halink li{
padding:5px;
margin:0 0 0px 0px;
border-bottom:1px dotted #234;
min-height:70px;
}
.halink li:hover{
background: #F3F7FA;
}
.halink li img {
height:50px;
width:50px;
list-style:none;
float:left;
margin-right:10px;
margin-top:10px;
}
.halink li a {
list-style:none;
color:#2266AA;
font-size:11px;
}
</style>
<script type="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var photoslink=new Array()
photoslink[0]='<img src="URL_ảnh đại diện của Blogger user"/>';
admin='<img src="URL_ảnh đại diện của bạn là Admin"/>';
anonymous='<img src="URL_ảnh đại diện của nặc danh"/>';

document.write('<div class="halink">','<li>');

alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "tháng 01";
monthnames[2] = "tháng 02";
monthnames[3] = "tháng 03";
monthnames[4] = "tháng 04";
monthnames[5] = "tháng 05";
monthnames[6] = "tháng 06";
monthnames[7] = "tháng 07";
monthnames[8] = "tháng 08";
monthnames[9] = "tháng 09";
monthnames[10] = "tháng 10";
monthnames[11] = "tháng 11";
monthnames[12] = "tháng 12";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<s[^>]*>/g;
comment = comment.replace(re, "");

if (!standardstyling) document.write('<div class="bbrecpost">');


if (showcommentdate == true) document.write(' ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + 'năm ' + cdyear + ' ');

if( entry.author[0].name.$t == 'Tên bạn'){ document.write(admin)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '' +'</a> ');
if (showposttitle == true) document.write(' Nhận xét về: ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}

else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">Đọc tiếp...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');

document.write('</div>','</li>');

}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');

}
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = true;
var showposttitle = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

Bạn cần điều chỉnh những chỗ được đánh dấu màu đỏ. Bạn cần thay URL cho ảnh đại diện của bạn là Admin, của nặc danh và Blogger user; có thể thay đổi số nhận xét được hiển thị (numcomments).

Nguồn huynh-nhat-ha.blogspot.com

Read more »

* Tiện ích thống kế blog bản hoàn thiện

Tiện ích thống kê blog giúp người đọc và admin nắm được thông tin cơ bản về blog như tổng số bài viết, nhận xét, người đăng ký nhận bài viết qua email, hay thậm chí cả người theo dõi trên Twitter.







Để cài đặt tiện ích này, bạn chỉ cần dán toàn bộ phần mã dưới đây vào một tiện ích HTML/Javascript.

<script language='javascript' type='text/javascript'>
function snfbc(json){
document.write(parseInt(json.value.items[0].feed.entry.circulation));
}
function xfeedburner(uri){
if(uri){
document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>');
} else{
return false;
}
}

function sntwitter(json){
document.write(parseInt(json.followers_count));
}
function xtwitter(user){
if(user){
document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>');
} else{
return false;
}
}

</script>
<div style='float:left;padding:8px;'>
<img src="http://img72.imageshack.us/img72/5376/twittery.png" style="margin-right: 8px; float:left;" />
<a href="http://twitter.com/huynhatha" target="_blank" ><span style="float: left; margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xtwitter("huynhatha") </script> Người theo dõi</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;">Theo dõi trên Twitter</span></a>
</div><div style='clear:both;'/>
<div style='float:left;padding:8px;'>
<img src="http://img638.imageshack.us/img638/3243/rsss.png" style="margin-right:8px;float:left;" />
<a href="http://feeds.feedburner.com/huynh-nhat-ha" target="_blank" ><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xfeedburner("huynh-nhat-ha") </script>Người đăng kí</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px; ">Đăng kí !</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img684.imageshack.us/img684/6793/usersh.png" style="margin-right:8px;float:left;" />
<span style="float:left;margin-top:2px;padding:0;">
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>Nhận xét</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;"></span>
</div><div style='clear:both;'/>
<div style='float:left;padding:8px;'>
<img src="http://img707.imageshack.us/img707/3875/bloggerf.png" style="margin-right:8px;float:left;" />
<a href="http://huynh-nhat-ha.blogspot.com/search/label/?max-results=999" target="_blank"><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Bài viết</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px; ">Xem tất cả!</span></a>
</div><div style='clear:both;'/>

Bạn cần thay đổi những phần được đánh dấu màu đỏ lần lượt thành username trên Twitter, tên tài khoản Feedburner và tên địa chỉ blogspot của bạn.

Nguồn http://huynh-nhat-ha.blogspot.com

Read more »

* Phân trang cho blogspot

Hôm nay mình xin giới thiệu cho các bạn một thủ thuật phân trang cho blogspot, cực kì đơn giản và dễ thực hiện chỉ trong 5 bước.



1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích
4. Tìm thẻ sau:

<b:include name='nextprev'/>

5. Chèn đoạn mã sau vào dưới thẻ trên:

<!-- start pagutd - blogger pagging script - code by vietutd dot com
http://pagutd-script.vietutd.com/
-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.pagutdnav li {
list-style-type: none;
display: inline;
}
.pagutdnav a {
border:1px solid #ef8116;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.pagutdnav a:hover {
background-color:#ef8116;
border:1px solid #ef8116;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#ef8116 none repeat scroll 0 0;
border:1px solid #ef8116;
color:#ffffff;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.pagutdnav a:link {
color:#333333;
text-decoration:none;
}
.pagutdnav a:link:hover {
color:#ffffff;
}
</style>
<span style='float:right;margin:0;padding:0;border:0;'><a style='margin:0;padding:0;border:0;' href='http://pagutd-script.vietutd.com/'><img alt='Pagutd - Pagging Script for Blogger Blogs by Vietutd Dot Com' src='http://sites.google.com/site/vietutd/pixel.png' style='margin:0;padding:0;border:0;display: none;'/></a></span>
<script type='text/javascript'>
var home_page = &quot;<data:blog.homepageUrl/>&quot;;
var div = document.getElementById(&quot;blog-pager&quot;);
var atag = div.getElementsByTagName(&quot;a&quot;);
var pager_max_main = (atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)==-1) ? atag[atag.length-2].href.substring(atag[atag.length-2].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-2].href.length) : atag[atag.length-1].href.substring(atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-1].href.length);
var sub_nav_half = 3;
var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_pages_text = &quot;Pages&quot;;
</script>
<script src='http://vietutd-js.googlecode.com/files/pagutd-bver.js' type='text/javascript'/>
</b:if>
<!-- end pagutd - blogger pagging script - code by vietutd dot com
http://pagutd-script.vietutd.com/
-->

6. Save lại và xem kết quả.

http://pagutd-script.vietutd.com/

Read more »

* Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Bên cạnh bài viết tạo Readmore, mình xin giới thiệu thêm bài viết này, các bạn nên sử dụng cả 2 cùng một lúc sẽ cho kết quả rất tốt.





Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nút Read More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh (New Page/ static page) thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact… Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh.

Để làm được điều này, bạn thực hiện theo các bước sau đây:

1. Đăng nhập Blogger Dashboard >> Design >> Edit HTML chọn Expand Widget Templates. Dùng tổ hợp phím Ctrl + F tìm dòng mã như bên dưới hay tương tự như vậy:

<div class='post-body'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

2. Thêm đoạn mã dưới đây vào sau dòng <div class='post-body'> . Nếu không tìm thấy dòng đó, bạn để ý dòng <b:if cond='data:blog.pageType != &quot;item&quot;'> sẽ có một dòng tương tự như vậy trong mã tạo Readmore, bạn thêm đoạn mã sau trước dòng này cũng được:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>

Cuối cùng là Save lại.

Ý nghĩa của toàn bộ phần mã này như sau: Đối với các trang tĩnh (static page) thì hiển thị toàn bộ nội dung bài viết; không hiển thị chức năng Read more ở các trang bài viết (item) và đối với các trang bài viết (item) thì hiển thị toàn bộ nội dung bài viết. Như vậy chức năng Read more đã được loại bỏ hoàn toàn khỏi các trang tĩnh một cách triệt để.

http://huynh-nhat-ha.blogspot.com

Read more »

* Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger

Hôm nay mình xin chia sẻ đến các bạn một thủ thuật đơn giản , với thủ thuật này thì bài viết của của sẽ được tự động tóm tắt một đoạn trong bài đăng của bạn, và nếu bài viết của bạn có ảnh sẽ được hiển thị dạng ảnh thumbnail.

Ảnh minh họa

1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

.readmore {
float:right;
margin:1px 10px 5px 0px;

padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}

.sumpost {
color:#000;
font-family:arial;
font-weight:bold;
font-size:12px;}
.img-post {
float:left;
margin-right:5px;
border:1px solid #fff;
height:96px;
padding:1px;}

5. Tiếp đến bạn chèn code bên dưới vào sau thẻ <head>

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 230; //số ký tự bài viết hiển thị khi không có ảnh
summary_img = 500; //số ký tự bài viết hiển thị khi có ảnh
img_thumb_height = 90; //chiều cao của ảnh thumb
img_thumb_width = 100; //độ rộng của ảnh thumb
</script>
<script src='http://traidatmui-tips.googlecode.com/files/auto_sumpost.js' type='text/javascript'/>

Bạn dựa vào hướng dẫn trong code để tùy chỉnh cho phù hợp với blog của mình
6. Bây giờ bạn tìm đến đoạn code như bên dưới

<data:post.body/>

7. Thay đoạn code vừa tìm được ở trên thành code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='readmore'><a expr:href='data:post.url'>Read more...</a></div>
</b:if>

8. Cuối cùng save template lại.

Lưu ý: Nếu trước đây bạn đã thêm tiện ích read more (Đọc tiếp) thì bạn nên gở bỏ trước khi thêm thực hiện thủ thuật này để tránh việc trùng lấp trong bài viết của bạn.

Nguồn traidatmui.com

Read more »