Thứ Sáu, 24 tháng 1, 2014

[wordpress] Việt hóa plugin shop Woocommerce


Việt hóa plugin shop Woocommerce
WooCommerce là một plugin dùng cho wordpress mã nguồn mở được đưa ra vào 27 tháng 9 năm 2011. WooCommerce được thiết kế cho các website worspress bán hàng nhỏ và vừa.
Cách việt hóa Việt hóa plugin shop Woocommerce:

Bước 1: kiếm file Việt Hóa Woocommerce
Tải file ngôn ngữ việt cho Woocommerce tại đây

Bước 2: chép file Việt hóa vào host
Giải nén Giải nén file vi_VN-Woocommerce.rar được 2 file:
woocommerce-vi_VN.po
woocommerce-vi_VN.mo
- Đối với phiên bản Woocommerce 1.x:
copy 2 file này vào thư mục wp-content/plugins/woocommerce/languages

- Đối với phiên bản Woocommerce 2.x:
copy 2 file Việt hóa vào thư mục wp-content/plugins/woocommerce/i18n/languages
Việt hóa plugin shop Woocommerce

Bước 3: Thiết đặt file cấu hình Việt hóa plugin shop Woocommerce
file wp-config.php ở thư mục gốc tìm dòng
define('WPLANG', '');
sửa thành
define('WPLANG', 'vi_VN');


Bước 4: Thiết đặt trong plugin Woocommerce
Woocommerce -> Settings -> General -> Vietnam
Việt hóa plugin shop Woocommerce

Thao trinh
https://github.com/thachpham92/Woocommerce-Vietnamese
Thứ Bảy, 31 tháng 8, 2013

Blogger - Thủ thuật loại bỏ hoàn toàn css mặc định của blospot


Blospot là một mã nguồn đóng, cho nên dù muốn hay không bạn cũng có thể phải sử dụng css mặc định của nó nếu bạn không khai báo thêm.

Thủ thuật này sẻ giúp bạn loại bỏ hoàn toàn css mặc định của blogspot. Giúp bạn design một site mới tinh không bị ảnh hưởng bất kỳ thuộc tính HTML + CSS nào đã có sẵn.
Blogger - Thủ thuật loại bỏ hoàn toàn css mặc định của blospot
Rất đơn giản bạn thay
<b:skin>
<![CDATA[
/* nội dung css trong đây như mặc định*/
]]>
</b:skin>
Sửa thành:
<b:skin><![CDATA[ ]]></b:skin>
<style id='page-skin-1' type='text/css'>
<!--
Tất cả nội dung css mặc định như ở trên được bỏ vào đây hoặc bạn viết css mới cho riêng bạn
-->
</style>

Tuy nhiên có một điều lưu ý rằng, nếu bạn không đảm bảo được tất cả css mình tự viết ra sẽ khiến sire blogspot của bạn hoạt động đúng thì không nên áp dụng. Mặc định css blogspot cực nhiều để đảm bảo nó hoạt động tốt dù bạn không css tý nào.
Thường áp dụng thủ thuật này vào mục đính tạo trang blog không theo các truyền thống như dùng làm demo HTML CSS JAVASCRIPT hay một thứ gì đó mà các bài viết độc lập với nhau, không liên quan nhau....
Để áp dụng triệt được để thủ thuật này bạn phải áp dụng cùng thủ thuật ẩn 2 file css mặc định blogger đã giới thiệu trong bài trước.

Blogger - Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) để đạt chuẩn HTML5


Về vấn đề Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) thì chắc chỉ ai đã từng đại tu blog mình để nó đạt chuẩn HTML5 thì mới hiểu được nó. Nhưng hôm nay, bạn có thể bạn chưa từng "bảo dưởng" blog của bạn nhưng bạn đã biết cách doạt được tấm vé chuẩn HTML5 sau khi test trên W3C.
Blogger - Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) để đạt chuẩn HTML5

Hai file css mặc định và chút js kéo theo sau nó có thể đa số các bạn không cần hoặc tự tin với phần SKIN chắc chắn của mình hoặc cũng có thể bạn "bảo thủ" với chiến lược "tôi thích thế, tôi thích thoáng, tôi xem được là được" thì có thể áp dụng thủ thuật này.

Sau khi dọn dẹp hết lỗi trong quá trình đưa nó đạt chuẩn HTML5 thì chắc hẳn bạn sẻ vướng đoạn này. Chúng ta sẻ quẳng nó xuống dưới cùng, nhưng vứt làm sao được khi mà code đó tự sinh ra trên host. Nghĩ mãi chẳng biết làm cách nào để vô hiệu hóa nó? Trong giới blogger cũng chưa hề nói đến việc này, view soude ngay chính site chủ các blogger, có tiếng đông người thăm và lắm comment cũng thấy họ vẫn để mặc định. Tất cả các template chia sẻ trên mạng cũng không làm điều này. Tuy nhiên tình cờ test thử blog duypham.info thì thấy đã đạt chuẩn với HTML5 với số điểm 0 ERROR nhưng chưa bao giờ tiết lộ điều này, ngay cả với template đã chia sẻ cũng để mặc định. vậy thì chắc có cách thực hiện được cho dân blogger(blospot).

Để ý rằng Code này tự động có, nó luôn bám sát ngay phần trên của </HEAD> và phía cuối cùng của <BODY>  (tức ngay trên </BODY>) luôn có đoạn bị ẩn. Như vậy chúng ta sẽ tạo </HEAD> giả để đánh lừa nó để nó bám theo, chuyển code trên vào phần code ẩn này bằng cách khá đơn giản như sau:
Thay
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Thành
<html>
&lt;head&gt;
...
&lt;/head&gt;
&lt;body&gt;
...
&lt;!--<head/>--&gt;
&lt;!--<body/>--&gt;
&lt;/body&gt;
</html>

Blogger - Thủ thuật đánh lừa nơi đặt 2 file CSS mặc định của blogger(blospot) để đạt chuẩn HTML5

Dấu ... là các code khác, không liên quan, ta để nguyên.
Chúc bạn thành công trong con đường đạt chuẩn HTML5, nếu bạn không cần chuẩn HTML5 thì cũng không cần làm điều này làm gì hoặc chỉ cần chuẩn HTML5 non trừ lỗi này cũng được thì không cần thực hiện thủ thuật này.

Blogger(blospot) - Thủ thuật loại bỏ all-head-content để đạt chuẩn HTML5


Một trong những loạt bài tối ưu hóa blogger(blogspot). Tôi sẽ giới thiệu các bạn làm đơn giản hóa phần HEAD để nó không rườm già như HEAD mặc định mà vẫn đảm bảo seo tốt thậm trí blogspot đạt chuẩn HTML5 của tổ chức W3C.
Chắc nhiều bạn từng mò mẫm view soude (xem code) thì nhận thấy rằng phần đầu blogger(blogspot) thường có đặc trưng đoạn javascript khá lằng nhằng và rườm già.
 Blogger(blospot) Thủ thuật loại bỏ all-head-content
Tất nhiên mọi thứ như thế đều có lý do riêng, nhưng không phải ai cũng cần đến thế nhất là sự hiện diện của js và 2 link application phía cuối.
Chúng ta sẽ hạ bệ nó bằng cách loại bỏ
<b:include data='blog' name='all-head-content'/>
Bỏ nó rồi sẽ gọn mắt thôi nhưng không tốt cho seo nên ta thay thế toàn bộ code phần đầu từ dòng đầu tiên đến tận ngay trước <b:skin> <![CDATA[ .... bằng dãy code sau:
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width'/>
    <!-- <b:include data='blog' name='all-head-content'/> -->
<b:if cond='data:blog.pageTitle == data:blog.title'>
 <title><data:blog.title/></title>
<b:else/>
 <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <meta content='noindex, nofollow' name='robots'/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <meta expr:content='data:blog.title' name='keywords'/>
   <meta content='index, follow' name='robots'/>
   <link rel='canonical' expr:href='data:blog.homepageUrl'/>
  </b:if>
 <b:else/>
  <b:if cond='data:blog.pageTitle != data:blog.title'>
   <meta expr:content='data:blog.pageName' name='keywords'/>
   <meta content='index, follow' name='robots'/>
  </b:if>
 </b:if>
</b:if>
<link rel="alternate" type="application/atom+xml" title="bendoi.vn - Atom" href="/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml"  title="bendoi.vn - RSS"  href="/feeds/posts/default?alt=rss" />

 Blogger(blospot) Thủ thuật loại bỏ all-head-content
Thực ra bạn để
<b:include data='blog' name='all-head-content'/>
Cũng chẳng sao cả, nhưng site bạn khó mà đạt chuẩn với chuẩn HTML5 mới mớ đống link mặc định của blogger ( blogspot ) và cả đoạn javaScript trên nữa.

Thứ Bảy, 3 tháng 8, 2013

Công cụ dành cho nhà phát triển wordpress - Thesis


Thesis

Thesis là gì ?

Nó không phải tên của 1 plugin, và nó cũng chẳng phải tên của một template. Plugin và template là hai thứ mà bất cứ ai "nhúng tay" vào wordpress cũng luôn sục sạo tìm kiếm.
Vậy thesis là gì? Nó là một công cụ dành cho nhà thiết kế wordpress. Lâu nay chúng ta thường nghĩ rằng để tạo ra plugin hay template, chúng ta sẽ phải code lại code rồi thử rồi lại sửa đến khi ưng thì thôi.
Ngày nay đã có thesis giúp bạn rút ngắn quá trình này, mọi việc sẽ trở nên trực quan hơn.

Thesis hợp với những ai ?

Thesis hợp với những người thiết kế wordpress chuyên nghiệp, bạn cần những kỹ năng sâu một chút về thiết kế wordpress để làm chủ công cụ này thuận lợi hơn. Cũng như phần lớn các mã nguồn mở thiết kế web khác, nó đòi hỏi bạn phải tường minh HTML, CSS, javascript, PHP, MySQL.

Thesis được bán với giá không rẽ so với mặt bằng thu nhập của dân Việt Nam. Hiện nay có 3 gói chính, dao động từ khoảng 100$ đến 200$, nói chung cần hơn 4 tr để bạn sở hữu sản phẩm này.
Trang chủ http://diythemes.com/
Tuy nhiên vì điều kiện tài chính hạn hẹp, bạn vẫn muốn tiềm hiểu và tham khảo thì có thể mạo hiểm down sản phẩm mà mình sưu tầm tại đây.
Bản Thesis 2.0:
  • http://adf.ly/TKuLH
  • http://j.gs/2cuZ
  • http://q.gs/4dMb1
Bạn có thể xem qua một số video để biết cách thức làm việc với thesis

...

thaotrinh
blog.bendoi.vn
Thứ Bảy, 27 tháng 7, 2013

Các phần mềm bảo vệ wordpress

Các phần mềm bảo vệ bảo mật wordpress Tôi sẽ không giới thiệu cụ thể chi tiết đặc điểm của tường phần mềm dạng này vì: - Bạn quan tâm đến vấn đề này, bạn đã có những kỹ năng cơ bản về wordpress nên ko cần giới thiệu chi tiết. - các phần mềm bảo mật luôn thay đổi & nâng cấp nhanh hơn bất cứ dạng phần mềm nào nên thông tin hôm nay có thể lạc hậu với ngày hôm sau.

6Scan Security

Các phần mềm bảo vệ bảo mật wordpress
Các phần mềm bảo vệ bảo mật wordpress
Các phần mềm bảo vệ bảo mật wordpress
Đây là phần mềm đa năng nhiều tính năng hay
Dò tìm lỗ hổng ở tất cả các file, tuy nhiên để nó tự động quét và tự động fix lỗi thì cần bản trả phí.
Xem tất cả thông tin mới nhất về nó tại đây: http://wordpress.org/plugins/6scan-protection/

Wordfence Security

Các phần mềm bảo vệ bảo mật wordpress
Các phần mềm bảo vệ bảo mật wordpress
Các phần mềm bảo vệ bảo mật wordpress
Các phần mềm bảo vệ bảo mật wordpress
Các phần mềm bảo vệ bảo mật wordpress
Cũng tương tự như các phần mềm khác, đây cũng là phần mềm đa năng nhiều tính năng hay. Thời điểm hiện tại nó nổi bật với tính năng chặn IP theo vùng lãnh thổ.
Nó có bản trả phí cho tính năng cao cấp
Xem tất cả thông tin mới nhất về nó tại đây: http://wordpress.org/plugins/wordfence/

Theme Authenticity Checker

Các phần mềm bảo vệ bảo mật wordpress
Cũng tương tự như phần mềm khác, hiện nay nổi bật với tính năng báo cáo những đoạn mã bị mã hóa trong blog
Xem tất cả thông tin mới nhất về nó tại đây: http://wordpress.org/plugins/tac/screenshots/

Timthumb Vulnerability Scanner

Các phần mềm bảo vệ bảo mật wordpress
Điểm nổi bật của phần mềm này là ngăn chặn hàng vi upload file độc hại lê host
Xem tất cả thông tin mới nhất về nó tại đây:
http://wordpress.org/plugins/timthumb-vulnerability-scanner/
Thứ Hai, 8 tháng 7, 2013

Blogger- phân tích style comment blogger

 Trong temblate blogger có rất nhiều ID, class do ta tự đặt tên để tạo nên nhưng style mong muốn. Tuy nhiên phần coment thì không phải vậy. có nhiều class đã được google chuẩn hóa và chúng ta phải tuân theo. Do đó khi tạo ra những style cho riêng mình chúng ta phải viết cấu trúc html cũng như các lass được bố trí như thế nào. Khi đã hiểu được bản chất vấn đề thì mọi việc trở nên đơn giản, từ nay trở đi bạn có thể tạo riêng có bản thân style comment mà bạn muốn hoặc dễ dàng hiểu được những kiểu style comment mà ai đó chia sẽ.
Trong chủ đề phân tích comment blogger này tôi chia làm 3 phần chính:

  • - Xem HTML + CSS trong một demo đơn giản về comment blogger.
  • - Xem demo các class css trong một comment blogger.
  • - Lấy CSS cơ bản nhất trong comment bloger
  • - Tạo cho riêng mình phong cách comment blogger một cách nhanh nhất.

Xem cấu trúc HTML + CSS comment blogger
Trước tiên ta xem một ví dụ về một style comment mặc định

Xem cấu trúc HTMLTại đây http://pastebin.com/Sa9Dc6Yy




Nếu đoạn code trên không hiển thị thì bạn xem tại đây
<meta charset="utf-8">
<div class="comments" id="comments">
<a name="comments"></a>
<h4>7 nhận xét:</h4>
<div class="comments-content">
<div id="comment-holder">
<div id="" kind="c">
<div id="">
<div id="" class="comment-thread" kind="r" t="0" u="0">
<ol id="">
<li id="" class="comment" kind="b"> <!-- comment level 1 -->
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user"><a rel="nofollow" href="">Tên khách</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:03 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của khách có địa chỉ</p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b"> <!-- comment level 1 -->
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="#">09:03 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của ẩn danh</p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b"> <!-- comment level 1 -->
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user blog-author"><a rel="nofollow" href="">Thao Trinh</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:04 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của tác giả </p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"> <!-- bắt đầu vùng comment cấp 2 -->
<span id="" kind="d">
<div id="" class="comment-thread inline-thread" kind="t" t="0" u="0"> <!-- Ta nên lấy tên lớp inline-thread làm đại diện cho các comment từ 2 cấp trở lên-->
<span id="" class="thread-toggle thread-expanded" kind="g">
<span id="" class="thread-arrow"></span>
<span id="" class="thread-count">
<span id="" style="display: none;"></span>
<span id="" style="display: none;"></span>
<a href="javascript:;" target="_self">Trả lời</a>
<div id="" class="thread-dropContainer thread-expanded"><span class="thread-drop"></span></div>
</span>
</span>
<ol id="" class="thread-chrome thread-expanded"> <!-- bắt đầu danh sách các comment cấp 2 -->
<div>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user"><a rel="nofollow" href="http://web.com">Tên khách</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:05 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của khách có dịa chỉ</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:15 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của nặc danh</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user blog-author"><a rel="nofollow" href="">Thao Trinh</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:15 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của tác giả</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
</div>
<div id="" class="continue" kind="ci"><a href="javascript:;" target="_self">Trả lời</a></div>
</ol>
<div id="" class="comment-replybox-thread"></div>
</div>
</span>
</div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">16:06 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content"><span class="deleted-comment">Nhận xét này đã bị quản trị viên blog xóa.</span></p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
</ol>
<!--[[[[[[[[[[[[ bắt đầu từ phần này, ko cần quan tâm đến -->
<div id="" class="continue" kind="ci" style="display: none;" title="continue"><a href="javascript:;" target="_self" title="continue A">Thêm nhận xét</a></div>
<div id="" class="comment-replybox-thread" title="comment-replybox-thread">
<div id="threaded-comment-form" title="threaded-comment-form">
<p>Vui lòng không spam.<br></p>
<a href="#" id="comment-editor-src"></a>
<iframe allowtransparency="true" class="blogger-iframe-colorize blogger-comment-from-post" frameborder="0" height="234px" id="comment-editor" name="comment-editor" src="forcomments-form.html" width="100%" style="display: block;" title="IFRAME blogger-iframe-colorize blogger-comment-from-post"></iframe>
</div>
</div>
<div id="" class="loadmore loaded" kind="rb" title="loadmore loaded"><a href="javascript:;" target="_self" title="loadmore loaded A">Tải thêm...</a></div>
<!-- kết thúc từ phần này, ko cần quan tâm đến ]]]]]]]]]]]-->
</div>
</div>
</div>
</div>
</div>
<!-- [[[[[[[[ bắt đầu từ phần này, ko cần quan tâm đến -->
<p class="comment-footer" title=""></p>
<div class="comment-form" title="comment-form">
<a name="comment-form"></a>
<!--
<script type="text/javascript" src="www.blogger.com/static/v1/jsbin/1347259804-comment_from_post_iframe.js"></script>
<script type="text/javascript">BLOG_CMT_createIframe('http://www.blogger.com/rpc_relay.html', '0000000000000'); </script>
-->
</div>
<p></p>
<div id="backlinks-container"><div id="Blog1_backlinks-container"></div></div>
<!-- kết thúc từ phần này, ko cần quan tâm đến ]]]]]]]]]-->
</div>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/2159474849-widget_css_2_bundle.css' />

Xem demo các class css trong một comment blogger

Bây giờ chúng ta sẽ xem từng thành phần trong comment tương ứng với những class nào:
IMG các lớp css bằng sơ đồ trong excel

Lấy CSS cơ bản nhất trong comment bloger
Trông các class lồng nhau, khá rối rắm. Chỉ một số ít bạn muốn css một cách chi tiết thì cũng nên biết điều này! Tuy nhiên phần lớn chúng ta chỉ cần biết cách sử dụng những class cơ bản để áp dụng cho blog của mình.
Tôi giới thiệu cho các bạn những dòng css cơ bản nhất để áp dụng cho tất cả các blog, theo những dòng này, bạn tự thêm những style để làm sinh động comment trong blog bạn theo ý muốn.
a {text-decoration:none;}
/*Toàn vùng comment*/
#comments {overflow:hidden}
/*đếm số nhận xét*/
.comments h4 {font:nomal bold 25px areal; color:#016702; background:#ddd; padding:3px}
/*nhóm nhận xét cùng cấp (ko phân biệt cấp)*/
.comments .comment-thread{ padding:0 0 0 0px;position:relative}
/*mỗi nhận xét, bao gồm avatar và thông tin coment*/
.comments .comments-content .comment {margin: 0px; padding: 0px;}
.comments .comments-content .comment:first-child {padding: 0px;}
.comments .comments-content .comment:last-child {padding: 0px;}
/*avatar*/
.comments .avatar-image-container {float: left;max-height: 35px;overflow: hidden;width: 35px;}
.comments .avatar-image-container img {max-width: 35px;}
/*thông tin coment (ko phân biệt cấp)*/
.comments .comment-block {margin-left:50px ;position: relative;background:#F4F6FC; padding:9px;border:1px solid #ddd;}
/*phần đầu thông tin (tên, thời gian, dấu hiệu author)*/
.comments .comments-content .comment-header {position: relative;}
/*hiển thị tên đối tượng, dấu hiệu author*/
.comments .comments-content .user {font-style: normal;font-weight: bold;}
.comments .comments-content .user  a {font:bold 15px arial; color:#016702;}
/*dấu hiệu author*/
.comments .comments-content .icon.blog-author {
position:absolute;top:-15px;right:-15px;margin:0;background-image: url(http://png-2.findicons.com/files/icons/725/colobrush/24/star.png)
; height: 24px;width: 24px;  }
/*thời gian nhận xét*/
.comments .comments-content .datetime {}
.comments .comments-content .datetime a{font:italic 12px areal;color: #999;}
/*Nội dung nhận xét*/
.comment-content {position: relative;text-align: justify;}
.comments.comment-content {}
.comments .comments-content .comment-content {}
.deleted-comment {font-style: italic;opacity: .5;}
/*nut tra loi | xoa */
.comments .comment .comment-actions {}
.comments .comment .comment-actions a {color:#aaa}
.comments .comment .comment-actions a:hover {color:#ff0000}
/*xóa*/
span.blog-admin {display: inline;}
.item-control {display: none;}
/*Nút trả lời*/
.comments .continue {border-top: 2px solid #999999;cursor: pointer;}
.comments .continue a {display: block;font-weight: bold;padding: .5em;}
.comments .continue {display: none;}
/*comment cấp trả lời ...........*/
.comments .comments-content .comment-replies {margin-left: 50px;margin-top: 9px;}
.comments .comments-content .inline-thread {padding: 0; /*background:#eee;*/}
/*Nút trả lời (ko phải coment gốc)*/
.comments .thread-toggle a{opacity:.5;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
/*........... kết thúc comment trả lời*/
.comments.comment-replies {}
/*chỉ riêng coment trả lời*/
.comments.inline-thread.comment-block {}
/*chỉ riêng coment gốc*/
.comments.comment-replybox-single {}
/*form*/
.comments.comment-form  {width:100%;max-width:100%}
Bạn chèn css này vào trước ]]></b:skin>, chúng ta sẽ được một style comment như sau:

Mỗi người có sẽ có sở thích kiểu comment khác nhau, bản thân tôi cũng chưa thấy style trên đẹp cho lắm. Nhưng vấn đề cơ bản ở đây là từ css cơ bản như trên là nền tảng để chúng ta phát triển những style đẹp mắt hơn và phức tạp hơn. Tuy rằng nó chỉ có 2 cấp nhưng các comment cấp thứ 3,4,5,... cũng chỉ sử dụng style cấp thứ 2 mà thôi. Bạn nếu thích cũng quy định những style riêng cho comment cấp khác nhau, nhưng như thế bạn sẽ khá mất thời gian để phân tích từng lớp css.

Tạo cho riêng mình phong cách comment blogger một cách nhanh nhất
Từ css style comment cơ bản đã có như trên, làm thế nào để tạo một style comment cho riêng mình ?
Bạn vào địa chỉ như hình, điều mà bạn quan tâm là chỉ cần mở 2 thẻ CSS và Output. Bạn tự css bên trái để thấy những kết quả ngay tức khắc ở bên phải. bạn làm đến khi nào được một style ưng ý thì copy css đó lại dán vào template của bạn.

Vậy là từ nay bạn đã có thể tự tạo cho riêng mình một style comment blogger trong tầm tay. Bạn cũng có thể sưu tầm những css khác rồi dán vào để kiểm tra style trước khi áp dụng chính thức vào blog của bạn.
Đôi lúc traong bài viết dùng từ miêu tả chưa chính xác, mong các bạn cho ý kiến đóng góp để bài viết hoàn thiện hơn.
Cám ơn và chúc các bạn thành công!
TTTj of bendoi.vn
Thứ Năm, 4 tháng 7, 2013

Blogger- Kỹ thuật đánh đấu bài đăng mới nhất


Kỹ thuật đánh đấu bài đăng mới nhất
Mục đích: làm nổi bật bài đầu tiên thường được dùng trong trang index.
Đây là kỹ thuật dựa vào thuộc tính data:post.isFirstPost trong blogspot
Cách 1 thêm hình vào bài viết mới nhất
Bước 1: Thêm CSS
#Blog1{position:relative}
img#imgnew {display:block; position:absolute; top:-45px; right:-45px;}
Bước 2: Tìm
<a expr:name='data:post.id'/>
thêm vào sau nó
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == "true"'>
  <img id="imgnew" src='http://png-2.findicons.com/files/icons/1676/primo/128/label_blue_new.png'/>
 </b:if>
</b:if>

Cách 2: Tạo màu nền cho bài viết mới:
Bước 1: Thêm CSS
#firstpost{background:#E8E8FF}
#firstpost:hover{background:#AED27D}
Bước 2: Tìm
<b:include data='post' name='post'/>
thay thế bằng
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == "true"'>
  <div id='firstpost'>
   <b:include data='post' name='post'/>
  </div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

Mở rộng:
Trên đây là cách mà mình sưu tầm lục lọi trong một số template & học mót từ nhiều blogger cũng như support.google.com/blogger để giới thiệu đến các bạn một cách đơn giản nhất. Để chúng ta hiểu và ứng dụng nó vào việc thiết kế template làm nổi bật bài viết đầu tiên.
Chúng ta có thể sử dụng CSS để tạo nên những hiệu ứng rất linh hoạt cho template.

TTTj of bendoi.vn
Thứ Tư, 3 tháng 7, 2013

Blogger- Đánh dấu bài viết có nhiều nhận xét


 Thủ thuật đánh dấu các bài viết dược trên số lượng nhận xét của tác giả DUYPHAM.info
Thủ thuật này chia bài viết là 3 cấp độ:
- bài viết có trên 10 nhận xét (đông vui)
- bài viết trên 50 nhận xét (sôi động)
- bài viết trên 100 nhận xét. (100 độ)
Bạn có thể thay 10, 50, 100 thành các số mà bạn muốn

Bước 1: Thêm CSS

.post{position:relative}
.groupcomment{position:absolute;top:0px;right:-32px;border:0 none !important;width:64px;height:30px}

Bước 2: Thêm javacript trước </head>
<script type='text/javascript'>
//<![CDATA[
function gantem(numcomments)
{
var groupcomment1=10; groupcomment2=50; groupcomment3=100;
if((groupcomment1<=numcomments) && (numcomments<groupcomment2))
{
document.write('<img alt="dong vui" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-DVv8iy9rY9TYlLa_2_wqLA1w5SkaWxRX82n5YGcC-pXJV7YZ66h95oxSl0HiTmQ4ohicet4up_eVijf6_4go2MPrNflya0xcgmwrPWQf-Duk_w-bw0cQ4ojc1-fathijDKnAjMPaps/"/>')
}
else
{
if((groupcomment2<=numcomments) && (numcomments<groupcomment3))
{
document.write('<img alt="soi dong" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGu1Soy_tbUc7oAzOVSbqhPxWBFjdnQ-Q_-85lAzMcHCK66lfhwunBsnhi_oVR6E2uNQ8KtVPBcbZgz5_uPa4kRtuMsaF98M-oGJgmoFphjLYHEiGOrSep5tSe2dCMXbR6Ar-bxyanapc/"/>')
}
else
{
if(groupcomment3<=numcomments)
{
document.write('<img alt="100 do" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZE_lOqxblc97KcM5W5-RcULXxM9USF2agiXWbnqmtm0gG8Yykf5BgtW47Z9Pwj49IXGXKd2pRE_2XvnxaLLcx4ydR2sUzd0qstNVMk5-qieFzhs2l2m-EOusJqQExlnDzv4_CnGcILw/"/>')
}
}}};
//]]>
</script>;

Bước 3: XML
Tìm
<a expr:name='data:post.id'/>
và thêm vào sau nó đoạn mã dưới đây:
<b:if cond='data:post.numComments != 0'>
<script type='text/javascript'>gantem(<data:post.numComments/>);</script>
</b:if>

Mở rộng : bạn có thể thay các hình ảnh <img ... /> bằng code CSS+HTML chứa chữ chú thích, cũng như thêm vài cấp độ bài viết để phù hợp với blog của bạn.

Tham khảo từ duypham.info (05/10/2011)

Blogger- Ẩn bài viết ở trang kiểu index và archive


 Vì một lý do nào đó mà ta không muốn hiển thị bài viết trên trang chủ và trang lưu trữ.
Đây là cách để ẩn bài viết đó.
Tìm
<b:include data='post' name='post'/> 
Thay bằng
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:post.url == &quot;link1&quot;'>
 <b:else/>

  <b:if cond='data:post.url == &quot;link2&quot;'>
  <b:else/>

   <b:if cond='data:post.url == &quot;link3&quot;'>
  <b:else/>

   <b:include data='post' name='post'/>
  </b:if>
  </b:if>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>
Trong đó : link1, link2, link3 là các url bài viết cần ẩn.
Với mỗi link ẩn cần thêm/bớt ta chỉ cần thêm hoặc xóa đoạn:
 <b:if cond='data:post.url == &quot;link&quot;'>
  <b:else/>
 và
 </b:if> tương ứng tà được.
TTTj of bendoi.vn

Blogger- Replace Older Post, Newer Post to post title

Replace Older Post, Newer Post to post title
Đây là bài viết của DUYPHAM, hướng dẫn cách thay đổi dòng chữ mặc định "Bài đăng cũ hơn" & "Bài đăng mới hơn" thành tiêu đề bài viết tướng ứng với bài cũ bài mới đó. Theo DUYPHAM thì đây là cách tối ưu & nhanh chóng hơn cách cách đã có tại thời điểm 2012.
Bước 1:
Tìm thẻ <b:includable id='post' var='post'>...</b:includable> và thêm vào sau nó đoạn mã dưới đây:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javaScript'>var newer='';older='';timestampISO='<data:post.timestampISO8601/>';timestampISO=timestampISO.replace(/\+/g,'%2B');</script>
</b:if>

Bước 2:
Tìm thẻ <b:include name='nextprev'/> và thay thế nó bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<p>
<data:olderPageTitle/>: <a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older='y';</script></a>
</p>
</b:if>
<b:if cond='data:newerPageUrl'>
<p>
<data:newerPageTitle/>: <a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer='y';</script></a>
</p>
</b:if>
<script type='text/javaScript'>
//<![CDATA[
function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>');
//]]>
</script>
</div>
<div class='clear'/>
<b:else/>
<b:include name='nextprev'/>
</b:if>

Kết quả sẽ được như hình.

Tuy nhiên một số trường hợp có bạn không muốn hiển thị tiêu đề bài viết cái dài cái ngắn. Nên mình thêm một chút css vào code của DUYPHAM. Để khi di chuột vào"Replace Older Post/Newer Post" nó sẽ hiện ra tiêu đề bài viết tương ứng. Tại bước 2 ta thêm đoạn code này:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.navi {position: absolute;}
.left {left: 10px;}
.right {right:10px}
.navi span {display:none;}
.navi:hover span{display:block;z-index:99;padding:10px;background:#E8E8FF;position: absolute;bottom:20px;}
</style>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<div class="navi left">
<data:olderPageTitle/><span><a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older=&#39;y&#39;;</script></a></span>
</div>
</b:if>
<b:if cond='data:newerPageUrl'>
<div class="navi right">
<data:newerPageTitle/><span><a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer=&#39;y&#39;;</script></a></span>
</div>
</b:if>
<script type='text/javaScript'>
//<![CDATA[
function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>');
//]]>
</script>
</div>
<div class='clear'/>
<b:else/>
<b:include name='nextprev'/>
</b:if>
Kết quả như hình: (bạn tự CSS để phù hợp hơn)
Replace Older Post, Newer Post to post title
Thứ Bảy, 29 tháng 6, 2013

Comment Message luôn song hành cùng form comment


Mặc định của khung nhận xét blogger là khi trả lời một câu hỏi bất kỳ (không phải comment cuối), thì khung nhập lời nhận xét (blogger-comment-from-post) hiển thị ngay sau câu hỏi được trả lời, nhưng dòng ghi chú nhắc nhở quy định comment <data:blogCommentMessage/> thì luôn ở phía dưới cùng.
Thủ thuật này sẽ đưa form nhập comment với Comment Message theo nhau như hình với bóng.


Tìm:
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Thay bằng:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Tìm code javascript phía dưới trang:
document.getElementById(domId).insertBefore(replybox, null);
Thay bằng:
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);


Sưu tầm từ nhiều nguồn trên internet

Convert wordpress to blogger

Convert wordpress to blogger

Convert wordpress to blogger

Đăng nhập vào Admin -> Công cụ -> Xuất ra. bạn chọn trang, nội dung bài viết hoặc cả hai
Convert wordpress to blogger
Công cụ do google phát triển
Convert wordpress to blogger
Qúa trình convert hoàn tất nó tự động tải xuống file blogger-export.XML
Convert wordpress to blogger
Bây giờ vào blogger -> cài đặt -> khác -> Import file blogger-export.XML
Tải file này lên là hoàn tất.
Convert wordpress to blogger
Convert wordpress to blogger
Quá trình convert wordpress to blogger luôn diễn ra nhanh chóng, dễ dàng và hoàn hão hơn rất nhiều so với quá trình convert blogger to wordpress, mặc dù cùng các bài viết giống nhau.
Chúc bạn thành công!



tttj of bendoi.vn

Menu Dropdown categories wordpress

menu Dropdown categories
Mục đích như hình vẽ:

Chúng ta sẽ tạo menu DropDown vô số cấp!

menu Dropdown categories

Bước 1:

Tạo một trình đơn menu

Vào Giao diện -> Trình đơn -> đặt tên trình đơn (ví dụ “main menu” chẳng hặn)
-> đánh dấu tất cả chuyên mục -> thêm vào trình đơn -> dùng mouse sắp xếp theo thứ tự bạn muốn.
menu Dropdown categories

Bước 2:

Cấu hình giao diện

Copy code sau vào file functions.php
class nav_menu_css extends Walker {
var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}
menu Dropdown categories

Bước 3:


Đặt nơi hiển thị menu

Sửa file Header.php
Tìm đoạn
<nav id="access" role="navigation">
…
</nav>
Bỏ tất cả trong này (nếu bạn muốn). Thay thế nó bằng đoạn:
<?php
wp_nav_menu(array(
'walker' => new nav_menu_css()
));
?>
menu Dropdown categories

Bước 4:


Tạo phong cách cho menu

Vào style.css chỉnh sửa phong cách đối tượng access nếu bạn muốn.
menu Dropdown categories

Nếu template bạn chưa có thì thêm đoạn này vào dùng tạm css có sẵn trong wordpress mặc định:

#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}

Ghi chú

Trên đây tôi giới thiệu khái quát cách làm menu Dropdown từ trình đơn chuyên mục, cách này áp dụng chung cho nhiều template.
Tùy vào template người ta sẽ đặt tên access bằng những tên khác nhau như nav, navigator … tùy ý cho nên bạn cũng cần biết đọc chút code, biết tìm trong Header.php đoạn đặt menu ngang tương tự:
<nav id="access" >
…
</nav>
là vùng nào hoặc ko có thì cũng biết cách thêm nó vào. Thường thì menu ngang dạng này được đặt phía cuối Header.php
menu Dropdown categories
menu Dropdown categories
Chúc bạn thành công!

tttj of bendoi.vn