Cách kiếm tiền từ bán Game cho điện thoại

Thời đại ngày nay, khi mà điện thoại và các thiết bị cầm nay lên ngôi thì Game cho điện thoại cũng dần trở thành 1 thị trường béo bở cho các nhà làm game. 

Còn với bạn, bạn cũng có thể dễ dàng kiếm tiền từ bán Game cho điện thoại chỉ cần bạn có đam mê và biết cách tạo 1 blogspot thì chuyện còn lại là quá đơn giản

Việc kiếm tiền từ game mà các nhà phân phối vẫn hay làm là cách làm ra 1 game hay, sau đó gắn mã kích hoạt bằng tin nhắn, khi 1 người chơi tải game về và kích hoạt game thì họ sẽ bị trừ 1 số tiền tương ứng.

Hôm nay mình xin chia sẻ với các bạn 1 số trang có cho bạn phân phối các game của họ để bạn có thể tham gia và kiếm tiền từ đó. Đây là cách mà các bạn hoàn toàn ko cần phải bỏ ra 1 đồng vốn nào cả, tất cả cách bạn làm là bạn lấy link game và giới thiệu bạn bè, chia sẻ mọi cách để có người tải game của bạn về và kichs hoạt nó.

Đây là ví dụ về 1 blogspot kiếm tiền bằng cách bán game cho điện thoại: Tải Game iWin mới nhất

Bạn đầu tiên vào trang https://mwork.vn và đăng ký 1 tài khoản

Bạn điền thông tin bao gồm 1 tài khoản Gmail

Sau khi đăng ký thành công bạn sẽ nhận được thông báo:

Bạn vào mail và kích hoạt tài khoản.

Sau khi kích hoạt bạn điền đầy đủ thông tin vào form yêu cầu của trang web

Vậy là đã xong, bạn vào và cập nhật đầy đủ thông tin tài khoản của mình nhé.

Lấy link phân phối bán lấy tiền

Bạn đăng nhập vào tài khoản của mình, nhấn vào tab Việc Hay

Tại đây các bạn sẽ được phân phối các hình thức như game onine, offline, ứng dụng...

Các bạn sẽ tham gia cái nào cũng được, tùy theo thế mạnh và khá năng của mình, còn mình lấy ví dụ bằng kinh doanh game online

khi nhấp vào mục bán game online bạn sẽ nhận được rất nhiều game hay mà bạn tha hồ lấy link phân phối.

Bạn chọn 1 game và nhấp vào phần Tham gia bán

Ở đây website sẽ cho bạn lựa chọ cách mà bạn có thể dễ dàng tiếp thị hay giới thiệu game của mình, bạn coppy link và đi giới thiệu bạn bè, spam fb... miễn sao có ng tải game của bạn và kích hoạt bạn sẽ có tiền.

Quá dễ để kiếm tiền từ Game cho điện thoại phải không nào, càng giới thiệu được nhiều người thì bạn càng có cơ hội trở thành 1 nhà triệu phú đó. Chúc bạn thành công

Read More

Tùy biến Comment cho blogspot, khung bình luận đẹp blogspot

Bạn quá nhàm chán với khung Comment của blogspot, bạn cũng đang chán với Comment của Facebook rồi, bạn muốn làm mới Style comment blog của bạn 1 cách chuyên nghiệp hơn. vậy bài viết sau đây sẽ làm bài hài lòng nhất.

Tùy biến Comment cho blogspot

Nói tùy biến không phải, đây chỉ là 1 Plugin hỗ trợ cho comment blogspot 1 cách chuyên nghiệp hơn, đặc biệt là những blog về tin tức, thủ thuật thì đây là 1 Plugin bạn không thể bỏ qua. Chắc hẳn các bạn đã từng vào trang Dantri.com.vn để đọc tin tức rồi đúng không, khi đến cuối bài bạn để ý có 1 khung comment rất đẹp và cũng rất chuyên nghiệp nữa, Plugin mình giới thiệu sau đây cũng tương tự như vậy.

DEMO

Đây là kết quả khi bạn làm thành công trên Blogspot của bạn.

Nó có đầy đủ chức năng như trả lời, đánh giá, sắp xếp bình luận, like, dislike, đăng nhập bằng Twitter, ....

Còn đây là phần quản trị trực quan cho các comment trên blogspot của bạn.

Bạn có thể xóa, chặn Ip các comment bạn không muốn cho hiển thị...

Quá tuyệt vời phải không, Thích chưa nào.

Tùy biến Comment cho blogspot, khung bình luận đẹp blogspot'

Đầu tiên bạn đăng ký 1 tài khoản tại đây http://intensedebate.com/

Sau khi đăng ký và kích hoạt mail xong, bạn vào phần quản trị >> Sites >> Add blog/site và thêm Blog của bạn vào

Thêm địa chỉ Blogspot muốn chèn Comment vào

Qua bước cài đặt trang web sẽ yêu cầu bạn Backup/Restore template blogspot mà bạn muốn chèn comment vào.

Bạn vào phần quản trị blog >> mẫu >> sao lưu và khôi phục >> Bạn upload lên trang Intensedebate như yêu cầu

Tới bước này website sẽ cung cấp cho bạn 1 khung code html, bạn copy toàn bộ và thay thế cho html Blogspot của bạn

Lưu lại và hoàn thành

Chú ý: Bạn có thể tùy chỉnh khung comment trong blogspot của bạn bằng cách vào phần setting và tùy chỉnh những gì mình thích trong đó. bạn có thể chuyển qua ngôn ngữ Việt Nam nếu thích

Rất đơn giản phải không, Với khung comment đẹp cho blogspot này nhìn blog của bạn sẽ rất chuyên nghiệp và đẹp nữa đấy, Chúc bạn thành công.

Nếu bạn cần hỗ trợ gì, cứ comment bên dưới nhé. mình sẽ hỗ trợ các bạn :))

Read More

Từ điển Blogspot

Lấy ra tiêu đề

<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>

Tiêu đề trang hiện hành

<title><data:blog.pageTitle/></title> 

Lấy Description của trang hiện hành

<data:blog.metaDescription/>

Tên tác giả

<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
</a>

Nếu Địa chỉ url của trang hiện hành = địa chỉ trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

Nếu url trang hiện hành = trang url-bai-viet

<b:if cond='data:blog.url == "Url-bai-viet"'>

Nếu Định dạng của trang hiện tại = trang tĩnh (item // bài viết; index // Trang index; archive // Trang lưu trữ)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 

Read More

Thêm nút share ảnh lên Pinterest vào trong ảnh bài đăng blogspot

Chèn button chia sẻ ảnh lên Pinterest, Facebook hoặc Twitter, việc chia sẻ ảnh này rất có lợi khi có 1 người muốn chia sẻ ảnh của bạn mà không cần phải thao tác nhiều lần. Việc này cũng giúp blog của bạn chuyên nghiệp hơn.

Demo:

Cách làm: Mẫu >> Chỉnh sửa html >> sau đó tìm với từ khóa </head> hoặc </body>, chèn đoạn code sau vào trước nó.

<script type="text/javascript">(function(features){var d=document,s=d.createElement('script');s.src='http://widget.symphonytools.com/widget/js/symphony.js';s.type='text/javascript';s.async='true';s.onload=s.onreadystatechange=function(){var rs=this.readyState;if (!rs || /loaded|complete/.test(rs)) try{symphony.init(features);}catch(e){}};var sc=d.getElementsByTagName('script')[0];sc.parentNode.insertBefore(s,sc);})();</script>

Kiểu 2

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Lưu lại và kiểm tra.

Read More

Các loại Thẻ data trong blogspot

Các loại Thẻ data trong blogspot là gì? cách sử dụng các loại Thẻ data trong blogspot như thế nào trong lập trình blosgpot

>> Thẻ data là thẻ được Google cung cấp để lấy hầu như toàn bộ thông tin cần thiết tại blog của chúng ta mà chúng ta nhập vào hoặc thiết lập như, bài viết, tiêu đề, địa chỉ url của bài viết, hình ảnh, ... và rất nhiều cái khác nữa. Thẻ data được sử dụng trong widget (tiện ích) nào sẽ lấy ra thông tin, tại widget đó.

Cú pháp sử dụng thẻ data
Đối với từng loại widget, thì có từng kiểu dữ liệu được lấy ra. Có 2 định dạng thẻ data có thể sử dụng

<data:tên/>

hoặc

<data:tên1.tên2/>

tên,tên1: là tên dữ liệu cần lấy ra ví dụ
<data:title/> // Lấy ra tiêu đề widget hiện tại
tên2: là tên nằm trong danh sách dữ liệu có thể lấy ra của tên1 ví dụ
<data:photo.url/> // Lấy ra địa chỉ hình ảnh
Danh sách dữ liệu của từng widget
Dưới đây là toàn bộ danh sách dữ liệu có thể lấy ra từ blog của chúng ta.

Globally Available Data (Dữ liệu có sẵn)
Page Header (Tiêu đề Trang)
Blog Posts (Bài đăng trên Blog)
Blog Archives (Lưu trữ Blog)
Profile (Hồ sơ)
Text / HTML / JavaScript
Feed (Nguồn cấp)
Picture (Hình ảnh)
Labels (Nhãn)
List (Danh sách)
Link List (Danh sách Liên kết)
Logo

Globally Available Data (Dữ liệu có sẵn)

Không giống như những loại data của thẻ widget khác, những cái bạn thấy ở đây có thể sử dụng ở bất cứ đâu trong template của bạn. Lưu ý, bạn phải thêm "blog" là dữ liệu đầu để lấy ra thông tin, ví dụ như <data:blog.title/>, v.v..

title: Tiêu đề của blog.
pageType: Định dạng của trang hiện tại. Là 'item', 'archive', hoặc 'index'.
url: Địa chỉ url của trang hiện hành.
homepageUrl: Địa chỉ trang chủ.
pageTitle: Tiêu đề của trang hiện hành. Bình thường nó sẽ vẫn là tiêu đề của blog, nhưng có thể có thêm thông tin của bài viết hoặc trang lưu trữ.
encoding: Bộ mã sử dụng cho blog, ví dụ UTF-8.
languageDirection: Một trong 2 "ltr" hoặc "rtl" tương ướng với ngôn ngữ left-to-right (viết từ tráng sang phải) right-to-left (từ phải sang trái).
feedLinks: Tự động nhận dạng feed links.

Page Header (Tiêu đề Trang)

Đây là một widget đơn giản chỉ gồm 2 dữ liệu. Bạn có thể đơn giản gọi nó như sau <data:title/> và <data:description/>.

title: Tiêu đề của blog.
description: Mô ta của blog.

Blog Posts (Bài đăng trên Blog)

Đây là thành phần chính của mọi blog, và dữ liệu thì khá là phức tạp. Mình xin nhắc lại là nó khá là phức tạp, do dó ai muốn tự tay viết lại tiện ích này thì nên tham khảo kỹ ở các template khác trước xem họ viết như thế nào. Nói thế thôi, dưới đây là danh sách dữ liệu trong widget này.

feedLinks: Danh sách feed của trang. Nếu ở trang chủ, feed này chỉ chứa bài viết; Còn nếu ở trang bài viết, nó sẽ chứa thêm cả phần feed của nhận xét. Trong mục này gồm có:
url: Địa chỉ URL của feed.
name: Tên của feed (v.d. 'Bài đăng' hoặc 'Nhận xét').
feedType: Kiểu dữ liệu của feed (Atom hoặc RSS).
mimeType: Định dạng của feed.
olderPageUrl: Nếu có bài viết cũ hơn bài viết hiện tại đang xem, đây sẽ là địa chỉ URL đến bài viết đó. Cái này chỉ xuất hiện tại trang bài viết.
olderPageTitle: Tiêu đề của bài viết cũ hơn.
newerPageUrl: Tương tự với olderPageUrl, nhưng ngược lại, đây là địa chỉ bài viết mới hơn.
newerPageTitle: Tiêu đề bài viết mới hơn.
commentLabel: Cụm từ bạn thiết lập cho nhận xét (Bố cục >> Chỉnh sửa Bài đăng trên Blog bạn sẽ thấy) v.d. "Nhận xét"
authorLabel: Cụm từ bạn thiết lập cho bài đăng, v.d. "Được đăng bởi"
timestampLabel: Cụm từ bạn thiết lập cho thời gian đăng bài, v.d. "vào lúc"
postLabelsLabel: Cụm từ giới thiệu về nhãn, v.d. "Nhãn:"
backlinksLabel: Cụm từ mô tả về backlinks của bài, v.d. "Các liên kết với bài này"
posts: Danh sách tất cả các bài viết. Mỗi bài viết gồm có những dữ liệu sau:
dateHeader: Ngày đăng của bài viết, chỉ xuất hiện khi bài viết đầu tiên đăng vào ngày đó.
id: Số thứ tự (ID) của bài viết.
title: Tiêu đề bài viết.
body: Nội dung của bài viết.
author: Tên của tác giả bài viết.
url: Địa chỉ cố định của bài viết.
timestamp: Thời gian đăng bài. Không giống như dateHeader, cái này xuất hiện ở mọi bài viết.
labels: Danh sách nhãn của bài viết. Nhãn lại gồm có các dữ liệu sau:
name: Tên của nhãn.
url: Địa chỉ URL của nhãn, địa chỉ này sẽ lấy ra toàn bộ bài viết co nhãn.
isLast: True hoặc false. Xem xét coi có phải nhãn cuối cùng trong danh sách (Hữu ích cho việc bỏ dấu phẩy nếu nó là nhãn cuối).
allowComments: 'True' (Đúng) nếu cho chép nhận xét tại bài.
numComments: Số lượng nhận xét tại bài viết hiện tại.
showBacklinks: Hiện backlinks cho bài viết hiện tại.
numBacklinks: Số lượng backlinks bài viết hiện tại.
addCommentUrl: Địa chỉ URL của 'thêm nhận xét' của bài viết hiện tại.
emailPostUrl: Địa chỉ URL của 'Gửi bài đăng qua Email' của bài viết hiện tại.
editUrl: Địa chỉ URL sửa bài viết hiện tại.
feedLinks: Danh sách feed của bài viết. (Khác với blog feedLinks ở đầu bài, nó có thể chứa feeds của nhận xét.) Mỗi feedLinks gồm có:
url: Địa chỉ URL của feed.
name: Tên của feed (v.d. 'Bài đăng' or 'Nhận xét').
feedType: Loại feed (Atom hay RSS).
mimeType: Định dạng của feed.
comments: Danh sách toàn bộ nhận xét của bài viết hiện tại (chỉ hiện ở trang bài viết). Dữ liệu gồm:
id: Số thứ tự ID của nhận xét.
body: Nội dung của nhận xét.
timestamp: Thời gian đăng nhận xét.
author: Tác giả của nhận xét, hoặc 'Ẩn danh'.
authorUrl: Địa chỉ URL vào hồ sơ của tác giả nhận xét, đương nhiên nếu không phải là ẩn danh.
deleteUrl: Địa chỉ URL dùng để xóa nhận xét.
isDeleted: Xem xét coi nhận xét đã bị xóa hay chưa. (Dùng để hiện chữ thay thế khi nhận xét đó đã bị xóa.)

Blog Archives (Lưu trữ Blog)

Các kiểu của Lưu trữ có thể thiết lập tại widget. Nếu bạn muốn thử thiết kế lại nó, đơn giản nhất nên sử dụng 'FLAT' (Danh sách phẳng), sau đó sử tùy chỉnh lại các thành phần còn lại.

title: Tiêu đề của widget.
style: Loại 'MENU', 'FLAT', or 'HIERARCHY'. (Thứ bậc, Danh sách phẳng, Trình đơn thả xuống)
data: Danh sách đối tượng của widget gòm có:
name: Tên khoảng thời gian lưu trữ, v.d. "tháng mười hai."
url: Địa chỉ URL với từng đối tượng thời gian lưu trữ.
post-count: Số lượng bài viết của một đối tượng.

Profile Widget (Hồ sơ)

Đối với blog chỉ có một tác giả, widget hồ sơ chứa các thông tin sau. Lưu ý rằng để truy cập vào các phần khác của dữ liệu hình ảnh, bạn sẽ sử dụng định dạng như sau <data:photo.url/>.

title: Tiêu đề của widget.
userUrl: Địa chỉ URL đến hồ sơ của tác giả.
location: Nơi ở trong hồ sơ của tác giả.
aboutme: Nội dung "Giới thiệu" lấy từ hồ sơ của tác giả.
displayname: Tên hiển thị của tác giả.
photo: Ảnh đại định của tác giả, gồm có các thành phần sau:
url: Địa chỉ URL của ảnh.
width: Chiều rộng ảnh, tính theo pixels.
height: Chiều cao của ảnh, tính theo pixels.
alt: Văn bản thay thế ảnh.

Đối giới blog có nhiều tác giả, widget hồ sơ chứa ít thông tin hơn về các tác giả của blog, gồm có.

title: Tiều đề của widget.
authors: Danh sách tất cả tác giả, gồm các thành phần sau:
displayname: Tên hiển thị của tác giả.
userURL: Địa chỉ URL đến hồ sơ của tác giả.

Nếu bạn muốn thiết kế một template (giao diện) có thể sử dụng chung cho một hoặc nhiều tác giả, bạn có thể sử dụng giá trị data:team để phân biệt trường hợp. v.d. <b:if cond='data:team=="true"'> (hiện nhiều tác giả) </b:if>

Text / HTML / JavaScript Widget

Tiêu đề của HTML/JavaScript widget chỉ gồm 2 dữ liệu.

title: Tiêu đè của widget.
content: Nội dung của widget.

Feed Widget (Nguồn cấp)

Nội dung feed được nạp một cách tự động bởi Google AJAX API sau khi được trả lại bởi trình duyệt. Chỉ có thể làm đẹp lại bằng CSS.

title: Tiêu đè của widget
feedUrl: Địa chỉ URL của feed.

Picture Widget (Hình ảnh)

Widget hình ảnh chỉ chứa một hình ảnh, và chứa các dữ liệu của ảnh đó.

title: Tiêu đề của widget.
sourceUrl: Địa chỉ URL của hình ảnh.
width: Chiều rộng ảnh, tính theo pixels.
height: Chiều cao ảnh, tính theo pixels.
caption: Caption của ảnh.

Labels Widget (Nhãn)

Widget nhãn sẽ chứa toàn bộ nhãn đang được sử dụng trên blog.

title: Tiêu đề widget.
labels: Danh sách nhãn, mỗi nhãn gồm có:
name: Tên của nhãn.
count: Số lượng bài viết của nhãn.
url: Địa chỉ URL của nhãn.

List Widget (Danh sách)

Hình thức đơn giản nhất của một danh sách. Mỗi mục chỉ chứa một thành phần duy nhấ là văn bản, mà không cần bất kỳ loại dữ liệu khác.

title: Tiêu đề widget.
items: Danh sách tất cả các mục.

Link List Widget (Danh sách liên kết)

Danh sách liên kết thì sử dụng cũng khá đơn giản, nó chỉ bao gồm 2 thành phần chỉnh: tên và địa chỉ.

title: Tiêu đề của widget.
links: Danh sách liên kết, trong nó gồm có:
name: Tên của liên kết.
target: Địa chỉ URL của liên kết.

Logo Widget

Cái đơn giản nhất trong tất cả các loại ở đây đây, chỉ có đúng một thành phần.

fullButton: Địa chỉ URL của nút mà bạn đã chọn.

Nguồn: http://www.kslzone.net/2014/01/the-la-data-la-gi-va-cach-su-dung-no.html

Read More

Cách thay font chữ trong blogspot

Hey! Chào mọi người, lâu rồi mình không viết bài cho blog, hôm nay có hứng thú nên tiếp tục chia sẻ cho các bạn 1 số thủ thuật blogspot nhỏ để tạo một blogspot đẹp
Chắc hẳn đa số các bạn khi tải 1 Template blogspot (thường là từ các trang nước ngoài) về cài đặt xong file xml, ra xem cái giao diện blog của mình nó thế nào thì thốt lên rằng...Ôi nó đẹp quá,.... nhưng sao cái font này nó lại méo mó, thậm chí là có các ô vuông, hoặc không hài lòng lắm với kiểu font như vậy? làm sao để thay đổi font chữ đây?

Cách thay font chữ trong blogspot

Mình sẽ chia sẻ cách đơn giản nhất để có thể chỉnh sửa font chữ trong blogspot. Cách này khá cơ bản chỉ cần bạn hiểu sơ qua 1 số mã css là bạn có thể chỉnh sửa tùy ý theo ý của mình.

Thay font chữ trong blogspot

(Một số thuộc tính css của font bạn có thể tham khảo ở trang sau đây: Http://www.w3schools.com/css/css_font.asp)

Để có thể sửa font cách nhanh nhất bạn có thể dùng trình duyệt Chrome  và sử dụng chức năng Developer Tools (nhấn phím 12 hoặc bấm chuột phải chọn "kiểm tra phần tử")

Bạn nhấn chuột phải vào dòng chữ cần chỉnh font >> kiểm tra phần tử

Khi đó trình duyệt của bạn sẽ hiện lên 1 khung ở dưới trình duyệt của bạn:

Ví dụ: mình muốn chỉnh font chữ của dòng chữ" Follow Share And Tricks " Trên blog Chiase-thuthuat.blogspot.com luôn nhé:

Bạn chú ý, sau khi nhấn kiểm tra phần tử , sẽ xuất hiện nay ở trong khung trên 1 đoạn code như sau:

Nhìn sang phía bên phải sẽ thấy 1 đoạn code nhỏ như thế này:

Đây chính là phần mà bạn cần thay đổi:

Ở trên font của mình sẽ hiện đang là font Tahoma và mẫu chữ sẽ là

 giờ mình sẽ chuyển qua font Times xem có gì thay đổi không: (Để đổi font bạn kick vào dòng font muốn đổi )

Giờ xem kết quả:

Bạn đã thấy sự khác nhau chưa?

Nhưng chú ý: đây chỉ là chỉnh sửa hiện thị trực quan trên trình duyệt của bạn thôi, template của bạn chưa hề thay đổi gì cả, giờ chỉ cần bạn nhấn f5 là blogs của bạn sẽ trở về ban đầu mà không hề sứt mẻ gì. Vậy nãy giờ làm công cốc à? Không ! giờ đến bước quan trọng đây.

Bạn giữ nguyên như vậy, chú ý phần mình khoanh màu xanh nhé:

Bạn copy lại, vào phần quản trị blogspot >> mẫu >> chỉnh sửa html >> nhấn ctrl + f

Khi đó nó sẽ hiện 1 khung tìm kiếm ở góc phần sửa html, dán đoạn lúc nãy đã copy và nhấn Enter

Sẽ được như hình sau:

Bạn thấy giống gì lúc nãy không? giờ bạn có thể tùy chỉnh font chữ cần sửa như ý muốn.

Khi sửa xong hãy luôn nhớ 1 điều là nhấn nút lưu mẫu để hoàn thành

Ngoài ra bạn có thể thêm 1 số thuộc tính như Font-size, font-weightm, Color.... Tùy ý đến khi thấy hài lòng.

Rất phức tạp phải không, giờ bạn đang cảm thấy hào hứng hay chán nản? Nếu hào hứng hãy share bài viết này cho bạn bè của mình, còn đang chán nản hãy comment ở dưới để mình có thể hỗ trợ.

Chúc bạn có thể dễ dàng thay font chữ trong blogspot của mình được hài lòng và hài hòa nhất.

Read More

Hướng Dẫn Tạo Website Bán Hàng Trong 13 Phút

Tạo website bán hàng vô cùng quan trọng - vậy đối với những bạn mới bắt đầu mà chưa có kinh phí thì làm sao. Mình nghĩ nên chỉ mua cái tên miền và kinh doanh thử xem sao rồi tính đến việc phát triển.

Link DEMO | Link DOWNLOAD

Hướng Dẫn Tạo Website Bán Hàng Trong 13 Phút

VIDEO HƯỚNG DẪN 

Read More

Tiện Ích Popular Posts dạng Slides trượt dọc cho Blogger

Bước 1: Thêm widget Popular Posts vào blogspot của bạn!
1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
1.5. Chọn số bài hiển thị là 4 bài nha.
1.6- Lưu tiện ích lại.

Bước 2: Tùy chỉnh Popular Posts Rotating Slides cho blogspot của bạn!
2.1- Thêm tiện ích HTML/Javarscip và dán code bên dưới vào.

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-QE09yCotDp3qymA7QwGYgB37TCu6B_ZN4XudNgFI5leRj5Z5zGhq95Gp96Tu6xlahqsahlhjW9SCW_RPDc3yEH7RUrYbLcFl0aCPAy8t5_qFi1EwRd3qQMJ7dK3UGObnZyenWaFEFw/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

2..2- Lưu tiện ích lại.
2.3- Di chuyển thiện ích HTML/Javarscrip này lên trên tiện ích Popular posts các bạn đã thêm ở bước 1. như hình dưới đây:

Bước 3 » Tùy chỉnh giao diện hiển thị của tiện ích:

• height:310px; là chiều cao của box bài viết.
• width:310px là chiều rộng của khung tiện ích.
• Để thay đổi độ rộng của đoạn văn bản bạn thay đổi width:290px;. Lưu ý phần này nhỏ hơn độ rộng của khung tiện ích bên trên 20px. Trong ví dụ này chiều rộng của khung là 310px và chiều rộng văn bản này là 290px.
• Để thay đổi màu sắc tiêu đề, màu sắc liên kết và kích cỡ chũ bạn lần lượt chỉnh sửa  color:#7CA2C4; font:bold 12px verdana; .
• Để thay đổi kích thước và màu đường viền ảnh thumbnail bạn lần lượt chỉnh sửa: border:2px solid #7CA2C4
• Để thay đổi kích thước font chữ, và màu sắc của đoạn văn bản mô tả lần lượt chỉnh sửa code màu hồng.
• Nếu màu nền blog của bạn là màu đen hoặc màu tối thì hãy thay thế mã:

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-QE09yCotDp3qymA7QwGYgB37TCu6B_ZN4XudNgFI5leRj5Z5zGhq95Gp96Tu6xlahqsahlhjW9SCW_RPDc3yEH7RUrYbLcFl0aCPAy8t5_qFi1EwRd3qQMJ7dK3UGObnZyenWaFEFw/s400/popular+posts.jpg) repeat-x; 

Thành mã sau: 

background:#fff; 

Thay thế #fff thành màu nền của bạn.

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

Read More

Popular Post cho Blogger có hiệu ứng đẹp mắt

Tiện ích Popular Post trong bài viết này mình giới thiệu có hiệu ứng đẹp mắt và hữu dụng. Cụ thể, tiện ích Popular Post này có hình ảnh thu nhỏ và hiện thị tiêu đề bài viết, nội dung tóm tắt khi bạn rê chuột vào.

Popular Post cho Blogger có hiệu ứng đẹp mắt

Bước 1: Trước tiên bạn cần tạo tiện ích Popular Post

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn Thêm Tiện ích (Add Widget)

4. Bấm chọn vào bài đăng phổ Biến (Popular Posts)

5. Save lại

Bước 2: Tiếp theo, chúng ta sẽ tạo hiệu ứng cho tiện ích vừa tạo

1. Đăng nhập vào blog

2. Chọn mẫu (template)

3. Chọn chỉnh sửa HTML.

4. Chèn đoạn code dưới đây trước thẻ ]]></b:skin> Sau đó Lưu lại và xem kết quả

.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}

Read More

Xóa Auto Readmore Trong Blogger

Đôi lúc bạn cần những template không cần AUTO READMORE để dùng cho việc seo landing hoặc các website thông tin dễ dàng hơn cho khách hàng. Vì vậy mình sẽ cung cấp giải pháp Xóa Auto Readmore Trong Blogger.

Các bước thực hiện các bạn làm như sau:

1- Vào thiết kế (Design)

2- Chỉnh sửa HTML (Edit HTML)

3- Mở rộng tiện ích mẫu 

Sau đó các bạn tìm đến đoạn Code có dạng tương tự như sau:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>read more &#187;</a>
</div>
</b:if>
</b:if>

Bạn thêm ký tự <!-- và --> vào 2 đầu của phần chữ màu xanh bên trên, khi đó các bạn được như sau

b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmore-wrap'>
<!-- <a class='readmore' expr:href='data:post.url'>read more &#187;</a>  -->
</div>
</b:if>
</b:if>

Tiếp theo các bạn tìm đến đoạn code sau

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  
      </div>
    </b:if>

làm tương tự như với code trên

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<!--   <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  -->
      </div>
    </b:if>

Lưu Template lại và xem thành quả!

Read More

Tạo Auto Readmore cho Blogspot

Có những template rất đẹp và bạn rất thích nhưng chỉ có một điểm khiến bạn đâu đầu đó là, không có Readmore mà bài viết dài xuống dưới. Bài viết này được giải quyết được vấn đề đấy. Tạo Auto Readmore cho Blogspot mang đến cho bạn một giải pháp tuyệt vời để giúp bạn không còn gặp vấn đề khó khăn ấy nữa.

Tạo Auto Readmore cho Blogspot

Tiến Hành Tạo Auto Readmore cho Blogspot

1. Đăng nhập vào tài khoản Blogger

2. Vào mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML)

3. Tìm dòng code có dạng tương tự như sau:

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

- Thay thế toàn bộ đoạn ở trên bằng đoạn code bên dưới:

<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>

 Thay chữ Đọc tiếp thành chữ mà bạn muốn như: Đọc thêm bài viết, xem thêm,...

6. Tiếp theo, chèn đoạn CSS sau phía trên thẻ ]]></b:skin>

a.jump-link {color:#fff;text-decoration:none}
.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block; 
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423)); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; 
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }

.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810)); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }

.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810)); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }

Save template lại và xem kết quả.

- P/s: Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng hoàn toàn có thể  áp dụng code này. Nếu có câu hỏi nào về chủ đề này thì comment bên dưới nhé

Nguồn: Nam Tạ

Read More

Thêm bài viết liên quan Mới Cũ - Hai cột chuyên nghiệp Blogspot

Việc thêm bài viết liên quan sẽ giúp cho khách hàng của bạn bị cuốn theo bạn - và không đi website khác. Bạn cũng biết đấy nếu website của bạn làm lâu rồi thì bài viết đã gần 1 - 2 năm thậm chí nhiều năm hơn sẽ không còn hiển thị. 

Việc Thêm bài viết liên quan Mới Cũ - Hai cột chuyên nghiệp Blogspot sẽ giúp bạn giải quyết được điều đó.

Thêm bài viết liên quan Mới Cũ - Hai cột chuyên nghiệp Blogspot

Thêm Bài viết liên quan mới và cũ cùng chủ đề cho blogger.

1/ Đăng nhập vào blog

2/ Chọn mẫu (template)

3/ Chọn chỉnh sửa HTML => Chọn mở rộng tiện ích mẫu

4/ Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:

#related-posts-block ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1IQh0CfKQl0-knhzW61DeIBgV04xiumm8YWWxpoC5_7flQrEX_ROA_ExSq3k6ixbI0AdGXrXPasxB3yADyxZP3JO_Mxc1q67eUIPlgu8Y8q7m7avDG0WBJ6yQCZ1Wnjz_xcXjR02zHBI4/s1600/bg_other_namkna-blogpot.jpg) repeat-x;margin:0px 0 0 0;padding:6px 0 0 0;list-style:none}#related-posts-block li{margin:0 0 0 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRiBJhGNkvmpolpF17SDYeGnVXA82DD0SnDhIRqPUg-uMxYBx-ItQnsWOYRDm39tzx3u8QBzHnKUUWbwYMiPmomWBNTCVhKhyphenhyphenRqEXIWeyg8JweSnTMMY9hne5qzDhPjrALaO_1_LRi00i/s1600/li_namkna-blogspot-com.png) 0 5px no-repeat;padding-left:15px}#related-posts-block{line-height:1.5;margin:0 0;font-size:11px;color:#7c7b7b}#related-posts-loading-text{font-size:12px;text-align:center;color:#002c28}#related-newest-href{margin:10px 0 2px}#related-newest-title{font-size:12px;margin:5px 0 0 0;color:#033947}#related-posts-block #related-newest-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}#related-posts-block #related-newest-href a:hover{color:#00f}#related-older-href{margin:10px 0 2px}#related-older-title{font-size:12px;margin:5px 0 0 0;color:#033947}#related-posts-block #related-older-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}#related-posts-block #related-older-href a:hover{color:#00f}#related-posts-block > div {float: left;width: 48%;}

5- Tìm thẻ 1 trong 4 thẻ sau:

Thẻ 1:

<div class='post-footer'>

Thẻ 2:

<div class='post-footer-line post-footer-line-1'>

Thẻ 3:

<div class='post-footer-line post-footer-line-2'>

Thẻ 4:

<div class='post-footer-line post-footer-line-3'>

=> Thêm và sau 1 trong các thẻ trên đoạn code bên dưới:

<script type='text/javascript'>
//<![CDATA[
var showdate = true;
var max_post = 8;
//]]>
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>

<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJsK3_teYG5vFFuAXKRr6K8ZMiCrAx4RoSTwHz5FTDV1QUcoP_Mdue53UmWtHxjfTapdmk-0hEb05n9dB_SNSQ0A40m0_cPlwRdCjUcJaega3lyFWNdP6byqNuVYM9cxnEhx7AJOXRi7y/'/></div><div id='related-newest-href'><div id='related-newest-title'/></div><div id='related-older-href'><div id='related-older-title'/></div></div></b:if>

<script type="text/javascript">
    //<![CDATA[
function format(ptime){ 
 return ptime.substr(0,19);
}

function formatdate(d){
 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var m = parseInt(d.substring(5,7),10);
 for(var j=0; j<month.length;j++){
  if(m==month[j]){
   m = month2[j]; break;
  }
 }
 return d.substring(8,10) + "-" + m + "-" + d.substring(0,4);
}

function getRelatedNewestLinks(json){
 var entry = json.feed.entry;
 if(entry){
  for(var k=0;k<entry.length;k++){
   var li = document.createElement("li");
   if(showdate){
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) +'</i>';
   }
   else {
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
   }
   if(!checkRelaxLinks("related-newest-href",entry[k].link[4].href)){
    document.getElementById("related-newest-href-ul1").appendChild(li);
    document.getElementById("related-newest-title").innerHTML = "<b>Các bài viết mới cùng chủ đề</b> ";
                                
   }
  }
 } else {
  document.getElementById("related-older-title").innerHTML = "<b>Không có bài viết mới nào cùng chủ đề</b>";
 }
}

function getRelatedOlderLinks(json){
 var entry = json.feed.entry;
 if(entry){
  for(var k=0;k<entry.length;k++){
   var li = document.createElement("li");
   if(showdate){
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) + '</i>';
   }
   else {
    li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
   }
   if(!checkRelaxLinks("related-older-href",entry[k].link[4].href)){
    document.getElementById("related-older-href-ul2").appendChild(li);
    document.getElementById("related-older-title").innerHTML = "<b>Các bài viết cũ cùng chủ đề </b>";
   }
  }
 } else {
  document.getElementById("related-older-title").innerHTML = "<b>Không có bài viết cũ nào cùng chủ đề</b>";
 }
        document.getElementById("related-posts-loading-text").style.display = "none";
}

function createRelatedJson(min_or_max,cRJ_label,fcn_callback,cRJ_max){
 var script = document.createElement("script");
 script.src = "/feeds/posts/summary/-/"+escape(cRJ_label)+"?orderby=published&max-results="+cRJ_max+"&published-"+min_or_max+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+fcn_callback;
 script.type = "text/javascript";
 document.getElementsByTagName("head")[0].appendChild(script);

}

function checkRelaxLinks(cid,clink){
 var check = false;
 var u = document.getElementById(cid);
 var a = u.getElementsByTagName("a");
 for(var i=0;i<a.length;i++){
  if(a[i].href==clink){
   check = true;
   break;
  }
 }
 var url = location.href.split(".html")[0]+".html";
 if(clink==url) check = true;
 return check;
} 

function createRP(){
 var postLabel = document.getElementById("post-labels-for-related").innerHTML.split(',');
 var max_ = Math.round(max_post/postLabel.length);
 var ul1 = document.createElement('ul');
 ul1.id = 'related-newest-href-ul1';
 document.getElementById('related-newest-href').appendChild(ul1);
 for(var i=0; i<postLabel.length;i++){
   createRelatedJson("min",postLabel[i],"getRelatedNewestLinks",max_);
 }
 var ul2 = document.createElement('ul');
 ul2.id = 'related-older-href-ul2';
 document.getElementById('related-older-href').appendChild(ul2);
 for(var j=0; j<postLabel.length;j++){
   createRelatedJson("max",postLabel[j],"getRelatedOlderLinks",max_);
 }
        
}
createRP();
    //]]>
</script>

Tùy chỉnh:

var showdate = true; Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False

var max_post = 8; Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích

6- Lưu lại và xe kết quả!

Nguồn: Nam Tạ

Read More

Thêm Drop Down Menu Blogger Mượt và Đẹp

Trong bài viết này tôi sẽ chia sẻ với một trình đơn thả xuống màu xám tuyệt đẹp được tạo ra với CSS và JavaScript. Tôi cũng sử dụng menu này trên blog của chúng tôi. Trình đơn thả xuống cung cấp điều hướng dễ dàng và gọn gàng bằng cách tổ chức và tính năng liên kết thể loại quan trọng của blog của bạn. Với sự gia tăng sử dụng các loại và các thẻ, tổ chức liên kết trong một menu đơn giản là khó khăn do trình đơn mà chúng tôi chia sẻ hôm nay cung cấp cho bạn dễ dàng kiểm soát và các hàng cột hiển thị của nó. 1. Thêm Drop Down Menu Style Sheet. 2. Thêm JavaScript trong đầu mục. 3. Cuối cùng Thêm HTML Code Đối với Liên kết. 

Đó là nó trong ba bước, bạn đã làm xong. Luôn luôn Ghi Trước khi chỉnh sửa mẫu của bạn Thực hiện một sao lưu mẫu (làm thế nào để thực hiện một mẫu sao lưu). 

1. Tới Blogger của bạn Bảng điều khiển >> Mẫu >> Chỉnh Sửa Mẫu >> Tiến Nhấn phím Ctrl + F và dán đoạn mã sau vào mẫu của bạn.

]]> </ b: skin>

2. Dán đoạn mã sau trước / trên "]]> </ b: skin>"

/*Start Drop Down CSS by http://bl0gger-tricks.blogspot.com*/

.nav{

width:100%;

height:36px;

background:#f9f9f9;

border-top:1px solid #e4e4e4;

border-bottom:1px solid #e4e4e4;

box-shadow: 0 2px 2px #eee;

z-index:1;

}

.menu{

width:1050px;

list-style:none;

font:16px Source Sans Pro,Arial,Verdana;

font-weight: normal;

text-align:center;

margin:0 auto;

}

.menu a{

float:left;

color:#000000;

text-decoration:none;

width:100px;

line-height:36px;

-moz-transition:.2s linear;

-webkit-transition:.2s linear;

transition:.2s linear;

-o-transition:.2s linear;

}

.menu a:hover,li.menuhover a{

color:#111;

background:#efefef;

-moz-transition:.2s linear;

-webkit-transition:.2s linear;

transition:.2s linear;

-o-transition:.2s linear;

}

.menu li,.menu li span{

position:relative;

float:left;

width:100px;

z-index:2;

border-left:1px solid #e3e3e3;

}

.menu li span{

border-right:1px solid #e3e3e3;

border-left:none;

}

.menu ul{

display:none;

position:absolute;

font:normal 16px Source Sans Pro,Arial,Verdana;

font-weight: normal;

top:36px;

left:0;

background:#fbfbfb;

display:none;

list-style:none;

box-shadow:0 2px 3px #ccc;

}

.menu ul li{

float:none;

border-top:1px solid #ccc;

width:150px;

}

.menu ul li a{

float:none;

display:block;

background:none;

line-height:36px;

width:137px;

text-align:left;

padding-left:10px;

color:#444;

}

.menu ul li a:hover{

background:#fbfbfb;

color:#000000;

border-left:5px solid #088A4B;

-webkit-transition:ease-in 0.15s all;

-moz-transition:ease-in 0.15s all;

-o-transition:ease-in 0.15s all;

-ms-transition:ease-in 0.15s all;

transition:ease-in 0.15s all;

text-shadow:0 1px 0 #fefefe

}

/*End Drop Down CSS*/

Lưu ý: Trong phần CSS bạn có thể chỉnh sửa kích thước chữ, Font style, màu chữ, màu nền. Nếu bạn muốn chỉnh sửa lại bình luận của bạn dưới đây. 

3. Tìm đoạn mã sau vào mẫu của bạn. 

</head>

4. Dán Script sau trước / trên "</ head>"

<script type='text/javascript'>

//<![CDATA[

var dropd={};function T$(i){return document.getElementById(i)}function T$$(e,p){return 

p.getElementsByTagName(e)}dropd.dropdown=function(){var p=

{fade:1,slide:1,active:0,timeout:200},init=function(n,o){for(s in o){p[s]=o[s]}

p.n=n;this.build()};init.prototype.build=function(){this.h=[];this.c=[];this.z=1000;var s=T$

$('ul',T$(p.id)),l=s.length,i=0;p.speed=p.speed?p.speed*.1:.5;for(i;i<l;i++){var h=s

[i].parentNode;this.h[i]=h;this.c[i]=s[i];h.onmouseover=new Function(p.n+'.show('+i

+',1)');h.onmouseout=new Function(p.n+'.show('+i+')')}};init.prototype.show=function(x,d){var 

c=this.c[x],h=this.h[x];clearInterval(c.t);clearInterval(c.i);c.style.overflow='hidden';if(d)

{if(p.active&&h.className.indexOf(p.active)==-1){h.className+=' '+p.active}if(p.fade||p.slide)

{c.style.display='block';if(!c.m){if(p.slide)

{c.style.visibility='hidden';c.m=c.offsetHeight;c.style.height='0';c.style.visibility=''}else

{c.m=100;c.style.opacity=0;c.style.filter='alpha(opacity=0)'}c.v=0}if(p.slide){if(c.m==c.v)

{c.style.overflow='visible'}else{c.style.zIndex=this.z;this.z++;c.i=setInterval(function()

{slide(c,c.m,1)},20)}}else{c.style.zIndex=this.z;this.z++;c.i=setInterval(function(){slide

(c,c.m,1)},20)}}else{c.style.zIndex=this.z;c.style.display='block'}}else{c.t=setTimeout

(function(){hide(c,p.fade||p.slide?1:0,h,p.active)},p.timeout)}};function hide(c,t,h,s){if(s)

{h.className=h.className.replace(s,'')}if(t){c.i=setInterval(function(){slide(c,0,-1)},20)}

else{c.style.display='none'}}function slide(c,t,d){if(c.v==t){clearInterval(c.i);c.i=0;if

(d==1){if(p.fade){c.style.filter='';c.style.opacity=1}c.style.overflow='visible'}}else{c.v=(t-

Math.floor(Math.abs(t-c.v)*p.speed)*d);if(p.slide){c.style.height=c.v+'px'}if(p.fade){var 

o=c.v/c.m;c.style.opacity=o;c.style.filter='alpha(opacity='+(o*100)+')'}}}return{init:init}}();

//]]>

</script>

5. Thêm Code HTML để hiển thị MENU DROP - thêm vào nơi bạn cần muốn SHOW MENU trên trang chủ.

<!-- Start - Navigation Menu  -->

<div class='nav'>

<ul class='menu' id='menu'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#>Blogger</a></li>

<li><a href='#>Adsense</a></li>

<li><a href='#>SEO Tips</a></li>

<li><a href='#'>Templates</a></li>

<li><a href='#'>Widgtes</a></li>

<li><a href='#>Downloads</a></li>

<li><a href='#'>Tools&#187;</a>

<ul>

<li><a href='#>HTML Editor</a></li>

<li><a href='#>Escape Tool</a></li>

<li><a href='#>ParseTool</a></li>

<li><a href='#>Color Code</a></li>

</ul>

</li>

</ul>

</div>

<!-- End - Navigation Menu -->

<script type='text/javascript'>

var dropdown=new dropd.dropdown.init(&quot;dropdown&quot;, {id:&#39;menu&#39;,

active:&#39;menuhover&#39;});

</script>

Lưu Lại và Xem Kết Quả.
Các widget là rất dễ dàng để được chỉnh sửa. Để thay đổi các liên kết tiêu đề chỉ đơn giản là thay thế các văn bản với tiêu đề trang của bạn và thay thế các dấu thăng "#" với các liên kết tương ứng. 

Cần giúp! ... 
Đối với bất kỳ sự giúp đỡ thêm xin vui lòng gửi ý kiến ​​của bạn trong hộp bình luận dưới đây. Đừng quên để đăng ký Rss Email Dịch vụ của chúng tôi hoặc theo tôi trên mạng xã hội.

Nguồn: My Blogger Tricks

Read More