Hướng dẩn tạo navbar mini khi dùng Bootstrap

Ngày càng nhiều blogger dùng theme có sử dụng Bootstrap và blog của mình cũng dùng Bootstrap từ lâu.Nếu chưa biết gì về Bootstrap có thể đọc qua những bài viết liên quan đến Bootstrap trên blog của mình.
Khi mới bắt đầu làm quen với Bootstrap mình gặp rất nhiều khó khăn trong việc custom lại css theo ý của mình vì muốn.Với lại tài liệu về Boootstrap bằng tiếng Việt cũng không nhiều.Đa số những bí quyết hay tài liệu điều là tiếng Anh nên gây không ít khó khăn cho những người mới làm quen với CSS Framework này.
bootstrap navnarMình đã loay hoay rất lâu mới chỉnh sửa được theo ý mình.Nếu bạn đang dùng Bootstrap thì bạn chắc hẳn có sử dụng Navbar để làm menu cho website của mình.Như blog của mình dùng đế 2 menu thì cách dùng cũng đơn giản.Chỉ cần chỉnh sửa lại một ít là có thể tạo ra menu nhỏ hơn so với mặc định của Bootstrap.
Đầu tiên chúng ta cần thêm CSS này vào file style.css của website của bạn.

Còn đây là cách sử dụng của Mini Navbar Bootstrap bạn chỉ cần thêm 2 thẻ div với cấu trúc như đoạn code bên dưới là xong.

 

Thật sự mình cũng muốn Việt hóa lại tài liệu của Twitter Bootstrap nhưng lại chưa có động lực để làm.Nếu bài viết này được nhiều bạn ủng hộ mình sẽ cố gắng Việt hóa lại Document Bootstrap để những bạn mới làm quen không tốn nhiều công sức phải tìm lục tại liệu tiếng Anh nữa.
Với bài viết ngắn này hi vọng các bạn có thể thiết kế những template đẹp bằng Bootstrap.Nếu có bất cứ gì thấc mắc hoặc yêu cầu gì cứ để lại comment bên dưới, mình sẽ cố gắng giải đáp trong khả năng của mình.

Top 30 plugin Jquery tạo Lightbox miển phí

Hiệu ứng Lightbox cho ảnh chính là hiệu ứng mà khi các bạn nhấp vào một tấm ảnh nó sẽ hiển thị ra một cửa sổ popup nhỏ để hiển thị kích thước thật của ảnh đó từ việc sử dụng một plugin trong jQuery.

Dưới đây là 30 plugin Lightbox miển phí để bạn có thể tích hợp vào website của mình, bạn có thể áp dụng những plugin miển phí này cho bất kỳ dự án web nào dù có dùng wordpress hay không, bạn chỉ cần chèn file javasrcript và css vào là được.

Announcing Nivo Lightbox – A free jQuery Lightbox Plugin

Announcing-Nivo-Lightbox-–-A-free-jQuery-Lightbox-Plugin

Colorbox – a jQuery lightbox

Colorbox-a-jQuery-lightbox

fancyBox

fancyBox

Nivo Lightbox

Nivo-Lightbox

Image Lightbox

Image-Lightbox

Fluidbox

Fluidbox

Lightbox

Lightbox

Magnific Popup

Magnific-Popup

Bootstrap Image Gallery

Bootstrap-Image-Gallery

Avgrund Popins

Avgrund-Popins

blueimp Gallery

blueimp-Gallery

Remodal

Remodal

jQuery Photobox

jQuery-Photobox

Custombox

Custombox

jQuery nanoGALLERY

jQuery-nanoGALLERY

VenoBox

VenoBox

FancyBox Lighbox Jquery Plugin

FancyBox-Lighbox-Jquery-Plugin

iLightBox

iLightBox

Litebox jQuery Plugin

Litebox-jQuery-Plugin

jQuery facyBox

jQuery-facyBox

jQuery lightGallery

jQuery-lightGallery

Featherlight – ultra slim jQuery lightbox

Featherlight-–-ultra-slim-jQuery-lightbox

Vanillabox

jQuery-Lighter

jQuery Lighter

Popup.-js

Popup.js

Popup.js

jGallery

jGallery

jQuery fullsizable

jQuery-fullsizable

Visual jQuery Lightbox

Visual-jQuery-Lightbox

PgwModal

PgwModal

ABigImage

ABigImage

Trên đây là những plugin Lightbox miển phí thông dụng còn rất nhiều plugin có tác dụng tương tự nhưng ở bài viết này mình chỉ xin giới thiệu 1 số ít trong đó.Nếu bạn muốn biết cách sử dụng plugin Lightbox nào cứ để lại comment mình sẽ viết bài hướng dẩn riêng cho plugin đó.Chúc bạn thành công !

Hướng dẩn tạo Responsive cho Facebook Comments

Hiện nay ai cũng có tài khoản nên việc tích hợp Facebook comment vào để tiện cho người dùng comment cũng như kiếm thêm lượt visit từ Facebook.

Để thêm Facebook comments lên WordPress có 2 cách một là cài đặt trực tiếp , hai là dùng plugin thường thì khi dùng plugin sẽ có tính năng responsive cho Facebook comment luôn.

Trong bài viết này mình sẽ hướng dẩn các bạn một thủ thuật nhỏ giúp tạo Facebook comment responsive, đơn giản bạn chỉ cần thêm một đoạn Javascript:

Bạn chỉ cần thêm vào trang nào có Facebook comment là được.

Live Counter đơn giản với jQuery và CSS

Trong bài viết này mình sẽ giải thích về Live Counter và viết một demo nhỏ cho các bạn.Bài viết này sẽ giúp ích cho bạn nếu bạn muốn trang trí cho phần thống kê trên website của mình như tổng số lượt view, lượng subcribes, lượng bài viết,… hiện có trên site một cách sinh động hơn. Để giải thích về Live Counter thì bạn có thể xem qua bài viết 26 mẫu Under Construction Page tuyệt đẹp và miển phí bạn sẽ thấy một số mẫu có đồng hồ đếm ngược đó cũng là một dạng Live Counter. Bạn có thể hiểu đơn giản là bộ đếm tăng hay giảm theo thời gian. live Counter don gian voi jquery va CSS Sau khi làm theo hướng dẩn này bạn sẽ được như hình phía trên. Bây giờ chúng ta sẽ vào phần chính là viết code: Phần đầu là HTML:

[code language=”html”]
<div class=”stat”>
<span class=”stat-count”>8</span>
<p class=”stat-detail”>Subscribers</p>
</div>
[/code]

Đây là đoạn HTML mẫu với giá trị đếm kết thúc là 4200 tức là khi chạy đến 4200 thì dừng.Bạn có thể tạo ra nhiều đoạn HTML cùng chạy với nhau ví dụ như:

Đây là đoạn CSS mình làm mẫu nếu bạn biết thì có thể style lại cho live counter của mình phù hợp với theme mà bạn đang dùng.

Giờ chúng ta sẽ làm hiệu ứng đếm với jQuery:

Giá trị sẽ tăng sau mổi 0.05 giây, bạn có thể thay giá trị này cho phù hợp với site của mình.Đây là một hướng dẫn đơn giản nên nếu bạn muốn những live counter phức tạp hơn có thể tham khảo trên google. Chúc các bạn thành công với hướng dẩn này ! Bạn có thể xem qua demo ở đây và có thể view source nhé ! Demo live counter

26 mẫu Under Construction Page tuyệt đẹp và miển phí

Coming soon page hay under construction là một trong những template quan trọng cho website cá nhân, tổ chức và doanh nghiệp khi mua domain xong nhưng chưa có ý định kinh doanh trên nó.Và lúc đó thì Coming soon page hay under construction  sẽ được sử dụng như một trang web tạm thời để khi người dùng truy cập vào sẽ hiển thị ra một số thông bao có kế hoạch sắp tới của website.

Nếu bạn không muốn bỏ lỡ những vị khách viếng thăm thì trang Coming soon page hay under construction của bạn nên có những tùy chọn cho phép họ có thể subscription để nhận những tin tức mới nhất về website của bạn.Bạn cũng nên thêm các kênh liên lạc khác như email subscription, facebook, twitter, google plus,… để khách có thể liên hệ với bạn.

Dưới đây là hơn 50 mẫu under construction  miển phí,một số mẫu còn cho phép đăng ký nhận tin qua email,đồng hồ đếm ngược rất chuyên nghiệp được viết bằng HTML5, CSS3 và jQuery.Tất cả những mẫu ở đây đều có vẻ đẹp và ứng dụng vào từng nhóm website cụ thể nên mình không sếp hạng cái nào đẹp nhất.

Free bootstrap coming soon template with countdwon

Một template dựa trên CSS Framework Bootstrap 3 với thiết kế phẳng đơn giản nhưng vẩn đẹp với đồng hồ đếm ngược và background rất ấn tượng.Template này thích hợp cho website công nghệ hơn.

Free-bootstrap-coming-soon-template-with-countdwon

Demo More Info Download

Free Bootstrap Template Coming soon

Tiếp tục là một template dựa trên  Twitter Bootstrap Framework;Bạn có thể dùng nó vào bất cứ loại website nào mà bạn thích.Code template này rất gọn gàng và dễ tùy biến cũng như sử dụng.

Free-Bootstrap-Template-coming-soon (1)Demo More Info Download

Appology: Free Responsive Coming Soon Page Template

Appologylà template responsive miển phí với tông màu chủ đạo là cam.

Appology-Free-Responsive-Coming-Soon-Page-Template

Demo More Info

Elegant Clean Under Construction Page

MỘt template đơn giản bằng HTML5 và có thêm đồng hồ đếm thời gian.

Clean-Under-Construction-PageDemo Download

Coming Soon Page Template: Blue Horizons

Coming-Soon-Page-TemplateDemo Download

Website Under Construction Template

Under-Construction-TemplateDemo Download

Just Music- Under Construction Template for Music Website

Just-Music-Under-Construction-TemplateDemo More Info

Website Coming Soon Template

Coming-Soon-TemplateDemo Download

Free HTML5 CSS3 Coming Soon Page Template

CSS-Coming-Soon-PageDemo Download

Free Coming Soon Template

Một template đơn giản với đồng hồ đếm ngược, đăng ký nhận tin mới và một số thông tin khác về website

Free-Coming-Soon-TemplateDemo Download

Blue Free Coming Soon Page

Blue-Coming-Soon-PageDemo Download

Simple Coming Soon Page HTML

coming-soon-htmlDemo Download

HTML5 Coming Soon Template

Thay đồng hồ bằng thanh progress bar cho những website chưa chắc chắn ngày sẽ đưa vào hoạt động.

HTML5-Coming-Soon-TemplateDemo Download

PaperLaunch – Free Under Construction Template

Một template giống như một quyển số tay và có đầy đủ chức năng cần thiết.

PaperLaunchDemo Download

Coming Soon Page in CSS3

Coming-Soon-Page-CSS3Demo Download

Sapling Coming Soon Page in Flash

Một template bằng Flash đơn giản và cũng đẹp.

Sapling-Coming-Soon-PageDemo1 Demo2 Download

Free Website Coming Soon Template with Countdown

Coming-Soon-CountdownDemo Download

Website Free Under Construction Template Web and Mobile

under-Construction-mobile-templateDemo Download

Beback Free WordPress Theme Under Construction Template

Wordpress-Theme-Under-ContructionDemo Download

jQuery Free Countdown Coming Soon Page Template

jQuery-Countdown-coming-soonDemo Download

Coming Soon Page Template: We The Fashion

Một template đơn giản nhưng đẹp.Sử dụng và tùy chỉnh cũng khá đơn giản.

We-The-FashionDemo Download

Free Coming Soon Page Template: Time’s a Wastin

Time-WastinDemo Download

Alissa: Responsive Bootstrap Coming Soon Page

Bootstrap-Coming-Soon-PageDemo Download

Avenir – A Free Coming Soon HTML Template

AvenirDemo Download

The Deep Blue Coming Soon

Blue-Coming-SoonDemo Download

Minimal Coming Soon Page using HTML5 and CSS3

Minimal-Coming-Soon-PageDemo Download

Grey Matter: Business Coming Soon Page

Business-Coming-SoonDemo Download

 Trên đây là 26 mẫu Coming Soon Page chuyên nghiệp và hoàn toàn miển phí.Bạn có thể tải về và sử dụng thoải mãi.Hãy để lại comment bạn thích mẫu ào nhất.

Làm sao kiểm tra table tồn tại trong WordPress Database chưa ?

Một số plugin khi cài đặt yêu cầu phải cài thêm một số bảng để lưu dữ liệu.Những bảng mở rộng này có thể lưu trử hình ảnh,link download, hay bất cứ thông tin gì cần thiết cho plugin có thể hoạt động được.Những bảng cần cho plugin sẽ được tạo khi bạn kích hoạt plugin Nhưng bạn sẽ kiểm tra như thế nào nếu plugin đã kích hoạt rồi.Hoặc trong theme bạn viết cần tạo bảng mà bạn không biết chắc là đã tồn tại bảng này chưa.

Đoạn code dưới đây sẽ giúp bạn làm điều này

Một đoạn code nhỏ nhưng giúp ích rất nhiều cho lập trình WordPress vì nếu bạn xóa 1 bảng không tồn tại sẽ gây ra lổi… Sử dụng như thế nào là còn tùy ở bạn, nếu có bất cứ thắc mắc nào vui lòng để lại bình luận mình sẽ giải thích kỹ hơn nhé !

WordPress chính thức cập nhật lên phiên bản 3.9 “Smith”

Hôm nay WordPress chính thức giới thiệu phiên bản mới 3.9 Smith với nhiều cải tiến mới.Ngay bây giờ bạn có thể download hoặc cập nhật lên từ trang Dashboard trên site mình.Nên nhớ backup dữ liệu lại nhé tránh trường hợp xung đột thì có thể restore lại nhanh chóng.

Dưới đây là đoạn video giới thiệu những tính năng mới được cập nhật trong bản 3.9 này


Mình xin liệt kê những tính năng mới của WordPress 3.9:

Tính năng biên tập

Khung soạn thảo mới nhanh và tiện lợi hơneditor

Khung soạn thảo ở phiên bản mới này có tốc độ nhanh hơn,trải nghiệm người dùng tốt hơn và hổ trợ điện thoại.Bây giờ bạn có thể copy bài viết từ word sang mà không sợ mất định dạng như trước nữa.Bạn sẽ tiết kiệm được thời gian chỉnh sửa.

Chỉnh sửa hình ảnh dễ dàngimage

Với công cụ chỉnh sửa nhanh bạn có thể chỉnh sửa hình ảnh ngay trong khung soạn thảo một cách đơn giản và tiện lợi hơn.

Kéo thả hình ảnh vào khung soạn thảodragdrop

Bây giờ bạn có thể kéo thả hình ảnh vào bài viết nhanh chóng không cần phải làm nhiều bước như trước nữa.

Xem trước bộ sưu tập

gallery

Trước đây khi bạn tạo gallery hình ảnh thì không thấy được hình ảnh và cũng không chỉnh sửa trực tiếp được.Giờ khi bạn post Gallery thì nó sẽ hiển thị giống như bạn thấy khi xem bài viết.

Playlist cho audio và video

 

 

Với hình ảnh thì có gallery, còn audio với video thì có playlist.

Live widget and header previews

Lần cập nhật này WordPress đã thêm live widget và header previews giúp bạn có thể thấy trực tiếp những chỉnh sửa của mình.Khi đã chỉnh sửa ưng ý rồi mới lưu lại.

Trình duyệt chủ đề mới

theme

Lần cập nhật này WordPress nâng cấp những tiện ích giúp cho người dùng trong quá trình sử dụng.Website của bạn đã cập nhật lên bản 3.9 chưa ? Và có lổi gì không ? Hãy để lại bình luận nhé !

Hiển thị thời gian theo thời gian hiện tại

Nếu bạn là một developer thì đôi lúc bạn sẽ gặp phải vấn đề là không muốn hiển thị ngày tháng dạng thông thường, vừa khô khan vừa khó nhớ nữa.Cũng giống như bài viết cách đổi số sang dạng 1k mà mình vừa giới thiệu đến các bạn thì ở bài viết này mình cũng xin hướng dẩn các bạn cách thức hiển thị ngày tháng 1 cách thân thiện hơn.

Bạn sẽ thấy cách hiển thị này tương tự với các mạng xã hội như Facebook, Google +,…

hien thi thoi gian than thien nhu Facebook

Có nhiều cách để thực hiện việc này nhưng giới hạn ở bài viết này mình chỉ xin giới thiệu 2 cách mà mình biết

Dùng hàm human time diff

Đây là một hàm của wordpress giúp bạn nhanh chóng tạo ra dạng hiển thị thời gian như vậy

Chỉ cần để dòng lệnh bên trên vào nơi bạn muốn hiển thị là được.

Dùng hàm tự code

Nếu bạn không muốn dùng hàm có sẳn thì có thể dùng đoạn code bên dưới.Lọi ích của việc dùng code là bạn có thể tùy chỉnh lại cho phù hợp với nhu cầu của bạn cũng như của website của bạn.

Nếu website bạn không phải dùng mã nguồn WordPress thì cũng có thể dùng hàm này để hiển thị.Cách dùng hàm này như sau
[code language=”php”] time_stamp(get_post_time(‘U’, true)); [/code]
Vậy là xong rồi ! Nếu có bất cứ thấc mắc gì các bạn cứ để lại bình luận mình sẽ cố gắng giúp các bạn.

Chuyển định dạng số thành dạng 1K,1M,1B trong PHP

Đôi lúc chúng ta muốn hiển thị số đếm dạng 5k,10k,1m,… trong PHP thì làm như thế nào ?thay vì sử dụng những con số dài dòng thì bạn có thể rút ngắn lại còn khoảng hơn 3-4 ký tự nhưng thế sẽ tốn ít diện tích hơn.Như nút like của Facebook cũng dùng cách hiển thị như thế này.

Hàm dưới đây có tác dụng giúp chuyển đổi từ dạng số thông thường sang dạng hiển thị  dạng K.

$precision = 2 có nghĩa là bạn muốn bao nhiêu số thập phân, mặc định là 2 chữ số thập phân.

Cách sử dụng :

Đơn giản bạn chỉ cần gọi hàm và truyền số muốn chuyển vào.Bạn có thể tham khảo 3 ví trên.Nếu có gì không hiểu cứ để lại comment cho mình.Mình sẽ giải đáp những thắc mắc của các bạn.

Tổng hợp cách ẩn Admin Bar trong WordPress

Mặc định thì khi đăng nhập vào website wordpress thì trên đầu trang web sẽ xuất hiện một thanh màu đen được gọi là Admin Bar. Có tác dụng giúp thành viên có thể sửa bài, xem thông tin cá nhân,viết bài mới,…tùy thuộc vào quyền hạn của thành viên.Với những site nhiều thành viên thì Admin Bar sẽ không còn cần thiết vì thường sẽ có một bảng control panel riêng cho thành viên.

adminbar

Trong bài viết này mình sẽ hướng dẩn các bạn cách ẩn Admin Bar cho thành viên đơn giản:

Ẩn Admin Bar bằng code

Bạn muốn ẩn Admin bar với thành viên , trừ Admin thì thêm đoạn code này vào file function.php

Còn muốn ẩn với tất cả thành viên bao gồm cả Admin thì bạn thêm đoạn này

 Ẩn Admin Bar bằng plugin

Nếu không muốn đụng đến code thì bạn có thể dùng plugin thay thế bằng những plugin sau :

Disable WP Admin Bar Removal

disable WP Admin Bar Removal

Plugin này đơn giản chỉ cho phép chọn ẩn hay hiện Admin Bar.

Admin Bar Disabler

Admin Bar Disabler

Plugin cho phép bạn ẩn đối với từng nhóm thành viên.Khuyên dùng cho những website có phân quyền cho từng nhóm user.

Còn rất nhiều plugin có chức năng tương tự nhưng mình nghĩ đoạn code ngắn phía trên sẽ hữu dụng hơn.Bạn có thể tìm thêm bằng cách search từ khóa “Hide Admin Bar”.