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

 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.

1. Nâng cấp các server tăng nhiều hơn.
2. Thêm logo cho trình player.
3. 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.

<div id="anc_pl" ></div>
<div id="anc_tp" ></div>

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>

<script src="http://anhnc.googlecode.com/svn/trunk/ver2/ancmedia.js"></script> <script>
//<![CDATA[

var anc = {
    width : "80%", height : "450", id1: "Blog1", id2:"anc_pl",id3: "anc_tp", home: "Maphim.net",
    logo : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aeOi7AQ0mWgXFxR4Q-7Cs2wTEMQKG_gG6DGwJBhZ9Ayxg07IyTmz0XhnwuxP04z5tqCGq1HMOGyoen3aNvDWLUqwfNIIH4jMtyXEdVfnQMP0gBtOzGYBZV1tFmXovOyfMCqzCqoF4kbL/s1600/logo_2.png"
 };
ANCMedia.call(anc);
M.pl(M.r());

//]]>
</script>

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)

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 ?

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)

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.

Một số đoạn code tuyết rơi

Đã đến mùa noel rồi đó Minh cung cấp cho các bạn một số đoạn code để trang trí blog mình cho đẹp hơn
 Bạn copy và dán trên thẻ </body> là OK

.

Tạo liên hệ giống blog Minh

Đây là cách tạo trang liên hệ cho blog sử dụng biểu mẫu của Google Docs trên blog Minh Demo. Đăng nhập vào docs.google.com click Tạo mới và chọn Mẫu.

.

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

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 !