BlOg FD - FanDung

ANCData - Plugin load feed Blogger version 1

2012-02-10T04:32:00.001+07:00

Đây là công cụ đặc biệt, có lẽ rất được nhiều người mong đợi. Công cụ này được mình phát triển khi rip blog. Đôi khi bạn thấy các site của pro (HelloXimo) rip chạy rất nhanh và mượt. Tại sao vậy ? Câu hỏi nằm ở function showrecentposts(json) của js mà nhiều blog vẫn đang dùng. Đây là một hàm lọc feed (hay file .xml) của Blogger. Việc sử dụng feed sẽ đem lại tốc độ cao hơn so với dùng biến có sẵn mà mình đã giới thiệu ở một số bài viết trước.

DEMO

(ViewSource Demo để xem code)

Nhưng đặc điểm bất tiện của hàm này là với mỗi lần callback showrecentposts trong đoạn script ví dụ sau.

Ta lại phải đổi tên hàm callback để lấy feed cho một tag mới. Nói khác đi, chúng ta lại phải copy y sì một hàm showrecentposts2, showrecentpost3, showrecentposts4 ...v.vv cho các tag mới.

Vậy, ANCData là gì ? Chắc bạn cũng đoán ra từ VD trên. Nó là một plugin load feed. Nhưng nó chỉ là một hàm callback duy nhất : ancdata. Có vẻ với những ai chưa nghe về load feed sẽ rất khó mường tượng. Nhưng bạn chỉ cần sử dụng ANCData sẽ không cần phải vọc nhiều.

* Thuộc tính.

title : tiêu đề bài viết.
url : link bài viết.
label: nhãn bài viết.
img: ảnh bài viết
       - img.f : file ảnh đầu tiên của bài viết kich thươc full khổ.
       - img.i72: file ảnh mặc định của google nếu bạn up lên, hoặc sử dụng các sản phẩm ảnh của       google.
content: nội dung toàn bộ bài viết.
snippet : nội dung tóm tắt gồm 120 ký tự.
date: ngày tháng năm gửi bài
      - date.d : ngày
      - date.m : tháng
      - date.y : năm

author: tác giả gửi bài viết.

* Sử dụng :

B1: Bạn chỉ cần chèn đoạn mã sau vào sau thẻ <head> hoặc sau <body>

B2: Giờ bạn sẽ sử dụng ANCData một cách dễ dàng.

Giả sử mình muốn tạo ra một module có cấu trúc như hình sau.

Mình chỉ cần viết như sau :

<div class="box">
<h3>Phim hành động mới</h3>
<div class="bcontent">
    <script src="http://www.maphim.net/feeds/posts/default/-/Hành động?max-results=4&orderby=published&alt=json-in-script&callback=ancdata">
    </script>
    <script>

        for (var i =0; i< anc.max; i++){
            document.write('<li><a href='+anc.url[i]+'>'+anc.title[i]+'</a></li>');
        }
    </script>
</div>
</div>

Không chỉ dừng ở đó, bạn có thể tạo nhiều tag giống nhau ngoài tag Hành động kể trên, chỉ với một hàm callback duy nhất. Đây chỉ là VD đơn giản sử dụng ANCData, bạn có thể tạo riêng cho mình các modum hợp lý từ các thuộc tính mình đã đưa.

Version 1 chưa áp dụng cho comment. Sẽ tiếp tục phát triển trong các phiên bản sau nếu có thời gian.

Note: Để gọi các biến trong thuộc tính, bạn cần thêm trước anc.thuoctinh
Muốn lấy một tag trong list tag bạn chỉ cần viết. anc.label.split(',')[vitri tag can lay]

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

Đưa Radio vào Blog của bạn (Yêu cầu)

2012-02-06T04:48:00.000+07:00

Đáp ứng yêu cầu của giáo xứ phú giáo, trong nhưng ngày đầu năm này có lẽ anh Dũng cũng bận cho việc ... Va lung tung .. Không có thời gian chăm sóc blog được. Còn riêng mình cũng tung hoành khắp nơi, bận ăn, bận uống bù hết cả đầu. Đọc thấy yêu cầu này phù hợp với khả năng, giúp bạn một chút chút. ..

DEMO

Style CSS :

Đài của mình..

<div class="channel">
    <li><a href="javascript:radio('vov1')">VOV1</a></li>
    <li><a href="javascript:radio('vov2')">VOV2</a></li>
    <li><a href="javascript:radio('vov3')">VOV3</a></li>
    <li><a href="javascript:radio('vov4')">VOV4</a></li>
    <li><a href="javascript:radio('vov5')">VOV5</a></li>
    <li id="pl" class="p"></li>
</div>
    <div id="player">Radio23h - Blog Radio, chia sẻ xúc cảm cuộc sống</div>
</div>

JavaScript

radio('vov3') ==> là đài mặc định bạn chạy đầu tiên.

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

Theme Phim47 của MaPhim.Net

2012-02-02T16:16:00.001+07:00

Sau nhiều lần thử nghiệm và nâng cấp hôm nay mình cũng đã hoàn chỉnh xong... theme Phim47.com. Temp này mình đã tích hợp ANCMedia mới nhất. Các bạn có thể down về và sử dụng. Temp có slider nên load hơi lâu.

Nhiều bạn chưa xem video hướng dẫn liên tục gửi support về mình với những câu hỏi : "Cài thế nào, sử dụng thế nào. .." và "Xì pam" câu hỏi đó, hay nói cách khác là nhai đi nhai lại nó trên khắp các diễn đàn có bài mình viết. Cụ thể là ai thì cũng không nêu ra hết ở đây được, nhưng có thể sẽ có bài này của mình trong blog của họ chỉ trong vài giây nữa ^^!

DEMO | DOWNLOAD

Mình đã nói một câu rất rõ ràng "Việt Nam dùng quá nhiều hàng share rồi !". Nhưng nó chỉ luôn chỉ vào những con người luôn biết sử dụng người khác làm công cụ cho mình kiếm tiền. Vậy làm sao để các bạn có thể khuyến khích họ share hay giúp đỡ mình. Mình chỉ giúp và share cho những ai mình có thể tin tưởng... Vì vậy ai có tư tưởng đó cin miễn pm mình nhé. Mình sẽ cho vào Box Spam luôn. Cảm ơn mọi người.

@nguoiaochuclam: em đã hoàn thành cho anh sản phẩm ANCMusic. Liên hệ em sớm để lấy nhé.

Nâng cấp ANCMedia 3.3 - add server.

2012-01-25T11:10:00.001+07:00

Đầu năm đầu tháng khai xuân một bài. Chúc mọi người một năm mới đầy sức khoẻ, may mắn, hạnh phúc. Mình về tết cũng rảnh đôi chút, sửa lại cho mọi người tiện add server.. Chứ suốt ngày kêu ca và yêu cầu mình có 3 đầu 6 tay cũng không làm hết được. ^^

Mình đã tách riêng làm 2 file js..Mọi người có thể up lên google code. Nhưng để tiện edit các bạn nên down dropbox về và up file server lên đó.

* File server : http://anhnc.googlecode.com/svn/trunk/ANC/3.3/server.js

_Trong file server này gồm 2 phần chính: config và server.

Danh sách id các bạn có thể thay đổi tuỳ ý. Đã có nhiều bạn có host riêng, vì vậy mình đã làm thêm config cho Player, Proxy, Skin...

* File player: http://anhnc.googlecode.com/svn/trunk/ANC/3.3/player.js

_Vẫn là player có sẵn trong site, nhưng nếu dùng file đó để + file server sẽ không còn dùng được.

* Trong site chỉ cần paste 2 file này như sau vào dưới "anc_tp" hoặc </body>. Tốt nhất là dán dưới </body>

== > Phiên bản 3.3 này mình đã cải thiện vấn đề code, các player trước nhìn rất đau mắt, khó cấu hình CSS, nhiều đoạn code HTML bị thừa. Mọi người có thể nhìn vào hình dưới.

+) ANC_old

+) ANC_new

* ) Giờ vẫn đang nghỉ tết nên mình chưa có mạng add server lên site mình, do đó không có demo cho mọi người. Nhưng có thể xem video hướng dẫn tại đây..

*) Các lưu ý mình đã ghi trong file server, các bạn có thể đọc.

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

Theme Người Kể Chuyện - Radio23h.

2012-01-12T13:09:00.002+07:00

Tết đến xuân sang, chào xuân thì cũng có sản phẩm giới thiệu. Tự rip, tự design, có nhiều phần thiết kế nhắm phục vụ hướng dẫn các bạn cách rip theme. Sang năm mới nếu rảnh mình sẽ làm tut Video hướng dẫn rip theme của các bạn.

Ở fandung.com này các bạn cứ gọi mình với nick name Suzuki_aka nhé, AnhN.C là mình chuyển profile sang plus G+ giờ đổi tên lại không được. ^^!

DEMO | DOWNLOAD

Theme tích hợp ANCMusic, post bài dạng [m][/m] .. Ai chưa hiểu thì qua bài ANCMusic đọc, không support lại. Đã tích hợp SEO chuẩn nhé. Mình đã để tên miền Sub maphim.net để các bạn dễ vào.

Page item

Page Home

Page Search

Giờ này mình đang chuẩn bị về quê, chắc sẽ không Support cho ai thêm nữa. Nhiều người nhờ còn chưa làm được, chắc năm nay giông cả năm mất. Sorry tất cả nhưng ai nhờ mình nhé.

Chúc mọi người năm mới có nhiều may mắn, thêm nghị lực, thêm tự tin kiếm tiền.

[Updated] K14 - Pro Menu (với hiệu ứng prodown)

2012-01-04T12:00:00.000+07:00

Lấy ý tưởng từ việc thực hiện demo cho bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống mình dự định sẽ updated thủ thuật lên bằng việc tạo các giao diện khác nhau cho menu khi xem ở các trang khác nhau, ví dụ như các trang label. Nhưng sau đó mình nhớ đến kênh14 cũng có menu như vậy (chỉ khác là không có dropdown) mà giao diện lại đẹp nữa, nên mình quyết định Rip menu này. Và ở bài này menu sẽ không có hiệu ứng dropdown, mình dự định sẽ thêm hiệu ứng dropdown trong thời gian tới.

Xem DEMO

Hình ảnh minh họa :

Updated: Đã cập nhật hiệu ứng sổ dọc cho menu, các bạn có thể xem ở bên dưới

Do làm biếng design giao diện cho nó, nên mình lấy hình nên bên kênh 14 về rồi fix lại để giới thiệu cho mọi người. Và sau đây là 1 số tính năng của nó :
- Tự động thay đổi giao diện của menu cho các trang định sẵn.
- có hiệu ứng trang hiện hành (current) trên menu.
- có 6 kiểu giao diện cho các lựa chọn để thay đổi.

Sau đây là các bước thực hiện :
- Tạo 1 widget HTML/javascript ở nơi muốn đặt menu (tốt nhất là trên header của blog), sau đó dán đoạn code bên dưới vào :

Một vài hướng dẫn :
- Việc đầu tiên là thay http://demo.fandung.com thành tên miền của blog bạn, nhớ là không có dấu (/) theo sau tên miền.
- Để thêm menu, bớt menu, thay đổi tên hiển thị của menu, thay đổi link liên kết của menu,... các bạn chỉnh sửa ở đoạn code như bên dưới :

...
...
var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6];
...
...

- http://demo.fandung.com thay bằng địa chỉ trang chủ của blog bạn
- link_menu1, link_menu2, ... là đia chỉ liên kết của các menu.
- Menu1, Menu2, ... là tên hiển thị của các menu.
- nếu muốn thêm nhiều menu nữa thì các bạn thêm code tương tự như bên dưới :

- để tùy chọn style cho menu ở mỗi trang, các bạn chỉnh sửa ở đoạn code bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- ttmenu[1][0], ttmenu[2][0], ..., ttmenu[6][0] ; đây là các phần tử trong mảng 2 chiều ttmenu, tương ứng với địa chỉ liên kết của các menu : Menu1, Menu2, ..., Menu6
- ở trên menu0, tức là menu HOME mình cho style mặc định là style1. cùng style với các trang liên kết không có trong menu (ví dụ các trang archive hoặc trang bài viết, ...) , hoặc các liên kết không được chọn style để hiển thị.
- code trên sẽ được hình dung như bên dưới :

Menu0 ------ style1
Menu1 ------ style2
Menu2 ------ style3
Menu3 ------ style4
Menu4 ------ style5
Menu5 ------ style6
Menu6 ------ style2
Trang khác ------ style1

- Nếu muốn thay đổi style cho các trang, các bạn chỉ cần đổi tên style1, style2,... thành các style khác là được. tức là các vị trí trong code bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Nếu như có nhiều menu thì các bạn cứ thêm code như bên dưới để chọn style cho nó :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[8][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- lưu ý : ttmenu[7][0], và ttmenu[8][0] là liên kết của các Menu7, và Menu8.
- nếu muốn chỉ 1 trang nào đó có giao diện đặc biệt khác với các trang còn lại (ở đây mình ví dụ là trang Menu1) thì đoạn code ở trên sẽ chỉ còn như bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Đoạn code trên có nghĩa là chỉ có trang Menu1 là có giao diện riêng biệt là Style2, còn các trang khác sẽ có giao diện Style1.

Như vậy mình hướng dẫn đã xong. các bạn cứ test thử, nếu có trục trặc gì mình sẽ fix lại bài viết và cập nhật thêm hướng dẫn.

----- UPDATED -----

K14 - Promenu (với hiệu ứng sổ dọc)

- ở bản update này, mình sẽ cập nhật thêm tính năng thêm submenu cho menu chính. Tính năng này mình kết hợp từ bài viết "Tạo menu nằm ngang với hiệu ứng sổ dọc".
- Để thực hiện việc cập nhật này, các bạn phải xem lại bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống

Xem DEMO

Hình ảnh minh họa :

- Sau đây là code mẫu của thủ thuật đã updated, các bạn thực hiện theo hướng dẫn của bài này và bài Tạo Menu Thanh menu ngang có sổ dọc xuống để có thể chỉnh sửa lại từ code mẫu :

- bản updated vẫn chưa hoàn thiện ở phần hiện hiệu ứng thay đổi style cho menu ở các trang submenu, mình sẽ fix sớm khi có thể.

Chèn Chabox Gtalk vào BlogSpot.

2011-12-30T14:56:00.002+07:00

Nếu site bạn rất nhiều bạn bè có tài khoản Google, tại sao không thử chèn thêm một ChatBox để tăng tình năng trò chuyện kết bạn cho Blog. Việc đơn giản phải làm là bạn chỉ cần nhúng một iframe của Google cho sẵn.

Xem DEMO

Các bạn coppy và cài đặt nhé. Và nhớ chỉnh lại CSS. của mình.

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

[Thông báo] V/v VNPT chặn BlogSpot.

2011-12-30T04:22:00.000+07:00

Chia buồn với cộng đồng Blogger tại Việt Nam. VNPT chính thức đưa BlogSpot vào danh sách đen của mình.... Được biết thì họ không chặn luôn trang blogspot.com mà chặn các subdomain là *.blogspot.com.

Do vậy khi vào fandung load lâu không có gì là lạ. Trên site chưa rất nhiều backlink domain *.blogspot.com

Bá đạo !

Ảnh hưởng tới các domain sau:

*.googleusercontent.com - Nghĩa là khỏi dịch, khỏi xem cache Google luôn.
(P/s : Hiện tại VNPT đã thả Google Translate).

Picasa cũng dạng *.googleusercontent.com nên chịu chung số phận.
(P/s : Có lẽ cũng sẽ được thả sớm).

Thêm thông tin là IP của *.blogspot.com và *.googleusercontent.com đều là 74.125.71.132. Vậy là các bạn đã hiểu tại sao cả Blogspot và Google Dịch, Google Cache đều không vào được rồi đấy.

Chung số phận với facebook, blogger.com chính thực lĩnh án chung thân.

Mình theo dõi và phỏng đoán, nguyên nhân về việc chặn subdomain blogspot.com do hiện tại rất nhiều web đen chưa nội dung xấu (xxx, phản động...). Đã được đưa vào tầm ngắm của bộ thông tin. Không lâu nữa, rất có thể em Google + của chúng ta sẽ tiếp tục lên đường vào thăm anh Luyện.

Cộng đồng nghĩ gì, bạn hãy đọc:

http://www.phamen.com/bloggerr-wordpress-tai-sao-vnpt/

Các site có domain riêng không bị chặn là bới dùng faceIP. Do vậy hiện tại để vào được BlogSpot sẽ có 2 cách khắc phục sau.

1. Sử dụng domain riêng...

2. Hướng dẫn bạn bè dùng faceIp ngay trên máy. (cách này sẽ giúp các admin đi ngủ sớm hơn, vì blogger cũng không mặn mà cho lắm với nhiều người xem :| )

Cách này có vẻ không hiệu quả.

==> Dùng UltraSuft

==> BlOg... " Bỗng dưng bị ấy...!!! " - Blogspot bị chăn, khắc phục sao??? (Anh Dũng viết =)) )

Khung giờ bị chặn bắt đầu từ 0h = > 6h sáng. Mình không rõ có phải là 6h sáng không. Bây giờ thì vui rồi. Facebook thì chặn cả ngày, tối mở. Blogger chặn cả đêm ngày mở. :(( Hết cả các sân chơi thật rồi..

Chưa có danh sách chình thức, nhưng thế này cũng đủ hiểu.

Kết luận lại vụ việc này sẽ làm nhiều người buồn hơn bao giờ hết. Nhưng nếu để cái văn hoá phản động ngấm vào thân còn buồn hơn...Mình bắt đầu ghét chúng rồi đấy.

P/s: Anh em sử dụng VNPT để lại comments cho biết thêm khu vực nhé. Để mọi người biết được khu vực nào không bị dính vào thảm sát.

Jquery Slider Tin Tức - News Slider

2011-12-30T01:44:00.002+07:00

Hẳn nhiều bạn cần slide này... mình đã phát triển phiên bản thumbail cho site phim. Nhưng gà CSS quá nên đắp chiếu, lấy silder của trang tin tức này cho các bạn dùng.

Nói về jquery thì mình cũng chả rành lắm, đến từ jquery viết còn hay nhầm thì các bạn chắc cũng đoán được. Phần slider rip của gostep.info, các bạn có thể vào đó xem.

Xem DEMO

Mình cũng hơi buồn ngủ, các bạn setup luôn nhé.

CSS (Cái này cũng gà lắm, mọi người tự căn chỉnh nhé !)

Javascript

Quà tặng âm nhạc cho BlogSpot

2011-12-26T04:21:00.003+07:00

Hehe, gần tết rồi.. thêm không khí cho cho Blog của bạn chút nhỉ. Hôm nay giới thiệu với các bạn một Plugin mới. Quà tặng âm nhạc, điều không tưởng phải không, chỉ có ở các 4rum. Nhờ có load feed comment của anh Dũng, mình mới dám nghĩ đến tạo ra cái gì đó mới lại từ tiện ịch này.

Xem DEMO | GỬI LỜI CHÚC

Lâu nay ẩn danh cũng vì đang làm đồ án, rảnh tay mới code được.

Mình cũng không rành lắm CSS, vậy nên mình chỉ viết js thôi. Các bạn code theo phong cách riêng của mình nhé, mới làm hiện bài hát đầu tiên. Có thêm thời gian mới tạo được thêm 2 cái nút tiến lùi, chắc cũng trước tết thôi. ^^! Chờ nhé.

Nhaccuatui.com

Mp3.zing.vn

Nhacso.net

Music.soha.vn

Nhac.vui.vn

Zippshare và *.mp3

Tha hồ chọn lựa skin ;))

Để sử dụng tiện ích, các bạn tạo một trang mới hoặc một bài mới. Tạo một widget HTML mới, dán code sau vào.

CSS

JavaScript

File js này các bạn hãy edit lại nhé. Mình làm cho nó giống cấu trúc site mình thôi.

http://anhnc.googlecode.com/svn/trunk/p/qtan.js

Cấu trúc gửi bài hát như sau:

[m]link bài hát|nguoi_nhan|Lời muốn nói[/m]

Chúc mọi người thành công !

Tiện ích Top Commentators cho blogspot

2011-12-24T12:02:00.014+07:00

Tiện ích Top Commentators cho phép hiển thị những đọc giả có lượng comment nhiều nhất. Hiện tại có 1 số blog đã có tiện ích này nhưng họ đã mã hóa code và không chia sẻ, đối với 1 số bạn không rành về javacript sẽ không đọc được các đoạn mã này. Hôm nay nhân tiện có người hỏi về thủ thuật này nên mình cũng xin chia sẻ để mọi người dùng.

Một vài thông tin của tiện ích :
- Không đếm comment của khách nặc danh.
- Chỉ thống kê được tối đa trong 200 comment mới nhất.
- Hiện thị ảnh đại diện (tất cả các author ngoại trừ nặc danh).
- Hiện thị số comment của từng người.

Xem DEMO

Hình ảnh minh họa

Để thực hiện các bạn chỉ việc tạo 1 widget HTML/javascript ở nơi muốn hiển thị rồi dán đoạn code bên dưới vào là được:

Một vài lưu ý :
- var no_photo : avatar của tài khoản blogger chưa có ảnh đại diện.
- var another_au : avatar của tài khoản khác blogger.
- var au_nums=5; số tác giả được hiển thị
- var rcm_nums=100; số comment sẽ được khoanh vùng để thống kê (phải nhỏ hơn hoặc bẳng 200)
- var homepage="http://www.fandung.com"; thay http://www.fandung.com bằng tên miền của blog bạn.

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

Thực hiện theo yêu cầu của Trần Việt Đức

Chèn link Google Search vào footer của bài viết

2011-12-23T11:29:00.001+07:00

Ở thủ thuật này, theo như yêu cầu, mình sẽ tạo 1 link text nhỏ ở dưới mỗi bài viết. Khi click vào link này thì lập tức sẽ mở ra 1 cửa sổ mới của trang Google với nội dung tìm kiếm chính là tiêu đề bài viết mà bạn đang xem. Như yêu cầu thì tiện ích sẽ thay thế cho việc copy tiêu đề bài viết và dán vào google để tìm kiếm. Thủ thuật này cũng là 1 cách để cho các bạn có thể kiểm tra xem bài biết của bạn đứng thứ bao nhiêu trong kết quả tìm kiếm của google (với từ khóa chính là tiêu đề bài viết).

Xem DEMO

Sau đây là các bước thực hiện :
1. Vào thiết kế
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới :

- nếu không tìm thấy đoạn mã này, bạn có thể tìm các đoạn mã bên dưới :

hoặc :

<data:post.body/>

5. Sau khi tìm được 1 trong các đoạn code trên, các bạn dán đoạn code bên dưới vào ngay sau nó :

<div class='google-search-link' style='text-align:center;'>
<form action='http://www.google.com.vn/search' method='get' name='search-pt' target='_blank'>
<input autocomplete='off' expr:value='data:post.title' id='search-text' name='q' style='display:none;' tabindex='7' type='text'/>
<a href='#' onclick='document["search-pt"].submit()'>=== click search google ===</a>
</form>
</div>

- các bạn có thể thay dòng === click search google === thành đoạn text khác mà các bạn thích.

6. Save template.

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

Theo yêu cầu của ChoiBlogs.blogspot.com

SlideTab Recent posts (jQuery)

2011-12-22T22:30:00.003+07:00

Phải nói là ở blog của mình tiện ích recent posts rất nhiều, nhiều là do mỗi cái có giao diện khác nhau, chứ về cơ bản thì nó đều như nhau, và đa phần là do các bạn yêu cầu. Và bài này cũng không ngoại lệ. Bài này mình rip lại giao diện theo yêu cầu, chỉ có khác là thay nội dung của nó bằng tiện ích Recent Posts mà thôi.

Xem DEMO

Hình minh họa :

Sau đây là các bước thực hiện :
- Vào code template (thiết kế -> chỉnh sửa code HTML), và chèn đoạn mã code bên dưới vào trước thẻ đóng </head>

- lưu ý là nếu trong code template của bạn đã có file jquery.min.js thì không cần chèn vào nữa, hiện tại jquery đã ra bản 1.7.1

- tiếp theo, tạo 1 widget HTML/javascript và chèn đoạn code bên dưới :

Hướng dẫn tùy chỉnh :
- visible: 5 đây là số bài viết sẽ được hiển thị ra ngoài, như trong demo là 3.
- auto: 3000 đây là thời gian chạy auto, 3000 tương ứng với 3 giây, tức là sau 3 giây tự động chuyển bài.
- speed: 1000 là tốc độ chuyển bài viết khi click vào button left hoặc right (mũi tên màu cam)
- Lưu ý : nếu không muốn chạy auto, thì bạn bỏ dòng auto: 3000, trong đoạn code javascript, tức là đoạn script ở trên chỉ còn như bên dưới :

- var mode = "all"; là chế độ hiển thị theo cả blog hoặc theo 1 nhãn nào đó, nếu giá trị là all thì hiển thị các bài viết mới của blog, nếu giá giá trị là single thì sẽ hiển thị bài viết theo nhãn được chọn (là biến g_label bên dưới)
- var g_numposts = 10; là số bài viết sẽ load (lưu ý là số bài viết sẽ load (g_numposts) khác với số bài viết sẽ được hiển thị (visible: {giá trị thiết lập}) )
- var g_numcontents = 15; số chữ (là các chuỗi ngăn cách bằng dấu khoảng trắng) sẽ được hiển thị ở đoạn mô tả bài viết.
- var g_label="B-advance"; tên nhãn sẽ được chọn nếu hiển thị ở chế độ mode = "single";
- var homepage="http://www.fandung.com"; thay http://www.fandung.com thành tên domain của blog bạn, ví dụ http://YOUR-BLOG-NAME.blogspot.com

- Ngoài ra nếu tiện ích rộng quá thì các bạn tùy chỉnh lại các thông số về chiều dài và rộng trong code CSS.

- Thủ thuật này xin lưu ý là hơi nặng, nên bạn nào thật sự thích thì hãy sử dụng, còn không thì có thể tham khảo thôi.

Thực hiện theo yêu cầu của Việt Nam

Congly Blogger Theme

2011-12-20T21:39:00.002+07:00

Theme News làm gấp cho các bạn kịp thay theme đón noel mặc dù theme chẳng có tý ảnh noel nào :))
Không nói nhiều nữa sock hàng và hưỡng dẫn ^^

+ Gộp slide thành 1 js để load
+ Add full biểu tượng chat yahoo vào comment
+ ADD top WIDGET luôn trong sidebar khỏi cần chọn chế độ :D

DEMO | DOWNLOAD

Hướng dẫn :

Để hiện label . Vào chỉnh sửa HTML chọn Mở rộng Mẫu Tiện ích Tìm

document.write("<script src=\"/feeds/posts/default/-/Tin Tuc?max-results="+12+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

Trong đó Chú ý cái Tin Tuc nhé đây là Nhãn hiện thị. Muốn hiện thị nhãn nào thì điền tên nhãn đó, các nhãn khác tương tự.

Vì ko load feed label nên mình luôn để ?&max-results=15 ở sau tên các label để hiện thị phân trang cho đẹp, ai thay tên Label thì ko xóa dòng này

Riêng cái Slide mình cho nó lấy bài viết mới nhất nên ko cần quan tâm

Ở cài đặt 15 bài viết nhé để hiện thị cho đẹp

Có cái logo ở sidebar label ai dùng cho mình đặt ké nhá :)

Mọi vấn đề Reply ở đây , ko PM yahoo . Đang làm cái theme mà phải chat với các cụ . Mệt lắm à.
Giờ mình sẽ tập trung làm lại site mình nên tạm thời sẽ ko làm theme share nữa. Đừng PM mình nhé
http://www.bay68.com cho xin link add site nào :D

[Update] Tạo Menu Thanh menu ngang có sổ dọc xuống

2011-12-17T22:54:00.006+07:00

Create Dropdown Menu

[FD BlOg] - Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.

Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.

Update 17/12/2011:

- Đây có thể nói là 1 trong các bài viết có lượng view lớn nhất trên BlOg FD, và cũng là bài viết có nhiều comment phàn nàn nhất về việc bài viết khó hiểu, hoặc không làm được. Hôm nay mình sẽ fix lại bài hướng dẫn. Và nhân tiện mình cũng fix lại code của thủ thuật để cho tiện và cho đẹp hơn 1 chút.

- Ở thủ thuật cũ, phần chèn link của các menu phụ (menu con) chỉ góm gọn trong các link của các nhãn, trong bài fix này các link của menu con sẽ cơ động hơn, không còn phải theo khuôn mẫu link như thế này http://YOUR-BLOG-NAME.blogspot.com/search/label/LABEL-NAME, tức là có thể chèn các link khác như link của 1 bài viết nào đó chẳng hạn.

Xem DEMO

Hình ảnh minh họa :

Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ: giải trí , học tập... và các mục giải trí, học tập sẽ là 1 menu chính, còn các trang nhãn hoặc 1 trang bài viết nào đó sẽ là 1 menu phụ.

Thứ 2 là xác định nơi đặt menu, thông dụng nhất sẽ là ở trên phần header.Như vậy các bạn phải tạo 1 widget HTML/Javascript vào header rồi dán code của thủ thuật vào.

☼ Bây giờ ta bắt đầu vô chi tiết:
1. Đăng nhập blog
2. Vào Bố cục (layout)
3. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng tiện ích)
4.Chèn đọan code sau vào ngay bên dưới thẻ mở <head>

- nếu chèn code ở bước 4 vào template mà submenu không hiển thị, thì các bạn chèn nó vào ngay trong widget HTML/javascript chưa code thủ thuật, tức là chèn chung với code ở bước 6 bên dưới, và chèn ngay trên cùng. (updated 18/12/2011)

5. Save template lại.
6. Quay trở lại bố cục, vào phần tử trang, tạo 1 cái widget HTML/Javascript,sau đó dán đọan code bên dưới vào.

►CODE:

- Chú ý :

+ Menu 1, Menu 2, ... Menu 7 là các menu chính (menu cha)
+ Submenu 1.1, Submenu 2.1, ... Submenu 7.1, ... là tên các menu phụ (menu con)
+ link_submenu1.1, link_submenu1.2, ... link_submenu7.1, ... là link liên kết của các menu phụ ví dụ như : http://www.fandung.com/search/label/B-basic hoặc http://www.fandung.com/p/contact.html
+ Nếu các menu chính có liên kết đến thì các bác bạn thay kí tự # trong code của nó thành link liên kết nào đó. Ví dụ như bên dưới :

+ Các code cùng màu (đỏ, xanh dương, xanh, cam, đen, tím, xanh xám)sẽ liên kết với nhau (kiểu : cha - con)
+ Ví dụ 1 đoạn code :

otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

- Đây là code để hiển thị các menu con của Menu chính (cha) có tên là Menu 1, và code của menu cha là bên dưới :

- Bạn lưu ý dòng id="idmenu1" trong code trên, chữ idmenu1 này bắt buộc phải giống với chữ idmenu1 trong code của menu con, tức là đoạn code này :

otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

- Nếu muốn tạo thêm nhiều menu con cho menu cha (ví dụ đối với menu cha Học Tập như trong code mẫu), ta sẽ thêm code như bên dưới :

otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
submn('link_submenu1.3','Submenu 1.3');
submn('link_submenu1.4','Submenu 1.4');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

- Còn nếu như các bạn muốn 1 menu chính nào đó không có submenu thì các bạn chỉ việc xóa code của submenu, lấy ví dụ ở Menu 6, thì ta sẽ xóa đoạn code như bên dưới :

...
...
...
otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");
...
...
...

- Nếu muốn thêm 1 menu nữa (ví dụ Menu 8) thì ta thêm code tương tự ở 2 phần như bên dưới :

...
...
...
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
<a id="idmenu8" href="#">Menu 8</a>
</div>
...
...
...
otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");

otab("idmenu8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
ctab();
at_attach("idmenu8", "idmenu8_child", "hover", "y", "pointer");

</script>

Bạn nên đặt menu này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật "Thêm tiện ích" vào phần header thì có thể xem ở đây.

-------------- BONUS --------------

- Trong demo mình có 4 mẫu menu, ở trên là code của mẫu 0, và đây là code của 3 mẫu còn lại, các bạn có thể download về tham khảo :

http://fandung.googlecode.com/svn/trunk/menu_type1.txt
http://fandung.googlecode.com/svn/trunk/menu_type2.txt
http://fandung.googlecode.com/svn/trunk/menu_type3.txt

- để có được 1 menu với màu sắc như ý muốn, các bạn thay đổi các giá trị mã màu như trong code highlight bên dưới là được :

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

[3.0.2] Nâng cấp ANCMedia Player cho trang phim

2011-12-15T02:30:00.001+07:00

Như đã được giới thiệu trên FD Blog : ANCMedia v.2, đã được rất nhiều người chú ý. Tuy nhiên nó vẫn còn nhiều điểm cần phải sửa và nâng cấp. Không phụ lòng mọi người, mình đã dành một ngày chủ nhật quý báu của mình để nâng cấp lên ANCMedia v.3.

Trong v.3 mình tập trung nâng cấp các yêu cầu của bạn.

Nâng cấp các server tăng nhiều hơn.
Thêm logo cho trình player.
Link id cho phim. = > Nâng cấp thành công ! = > Click V3.0.1!

Các bạn có thể xem qua dưới đây.

Xem Demo

1. Cài đặt

Giống version 2, tuy nhiên sẽ đơn giản hơn nhiều.

Vẫn thêm 2 thẻ div có id lần lượt vào temp của bạn.

Tuỳ ý bạn đặt nhé, không quan trọng là nó phải nằm ở đâu, chủ yếu người xem trang bạn dễ sử dụng hơn.

Tiếp đó, thêm đoạn code sau trước </body>

Giải thích thêm :

width: chiều rộng của player (đơn vị px, cm, em, %...)
height: chiều cao của player (đơn vị px, cm, em, %...)
id1 : id chứa ShortCode dạng [id], <id>
id2 :     id chưa Player
id3 :     hiển thị tập phim.
logo:    logo site của bạn add cho player.
home : hiển thị tên server cho link .mp4, một link (tức chế độ xem Full) bằng domain của bạn.

2. Sử dụng

Để tránh một số lỗi mà các bạn đang than vãn về hiển thị của ANCMedia, mình đã fix lại cách post phim. Các bạn có thể dùng cả 2 cách sau.

1. <id>Link phim</id>
2. [id]Link phim[/id]

Sử dụng cách mới đó là <id>, các bạn thêm vào temp của mình một định nghĩa CSS cho thẻ <id> là color trùng với màu nền trang của bạn. VD: Site mình là http://maphim.net, có màu nền là #F0f0f0. Vậy mình phải thêm vào CSS là

id{color: #F0f0f0; display: none; background: #F0f0f0;}

Nếu ai chưa hiểu cách post có thể qua ANCMedia v.2 để xem, mình không giới thiệu lại nữa.

Hỗ trợ các server sau :

"google.com","nhaccuatui.com","clip.vn","phimvang.org",".mp4",".flv","banbe.net","youtube.com","videobb.com","novamov.com","vidxden.com","2shared.com","4shared.com","cyworld.vn","dailymotion.com","videozer.com

Dạng link post phim:

http://www.youtube.com/watch?v=Qigx0HbS7bA
http://videobb.com/video/hn6WGrQcNnOu
http://www.novamov.com/video/4ysd2p7v16db7
http://www.cyworld.vn/v2/myhome/video/detail/homeid/12001054026/post/5408/Warrior 2011 clip1
http://www.vidxden.com/s0c5muac9igy/Kido_Night_01.flv.html
http://banbe.net/1172070183/video/index/detail/id/8890
http://video.google.com/videoplay?docid=-8153436258414727634
http://clip.vn/watch/MC-Tran-Thanh-the-hien-tai-nang-ca-hat,hdOl?fea-id=181
http://phimvang.org/xem-phim/hung-dong-the-twilight-saga-breaking-dawn-part-1-2011/sv6/28201111.html
http://www.nhaccuatui.com/nghe?L=IU5yMLjZEx3U
http://www.4shared.com/video/8h74u-Bw/vietsub_ky_bang_ha.html
http://123.30.111.58/phim/jimmy/m2/OldMasterQandLittleOceanTiger2011_111126.mp4?start=0

Riêng server .flv bạn có thể sửa thành đuôi link post phim thành .anc thì mới chạy được. Xin lỗi vì bất tiện này.

3. Kết
* Hiện tại đã có tới 15 server đã được cập nhật, tiến tới sẽ tăng số server lên thành 60, đáp ứng hết nhu cầu của các bạn.
* Tiếp tục phát triển nâng cấp chức năng link id.
* Phát triển chế độ bảo mật cho link phim. Hiện tại đang được sử dụng tại http://maphim.net.

Update: Fix chức năng hiển thị tên server.

*Nếu bạn post link dạng <id>Tên phim(Hoặc tập số bao nhiêu);link phim;linkphim2...|</id>

- Post phim để tên thì các part có cùng tên với nó sẽ hiển thị chung có dạng "Ten-1", "Ten-2"..

Code
<id>Media;link1;link2;link3|</id>
Hiển thị
Media-1| Media-2| Media-3

- Post phim để số thì sao.

Code
<id>1;link1;link2;link3|</id>
Hiển thị
1a| 1b| 1c

* (05/12/2011)Nâng cấp thêm Gdata Youtube, lấy playlist trên Youtube, các bạn paste id Gdata với dạng :

anc.yl/id Gdata -- > Tester

* (15/12/2011) Nâng cấp thành công link id, file update : http://anhnc.googlecode.com/svn/trunk/ver2/anc3.0.1.js
Kiểm nghiệm: Hãy so sánh sự khác nhau của các link sau.

Tập 1 : http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=0,1
Tập 3: http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=2,1
Tập 11: http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=10,1

Tiện ích giúp bạn chia sẻ link cho bạn bè dễ dang hơn.

Các bạn tìm và thay ancmedia.js = > anc3.0.1.js
Thêm dưới dòng M.pl(M.r()); đoạn code sau : M.pl(M.glink(M.r()));

* (18/12/2011) Nâng cấp hoàn chỉnh cho ANCMedia ver 3.0.2 = > Thông tin cập nhật tại :

http://play.maphim.net/

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

Ngẫu hứng Blogger (3)

2011-12-14T21:53:00.000+07:00

Các bài viết trước, mình có chú trọng nhắc đến đối tượng "Data". Gọi nó là đối tượng không biết là đúng hay sai. Nhưng cùng là newbie với nhau, nói theo ý hiểu của mình. Sai thì nhờ unnewbie chỉ giúp.

Chủ đề hôm này, tên tiếng Anh chuẩn là "Layouts Data Tags". Có nhiều loại data khác nhau với mục đích chỉ dùng trong các widget phù hợp. Data được nhận biết theo 2 dạng sau. Thứ nhất là <data:name/> , name ở đây có thể là một đối tượng dữ liệu không có thuộc tính riêng (VD: ... ). Thứ 2 là dạng <data:name1.name2/>, name1 là đối tượng, name2 là thuộc tính riền của nó (VD: post.title, post.url...).

Có các loại widget phổ biến sau :

Globally Available Data
Page Header
Blog Posts
Blog Archives
Profile
Text / HTML / JavaScript

Feed
Picture
Labels
List
Link List
Logo

Với số lượng widget kể trên, chúng ta không thế nào nhớ hết được tất các các biến data của nó. Các biến đó mình cũng tham khảo bên support blogger. Đừng nghĩ ở đây ai hơn ai nhé, mình cũng chỉ như các bạn, đang chập chững bước vào đây. Nhưng mình đang thấy nhiều bạn đang tìm cách học sai, không nắm được căn bản, chắc sẽ mày mò rất lâu, một năm, 2 năm... chắc mới có thể ngẫm ra. Các bạn đọc và chịu khó thực hành, code nhiều các bạn sẽ luận ra và nhớ hết đa số các biến. ^^! .. Chém nhiều quá ! Giờ quan tâm chủ yếu đến Blog Post, phần trung tâm của BlogSpot. Các biến trong widget này bao gồm : feedLinks, olderPageUrl, oderPageTitle, newerPageUrl, newerPageTitle, commentLabel, authorLabel, timestampLabel, postLabelsLabel, backlinksLabel, posts...

Để sử dụng các biến này, bạn phải tạo widget phù hợp đó là type = "Blog", kèm theo đó là có luồng tương ứng. Mình sẽ liệt kê kèm theo dưới đây, liệt kê theo sơ đồ luồng code dưới dây cho các bạn dễ hình dung nhé.

Trước hết, các bạn để ý cho mình nhé, luồng nào chứa khai báo var, nó sẽ có một vòng lặp Loop bên trong. Vì nó thuộc dạng danh sách (các bạn có thể phóng to ảnh để theo dõi). Để đưa một biến vào thuộc tính của thẻ HTML như href, src, title ...Các bạn phải thêm từ khoá expr để BlogSpot khi biên dịch có thể hiểu được đây là biến data chứ không phải giá trị của thẻ HTML.

1. Nextprev : Luồng chứa nhóm điều hướng, hiển thị link bài viết cũ và mới.

Bao gồm các biến được quan tâm :

data:newerPageUrl, data:newerPageTitle (Nhóm bài viết mới)
data:olderPageUrl, data:olderPageTitle (Nhóm bài viết cũ.)
data:blog.homepageUrl,data:homeMsg (Nhóm trang chủ - Hiển thị )

2. ShareButtons : Chia sẻ liên kết bài viết với mạng XH. Cái này các bạn tìm hiểu thêm nhé, cũng không khó, mình không đưa vào, vì sợ bài viết dài.

3. Backlinks : Phần tạo liên kết bài viết giữa các site, cái này chắc để sau. Nếu các bạn cần mình sẽ giới thiệu, mình cũng không mò vào đây vì không dùng nó mấy :D

4. Post : Đứa con mà các bạn chăm sóc nhiều nhất. nơi đây chứa biến name1: post, gồm các thuộc tính name2 sau:

5. Status message : Đây là thanh Navigation của bạn.

6. Main : Phần này quan trọng với trang đây. Các bạn có thể tưởng tượng nơi đây là nơi tập trung các dữ liệu bên ngoài vào. Trích xuất, lọc thành biến : post (posts), coment(coments), link (links)..và đưa ra các hàm con (hàm con có thể hiểu ở đây là các luồng đã xét ở trên). Xét thấy sự phù hợp giữa name trong main và id của các luồng kể trên, dữ liệu sẽ được rót vào các luồng có (luồng bên ngoài)id = name(main) đó.

Cũng có thể điều đó là ngược lại, đây là hàm chính, hãy nhìn sự sắp xếp từ trên xuống. Các hàm con được gọi vào và sắp xếp theo thứ tự mà ta từng thấy : Thanh Navigation, Bài viết, Link điều hướng, Feeds...

Phần này mình cũng chỉ hiểu mơ hồ, biết sao nói vậy. Nếu các bạn thấy sai, mình sẽ edit lại. Nhưng mình dám chắc mình đang nói đúng. Vậy có thể coi Main là cái thùng lớn, dữ liệu được lọc thông qua các ống include có id và name tương ứng nhau.

7. Comments
Nơi chứa comment biến tương ứng từ số 24 -- > 30 trong bảng trên.

Kết lại.
Còn rất nhiều biến data đang chờ bạn khám phá, các bạn có thể đoc thêm tại đây. Nếu nắm rõ sơ qua một chút cấu trúc của BlogSpot, cho dù là tiếng Anh thì bạn vẫn có thể hiểu nó đang nói gì. Mong có nhiều bạn đọc nó, hiểu nó hơn mình và tìm ra nhiều thủ thuật hay. Để Blog trở thành một nơi làm việc rẻ nhất, đông vui nhất. Khả năng diễn dải có hạn, cho dù mình biết nhưng chưa chắc đã nói được hết ý đang suy nghĩ, nếu có điều gì đó làm các bạn nhức nhối, xin bỏ qua cho mình.

Cảm ơn đã đọc bài viết của mình. Hẹn trong các chia sẻ tới. Bye !

Blogger cập nhật tính năng threaded comment cho blogspot ?

2011-12-14T21:11:00.000+07:00

Như các bạn đã biết, comment phân cấp (threaded comment) gần đây đã được Tiến Nguyễn (vnblogspot.com) giới thiệu cho mọi người, và cũng đã được nhiều người hưởng ứng và sử dụng. Hôm nay tình cờ mình ngồi vọc code template thì mình tình cờ thấy 1 thẻ b:includable mới mà blogger vừa mới cập nhật vào code template.

Theo mình đoán thì blogger chuẩn bị cập nhật tính năng này cho blogspot. Tại thời điểm post bài này mình có vô chỉnh sửa code 1 vài lần, và đã gặp lỗi bx 1 vài lần. chứng tỏ blogger đang tiến hành 1 vài cập nhật nào đó.

Nếu đúng như vậy thì blogspot chuẩn bị lại được làm mới, lại được thêm một tính năng mạnh mẽ nữa, hứa hẹn sẽ là 1 nhà cung cấp dịch vụ blog số 1 sau này.

Tiếp tục ủng hộ blogspot

Ngẫu hứng Blogger (2)

2011-12-14T07:26:00.006+07:00

Do tên gọi kia hơi dài, mình xin được phép đổi tên chủ đề "Bạn biết gì về BlogSpot, hãy chia sẻ cung tôi". Trong số 2 này mình sẽ nói về các đối tượng bên trong của widget, bao gồm : Include (Luồng), Data (Dữ liệu), Loop (Vòng lặp), If/Else (Biểu thức điều kiện).

Nhắc đến bài trước, bạn đã thử thực hành với 2 đối tượng section và widget chưa. Nếu chưa, hãy làm thử đi nhé. Đơn giản hãy chỉ tạo thử một section header, trong đó chứa một widget HTML, bạn cho nó hiển thị hình ảnh trong 3 trang khác nhau : index, item, static page.

C.Luồng (Include)

Luồng là một đối tượng con, nằm trong widget. Hiểu nôm na, nó như một ống dẫn truyền dữ liệu từ CSDL vào widget. Do vậy nếu tạo widget mà không có luồng, sẽ có lỗi xảy ra.

Cấu tạo một luồng như sau :

<b:includable id='{tên id}' var='{Biến}'>

    {Nội dung hiển thị}

</b:includable>

Giải thích :

id: Định danh duy nhất trong widget để luồng tham chiếu.
var : Biến đặt cho luồng truyền giá trị vào, và ở đây nó là một giá trị tham chiếu.

Điều kiện bắt buộc là như mình đã nói ở trên, thêm vào đó, mỗi widget phải có một id = 'main'. Và để cho chắc ăn, id của luồng ta để mặc định là main . Vấn để tạo id mới và sau đó luồng có tham chiếu đến được không. Mình xin trả lời là có, nhưng mình không dám chắc...Vì chưa thử bao giờ ^^!

Luồng không những truyền dữ liệu, nó còn dùng để lấy dữ liệu trong các vòng lặp. Một VD đơn gian đó là lấy tiêu đề của các bài post. Nghĩ hình dung và kết nối, các bạn đơn giản có thể hiểu, ta đang dùng javascript để lọc feed.

<b:includable id='main'>

   <b:loop var='i' values='posts'>

      <b:include name='post' data='i'/>

   </b:loop>

</b:includable>



<b:includable id='post' var='p'>

   Tiêu đề: <data:p.title/>

</b:includable>

Ở đây bạn chú ý vào dòng màu đỏ, vòng lặp loop bên ngoài duyệt tất cả các bài viết (posts), chọn ra một bài viết trong đó (post), với dữ liệu là i.

Chú ý đến cấu trúc trên và có thể sử dụng với các điều kiện sau:

name: Tương ứng gấn như một id, nhưng hiện thị mình thấy nó giống một class hơn.
data : dữ liệu truyền vào, ngầm hiểu chính là nội dung bài viết, tác giả, số comment ...

D. Dữ liệu (Data)

Nhăc đến data, chác nhiều người sẽ hiểu. Có thể nói nó là đối tượng quan trong nhất, nó mang lại cái hồn cho Blog. Vì vậy nói ở đây chắc không thể nào có thể nói hết. Mình sẽ dành một bài viết riêng cho nó.

Các bạn còn nhớ type của widget của bài viết trước chứ. Mỗi loại widget sẽ có một loại data riêng. Vì vậy bạn không thể làm cái điều "râu ông nọ cắm cằm bà kia" được.

Nói qua về nó, nó có dạng sau data:name1.name2. Trong đó, name1 sẽ là đối tượng chính, name2 thường là các thuộc tính đi kém theo sau đó. Mình thấy nói về phần này rất hay, chắc có lẽ xin khất ở bài sau.

E. Vòng lặp (Loop)

Dùng để lọc ra một phần tử trong một nhóm phần tử : nhóm bài viết(posts), nhóm nhãn(labels), nhóm bình luận (coments)...
Cấu trúc :

<b:loop var='{biến chạy, phần tử con}' values='{nhóm phần tử}'>

   {Lặp nội dung ở đây}

</b:loop>

Hình dung đơn giản thì đây là vòng lặp foreach, phần tử con được lấy ra trong nhóm phần tử.

VD :

<b:loop var='i' values='data:posts'>

   <h2><data:i.title/></h2>

</b:loop>

F. BT Điều kiện (If/Else)

Biểu thức so sánh đưa ra kết quả đúng và sai..
Cấu trúc :

<b:if cond='{điều kiện}'> 

   {hiển thị nội dung nếu là đúng}

<b:else/>

{hiển thị nội dung nếu là sai}
</b:if>

Điều kiện ở đây thường là so sánh các đối tượng data với giá trị đã biết để tạo ra các kết quả đúng và sai. Một VD đơn giản là so sánh số bài viết, nếu lớn hơn 1 hiển thị 'A', nhỏ hơn bằng 1 hiển thị 'a'.

<b:if cond='data:post.numComments > 1'>

   <font color="red">A</font> 

<b:else/>

  <font color="red">a</font> 

</b:if>

Nó có thể năm ngoài widget, tuy nhiêu không được đặt biểu thức if/else giữa widget và include.

Tổng kết.

Qua đây bạn chắc bạn đã thực sự hiểu sơ qua về cấu trúc của một BlogSpot. Biết được ai là cha, ai là con. Mình xin được tổng kết lại các phần đã giới thiệu đơn giản như sau:

Có gì sai hãy bổ sung, góp ý với mình nhé. Rất cảm ơn. Hẹn các bạn ở bài viết tới. Layouts Data Tags.

Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.

2011-12-13T17:36:00.002+07:00

Mình cũng mới tham gia FanDung Blog. Nhưng xem qua chưa có chuyên mục nào giới thiệu hay tìm hiểu sơ lược về BlogSpot. Mà hầu như chỉ tập chung chủ yếu vào "hack". Với những người vọc nhiều, am hiểu sơ qua về các ngôn ngữ lập trình, chuyện hack nó chả có gì là khó. Nhưng đối với nhiều bạn mới tham gia viết Blog như mình, cũng cần có thêm kinh nghiệm về BlogSpot. Mình yêu BlogSpot vì tính năng tuỳ biến của nó. Nói đơn giản hơn : Ngon - Bổ - Rẻ.

Chính vì lý do đó, mình viết bài viết "Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi." để chia sẻ nhưng gì mình biết, để mọi người cùng tham khảo, cùng vọc. Và lớn hơn nữa nó sẽ thành chuyên mục TUT sử dụng BlogSpot quen thuộc của mọi người. Cũng mong nó sẽ hỗ trợ phần nào đó phần design của các bạn tốt hơn.

Trong bai viết này, mình chỉ nói sơ qua về một số đối tượng Blogspot. Nếu nói điều gì đó chưa đúng hay sai về lý thuyết mong được đóng góp của mọi người, dù sao mình cũng không phải dân làm web ^^!. Không dám múa rìu qua mắt thợ :D

A.Section

Đầu tiên, thứ mình biết được đầu tiên là trong BlogSpot được chia làm các khối lớn. Các khối này được nằm trong thẻ <section>, các khối section này chứa các widget, HTML hay các tiện ích thêm vào mà các bạn vẫn hay dùng. Trong một trang bạn có thể chia làm nhiều <section> .Không cứ bắt buộc theo temp chuẩn là chỉ có header, main, sibar đâu nhé. Các bạn có thể tuỳ biến thêm các section cho trang của mình.

Và lưu ý nhé, section mình nói trên phài đặt trong thẻ đóng và mở là
<b:section {thuộc tính}></b:section.>

Nó là thẻ bắt buộc phải có trong một template, nếu không có một thẻ này, BlogSpot sẽ báo lỗi khi up template.

Và kể từ nay trở về sau, các bạn sẽ tử hiểu các cấu trúc thành phần cấu tạo nên BlogSpot cũng sẽ phải nằm trong thẻ đóng, mở <b:></b:>

Mỗi <section> trong template được tạo như sau.

<b:section id='{tên id}' class='{tên class}' maxwidgets="{số lượng}" showaddelement="{yes, no}"> 

</b:section>

Giải thích thuộc tính như sau :

id: Là tên duy nhất đặt cho section.
class: dùng để code CSS cho section.
maxwidgets: Số lượng widget có thể nằm trong. Widget tý sẽ kể đến ^^!
showaddelement: Có cho phép thêm phần tử vào section không.

Ngoài ra, còn có thêm một thuộc tính growth: định dạng kiểu dáng của section "horizontal","vertical" (nằm, đứng). Nhưng mình nghĩ cũng chả khi nào dùng đến, vì bo CSS rồi. Thuộc tính id sẽ là bắt buộc, các thuộc tính còn lại là tuỳ biến, tức là có hoặc không.

B.Widget

Widget ta có thể tạm hiểu là một phần tử con của Section.

Tạo một widget :

<b:widget id="{tên id}" type='{loại}' locked="{yes,no}" title="{Tên Widget}"/>

Giải thích :

id: Trường thuộc tính duy nhất và bắt buộc, BlogSpot thường dựa vào id để lưu lại cấu hình về css, cũng như data của nó. Mỗi khi bạn restore hay thay thế temp mới, các dữ liệu sẽ tự động đẩy vào các widget trống.
type: Bao gốm các dạng sau : BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList,List, Logo, BlogProfile, Navbar, VideoBar, NewsBar, ListView .... Trong đó HTML được chúng ta sử dung nhiều nhất.
locked: Được phép di chuyển hay không ở trong phần tử trang.
title : Tên widget.

Ngoài ra còn một số thuộc tính :

pageType (cho phép hiển thị ở trang nào) : Giá trị : all, archive, main, item - > phần này dành cho phân trang rất hay, các bạn không cần dùng đến if để kiểm tra pageType nữa.

mobile: (cho phép hiển thị với điện thoại di động không) : Giá trị: yes, no.

Trong blog của bạn, tất cả các thẻ <section> và <widget> sẽ được thay thế bằng thẻ <div>, mà sẽ có ID quy định. Do vậy, các bạn có thể bo CSS bằng chính các id mà bạn đã đặt.

Giờ bài viết đã dài, mình cũng hơi mỏi tay rồi. Hẹn các bạn trong số tiếp theo. Trong bài sau mình sẽ giới thiệu về : Include (Luồng), Data(Dữ liệu), Loop (Vòng lặp), If/Else (Biểu thức điều kiện)

Xin hẹn các bạn trong bài viết sau. Cảm ơn về ý kiến của các bạn !

Blogger chính thức add avatar vào comment feed

2011-12-12T21:38:00.002+07:00

Mấy bữa nay ngồi mày mò vài thứ nên ko biết chút thông tin mới nào về blogger. Hôm nay đi dạo 1 vòng mình mới thấy. Nhân tiện đây mình giới thiệu luôn cho mọi người. Trước kia, khi blogger chưa add avatar vào comment feed thì mình có giới thiệu cho các bạn 1 thủ thuật recent comment có avatar, khi đó mình phải dùng tới php để lấy ảnh, nên load rất chậm, và rất ít người dùng. Nay blogger đã add avatar vào feed rồi thì chúng ta không còng phải lo về vấn đề load chậm nữa.

Nhân tiện hôm nay mình cũng sẽ update lại thủ thuật recent comment mà mình đã giới thiệu trước đó. Ngoài việc cập nhật cho avatar cho tiện ích, mình còn fix 1 lỗi mà trước kia post thủ thuật mình đã không để ý. đó là trong trường hợp bài viết bị xóa (không phải xóa vĩnh viễn) thì thủ thuật bị lỗi và không chạy được.

Các bạn có thể xem demo ở đây :

DEMO

Để update thủ thuật, các bạn chỉ việc cập nhật lại file js trong bài hướng dẫn trước. Nếu ai chưa từng thực hiện thủ thuật thì vào lại bài cũ để xem hướng dẫn.
Link : http://www.fandung.com/2011/06/recent-comments-voi-anh-ai-dien.html

File js đã update :

http://fandung.googlecode.com/svn/trunk/js/recent-comment-avatar.js

Thêm Reactions vào bài viết của blogspot

2011-12-12T19:02:00.008+07:00

Chức năng reactions của blogger cung cấp giúp cho đọc giả thể hiện phản ứng của mình khi xem 1 bài viết nào đó. Chức năng này đã được tích hợp sẵn trong widget "bài đăng trên blog" (Blog1). Nhưng nó thường ở chế độ ẩn (disable), nếu bạn muốn sử dụng nó cho các bài viết của mình thì các bạn phải enable nó lên.

Bài hướng dẫn này cũng rất cơ bản, và có cũng có nhiều blog đã đăng rồi, nhân tiện bạn Namozu hỏi, nên mình cũng xin giải đáp thắc mắc.

Hình ảnh minh họa :

Để Enable tính năng reaction các bạn thực hiện các bước như bên dưới:
1. Vào phần thiết kế -> nhấp chọn vào phần chỉnh sửa widget của tiện ích "Bài đăng trên blog"
2. Và click chọn để enable như hình bên dưới :

- Các bạn có thêm nhiều phản ứng (reaction) để người khác vote bằng cách nhấp vào dòng chữ chỉnh sửa của tính năng Reactions. Sau đó thêm vào, lưu ý là các phản ứng cách nhau bằng dấu phẩy.

3. Save chỉnh sửa lại.

Sau khi save lại và mở bài viết ra để xem thành quả. Và 1 số có lẽ sẽ thất vọng khi nó không hiển thị, các bạn không phải lo lắng. Nó không hiển thị là do template của bạn đã được mod lại (chỉnh sửa). Đa số là code của phần reactions đã bị xóa đi. Để hiển thị nó ta chỉ việc thêm lại phần code của nó là xong.

Sau đây là các bước add lại code của nó:
1. Vào phần thiết kế -> chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Tìm đến dòng code này:

- nếu blog bạn không có dòng này, cũng không sao, bạn có thể tìm đến dòng này :

<data:post.body/>

3. Sau khi tìm được dòng code ở bước 2, các bạn add code của tính năng reactions vào ngay sau dòng code vừa tìm được. Bên dưới là code của nó:

4. Save template lại. và mở lại xem bài viết để thấy kết quả.

Hiển thị bài viết cho trang Music,Phim.

2011-12-11T15:28:00.005+07:00

Hiển thị thumb ngày càng đa dạng và phong phú, tuỳ vào ý tưởng trình bầy của mỗi người ta lại có một thumb đẹp cho site. Hôm nay xin giới thiệu một thumb đẹp cho blog. Đáp ứng theo yêu cầu của Namozu từ box yêu cầu thủ thuật.

Trích dẫn :
Nguyên văn từ Namozu

Mình muốn 1 code js để hiện thị tự động 20 ca khúc đầu tiên trong 1 label như mẫu sau.
Thank anh Dũng và mọi người nhiều
http://www.djbooth.net/index/music-charts/entry/C26/
Nếu được xin anh Dũng hoặc các bạn trong BQT giúp mình 1 chút.

Mình đã dành chút thời gian để làm cho bạn.

DEMO

Sử dụng nó cũng không khó, vì mình đã tích hợp sẵn rồi. Các bạn thích nó theo phong cách của mình có thể download file js về chỉnh sửa CSS. Mình thì cũng không rảnh lắm, dạo này cũng hợi bận, có điều gì tắc trách mong được bỏ qua..

Sử dụng:

1. Dán code sau vào dưới thẻ <body> hoặc trên thẻ </head>.

<script src="http://anhnc.googlecode.com/svn/trunk/xx/anc_sthumb.js"></script>

2. Dán code này vào phần cần hiển thị.

Thế là đã xong, rất đơn giản.

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

Petkute Blogger

2011-12-10T16:15:00.004+07:00

Định rip làm trang Auto Game thấy kute lại làm site truyện, post đc 2 bộ truyện chán lại bỏ =))
Mình ko biết sắp xếp cái main sao cho hợp lý . Ai thích cái main hiện kiểu khác thì cho cái ảnh demo mình sẽ làm lại.

Mình làm random background có 3 cái ảnh thôi nha
Mình cũng không có file PSD đâu nên đừng PM vô ích. và điều quan trọng hơn là mình ko biết PTS :))

Cơ bản chỉ có thế có vài cái ảnh ở petkute.banbe.net các bạn up lại ko là lúc nó thay link là đi :)

DEMO | DOWNLOAD

Notice: viết nhầm RSS comment ở menu là feeds/comments/default chứ ko phải là /feeds/comment/default sửa lại dùm mình :)

Facebook comments for blogger - Update

2011-12-08T22:03:00.002+07:00

Ở bài viết trước mình đã hướng dẫn các bạn thay thế comment của blogger bằng comment của facebook, và mình đã nhận được 1 số phản hồi như là : chèn form comment của facebook vô làm blog load ỳ ạch, hoặc nhiều khi không load được đối với nhà mạng VNPT, và 1 ý kiến phản hồi khá hay là sử dụng song song cả 2 form comment của blogger và facebook cho bài viết. Ý kiến phản hồi này đã kích thích mình, và mình đã test ngay. Và bây giờ là lúc ngồi trước máy tính để chia sẻ cho mọi người.

Ở bản cập nhật này, mặc định form comment của Blogger sẽ được hiển thị, khi muốn comment bên form của facebook, thì các bạn chỉ việc click vào thanh điều hướng chuyển form comment là được.

Demo của bạn này và demo của bản cũ sẽ vẫn được dùng chung.

Xem DEMO

Hình ảnh minh họa

Updated 10/12/2011 : về việc click vào điều hướng chuyển form sẽ nhảy đến khu vực comment, tránh trường hợp bài viết dài khỏi mất công kéo chuột xuống.
- Để update thủ thuật, bạn chỉ cần update code của bước 5 là được.

Sau đây là các bước thực hiện : lưu ý là ở bản cập nhật này các bước thực hiện vẫn tương tự, chỉ có khác là không vào phần cài đặt để ẩn comment mà thôi. Vì thế nếu đã thực hiện bản cũ muốn update lên ở bản này thì các bạn cứ việc thay thế code đã thêm ở bản cũ bằng code của bản này là được.
1. Vào phần thiết kế -> chỉnh sửa code HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

- data-width là độ rộng của comment box.
- data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
- data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết.

3. Chèn đoạn code bên dưới vào sau thẻ <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>

5. Chèn ngay sau nó đoạn code bên dưới :

<b:if cond='data:blog.pageType == "item"'>
<div id='cmnav' style='text-align:center;'> <a href='?cm_form=blogger#cmnav'>Blogger Comments</a> | <a href='?cm_form=facebook#cmnav'>Facebook Comments</a> </div>

<script type='text/javascript'>
if (cm_form=="facebook#cmnav") {
document.write(fbcm);
var fbcss = document.createElement("style");
fbcss.type = "text/css";
fbcss.innerHTML = "#comments { display:none }";
document.body.appendChild(fbcss);
}
</script>
</b:if>

- Ở bước 5 này có 1 lưu ý nhỏ. Bạn phải xác định thẻ div chưa nội dung của phần comment của blogger là gì, đa số nó sẽ là #comments. Tùy theo template của bạn đang xài, và tùy theo người Rip template thì có thể nó sẽ khác. Việc xác định nó cũng không khó nên mình không hướng dẫn ở đây.
- 1 điều nữa là phần liên kết chuyển form comment (href='?cm_form=blogger' và href='?cm_form=facebook'). Cái giá trị cm_form=facebook thì bạn phải giữ nguyên, còn giá trị cm_form=blogger thì các bạn có thể thay đổi theo ý thích. Cái này chỉ có tác dụng load lại trang để sang chế độ comment của blogger mà thôi. Như ở đây mình khuyên cũng nên giữ nguyên để cho nó đẹp, pro 1 tý.

6. Save template.

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

Thanks ý tưởng của Quang Minh today