6/5/13

Hướng dẫn thiết kế Responsive Template

Hiện nay nhu cầu sử dụng máy tính bảng và các loại điện thoại thông minh đang rất phát triển và người ta cũng thích lướt web hoặc đọc email trên những thiết bị này hơn vì chỉ cần kết nối wifi hoặc 3G là có thể truy cập internet. Do đó nhu cầu thiết kế template dành cho mobile cũng trở thành chủ đề nóng hiện nay và hôm nay mình sẽ hướng dẫn bạn thiết kế template tối ưu hóa responsive để phù hợp với tất cả các thiết bị di động cũng như kích cỡ màn hình
Read more »

6/5/13

5/23/13

Thanh điều khiển cuộn trang cho blog (cải biên)

Đây là bài viết đầu tiên sau 2 tháng "nghỉ phép" của mình. Và bài viết này mình xin giới thiệu thủ thuật "Thanh điều khiển cuộn trang cho blog" từ blog của Duy Phạm, qua code thủ thuật này mình sẽ tặng thêm cho độc giả của TrollVL một bộ các nút bấm khác. Nhưng trước hết mình xin đưa nguyên code thủ thuật của tác giả vào đã

Read more »

5/23/13

2/20/13

Hiệu ứng "Shiner" tuyệt đẹp của hình ảnh cho blog/website

Chắc hẳn không ít bạn nhầm tưởng hình ảnh logo của blog Troll VL là ảnh động đúng không? Thật ra chỉ là ảnh tĩnh đuôi png thôi nhưng được thêm hiệu ứng Shiner (tráng bóng) vào nên mới sinh động như thế. Lúc đầu mình thấy hiệu ứng này bên blog Noct-land rất đẹp nên muốn áp dụng cho cái logo của blog Troll VL, và ngay sau khi tìm hiểu được và thực hiện thành công mình đã muốn chia sẻ đến các độc giả của Troll VL.
Read more »

2/20/13

1/14/13

Tạo widget bài mới nhất - bài mới nhất theo nhãn

Công cụ mình giới thiệu dưới đây giúp bạn tạo nhanh widget bài viết mới nhất cho blogspot, bạn cũng có thể tạo bài viết mới nhất theo nhãn cho blog. Ngoài ra còn có nhiều lựa chọn khác như hiển thị số comments cho một bài viết, hiển thị hình ảnh thu nhỏ, tùy chỉnh màu sắc của từng thành phần trong widget và một chức năng khác đang chờ bạn khám phá
Read more »

1/14/13

1/12/13

Chuyển template của Blogspot sang trang HTML trống

Ngày hôm nay mình sẽ chia sẻ làm cách nào để tạo một trang HTML trống từ template của blogspot. Thật ra thủ thuật này chẳng mấy khi dùng đến nhưng thật sự rất hữu ích cho những bạn phát triển blog theo hướng chia sẻ các thủ thuật tiện ích. Ví dụ như khi giới thiệu về tiện ích Nhận Xét Mới Nhất, để cho độc giả hiểu hơn về tiện ích này ta đưa một demo bằng hình ảnh hoặc cụ thể hơn là một trang blogspot mới, nhưng tốt hơn cả nếu ta đưa ra một demo là một trang mới mà trang này chỉ hiển thị mỗi tiện ích trên, bạn xem demo tiện ích Nhận Xét Mới bên dưới để rõ hơn
Read more »

1/12/13

1/10/13

Tiện ích nhận xét mới theo yêu cầu

Yêu cầu của bạn Đỗ Trực
bạn có thể share cho mình code nhận xét của bạn dc ko ,nó đẹp wa
Demo
Trước khi giới thiệu đến bạn thủ thuật này mình được nói đôi lời, đây là tiện ích do bác Duy Phạm viết ra ở bài Nhận xét mới với style Windows 8 và mình chỉ chỉnh sửa lại sao cho phù hợp với blog của mình thôi. Xin cảm ơn Duy Phạm!

Cách Thực Hiện

Bước 1: Vào Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>'

#rc-avatar-plus li{background:transparent!important;border:0!important;list-style-type:none!important;margin:0!important;padding:0 0 10px!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{height:60px;padding:0!important;width:60px}
#rc-avatar-plus h4{font-size:0;margin:5px 0!important;text-align:center;text-shadow:.5px .5px 1px #666;text-transform:capitalize}
#rc-avatar-plus a{padding:5px;position:relative;width:70%}
#rc-avatar-plus .rc-author a{background:#a2c9e2;color:#000!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus .rc-author a:hover{color:#0006ff!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus .rc-admin a{background:#a2c9e2;color:#0006ff!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus .rc-admin a:hover{color:#000!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus a:after{content:"";height:0;line-height:0;position:absolute;top:10px;width:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author a:after{border-left:10px solid transparent;border-top:10px solid #a2c9e2;left:-10px}
#rc-avatar-plus .rc-admin a:after{border-right:10px solid transparent;border-top:10px solid #a2c9e2;right:-10px}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus ul{background:#fff!important;border:1px solid #bbb;padding:5px!important;word-wrap:break-word}
Bước 3: Lưu lại template
Bước 4: Vào blogger > Bố cục > Tạo một widget HTML/Javascrip mới và dán vào form Nội dung đoạn code sau
<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';nc=5;
length_name=30;
length_content=90;
no_avatar='http://img1.blogblog.com/img/anon36.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div> 
Bước 5: Lưu lại là hoàn tất thủ thuật. Nếu bạn muốn thêm hiệu ứng rê chuột vào comment này thì mờ các comments kia như của TrollVL thì làm thêm các bước bên dưới

Thêm Hiệu Ứng Mờ

Bước 6: Vào lại chỉnh sửa template và thêm jQuery <head> (nếu có rồi thì bỏ qua bước này tránh xung đột code)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Bước 7: Chèn code bên dưới trước thẻ đóng </body> sau đó lưu lại template
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
//]]>
</script>
Bước 8: Quay lại chỉnh sửa widget HTML/Javascrip ở bước 4 và thêm thuộc tính glap cho nó
<span class="glap">Code ở bước 4
</span>

1/10/13

1/9/13

Hiển thị bài đăng phổ biến dạng chuyển động

Yêu cầu của bạn Trần Công Lâm
Anh hướng dẫn giúp em cách làm cái slide như trong trang www.go.vn với! Em thấy nó đẹp và chuyên nghiệp quá!
Read more »

1/9/13

1/6/13

Tạo Auto Readmore cho Blogger với Cutter.js

Trong tất cả những tiện ích Auto Readmore mình nhận thấy rằng tiện ích này ở blog Noct-land là "chuẩn" nhất, vì thế mình xin được mượn bài viết này để giới thiệu đến anh em đang sử dụng blogspot. Xin chân thành cảm ơn tác giả của blog Noct-land
Read more »

1/6/13

Tiện ích chia sẻ blog/bài viết lên các trang xã hội

Trước đây mình có giới thiệu một tool tạo tiện chia sẻ blog/bài viết lên các trang xã hội chạy dọc theo blog. Tuy nhiên bạn doan hoang hai đã góp ý cho mình được biết nhược điểm khi sử dụng tool này nếu căn lề trái cho tiện ích khi Like (button của Facebook) sẽ xuất hiện khung comments gây ra tình trạng che một phần của blog mà không thể tắt khung comments này đi được do bị ẩn ;( . Vì thế mình sẽ giới thiệu tiện ích tương tự nhưng không xuất hiện khung comments khi sử dụng nút Like(o)
Read more »

1/5/13

Yêu cầu: Tạo form đăng ký tác giả giống Troll VL

Theo yêu cầu của bạn Hảo Hán mình sẽ hướng dẫn cách tạo form Đăng Ký Tác Giả giống blog Troll VL
Read more »

1/5/13

12/31/12

Một số cách tăng tốc cho blogspot

Hiện nay xuất hiện khá nhiều blog chủ đề về tin tức hoặc giải trí sử dụng mã nguồnBlogger nhưng có vẻ như chưa được tối ưu hóa nên tốc độ tải trang có vẻ "không được nhanh", điều này không những gây khó chịu cho độc giả mà còn ảnh hưởng tới SEO. Vì vậy Noct muốn chia sẻ một số thủ thuật nhằm tăng tốc độ load trang web trên Blogspotvới kinh nghiệm có được.
Read more »

12/31/12

12/26/12

Nén Css để tăng tốc và hạ tải cho blog/website

Tại sao cần nén mã CSS?

CSS là một ngôn ngữ khá cơ bản và thiết yếu trong thiết kế web. Tổ hợp CSS trong toàn bộ một trang web ảnh hưởng lớn đến tốc độ hạ tải trang web đó. Nếu CSS nặng thì sẽ gây tốn nhiều thời gian cho việc tải trang web và ngược lại. Chính vì vậy việc nén mã CSS sẽ giúp tăng tốc độ hạ tải trang web.
Read more »

12/26/12

300x250