OBin's Blog: web va lap trinh

New

Vì một lý do nào đó mà website của bạn bị từ chối bởi Google Adsense, bạn hãy yên tâm, website bạn vẫn có thể kiếm tiền bằng nhiều Ad network khác. Dưới đây là những mạng quảng cáo kiếm tiền online ( Ad network) tốt nhất thay thế Google Adsense, bạn có thể chọn ra cho mình một nhà cung cấp phù hợp và tốt nhất.

1adsoptimal.com

Là mạng adnetwork tuy mới nhưng khá thành công nhờ sự liên kết với các đối tác quảng cáo tiềm năng trong đó có Google Adsense. Nền tảng quảng cáo bao gồm mobile và PC với nhiều định dạng banner khác nhau phù hợp với nhiều loại website.

Là Ad Network uy tin, đăng ký tương đối dễ dàng, miễn sao website bạn không chứa nội dung cấm như nội dung người lớn, hack, phần mềm độc hại... và luôn chấp nhận website tiếng Việt.
Cung cấp nhiều vị trí quảng cáo để bạn lựa chọn, thường xuyên xuất hiện quảng cáo Google Adsense...
Điểm đặc biệt là sau khi được duyệt tài khoản quảng cáo của bạn được tặng 15$
Thanh toán hàng tháng qua Paypal hoặc Check với mức tối thiểu là 50$.

Đăng ký tại đây

2Media.net

Media.net có lẽ là Ad network thay thế tốt nhất cho Adsense. Nó là một mạng lưới quảng cáo theo ngữ cảnh, được hỗ trợ bởi Yahoo và Bing, cho phép các publisher kiếm tiền từ doanh thu quảng cáo.

Nó cung cấp các đơn vị quảng cáo tùy chỉnh phù hợp với cái giao diện trang web của bạn, hỗ trợ hiển thị quảng cáo trên điện thoại di động và máy tính bảng.

Tuy nhiên Media hướng đến là dịch vụ quảng cáo cao cấp cho đối tượng khách hàng là các nươc phát triển chủ yếu là Mỹ, Canada, Australia và Châu Âu mà thôi. Cho nên nếu website của bạn ngôn ngữ là tiếng Anh và khách hàng chủ yếu từ Mỹ, Anh, Australia thì mới đủ điều kiện để đăng ký làm publisher nhé

3 Adcash.com

Adcash được xem là mạng quảng cáo lớn thứ 2 sau Google Adsense. Adcash đăng đứng vị trí thứ 53 trang website lớn nhất giới cho nên chứng tỏ có rất nhiều người sử dụng dịch vụ này. Tuy nhiên tại Việt Nam quảng cáo không được hiệu quả là do các khách hàng quảng cáo tại Việt Nạm chọn Google Adsense rồi. Cho nên nội dung quảng cáo của các nước khác hiễn thị tại Việt Nam thì không phù hợp đối tượng nên số lượng click quảng cáo là khá thấp. Tuy nhiên cũng tùy vào nội dung website của bạn là gì nữa theo mình thì các website có nội dung như game, phần mềm, video, ảnh lá khá phù hợp tại Adcash và hầu hết các website quảng cáo nước ngoài khác cũng vậy. Giá CPM và mỗi lần click là tùy thuộc vào mỗi quốc giá, các nước phát triển thì tỷ lệ rate là khá cao, còn như Việt Nam thì khá thấp.

Dễ đăng ký, xét duyệt trong vòng 1 ngày làm việc.
Nhiều format quảng cáo: Banner, Background, Mobile, Slide-in, Footer, Full Page
Thanh toán ít nhất là 100$ vớ Paypal, Payeer, Skrill, Wire Transfer, Webmoney.
Chấp nhận traffic từ 196 quốc gia.
Website phù hợp: Game, Phần mềm, video, ảnh, phim

4exoclick.com

Exoclick là mạng quảng cáo cho publisher lớn thứ tư trên giới hiện nay. Có nhiều loại quảng cáo cho bạn tùy chọn cả trên PC và Mobile. Các fotmat quảng cáo phổ biến như banner, text link, message, popunder, in-video,…Trang này các đối tác quảng cáo là các trang nước ngoài nên bạn có site tiếng anh càng tốt, nếu site tiếng Việt thì có view nhiều cũng kiếm được bộn tiền. Phương thức tính tiền quảng cáo là CPC và CPM.

Thanh toán ít nhất 20$.
Phương thức thành toán: Chuyển khoản ngân hàng, paypal, payeer,…
Thời gian thanh toán: theo tuần, theo tháng

- Đăng ký tại đây

5 Propellerads.com

Propellerads cũng khá nổi tiếng hiện nay.và rất nhiều publisher trên thế giới đang sử dụng dịch vụ này. Với nhiều format quảng cáo như video, mobile, banner và chấp nhận quảng cáo với hầu hết các quốc gia trên thế giới. Bạn nên xem xét xử dụng dịch vụ này nhé mình thấy khá tốt nếu website của bạn có lượng truy cập nhiều thì nên tận dụng.

Đăng ký tương đối dễ, xét duyệt nhanh..
Nhiều format quảng cáo video, mobile, banner, pop, direct
Thanh toán ít nhất 100$ với Payeer, Wire Transfer, Webmoney Z
Website phù hợp: Game, Phần mềm, video, ảnh, phim

- Đăng ký tại đây

6 Bidvertiser.com

Là một mạng quảng cáo Pay Per Click (PPC), nó có thể là một lựa chọn tuyệt vời nếu bạn không nhận được sự chấp thuận từ Adsense hoặc bị cấm. Với Bidvertiser, chỉ cần thu nhập của bạn được 10$ thì đã có thể payment qua Paypal

Bidvertiser cung cấp nhiều dạng quảng cáo như văn bản, hình ảnh, quảng cáo di động, quảng cáo slide, popup… Bạn cũng có thể kiếm tiền bằng cách giới thiệu bạn bè đăng ký referal.

7Adhexa.com

Mạng quảng cáo Adhexa cho phép bạn tạo những đoạn mã quảng cáo để dán vào trang web/blog của bạn với các kích thước khác nhau, số lượng tối đa là 3 vị trí quảng cáo trên 1 page. Số lượt hiển thị sẽ quyết định thu nhập của bạn. Bạn thậm chí chẳng cần quan tâm đến số lượt click vào quảng cáo. ECPM của họ là khoảng $ 0,35 (nghĩa là cho mỗi 1000 xem quảng cáo nhận được, bạn nhận được $ 0,35). Chỉ với thu nhập 5$ bạn đã có thể nhận được payment qua Paypal.

8Chitika.com

Lựa chọn thay thế Google Adsense tiếp theo phải kể đến là Chitika. Vì với Chitika, bạn không cần phải nhận được sự chấp thuận việc sử dụng quảng cáo Chitika trên trang web của bạn. Chỉ cần tạo một tài khoản và đặt quảng cáo trên trang web.

Chitika cung cấp 3 loại quảng cáo là Search Targeted Ads, Local Ads và Mobile Ads. Nhưng mức giá PPC của nó không tốt như Adsense.

9Qadabra.com
Qadabra là một nền tảng quảng cáo tự phục vụ (self-serve) và cung cấp quảng cáo dựa trên hiệu suất. Bạn chỉ mất 15 giây để bắt đầu hiển thị quảng cáo trên trang web của bạn.

Qadabra cung cấp nhiều loại banner quảng cáo khác nhau bao gồm cả quảng cáo slide.

10Amobee.com

Amobee trước kia được biết đến với cái tên Kontera, quảng cáo xuất hiện trên văn bản liên quan khi bạn di chuyển chuột trên các văn bản đã được liên kết. Nó cũng cung cấp quảng cáo hình ảnh và video. Tất cả các quảng cáo này được thanh toán dựa trên số lượt click.

11Infolinks.com

Infolinks có một chút khác với các loại quảng cáo khác là nó hiển thị quảng cáo dạng fix scroll (cố định và trượt theo) hoặc link popup. Nó hiển thị quảng cáo văn bản hoặc quảng cáo popup.

Infolinks cung cấp 4 loại quảng cáo như trong tìm kiếm, trong văn bản, trong khung và trong thẻ.

12Clicksor.com

Cicksor là một mạng lưới quảng cáo theo ngữ cảnh, cung cấp các loại định dạng quảng cáo cho các publisher của họ. Nó cung cấp 85% thu nhập quảng cáo và payment qua PayPal, Check, Payoneer...

Clicksor cung cấp nhiều loại quảng cáo khác nhau như Inline text links, Banner text, banner hình ảnh, Pop-Unders và Interstitial Ads.

Xem thêm:
- PayPal là gì? Cách đăng ký và sử dụng tài khoản PayPal bằng thẻ Visa hoặc Master
- Cách nhận tiền thanh toán từ Google Adsense
- Cách chặn người xem video Youtube từ Việt Nam hoặc một nước bất kì

Hiện nay add-on Advanced Forum Statistics không còn được hỗ trợ trên các phiên bản Xenforo mới ( 1.4+) việc fix lỗi add-on để chạy trên Xenforo phiên bản mới sẽ gặp nhiều khó khăn đặc biệt là đối với người dùng không nắm rõ về code Xenforo. Để fix nhanh lỗi này ta chỉ cần thay thế một Add-on khác có chức năng tương tự đó là Vt.Lai TopX.

Chức năng chính:
+ Thống kê bài mới nhất
+ Phân Tab ra từng chuyên mục tùy ý
+ Có Tab những bài mình vừa reply, những chủ đề mình vừa gửi, những chủ đề mới của diễn đàn
+ Cho phép thay đổi kích thước + ẩn hiện khung bên phải
+ Thay đổi theo style mobile.
+ Cho phép giới hạn 1 số chuyên mục nào đó chỉ có tối đa bao nhiêu bài trên TopX
+ Cho phép không cho chuyên mục/user nào đó lên TopX
+ Các chức năng linh tinh khác các bạn xem trong options

Demo:

click xem hình lớn

Admin:

Click xem hình lớn

Download

Hướng dẫn cài đặt:

Download và giải nén file, upload hết lên các file/thư mục trong thư mục upload lên ngang hàng file index.
AdminCP => Install Add-on -> Import file xml => Xong

Bạn có thể tùy chỉnh add-on trong menu Options => Vt.Lai TopX

Xem thêm:
- Hướng dẫn tạo biến dùng chung toàn bộ template Xenforo ( Global Template Variable )
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Hướng dẫn tạo quảng cáo sau bài viết đầu tiên cho diễn đàn Xenforo

Diễn đàn Xenforo mặc định không có chức năng đặt quảng cáo theo từng forum hoặc category nhưng vẫn có cách làm đơn giản giúp bạn giải quyết được vấn đề này.

Thực hiện như sau:

1 Đặt quảng cáo theo từng forum (node)

Tạo một template mới đặt tên banner tùy ý, add đoạn code như sau:

<xen:if is="{$forum.node_id} ==50">

 Nội dung bannner

 </xen:if>

Trong đó 50 là id của forum bạn muốn quảng cáo được hiển thị.

Hoặc theo nhiều forum

<xen:if is="{$forum.node_id} ==50 or {$forum.node_id} ==49">

 Nội dung banner

 </xen:if>

Trong đó 50 và 49 là id của 2 forum bạn muốn đặt quảng cáo, nếu thêm một forum khác bạn sử dụng lại cú pháp trên với or

Hoặc theo nhiều forum bằng array :

<xen:if is="in_array({$forum.node_id}, array(49,50,94,75,73,76,72,71,89,82,77,80,83,85,88))">

Nội dung banner

</xen:if>

Trong đó 49,50,94,75,73,76,72,71,89,82,77,80,83,85,88 là id những forum bạn muốn quảng cáo xuất hiện.

2 Đặt quảng cáo theo từng category:

Tương tự như cách đã làm với forum, ta chỉ cần đổi biến $forum thành $category
ví dụ:

<xen:if is="{$category.node_id} == 50">

Nội dung banner

</xen:if>

Đặt quảng cáo theo nhiều category cũng tương tự như làm với forum, ta chỉ cần đổi biến $forum thành $category

Lưu ý: Đây chỉ là các bước tạo template và add code banner theo forum hoặc category chứ chưa đặt vị trí banner xuất hiện nên sẽ chưa có banner xuất hiện.
Sau khi Lưu code bạn sẽ sử dụng code include banner vào vị trí bạn muốn add trong template của diễn đàn:

<xen:include template="banner_template" />

Trong đó banner_template là tên template bạn đặt trong quá trình tạo banner.

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

Xem thêm:
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- Hướng dẫn tạo khung đăng nhập bằng pop up trên diễn đàn Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Hướng dẫn tạo quảng cáo sau bài viết đầu tiên cho diễn đàn Xenforo

Sau đây là 5 HTML, CSS, JS framework ( Frontend Frameworks) được sử dụng phổ biến nhất hiện nay. Mỗi Framework đều có những đặc điểm riêng phù hợp với từng mục đích sử dụng của người phát triển web. Nếu bạn chưa từng dùng qua thì có thể tham khảo để tìm ra một frameworks phù hợp với dự án của mình.

1 Bootstrap:

Là HTML, CSS, JS framework phổ biến nhất hiện nay với lượng người dùng khá lớn. Framework này hỗ trợ hầu hết các thành phần có trong một website cũng như tính năng responsive + mobile nên nó có thể sử dụng cho nhiều dự án khác nhau từ lớn đến nhỏ.

Một số thông tin chi tiết:

    Tác giả: Mark Otto và Jacob Thornton.
    Phát hành: 2011
    Phiên bản hiện tại: 3.3.5 ( + 4.0 Alpha)
    Mức độ phổ biến: 75,000 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ) & mobile first
    Preprocessors: Less and Sass
    Responsive: Có
    Modular: Có
    Icon set: Glyphicons Halflings set
    Add-ons: Không kèm theo, nhưng có rất nhiều plugin từ bên thứ 3.
    Thành phần độc đáo: Jumbotron
    Tài liệu: Hỗ trợ đầy đủ
    Customization: Basic GUI Customizer , bạn cần phải nhập vào các giá trị màu bằng tay, vì không có bảng chọn màu có sẵn.
    Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8+ (Bạn cần thêm Respond.js để hỗ trợ IE8)
    Giấy phép: MIT

Download

2 Foundation by ZURB:

Foundation là tên tuổi thứ 2 mà ta nhắc tới. Được sự bảo bọc của công ty ZURB đây là một nền tảng vô cùng mạnh mẽ. Foundation được sử dụng cho các website lơn nhứ Facebook, Mozilla, Ebay, Yahoo!...

Một số thông tin chi tiết:

    Tác giả: ZURB
    Phát hành: 2011
    Phiên bản hiện tại: 5.5.2
    Mức độ phổ biến: 18,000 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ), mobile first, semantic
    Kích thước: 326 KB
    Preprocessors: Sass
    Responsive: Có
    Modular: Có
    Icon set: Foundation Icon Fonts
    Add-ons: Có.
    Thành phần độc đáo: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
    Tài liệu: Hỗ trợ đầy đủ
    Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
    Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
    Giấy phép: MIT

Download

3 Semantic UI:

Semantic UI nỗ lực không ngừng để làm cho các trang web xây dựng nhiều ngữ nghĩa (Semantic - Phần này nếu không hiểu bạn nên tìm hiểu riêng). Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên, do đó làm cho mã dễ đọc và dễ hiểu.

Một số thông tin chi tiết:

    Tác giả: Jack Lukic
    Phát hành: 2013
    Phiên bản hiện tại: 2.1.4
    Mức độ phổ biến: 12,900 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: Semantic, tag ambivalence, responsive.
    Kích thước: 552 KB
    Preprocessors: Less
    Responsive: Có
    Modular: Có
    Icon set: Font Awesome
    Add-ons: Không.
    Thành phần độc đáo: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
    Tài liệu: Hỗ trợ rất tốt
    Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
    Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
    Giấy phép: MIT

Download

4 Pure by Yahoo!:

Có trọng lượng nhẹ, hỗ trợ modul,viết thuần CSS, bao gồm các thành phần có thể được sử dụng cùng nhau hoặc riêng tùy thuộc vào nhu cầu của bạn.

Một số thông tin chi tiết:

    Tác giả: Yahoo
    Phát hành: 2013
    Phiên bản hiện tại: 0.6.0
    Mức độ phổ biến: 9,900 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: SMACSS, minimalism
    Kích thước: 18 KB
    Preprocessors: Không có
    Responsive: Có
    Modular: Có
    Icon set: Không có, nhưng bạn có thể sử dụng Font Awesome
    Add-ons: Không.
    Thành phần độc đáo: Không
    Tài liệu: Hỗ trợ tốt
    Customization: Basic GUI Skin Builder
    Trình duyệt hỗ trợ: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
    Giấy phép: Yahoo! Inc. BSD

Download

5 UIkit by YOOtheme:

là một bộ sưu tập ngắn gọn dễ sử dụng và dễ dàng tùy chỉnh các thành phần. Mặc dù nó không phải là phổ biến như các đối thủ khác,nhưng nó cung cấp các chức năng tương tự và chất lượng.

Một số thông tin chi tiết:

    Tác giả: YOOtheme
    Phát hành: 2013
    Phiên bản hiện tại: 2.22.0
    Mức độ phổ biến: 3,800 + GitHub
    Khái niệm/ Nguyên tắc cốt lõi: RWD, mobile first
    Kích thước:   118 KB
    Preprocessors: Less, Sass
    Responsive: Có
    Modular: Có
    Icon set: Font Awesome
    Add-ons: Có.
    Thành phần độc đáo: Article, Flex, Cover, HTML Editor
    Tài liệu: Hỗ trợ tốt
    Customization: Advanced GUI Customizer
    Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+
    Giấy phép: MIT

Download

Với một số thông tin trên, chúc các bạn tìm được framework ưng ý nhất.

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- BlueTrip - Css Framework phong cách đơn giản dễ sử dụng
- 6 slider miễn phí mà sử dụng thư viện jQuery
- Tạo menu dropdowns nhanh trong Bootstrap
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Đôi khi làm web bạn sẽ gặp những trường hợp lệnh Javascript phải chạy sau khi việc load trang đã hoàn tất, nếu không thì sẻ gặp lỗi.

Việc đó sẽ được giải quyết bằng một đoạn Script jQuery đơn giản sau:

<script type="text/javascript">
$(window).bind("load", function() { 

// lệnh javascript mà bạn muốn chạy sau khi load trang xong 

});
</script>

Giải thích:
Phương thức bind() gắn một hoặc nhiều sự kiện xử lý cho các thành phần đã được chọn, và chỉ rõ một hàm để chạy khi sự kiện đó xảy ra.
Thành phần được chọn ở đây là window và sự kiện là load nghĩa là khi cửa sổ được load xong thì sẻ chạy lệnh mà bạn muốn.

Rất đơn giản phải không nào? Chúc các bạn thành công!

Xem thêm:
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables)
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Lấy đường dẫn URL của trang hiện tại bằng PHP

Dưới đây là 10 theme Wordpress đẹp, tải miễn phí, hỗ trợ responsive với bố cục và chủ đề khác nhau phù hợp với từng mục đích sử dụng như blog, website tin tức, gallery... Mỗi theme đều có link demo, bạn có thể xem qua trước khi download.

1Arcade

Demo Download

2Hueman

Demo Download

3Revera

Demo Download

4Point

Demo Download

5Codium Grid

Demo Download

6Finale

Demo Download

7MegaResponsive

Demo Download

8Limo

Demo Download

9Radiate

Demo Download

10Gridster

Demo Download

Xem thêm:
- 10 WordPress Themes miễn phí tuyệt đẹp hỗ trợ responsive
- 5 template WordPress Responsive tuyệt đẹp miễn phí-
- 10 theme Wordpress responsive tuyệt đẹp download miễn phí

Mặc định Blogger không có sẵn widget Bài Viết Mới Nhất (Recent Post) nhưng chỉ cần vài thao tác đơn giản sau bạn sẻ tạo ra một widget có chức năng tương tự.

1 Đầu tiên bạn đăng nhập Blogger, chọn Layout, click Add Widget tại vị trí bạn muốn đặt widget, trong bài viết này là cột phải hoặc trái (style được viết cho dạng cột).
Khi cửa sổ Widget mở ra bạn chọn HTML/Javascript

Trong khung nhập nội dung bạn copy đoạn code dưới đây là paste vào:

<script style="text/javascript" src="http://yourjavascript.com/2151392498/recentposts.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

Trong đó, bạn có thể cài đặt các thông số sau theo ý mình:

- posts_no là số bài được hiển thị
- showpoststhumbs là cài đặt ảnh đại diện bài viết ( true là có, false là không)
- readmorelink là cài đặt link xem thêm ( true là có, false là không)
- showcommentslink là cài đặt link comment ( true là có, false là không)
- posts_date là cài đặt thời gian bài viết ( true là có, false là không)
- post_summary là cài đặt đoạn mô tả ngắn trích từ nội dung bài viết ( true là có, false là không)
- summary_chars là độ dài của mô tả, tính bằng số kí tự

2 Bạn vào mục Template chọn Edit HTML, copy đoạn code dưới đây paste vào trước thẻ </head> trong template:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Bạn có thể chỉnh sửa lại style và font chữ theo ý mình, trong style này sử dụng font Oswald của Google Fonts.
Các bạn nhấn Lưu và xem kết quả nhé!

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

Xem thêm:
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Lazy Load là một plugin của JQuery dùng để tải hình ảnh ở các website hoặc blog nội dung có nhiều ảnh. Sử dụng Lazyload giúp cho trang web load nhanh hơn, phần nội dung của trang web sẽ được load lên trước sau đó khi người dùng kéo chuột đến đâu Lazyload sẻ load hình ảnh đến đó, một số trường hợp nó còn có tác dụng giảm tải cho Web Server.

Sau đây là cách sử dụng Lazy load và cách dùng trong những trường hợp khác nhau:

Đặt trong thẻ <head>

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

Sử dụng mặc định: Ví dụ với một image

<img class="lazy" data-original="img/example.jpg" width="640" height="480">
<script>
$(function() {
    $("img.lazy").lazyload();
});

</script>

Sử dụng với Threshold :
Mặc định hình ảnh sẻ load ngay khi xuất hiện trên màn hình, nhưng nếu bạn cài đặt option này thì hình ảnh sẻ load trước khi xuất hiện trên màn hình ( trong ví dụ là 200px )

$("img.lazy").lazyload({
    threshold : 200
});

Sử dụng với một sự kiện tương tác:
Tức là chỉ khi có sự kiện tương tác nào đó thì hình ảnh sẻ được load lên ví dụ như click, mouseover:

$("img.lazy").lazyload({
    event : "click"
});

hoặc một sự kiện tùy chỉnh ( load sau 5 giây)

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

Sử dụng với một hiệu ứng:
Mặc định plugin sẽ chờ hình ảnh load xong và gọi hàm show(). Bạn có thể sử dụng bất kì hiệu ứng nào bạn muốn. Ví dụ:

$("img.lazy").lazyload({
    effect : "fadeIn"
});

Sử dụng với trình duyệt "Non Javascript"
Mặc định trình duyệt lúc nào cũng bật Javascript, nhưng đôi lúc bị tắt đi bởi người dùng. Trường hợp này ta làm như sau:

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>

Để tránh việc xuất hiện cùng lúc 2 hình ảnh giống nhau ta thêm code css sau:

.lazy {
     display: none;
 }

Thêm đoạn code sau để bật Javascript cho trình duyệt:

$("img.lazy").show().lazyload();

Sử dụng khi hình ảnh bên trong một thẻ bao với thanh cuộn

Code Css:

 #container vị trí {
     height: 600px;
     overflow: scroll;
 }

Code Js:

$("img.lazy").lazyload({
     container: $("#container")
});

Kiểm soát số lượng hình ảnh được load :

$("img.lazy").lazyload({
    failure_limit : 10
});

Đối phó với những hình ảnh "Invisible":

$("img.lazy").lazyload({
    skip_invisible : true
});

Download toàn bộ source code và ví dụ cụ thể tại đây

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

Xem thêm:

- Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables)
- Basic jQuery Slider - Slider đơn giản dễ sử dụng trong thiết kế web
- Code popup quảng cáo nằm dưới trình duyệt (popup under)

Khi bạn đặt một quảng cáo hoặc nội dung bằng iframe trên website của mình, nếu nội dung đó load chậm hơn website của bạn thì phần hiển thị iframe sẻ bị trống. Chỉ với một thủ thuật nhỏ sau đây sẻ giúp bạn ẩn iframe trống đó, cho tới khi load xong sẻ xuất hiện đầy đủ.

Cách làm:
Đặt thêm trong thẻ mở iframe đoạn code sau:

style="visibility:hidden;" onload="this.style.visibility = 'visible';"

Tức một iframe hoàn chỉnh có dạng như sau:

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="../examples.html" >

</iframe>

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

Xem thêm:
- Cách ẩn thông tin khi post video lên website hoặc blog từ Youtube
- Cách gắn comment facebook vào website hoặc blog

Khung comment và like box của Facebook thường bị cố định kích thước nên khi giao diện web co giãn (resposive) thì sẻ bị lỗi phần này. Để fix lỗi này ta chỉ cần sử dụng đoạn css đơn giản với thẻ !important.

Bạn thêm vào file css của website đoạn code sau:

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style], .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]
{
       width: 100% !important;
}

Lưu lại và xem kết quả nhé!

Lưu ý là việc fix lỗi này giúp cho giao diện website để đáp ứng được nhiều kích thước màn hình khác nhau hoặc khi co giản cửa sổ trình duyệt. Còn trên giao diện mobile thì Facebook sẻ tự load khung comment Facebook phiên bản mobile rồi.

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

Xem thêm:

- Hướng dẫn gắn nhanh comment Facebook cho blogger
- Cách gắn comment Facebook cho diễn đàn Xenforo
- Hướng dẫn fix lỗi Moderator không quản lý được comment Facebook

Để lấy đường dẫn URL của trang hiện tại, bạn chỉ cần sử dụng đoạn code PHP đơn giản như sau:

<?php
  function getURLCurrentPage() {
    $pageURL = 'http';

    if (!empty($_SERVER['HTTPS'])) {
      if ($_SERVER['HTTPS'] == 'on') {
        $pageURL .= "s";
      }
    }

    $pageURL .= "://";

    if ($_SERVER["SERVER_PORT"] != "80") {
      $pageURL .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"];
    } else {
      $pageURL .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
    }

    return $pageURL;
  }
?>

Giải thích: Trong getURLCurrentPage chúng ta sử dụng chủ yếu là biến $_SERVER để xác định URL của trang hiện tại. Tương tự, biến $_SERVER có thể cho ra những kết quả khác tùy theo cách xử dụng.

Ví dụ ta có dường dẫn sau: http://obinb.com/page/about.php?page=12

-    $_SERVER[‘HTTP_HOST’] => obinb.com
-    $_SERVER[‘PHP_SELF’] => /page/about.php
-    $_SERVER[‘REQUEST_TIME’] => Thời gian mà client gửi request ở dạng TIME _STAMP
-    $_SERVER[‘QUERY_STRING’] => page=12
-    $_SERVER[‘DOCUMENT_ROOT’] = Thư mục root chứa mã nguồn website. VD: /home/obibcom/public_html (đối với Linux) hay C:\www (đối với windows)
-    $_SERVER[‘REMOTE_HOST’] = Hostname của người truy cập
-    $_SERVER[‘REMOTE_PORT’] = Port mà trình duyệt mở ra để kết nối tới server
-    $_SERVER[‘REQUEST_URI’] => /page/about.php?page=12
-    $_SERVER[‘SERVER_NAME’] = Tên của server
-    $_SERVER[‘SERVER_ADDR’] = IP của server
-    $_SERVER[‘REMOTE_ADDR’] = IP của người truy cập
-    $_SERVER[‘HTTP_USER_AGENT’] = Thông tin trình duyệt của người truy cập

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

Xem thêm:
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Cách ẩn số lượng sản phẩm trong danh mục OpenCart
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery chúng ta sử dụng đối tượng Location và Document.

Cách làm như 2 ví dụ ngắn sau:

Sử dụng Javascipt: Sử dụng window.location và window.document

var getUrl = window.location.href;     // Lấy đường dẫn url trang hiện tại  
var getTitle = window.document.title;  // Lấy tiêu đề trang hiện tại

Sử dụng jQuery: Sử dụng $(location) và $(document)

$(document).ready(function () {
  var getUrl = $(location).attr('href');    // Lấy đường dẫn url trang hiện tại
  var getTitle = $(document).attr('title');  // Lấy tiêu đề trang hiện tại

});

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

Xem thêm:
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables), bước thực hiện rất đơn giản như sau:

Tạo một function lấy giá trị biến từ một URL như sau:

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

Sau đó chúng ta sẻ sử dụng function này:

Ví dụ từ một URL như sau: http://www.obinb.com/page.php?order=1&thumb=image.jpg

- Khi chúng ta gọi getQueryVariable("order") thì kết quả trả về sẻ là 1
- Khi chúng ta gọi getQueryVariable("thumb") thì kết quả trả về sẻ là image.jpg

Xem thêm:
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP

Sau đây là hướng dẫn tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash. Các bước thực hiện khá đơn giản như sau:

Bước 1: Tạo một layer chứa các đối tượng dynamic text của bộ bộ đếm, tạo 4 đối tượng là dynamic text trên layer đó gồm Ngày, Giờ, Phút và Giây, tương ứng với instance name time_txt1, time_txt2, time_txt3, time_txt4

Bước 2: Tạo một layer khác chứa Action Script xử lý timer như sau:

this.onEnterFrame = function()
{
 //lưu trữ dữ liệu ngày
 var today:Date = new Date();
 //lưu trữ dữ liệu năm, lấy năm hiện tại
 var currentYear = today.getFullYear();
 //lưu trữ dữ liệu giờ
 var currentTime = today.getTime();
 //tạo và lưu trữ dữ liệu thời gian được chọn
 var targetDate:Date = new Date(currentYear,7,27,15);
 var targetTime = targetDate.getTime();
 //Xác định thời gian hoàn thành, đơn vị là milliseconds
 var timeLeft = targetTime - currentTime;
 var sec = Math.floor(timeLeft/1000);
 var min = Math.floor(sec/60);
 var hours = Math.floor(min/60);
 var days = Math.floor(hours/24);
 //Lấy giá trị của biến còn lại. Chuyển "sec" (giây) thành chuỗi
 sec = String(sec % 60);
 //Với một chuỗi ta có thể kiểm tra được độ dài kí tự( length)
 if(sec.length < 2){
  sec = "0" + sec;
 }
 min = String(min % 60);
 if(min.length < 2){
  min = "0" + min;
 }
 hours = String(hours % 24);
 if(hours.length < 2){
  hours = "0" + hours;
 }
 days = String(days);
 
 if(timeLeft > 0 ){
  //Gán các giá trị cho từng chuỗi trên stage
  var counter_days:String = days;
  var counter_hours:String = hours;
  var counter_min:String = min;
  var counter_sec:String = sec;
  time_txt1.text = counter_days;
  time_txt2.text = counter_hours;
  time_txt3.text = counter_min;
  time_txt4.text = counter_sec;
 }else{
  trace("TIME'S UP");
        var newTime:String = "00:00:00:00";
        time_txt.text = newTime;
        delete (this.onEnterFrame);
 }
}

Tại đoạn code:

var targetDate:Date = new Date(currentYear,7,27,15);

- Có nghĩa vào thời gian là năm hiện tại, ngày 27, tháng 7, vào lúc 15 giờ sẻ hết thời gian đếm. Bạn chỉ cần thay thời gian mình muốn vào.

Lưu lại và chạy để xem kết quả nhé.

Download file FLA tại đây

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

Xem thêm:
- Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Cách gọi hàm Javascript từ trong file Flash bằng Action Script 3

Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website. Các bước thực hiện khá đơn giản. Ưu điểm là host nhanh, có thể chỉnh sửa file trực tiếp trên host, quản lý file dễ dàng và đặc biệt là hoàn toàn miễn phí.

Đầu tiên bạn phải có tài khoản Google, đăng nhập vào link drive.google.com

Sau khi đăng nhập Google Dive, bạn tiến hành tạo folder chưa file cần upload

Sau khi tạo folder bạn tiến hành share folder đó để sử dụng như một hosting, làm theo thứ tự như trong hình từ trên xuống:

Sau khi đã bật chế độ public cho folder, bạn tiến hành mở folder đó ra và upload file. Sau khi upload file bạn lấy id của file như sau:

Bạn copy đường dẫn và dán vào thanh địa chỉ :

Ví dụ: https://drive.google.com/open?id=0ByZ5fZboLO6CWVpefWi12NU1ER2s

Đoạn text được bôi đỏ là id của file, bạn copy phần này lại.

Dán vào thay cho phần files_id trong link bên dưới

https://googledrive.com/host/files_id

Sẻ thành link file host có thể sử dụng trên blog hoặc website như sau:

https://googledrive.com/host/0ByZ5fZboLO6CWVpefWi12NU1ER2s

Với link này bạn có thể chèn vào web dễ dàng, ví dụ với file js như sau:

<script src="https://googledrive.com/host/0ByZ5fZboLO6CWVpefWi12NU1ER2s" type="text/javascript"></script>

Lưu ý: Nếu bạn chỉ muốn share file không phải folder thì cách share file cũng tương tự.

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

Xem thêm:
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách tạo và thêm sitemap vào Webmaster cho Blogger

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp