demo temple responsive

Hướng dẫn cách đăng ký tham gia Google Adsense nhanh chóng

itvovantien

Link Author

Title: Hướng dẫn cách đăng ký tham gia Google Adsense nhanh chóng
Author: itvovantien
Rating 5 of 5 Des:

ạn có bao nhiêu người đọc? Bất kỳ công ty quảng cáo nào muốn đặt quảng cáo trên blog của bạn đều mong muốn có nhiều người đọc được nó và ...

Hướng dẫn cách đăng ký tham gia Google Adsense nhanh chóng

ạn có bao nhiêu người đọc? Bất kỳ công ty quảng cáo nào muốn đặt quảng cáo trên blog của bạn đều mong muốn có nhiều người đọc được nó và ...

Đọc thêm »

Hướng dẫn cách làm Slideshow ảnh đơn giản với jQuery

itvovantien

Link Author

Title: Hướng dẫn cách làm Slideshow ảnh đơn giản với jQuery
Author: itvovantien
Rating 5 of 5 Des:

Hôm nay HHV hướng dẫn các bạn cách làm slideshow ảnh đơn giản với jQuery. Thực tế có rất nhiều cách làm sileshow ảnh từ đơn giản tới phức t...

<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Hôm nay HHV hướng dẫn các bạn cách làm slideshow ảnh đơn giản với jQuery. Thực tế có rất nhiều cách làm sileshow ảnh từ đơn giản tới phức tạp… tuy nhiên HHV vẫn viết bài này chủ yếu bởi vì đây là cách làm sildeshow đơn giản nhất mà HHV biết được và đã ứng dụng nó trong <a href="http://blog.nguoiaolam.net/2012/05/metro-magazine-premium-metro-style.html" style="color: #0060a6; text-decoration: none;">Metro Magazine Blogger Templates</a>. Phần code của nó dễ đọc đến nỗi một người chưa biết gì về JS cũng có thể hiểu được nó; rất phù hợp với tiêu chí “Thiết kế web nghiệp dư cho người mới bắt đầu” :)</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<img alt="blog thiết kế - thiết kế website cơ bản cho người mới bắt đầu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZbahFWX2oYhhww1Xo4Ztr_oHT1H0L-ImaeedADT8JcopPkSMIaTq37-NB6c2tU_n4usenAE63OjdWAOIwwIe-jC3_bo2zWeYWYiGgKgbwGawutIlrVxYpqpdfWTYHv_c3KpglUzLXOg/s1600/flowRoot2830%25255B5%25255D.png" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Hướng dẫn cách làm Slideshow ảnh đơn giản với jQuery" /></div>
<div class="button" style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px; margin: 50px auto 40px; text-align: center;">
<a href="http://metro-magazine-premium.blogspot.com/" rel="nofollow" style="background: rgb(0, 144, 213); border: 0px; color: white; font-family: 'Segoe UI light'; font-size: 24px; padding: 15px 50px; text-decoration: none;">Live Demo</a></div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
1. Code HTML</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Để cho đơn giản thì chèn 3 tấm ảnh với thẻ <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><img></code> và bao quanh nó bằng một thẻ <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><div></code>. Để dễ dàng định dạng và trang trí ta gán thêm một <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">id=”slideshow”</code>. Cuối cùng ta có đoạn mã HTML</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Điểm đặc biệt cần chú ý là nếu muốn tấm ảnh nào xuất hiện đầu tiên thì gán cho<code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">class=”active”</code></div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
2. Code CSS</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Những điểm cần chú ý ở đoạn mã trên là chiều cao của Slideshow được tùy chỉnh tùy theo vị trí đặt code và các bức ảnh… Khi xem xét sâu ta thấy đoạn mã trên còn quy định tọa độ của các bức ảnh trong không gian 3 chiều… Thuộc tính <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">z-index</code> quy định thứ tự xếp lớp các bức ảnh. Có 3 lớp, lớp cao nhất – active (10), lớp kế tiếp active (9) và tất cả các ảnh còn lại (8).</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
3. Code JS</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Bây giờ chúng ta bắt đầu viết một đoạn mã để bắt slideshow của mình chuyển động.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Đoạn mã trên có ý nghĩa như sau: Đầu tiên khai báo biến, bức ảnh nào có class <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">active</code> thì gán biến <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">$active</code> và đứng đầu, bức ảnh kế nó là biến <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">$next</code>. Bắt đầu chạy hàm SlideSwitch. Bức ảnh <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">$next</code> được gắn class <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">active</code> để đem nó lên trên hết và bức ảnh đang <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">$active</code> thì bị gỡ bỏ class active để hạ xuống. Cuối cùng định khoảng thời gian 5000ms (5s) giữa mỗi lần chuyển đổi. Rất đơn giản!</div>
<h4 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Để cho đẹp mắt ta tạo thêm hiệu ứng mờ ảo fade.</h4>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Ở đây xuất hiện thêm một class  <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">last-active</code>, class này đã được khai báo ở phần code css với duy nhất một thuộc tính là <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">z-index: 9</code>.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Đoạn code trên được hiểu như sau: Bức ảnh có class <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">active</code> (đang ở trên cùng) sẽ bị gán class<code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">last-active</code> (hạ xuống 1 bậc). Bức ảnh ở ngay dưới nó thì được gán class <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">active</code> (nâng lên một bậc ) đồng thời thêm vào hiệu ứng <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">animate</code> với độ mờ tăng dần từ 0 đến 1. Cuối cùng gỡ bỏ class <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">last-active</code> đưa bức ảnh trên cùng lúc ban đầu xuống dưới cùng.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Quá trình này được lặp đi lặp lại với chu kỳ 5s.</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Kết luận</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Như đã nói có nhất nhiều cách làm Slideshow ảnh với jQuery phức tạp hơn và đẹp hơn rất nhiều. Nhưng vấn đề là ở chỗ những slideshow này sẽ nặng nề và khó chỉnh sửa tùy biến hơn rất nhiều. Quan điểm của HHV vẫn là <strong><em>làm thế nào sử dụng cách thức đơn giản nhất để đạt được hiệu quả cao nhất</em></strong>. Để đạt được điều này chỉ có một cách là thấu hiểu mình đang làm gì.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Hy vọng với bài hướng dẫn này các bạn có thể hiểu và tùy chỉnh slideshow theo ý của mình. VD như<em>chỉnh sửa kích thước slideshow, thời gian hiển thị từng bức ảnh, độ mờ ảo, chèn thêm liên kết cho từng bức ảnh </em>và thâm chí là kết hợp nó với Recent Posts  Widget.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Chúc các bạn sáng tạo và thành công.</div>

Hướng dẫn cách làm Slideshow ảnh đơn giản với jQuery

Hôm nay HHV hướng dẫn các bạn cách làm slideshow ảnh đơn giản với jQuery. Thực tế có rất nhiều cách làm sileshow ảnh từ đơn giản tới phức t...

Đọc thêm »

Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản

itvovantien

Link Author

Title: Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản
Author: itvovantien
Rating 5 of 5 Des:

Một trong những thành phần phổ biến nhất và quang trọng nhất của trang web là thanh menu bar hay thanh định hướng navigation bar. Có rất nh...

<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Một trong những thành phần phổ biến nhất và quang trọng nhất của trang web là thanh menu bar hay thanh định hướng navigation bar. Có rất nhiều cách làm thanh menu này như dùng javascript dùng jquery hay CSS. Rất nhiều blogger tên tuổi đã hướng dẫn làm thanh menu đa cấp (multilevel menu bar) tuy nhiên trong bài viết này HHV vẫn hướng dẫn cách làm từng bước một thanh menu bar đơn giản với HTML và CSS3. Đây không phải là một hướng dẫn xơi ngay kiểu “mì ăn liền” mà là giúp các bạn hiểu quy trình để làm ra một thanh menu bar như thế nào.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Khi đã hiểu rõ bạn hoàn toàn có thể tùy biến theo ý thích của mình, đổi màu, thêm background, thêm hiệu ứng hover. và nhiều thứ khác nữa… Bài viết hơi dài tuy nhiên để thư giãn mời bạn ghé thăm trang <a href="http://blog.nguoiaolam.net/p/how-to-make-clean-basic-multilevel-menu.html" style="color: #0060a6; text-decoration: none;"><strong>demo</strong></a> trước khi bắt tay vào việc.</div>
<h2 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; line-height: 22.3999996185303px;">
1. Tạo một trang HTML5 với một menu list</h2>
<h4 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
a. Tạo một trang HTML5</h4>
<pre style="background: rgb(233, 233, 233); border: 3px dotted rgb(201, 201, 201); color: #666666; font-family: 'Courier New', monospace; font-size: 15px; line-height: 22.3999996185303px; margin-bottom: 10px; margin-top: 10px; max-height: 480px; overflow: auto; padding: 7px; width: auto !important;"><!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>
</pre>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Đây là cấu trúc cơ bản của một trang HTML5, trong đó phần code CSS mình sẽ chèn giữ thẻ<code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><head></code> và code html mình chèn giữa thẻ <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><body></code></div>
<h4 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
b. Tạo một menu list.</h4>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Bản chất của một thanh menu là tập hợp những đường link được sắp xếp theo trình tự. Một thanh menu chính là một danh sách các đường link được trang trí và trình bày lại theo hàng ngang. Để dễ trang trí ta dùng các thẻ id (main_menu) và class (top_menu)</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Danh sách cấp 1 của menu</div>
<pre style="background: rgb(233, 233, 233); border: 3px dotted rgb(201, 201, 201); color: #666666; font-family: 'Courier New', monospace; font-size: 15px; line-height: 22.3999996185303px; margin-bottom: 10px; margin-top: 10px; max-height: 480px; overflow: auto; padding: 7px; width: auto !important;"><ul id="main_menu">
<li class="top_menu">
 <a href="#">Design</a>
</li>
<li class="top_menu">
 <a href="#">Tutorials</a>
</li>
<li class="top_menu">
 <a href="#">Coding</a>
</li>
<li class="top_menu">
 <a href="#">Blogger</a>
</li>
<li class="top_menu">
 <a href="#">General</a>
</li>
</ul>
</pre>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Chú ý các thẻ <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><ul> </code><code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><li></code> và <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><a></code> với thuộc tính href chúng được sắp xếp lặp lại. Bạn có thể thay thế phần anchor text và các đường link theo ý thích.</div>
<a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;"></a><span style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;"></span><br />
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Bây giờ phải thêm phần danh sách cấp 2 của menu. Ta lai dùng cấu trúc thẻ các <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><ul> </code><code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><li></code> và<code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><a></code></div>

Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản

Một trong những thành phần phổ biến nhất và quang trọng nhất của trang web là thanh menu bar hay thanh định hướng navigation bar. Có rất nh...

Đọc thêm »

Premium Blogger Templates - Metro Modern Solar V.1

itvovantien

Link Author

Title: Premium Blogger Templates - Metro Modern Solar V.1
Author: itvovantien
Rating 5 of 5 Des:

1. Tùy chỉnh thanh Menu Bar đa cấp Metro Modern Solar sở hữu thanh Menu Bar đa cấp với hiệu ứng sổ dọc rất đẹp. Tùy theo nhu cầu sử dụn...

<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
1. Tùy chỉnh thanh Menu Bar đa cấp</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<img alt="Tùy chỉnh thanh Menu Bar đa cấp" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtgQH6uqdOqo9UHsO_nZXgkW4qtneIogBajS5P657UBX0AKQAYT96tVPtJiFtZ_LxS3G-dMvO4hcgjCBaq4VUJA6DI7Ed3-QGy4WZL1SE1YC4-lmeJ2gIl-ilq4szaOX_Vdqla5OstAWU/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Tùy chỉnh thanh Menu Bar đa cấp" width="640" /></div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Metro Modern Solar sở hữu thanh Menu Bar đa cấp với hiệu ứng sổ dọc rất đẹp. Tùy theo nhu cầu sử dụng bạn có thể nâng lên 4 cấp. Để tùy chỉnh Thanh menu này trong <strong>Template – Edit HTML – Proceed</strong> bạn tìm đến đoạn code sau và tùy ý chỉnh sửa.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<strong>Lưu ý:</strong> Thanh menu bar thường có cấu trúc lặp lại. Bạn đọc cần chú ý đọc kỹ đoạn code một cách cẩn thận.</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
2. Featured Posts Widget<img alt="Featured Posts Widget" height="466" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8RpFo0d-pIVzzakZE4zQvKLhkngBwIjtrEYVbxGLYFkrCjwcvNE_ybEswUQBjHmxd30nTqVFj6NNIl5hXyPAxA37lJYsL9br4QQ6J7C9oEe4Ay101YWrx_vHfMKRWn8aZbLMCB8qWjl0/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Featured Posts Widget" width="680" /></h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Để <strong>Feature Post</strong> <strong>Widget </strong>hiển thị bạn cần phải làm những việc sau.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
b1) Tìm đến Bloglist widget có tên <strong>Feature </strong>nhấn <strong>Edit</strong> nó</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
b2) Đánh dấu check vào chính xác 2 dòng sau</div>
<ul style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<li><strong>Title of most recent item</strong></li>
<li><strong>Thumbnail of most recent item</strong></li>
</ul>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
b3) Nhấn <strong>Add to list </strong>để thêm đường link vào trong <strong>Bloglist. </strong>Có tất cả 4 bài viết nên bạn cần thêm vào chính xác 4 đường link sau.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Nhớ thay <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">blog.nguoiaolam.net</code> bằng tên blog của bạn (VD: <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;"><a href="http://metro-modernsolar.blogspot.com/" style="color: #0060a6; text-decoration: none;">http://metro-modernsolar.blogspot.com/</a></code>). Bây giờ muốn bài viết nào lên <strong>Feature Post</strong> <strong>Widget </strong>bạn cần gán cho nó nhãn <strong><code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">hot</code> </strong>(viết thường, không hoa)</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Nếu không cẩn thận khi thực hiện bước này Top Stories rất dễ bị lỗi dẫn đến không thể truy cập vào trang chủ của blog được. Hướng dẫn chi tiết cách khắc phục lỗi mình đã viết một bài ở đây tựa là<a href="http://blog.nguoiaolam.net/2012/04/metro-featured-posts-widget-cuc-inh-cho.html" style="color: #0060a6; text-decoration: none;">Metro Featured Posts Widget cực đỉnh cho Metro Style Blogger Templates</a> anh em đọc luôn cả phần comments để biết cách khắc phục nhé.</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
3. Carousel Slider Widget</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<img alt="Carousel Slider Widget" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJGz-RfLfXGdZuF0twuul6KhIIcNZPEg4LemshL_zq5P5JusJXlIMEropVXwsZgONSw_RUmcNHBsEZB4dpjw8V43-CvsiRL1uknPv5XliRuXFpVv8mfZpvRVaOuw2kU0hZQ_SCsukEr4/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Carousel Slider Widget" width="1031" /></div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Carousel Slider Widget chỉ hiển thị khi bạn xem một bài viết bất kỳ. Để tùy chỉnh widget này bạn vào<strong>Template – Edit HTML – Proceed</strong> bạn tìm đến đoạn code sau và tùy ý chỉnh sửa.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Ý nghĩa các thông số</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
- <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">label1 = "hot”</code> – thay “hot” bằng nhãn mà bạn muốn Carousel Silder hiển thị</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
- <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">numposts1 = 15</code> – thay 15 bằng con số khác để tùy chỉnh số lượng bài viết được tải. Khuyến cáo nên giữ nguyên 15 bài.</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
4. Metro Social Widget</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<img alt="Metro Social Widget" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEire7Bf_WXGEQwxQ-texpfILnegTm6X5j-x6JyWHgCfMzI0BwuSoaU5iiPX0zLHgOF0APnGAt9wntNbJdKSJFHGpplDW_CIzqMvgh5iEtYUza4vRQODeKn-CfPYbURvS7AfHJokCfd4ZlE/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Metro Social Widget" width="346" />Tìm đến đoạn code bên dưới và sửa tên blogthietke thành id mạng xã hội của bạn.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Ở đây mình chỉ để một vài icon tượng trưng, nếu anh em sử dụng các dịch vụ mạng xã hội khác hoặc muốn thêm các icon mang phong cách Metro UI thì phải đọc bài viết <a href="http://blog.nguoiaolam.net/2012/04/metro-ui-huong-dan-thiet-ke-web-voi.html" style="color: #0060a6; text-decoration: none;">Metro UI & hướng dẫn thiết kế web với giao diện Metro UI</a>  trong phần <strong>Tài Nguyên </strong>mình có chia sẻ một set với hơn 400 icon đủ các thể loại từ: Windows Icon, Application Icon, Social Web Icon… Mỗi icon có độ phân giải 512x512. Anh em resize lại theo ý thích và chèn vào.</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
5. Page Navigation tự động</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<img alt="Page Navigation tự động" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMx4gx7LlmawsWrA4utjSL6HbprE_99tC1BwEmb0llAQbX6GtPUu1dlVgdGELX5JgUT9Gq1nYrnd5FAJp9kaFV_rTnNzNZAht_jHoEsVMD3oq-eBgm-UH2DyjINN18_nAiWuY5GKmWhU/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Page Navigation tự động" width="695" /></div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Bạn vào <strong>Template – Edit HTML – Proceed</strong> <strong>- Expand Widget Templates </strong>và tìm đoạn code sau:</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Trong đó</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
trong đó:<br />- <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">perPage</code>: số bài viết hiển thị trong 1 trang<br />- <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">numPages</code>: số trang hiển thị<br />- <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">firstText</code>, <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">lastText</code>, <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">nextText</code>, <code style="background: rgb(246, 241, 186); border-radius: 3px; font-family: 'Courier New', monospace; font-size: 15px; padding: 2px 5px;">prevText</code>: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev</div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
6. Bottom Navi Bar<img alt="Bottom Navi Bar" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_-OhR2eLk3ntohyuJDPouWXxNr75anYMdy1VVz55D_7_hfIPhnh9nK9ErxIX1RGJVfgvuxhjwl1jtMRjZ02ybDL4Hv4qV_8TZ44YCZeCdE-fj1TjJJyLZR35woYDE_-fR1I2HCYnABg/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="Bottom Navi Bar" width="618" /></h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Trong Layout bạn tìm đến widget HTML  Bottom Navi. Nhấn Edit và chép toàn bộ đoạn code sau, nhớ tùy chỉnh lại đường link của riêng bạn.</div>
<br style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;" />
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
7. Một số điểm lưu ý khác</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
a) <strong>Pagelist:</strong> Pagelist sẽ tự động hiển thị tất cả các trang tĩnh ở phần trên cùng của blog. Muốn tùy chỉnh hiển thị bạn vào Layout – Page để tùy chỉnh.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
b) <strong>Label Widget</strong> ở Sidebar. Bạn cần tùy chỉnh hiển thị là dạng List.</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
c) <strong>Timestamp Format</strong>. Bạn vào <strong>Settings - Language and formatting</strong> tùy chỉnh lại <strong>Timestamp Format</strong> tượng tự như trong hình</div>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
<img alt="clip_image001[15]" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJKhs0XdFYan87xQ4IQf1K39H7hj-hMsB60y34mITkuuN_z41lwzpdkUW18dzMkeijXBB-wVhJk-hyc-UB9RbYz9B_sY5Z9unTSCezW1qKPv0IcViK1fCf-Yn1vQFwyXx9VmXOsUKEx-w/?imgmax=800" style="display: block; float: none; height: auto; margin-left: auto; margin-right: auto; max-width: 620px;" title="clip_image001[15]" width="436" /></div>
<h3 style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 25px; font-weight: normal; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
8. Kết luận</h3>
<div style="background-color: white; color: #222222; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.3999996185303px;">
Nói chung về cơ bản giao diện này cũng “cùng hệ” với <a href="http://blog.nguoiaolam.net/2012/07/released-metro-simple-premium-blogger.html" style="color: #0060a6; text-decoration: none;"><strong>Metro Simple</strong></a> và <a href="http://blog.nguoiaolam.net/2012/11/released-metro-btk-premium-blogger.html" style="color: #0060a6; text-decoration: none;"><strong>Metro BTK</strong></a> tuy nhiên việc cài đặt phức tạp hơn một chút. Điều này cũng hiển nhiên vì nó có nhiều tính năng hơn. Nếu thấy khó khăn đừng ngần ngại để lại comments ở bài viết này mình sẵn sàng hỗ trợ giúp anh em có một templates ưng ý.</div>

Premium Blogger Templates - Metro Modern Solar V.1

1. Tùy chỉnh thanh Menu Bar đa cấp Metro Modern Solar sở hữu thanh Menu Bar đa cấp với hiệu ứng sổ dọc rất đẹp. Tùy theo nhu cầu sử dụn...

Đọc thêm »

Hướng dẫn cách đăng ký tham gia Google Adsense nhanh chóng

Hướng dẫn cách làm Slideshow ảnh đơn giản với jQuery

Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản

Premium Blogger Templates - Metro Modern Solar V.1

Biểu mẫu liên hệ