Bài đăng trên Blog, Widget quan trọng nhất của Blogspot

4

Đọc tiêu đề chắc bạn đã đoạn được phần nào của nội dung bài viết, đúng như vậy. Bài viết hôm nay chúng ta sẽ nói về Widget Blog Posts (Widget Bài đăng trên Blog), Widget quan trọng nhất của Template Blogspot.

Chúng ta sẻ không mổ xẻ một template của ai đó để minh họa cho bài viết, mà chúng ta sẽ tự tạo nên một Widget Blog Post của riêng mình cho đỡ rối như hình dưới đây .

Widget này bắt đầu bằng một thẻ mở Widget với ID là Blog1 và tất nhiên sẽ kết thúc bằng một thẻ đóng Widget rồi, rất quen thuộc phải không?

Data provided by Pastebin.com - Download Raw - See Original

1. <b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog">
2. Code bên trong cấu thành nên Widget Blog Posts
3. </b:widget>

Vậy Code bên trong Widget là những code gì mà có thể kỳ diệu đến vậy?
Để có thể thỏa mãn tính tò mò thì tôi đoán có thể bạn sẽ mở các Template được chia sẻ trên mạng lên và sau đó nhìn thấy một ma trận code rồi dẫn đến chán nản... Thực ra thì do khi Upload template, hệ thống đã tự động thêm 1 lượng code khá lớn vào template của bạn, mặc dù có thể những đoạn code được thêm vào đó không có tác dụng gì đối với bạn hết mà chỉ làm bạn rối thêm...
Với một Widget mẫu như hình vẽ trên thì bên trong cặp thẻ Widget kia sẽ chỉ cần 3 cụm code chính như sau là đã tạm đủ rồi, có gì ta sẽ thêm cụm thứ 4, thứ 5...v.v... sau :

Data provided by Pastebin.com - Download Raw - See Original

1. <b:includable id="post" var="post">
2. Code phần 1
3. </b:includable>
5. <b:includable id="nextprev">
6. Code phần 2
7. </b:includable>
9. <b:includable id="main" var="top">
10. Code phần 3
11. </b:includable>

Ta sẽ đi từng phần 1 cho rõ ràng.

A. Code phần 1

Code phần 1 ở đây là code cấu tạo chi tiết bài viết của bạn như tiêu đề bài viết, thumbnail, đoạn trích nội dung bài viết, nút readmore...
Đầu tiên tôi sẽ tạo 1 thẻ DIV với class là post-item (bạn đặt gì cũng được nhưng nhớ là class nhé, không phải ID) cho rõ ràng, với sau này Style cho dễ.

Data provided by Pastebin.com - Download Raw - See Original

1. <b:includable id="post" var="post">
2. <div class="post-item">
4. Nội dung phần 1
6. </div>
7. </b:includable>

Bạn nhìn hình vẽ trên đầu, post item chính là cái ô mà có viền màu đỏ, do có đến 3 ô viền đỏ nên ta không thể dùng ID được (ID phải là duy nhất) vì thế tôi sẽ dùng class.
Cụ thể bên Code trong phần 1 này sẽ như sau :

1. Tiêu đề :

Đặt trong cặp h1 vì nghe nói như thế mới tốt cho SEO (thiên hạ đồn thổi ấy mà ^^): 

Data provided by Pastebin.com - Download Raw - See Original

1. <h1><a expr:href='data:post.url'><data:post.title/></a></h1>

Bạn sẽ thắc mắc là sao Template khác nó có đếm mấy dòng code mà sao tôi lại có 1 dòng ngắn củn thể kia, đúng ra thì nó phải đủ với các lệnh điều kiện như bạn nói thì mới chuẩn nhưng đây là Template đơn giản mang tính giới thiệu cho người mới mà, phức tạp hóa làm chi? Thiếu một tí cũng không sao, miễn bạn hiểu là được :d

2. Thumbnail :

Có nhiều cách lấy thumbnail nhưng tôi sẽ chọn cách đơn giản nhất là dùng chính XML của blogspot mà không động chạm gì đến javascript @@...

Data provided by Pastebin.com - Download Raw - See Original

1. <img expr:src='data:post.thumbnailUrl' />

Link ảnh ở đây được lấy thông qua lệnh data:post.thumbnailUrl, mặc định sẽ có kích thước là 72x72 pixels và ta phải upload thông qua trình upload của blogspot.

3. Đoạn trích dẫn bài viết:

<data:post.snippet /> Đoạn trích dẫn này ta cũng chỉ dùng XML của blogspot mà không dùng gì khác, mặc dù biết có nhiều nhược điểm khi dùng cách này mà điển hình là số lượng ký tự cho phép khá là eo hẹp (140 ký tự)... Tuy nhiên, như trên đã nói... Đơn giản thôi....

4. Nút Readmore:

Data provided by Pastebin.com - Download Raw - See Original

1. <a expr:href='data:post.url'><data:post.jumpText/></a>
3. hoặc
5. <a expr:href='data:post.url'>Xem chi tiết</a>

Thẻ <data:post.jumptext> có tác dụng lôi các từ như: "Read more", "Xem chi tiết" v.v... do bạn đặt ở trong Admin ra. Bạn có thể vào trong Admin Panel để thay đổi, không thì đổi trực tiếp ở code như trên
Ở đây bạn thấy có những 3 bài viết, mà thậm chí có thể có nhiều hơn... 50, 100 bài viết nhưng ta chỉ cần thiết kế 1 bài chung nhất như trên, sau đó sẽ dùng vòng lặp loop để lôi lần lượt các bài ra (sẽ được nói đến ở bài sau).
Đên đây là hết Code phần 1 rồi, tổng hợp lại ta được như sau :

Data provided by Pastebin.com - Download Raw - See Original

1. <b:includable id="post" var="post">
2. <div class="post-item">
3. <h1><a expr:href='data:post.url'><data:post.title/></a></h1>
4. <img expr:src='data:post.thumbnailUrl' />
5. <data:post.snippet/>
6. <a expr:href='data:post.url'><data:post.jumpText/></a>
7. </div>
8. </b:includable>

Bài này có vẻ đã dài rồi nên chắc Code cho 2 phần B và C còn lại tôi sẽ đăng ở bài sau cho đỡ tẩu hỏa nhập ma (có mỗi tí mà cũng phải tách thành hai bài, nhục ghê ha :-p)
Xem tiếp phần B C

Tác giả bài viết là Hiếu Bò, sinh viên năm hai trường SV năm 2 UTEHY, có sở thích đặc biệt với truyện tranh, internet, code, hoa quả,.. thành viên của Comic Tomb Group, sáng lập trang web Comic Tomb

Widget bài viết liên quan (Facebook Recommendations Bar) cho Blogger - Blogspot

11

Mấy hôm nay Facebook giới thiệu Facebook Social Plugin mới cho Wordpress đó là Widget bài viết liên quan với hiệu ứng trượt. Theo xu hướng mới hôm nay chúng ta sẽ gắn cái widget tuyệt hảo này vào Blogger. Demo ngay trên blog này!
Làm tuần tự theo các bước sau.

1. Thêm Open Graphs meta tags

Muốn cho Facebook Recommendations Bar chạy được thì blog bạn phải có Facebook Open Graphs meta tags. Có một cách rất đơn giản để thêm phần này vào. Thêm đoạn code bên dưới vào dưới thẻ <head>

Data provided by Pastebin.com - Download Raw - See Original

1. <!-- Begin Open Graph metadata -->
2. <b:if cond='data:blog.pageType == &quot;item&quot;'>
3.         <meta content='article' property='og:type'/>
4.         <meta expr:content='data:blog.title' property='og:site_name'/>
5.         <meta expr:content='data:blog.pageName' property='og:title'/>
6.         <b:if cond='data:blog.postImageThumbnailUrl'>
7.                 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
8.         </b:if>
9. <b:else/>
10.         <meta expr:content='data:blog.title' property='og:title'/>
11.         <meta content='website' property='og:type'/>
12. </b:if>
13.  
14. <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
15. <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
16. <!-- End Open Graph metadata -->

Chú ý: bạn chỉ việc thêm vào đoạn code này. Nó không ảnh hưởng gì đến các đoạn code thủ thuật seo mà bạn add trước đây

2. Thêm code plugin widget

a) Vào trang Facebook Recommendations Bar Official Page.
b) Nhấn nút Get code (lần 1)

c) Click nút create a new app

d) Điền vào App Name tên blog của bạn và App URL là địa chỉ blog bạn. Nhấn tiếp tục

e) Điền Capcha Code và nhấn nút Submit

f) Nhấn nút Get code  lần nữa

g) Copy đoạn code đầu tiên JavaScript SDK code (First Box Code)

h) Đăng nhập Blogger vào phần Template > Edit HTML > Proceed sau đó Expand Template Widgets
i) Điền đoạn code vừa chép được vào ngay dưới thẻ <body>

3. Tùy chỉnh hiển thị

Tìm trong Template thẻ  <data:post.body/> và chèn ngay sau đó đoạn code sau

Data provided by Pastebin.com - Download Raw - See Original

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
2. <div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div>
3. </b:if>

Trong đoạn code trên bạn có thể tùy chỉnh các thông số hiển thị vị trí hiển thị, nút nhấn action hoặc số lượng bài viết liên quan…
data-read-time – thời gian chờ đợi trước khi widget bật lên từ góc màn hình. Mặc định là 30s. Thời gian tối thiểu là 10s
data-action – có thể chọn 1 trong 2 'like', 'recommend'
data-side – vị trí hiện thị của widget. Tuy chọn là 'left' hoặc 'right'
num_recommendations – số lượng bài viết được hiển thị. Mặc định là 2 nhưng bạn có thể chỉnh lên tối đa là 5
Thân mến.

Metro UI & hướng dẫn thiết kế web với giao diện Metro UI

Mấy hôm nay bận rộn nên không có bài viết nào mới chia sẻ với anh em, không phải do cạn ý tưởng mà do nghiên cứu về cái giao diện Metro UI của Window8. Công việc này có một chút thú vị… Mình thử thiết kế lại một template theo phong cách Metro UI của Microsott. Template rất đơn giản và dễ làm bất cứ ai cũng có thể tự code cho mình một giao diện như thế. Trong bài viết này HHV sẽ hướng dẫn anh em cách thiết kế một giao diện với phong cách Metro UI.

1. Metro UI là gì?

Metro Ui là một kiểu giao diện dựa trên sự sắp xếp font chữ và các mảng vuông được Microsoft phát triển. Nó bắt đầu được sử dụng để thiết kế cho windows phone 7 và bây giờ là Windows 8.
Thực ra Metro UI được lấy cảm hứng thiết kế từ các bảng biểu của ga tàu điện ngầm (vì vậy mới có tên Metro). Các bảng biểu này có màu sắc tương phản, font chữ lớn rõ ràng và các biểu tượng trực quan. Thực ra chúng ta đã từng gặp nó trước đây trong Windows Media Center anh em nào có sử dụng máy nghe nhạc Zune thì cũng biết Metro Ui là giao diện chính của Zune.
Microsoft rất coi trọng Metro UI, nó không phải là một phong cách mà là một triết lý thiết kế mới: đơn giản, hiện đại, thuần chất công nghệ. Nó đối chọi hoàn toàn với phong cách của Apple: tinh tế, bóng bẩy, sang trọng.
Anh em muốn tìm hiểu thêm về lịch sử Metro Ui có thể đọc bài viết Vì sao giao diện phong cách Metro trở nên quan trọng với Microsoft?

2. Nguyên lý thiết kế của Metro UI

Thiết kế giao diện Metro UI không có các hình ảnh gây rối mắt mà chỉ có những dòng thông tin thực tế được trình bày tối ưu. Các thông tin được đưa vào các bảng biểu lớn với các nút nhấn nhỏ nhắn và các hiệu ứng di chuyển thật mượt mà. Microsoft đã miểu tả triết lý thiết kế theo phong cách Metro UI đơn giản bằng một bảng như thế này.

1. Đơn giản và hiện đại: Nguyên lý thứ nhất của Metro UI là đơn giản và hiện đại, loại bỏ hết tất cả những yếu tố thừa không truyền tải được thông tin. Các thứ được loại bỏ bao gồm cả những hình ảnh đồ họa đẹp mắt, đường viền, hiệu ứng 3d hoặc đổ bóng…
2. Di chuyển và mượt mà: Các chuyển động không cần phải quá nhanh mà cần có sự mượt mà và chiều sâu giúp người dùng cảm giác được nó một cách sống động. Chuyển động cùng một nhịp với chuyển động của cuộc sống.
3. Typography: Cảm hứng thiết kế dựa trên sự sắp đặt các font chữ một cách nghệ thuật. Sử dụng các font chữ đẹp với kích thước và độ đậm khác nhau giống như những biểu tượng. Đặc điểm của kiểu thiết kế này nó vừa bảo đảm tính mỹ thuật vừa bảo đảm việc truyền tải thông tin một cách hiệu quả.
4. Tập trung vào nội dung: Nó là kết quả  của nguyên lý thứ nhất và nguyên lý thứ 3. Loại bỏ những bước trung gian và những gì không đem lại giá trị thiết thực. Giúp cho người dùng giao tiếp trực tiếp với nội dung.
5. Thuần túy kỹ thuật: Một giao diện được tạo ra từ các bảng biểu đơn giản như điểm ảnh. Không có các hoa văn cầu kỳ phức tạp, không đổ bóng và không cố gắng giả lập lại cuộc sống. Nó mang một nét đẹp hết sức công nghệ.

3. Những trang web được thiết kế lấy cảm hứng từ giao diện Metro UI.

Anh em nên tham khảo những trang web này trước khi bắt tay vào việc thiết kế trang web của riêng mình.

(trang này làm trên nền Blogger)

4. Những điểm chú ý khi thiết kế blog của bạn theo phong cách Metro UI

1. Chú ý tới font chữ. Mặc dù không bắt buộc, nhưng anh em nên sử dụng font chữ Segoe Ui (font chữ chính của blog này). Font chữ này rất đẹp, hiện đại và mảnh mai… đó chính là nét đẹp kỹ thuật số mà Microsoft cố nhấn mạnh.
2. Chú ý tới màu sắc. Để có được tông màu sắc vui tươi và đẹp như của của windows8 thì anh em nên copy mã màu của nó. Nếu anh em am hiểu về phối màu và nguyên lý phối màu thì không có gì để nói, nếu không hãy sử dụng lại bảng màu chụp ảnh màn hình của window8 và chọn lọc lại những tông màu mà mình thích.

3. Chú ý tới yếu tố quan trọng và không quan trọng. Các thành phần quan trọng cần làm nổi rõ phải đặt trong các hub lớn màu sắc nổi bật, font chữ lớn và ngược lại.
4. Less is more. Thiết kế đơn giản và tối giản, làm vài thống kê và chỉ nên đặt những widget nào thật sự quan trọng với người đọc cần phải có. Loại bỏ những file gif động, những hình ảnh màu mè khồng đồng nhất.
5. Chú ý tới các khoảng trống: Các khoảng trống giữa các mảng miếng và các khối quan trọng hơn chúng ta nghĩ rất nhiều nó tạo nên diện mạo của trang web. Anh em cần chú ý đặt nó các mảng miếng thẳng hàng, hoặc nếu không thì phải theo một trật tự có thể kiểm soát được. Không nên đặt các đối tượng đều đặn đơn điệu hoặc quá sát nhau khiến người đọc không thở được.
7. Các icon. Nếu chú ý kỹ anh em sẽ thấy các biểu tượng của hình ảnh trong giao diện Metro rất khác biệt, các biểu tượng dịch vụ mạng xã hội, các nút mũi tên trái phải lên xuống. (xem phần tài nguyên để tải về bộ icon mang phong cách Metro Ui để sử dụng)
8. Chú ý tới các hiệu ứng. Sử dụng hiệu ứng một cách thông minh để tạo sự mượt mà trong chuyển động. Không dùng các kỹ thuật đổ bóng, 3d, bo viền hoặc các hiệu ứng phức tạp khác để trang trí. Để cuối cùng tạo nét đẹp hiện đại thuần túy công nghệ kỹ thuật số

5. Những nguồn tài nguyên

1. Bộ icon với phong cách Metro UI

Đây là bộ icon rất đẹp gồm 3 set mỗi set có hơn 400 icon mang phong cách Metro Ui. Nó bao gồm các icon về các ứng dụng văn phòng, các dịch vụ mạng xã hội, các trang thiết bị, trình duyệt web... Đây là bộ icon không thể thiếu nếu muốn thiết kế web theo phong cahs Metro UI. (click vào ảnh để lấy link tải)

2. Flash icon and font

Sưu tập hàng chục bộ Icon và font (miễn phí hoặc có phí) phù hợp với giao diện mang phong cách Metro UI. Anh em nên tải về để dùng nó rất hữu ích cho quá trình thiết kế.

3. Hiệu ứng trượt và fade mượt mà.

3 thủ thuật jquery này rất cơ bản và đơn giản, anh em không cần phải có quá nhiều kiến thức về code để ứng dụng nó Nếu biết cách phối hợp các thủ thuật này sẽ tạo cảm giác thật nhẹ nhàng uyển chuyển và chuyên nghiệp cho blog.

4 [Blogger] Feature posts mang phong cách Metro UI.

Dành riêng cho anh em Blogger HHV có làm một feature post mang phong cách Metro UI rất đơn giản và dễ làm chỉ với vài dòng mã CSS. (xem trực tiếp trên http://nguoiaolam.net)


(tiện ích này đang được cập nhật)

Metro BTK – The Metro UI style Blogger Template

18

Định đã không làm nhưng có nhiều anh em comments hoặc liên lạc với Hồng Hòa Vi để hỏi xin giao diện Metro UI style. Chính vì vậy nên mình chia sẻ một template mang phong cách Metro UI mình mới thiết kế xong. Như đã nói trong bài viết trước Metro UI & hướng dẫn thiết kế web với giao diện Metro UI mình cố gắng làm một giao diện thật đơn giản với ít code nhất. Muốn tùy chỉnh nhiều hơn bạn cứ liên lạc với mình để được hỗ trợ.

Live Demo Download

Đây là giao diện 2 cột mang phong cách Metro UI với tông màu xanh đặc trưng của Microsoft nên phù hợp chon những bạn thích sự đơn giản và chuyên nghệp. Bạn có thể dùng giao diện này cho những dự án nghiêm túc hoặc một công ty nhỏ.
Về tính năng mình đã áp dụng Full All in One SEO for Blogger nên bạn không cần phải làm thêm bất kỳ thủ thuật SEO nào nữa. MetroBTK – The Metro UI Style Blogger Templates có một số tính năng nổi bật sau:

1. Menu bar đa cấp

Bạn tìm đến dòng code sau và chỉnh sửa link và text theo ý thích của mình

<ul id='main_menu'>
<li class='top_menu'><a href='/'>Home</a></li>
<li class='top_menu'><a href='#'>Categories</a>
    <ul>
        <li><a href='#'>Blogger</a></li>
        <li><a href='#'>Coding</a></li>
        <li><a href='#'>Design</a></li>
    </ul>
</li>
<li class='top_menu'><a href='#'>About</a></li>
<li class='top_menu'><a href='#'>Contact</a></li>
</ul>

Trong trường hợp muốn tùy chỉnh sâu hơn nữa như thay đổi chiều cao, độ rộng, màu sắc và font chữ bạn cần tham khảo thêm bài viết 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

2. Top Stories widget

Để Top Stories widget hay Feature post hiển thị bạn cần phải làm những việc sau.
b1) Tìm đến Bloglist widget có tên Top Stories nhấn Edit nó
b2) Đánh dấu check vào chính xác 3 dòng sau

• Title of most recent item
• Snippet of most recent item
• Thumbnail of most recent item

b3) Nhấn Add to list để thêm đường link vào trong Bloglist. 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.

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=1

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=2

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=3

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=4

Nhớ thay blog.nguoiaolam.net bằng tên blog của bạn (VD: blogthietke.blogspot.com)
Bây giờ muốn bài viết nào lên Top Stories bạn cần gán cho nó nhãn hot (viết thường, không hoa)

4. Full width Ads Banner

Tìm đến HTML widget có tên QC mở nó ra và chèn vào đoạn code này

<a href="#"><img src="/img-source" /></a>

Thay link và img source tùy ý vào đoạn code trên. Nhớ rằng để có được Full Width Ads Banner thì bề rộng của ảnh phải có kích thước 960px.

5. Categories link bar

Tìm đến Linklist widget Categories Link Bar nhấn Edit và tùy chỉnh linklist tùy ý. Nên dùng cho các chuyên mục chính và quan trọng của blog.

6. Metro UI style social item

Tìm đến đoạn code bên dưới và sửa tên nguoiaolam thành id mạng xã hội của bạn.

<ul>

<li><a href='http://facebook.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkKVJM9zPOe5bOsFIroByvOHyqX9pTkyUrPaBpAnYyFula8D4KVYaWbb9aYkjHT20g9BySSxClo89hLNL6Zh601d_0xXONldnKxG19KAJsudR7g-uwpKOt_yMvu5dJc66xBJ0FLTYV6wZ/s57/Facebook%2520alt%25201.png'/></a></li>

<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4TMTXutZiokPH9-At__RHeHAhiy5fjW7pHV5U4XkQt64cjAKQ03gsvfcznzTRf4wFHbYX0pMedNphG49xQPnJwY4AcIG5u4_PKeqZOFNKXUR_n0hY_PBFqCx0ExpuMHVuDTTpTmff4u3/s57/Google%252B%2520alt.png'/></a></li>

<li><a href='http://pinterest.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_i1Mlmlij8CZ9ZOF6tFzfG-1FM_XbR0o1W3oKjG9nYZHRK2zIBloqD4idpqbMuvAIULY1_eVij_9VsC5dzMr7cad5WlZ_0eQG0HlNJNDr1gGfr1l0X4DhWSCtxcxyez3kcvTncF8Lyxf/s57/Pinterest%2520alt.png'/></a></li>

<li><a href='http://feeds.feedburner.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0p6Tfj9oRXgrSjgt7t21VzA91QFDNLFmbSdeE6wyRRkxLDAlGD8e29t51sU5bcvdr96P7gvktwwnddGrZGLDHPKE53s9x3hw1pWYfvjuIyVTB2YxIdF-45Jy9y9QgCKVOPM1s5XJKzim/s57/RSS%2520Feed.png'/></a></li>

<li style='padding:0px'><a href='http://youtube.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIQLAlQ-rXZdYx-QvvvKYAH5bHG71Sh6dRe0z7dnrqg9pYux1Zeb_PqsH-x_iCmQOv1reQmQt_ZtVjTKwU-OYWQtWks6d09ZAeUWJ55e6yJ1RPYDY49aFTzOdcXOEve4uc6k6XHydcPpx/s57/YouTube%2520alt%25201.png'/></a></li>

</ul>

Ở đâ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 Metro UI & hướng dẫn thiết kế web với giao diện Metro UI  trong phần Tài Nguyên 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.

7. Kết luận

Có nhiều bạn cảm thấy giao diện khá đơn giản. Điều này là hoàn toàn chính xác bởi vì bản chất của Metro UI là đơn giản. Hơn nữa trong bản demo mình đã lượt bỏ hết tất cả các tùy chỉnh và giữ lại core của template với một lượng code tối thiểu.
Phần tùy chỉnh template như thay đổi màu sắc, thêm các icon social, thêm related post, recents comments, multi thread comment… mình để dành phần khám phá đó cho anh em.
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 ý.
Điều cuối cùng mình mong muốn các bạn tôn trọng công sức người thiết kế bằng cách giữ nguyên dòng thông tin về người thiết kế ở phần cuối của giao diện. Xin cảm ơn!
Hồng Hòa Vi

Released Metro Simple Premium Blogger Template V.2

21

Cuối cùng thì mình cũng hoàn thành việc nâng cấp Metro Simple Premium Blogger Template. Đây là một Template cho Blogger cực kỳ đơn giản với phong cách Metro. Đây cũng là giao diện hiện tại của Blog Thiết Kế.

Phiên bản 2 ngoài việc khắc phục còn nâng cấp một số tính năng cao cấp hơn. Tính năng có thể được liệt kê dưới đây.

1. Nâng cấp Header, thêm Banner quảng cáo tiêu chuẩn 468x60
2. Nâng cấp từ menu đơn cấp lên menu đa cấp.
3. Nâng cấp tính năng Tabs cho Sidebar
4. Nâng cấp phần Addthis Social Sharing Toolbox với Metro Icon và hiệu ứng mờ ảo
5. Thêm bài đăng liên quan (Related Posts) tự động ở cuối mỗi bài viết
6. Nâng cấp Form Comments với bộ emoticons rất đẹp
7. Chia Footer thành 3 cột.
8. Nâng cấp một số tính năng và fix lỗi nhỏ khác.

Trong Templates đã sử dụng các tùy chỉnh Form Comments và Related Posts của Duy Pham. Ngoài ra được sự đồng ý của Duy Pham trong giao diện cũng đính kèm theo bộ: Bài viết ngẫu nhiên (Random Posts), bài viết mới nhất (Recent Posts), bình luận mới nhất (Recent Comments).
Hy vọng các bạn sẽ cảm thấy hài lòng.

Demo Download Tutorial

Trang trí Facebook Timeline Cover thật đẹp với 40 tấm ảnh độc đáo

34

Có rất nhiều lời phàn nàn nhưng cho đến bây giờ thì không còn ai phủ nhận hiệu quả của giao diện Facebook Timeline nữa. Trang trí Facebook Timline Cover đã trở thành một nghệ thuật. Đó là sự kết hợp giữa kỹ năng, trí tưởng tượng và sự phá cách.
Facebook Timeline Cover Photo không chỉ là một tấm ảnh đơn thuần mà nó còn là thể hiện con người bạn. với đầy đủ những tính cách. Bởi vậy hãy cẩn thận lựa chọn “mặt tiền” cho mình bạn nhé. Trong bài viết trước HHV đã giới thiệu 30 tấm ảnh còn bây giờ là 40 tấm ảnh không thể chê vào đâu được.
Tải về bằng cách click chuột phải lên ảnh và nhấn Save Image As…