Tùy chỉnh Blog Post Widget

Rất nhiều blogger đều muốn thay đổi Blog Post của họ. Có người muốn dòng chữ "Posted By" xuất hiện ngay dưới tiêu đề bài viết, có người lại muốn bỏ đi thời gian bài viết được đăng..Tuy nhiên việc này sẽ rất khó khăn nếu bạn không hiểu code của nó và chưa biết phải thay đổi như thế nào....

Có một cách thay đổi đơn giản là bạn vào Page Elements và click Edit của Blog Post. Một của sổ mới hiện ra, bạn có thể chọn số bài viết xuất hiện trên blog; cho xuất hiện hay ẩn đi những thành phần trong Blog post như: ngày đăng bài, tên tác giả, label...; hay di chuyển các thành phần trong Blog Post Footer. Nhưng với cách này những thay đổi sẽ rất hạn chế, nếu muốn tùy chỉnh bạn cần tác động tới code của Blog Post Widget.


Code của Blog Post Widget


Code dưới đây được lấy từ template Minima. Trước tiên tôi sẽ nói đến vị trí code của Blog Post sau đó sẽ hướng dẫn các bạn cách thay đổi . Để thấy đoạn code này các bạn cần đăng nhập vào Dashboard và click vào Layout. Trong Layout, bạn chọn Edit HTML. Bạn cần click vào ô Expand
Widget Templates và tìm đến khu vực Main nới chứa code Blog Post Widget. (Các bạn có thể đọc thêm bài viết Vị trí các thẻ HTML trong Layout Template

Các bạn tìm đến 2 dòng đầu tiên của Blog Post Widget:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> <b:includable id='main' var='top'>

Ở dòng đầu tiên, 'locked=true' có nghĩa là bạn ko thể xóa bỏ Blog Post Widget Trong Page Elements. Nếu bạn muốn xóa nó trên Page Elements, bạn thay True thành False, nhưng sẽ không có bài viết nào của bạn được hiển thị. Tất cả các Widget đều có đoạn mã thứ 2 . Nội dung của Widget được thể hiện trong khu vực "includable". Mỗi một Widget đều phải có 1 "includable" cùng với id="main". " Main includable " có thể chứa phần lớn hay toàn bộ nội dung của một Widget.


Đoạn mã tiếp theo :

<!-- posts --> <div class='blog-posts'> <b:include data='top' name='status-message'/>

Đây là đoạn mã bắt đầu Blog Post và "include" đầu tiên này biểu thị thông báo tình trạng. Một "include" có thể được đặt mọi nơi trong main includable. Và nó cũng có thể được đặt trong các includable với id khác trong Widget này. Dòng chữ thông báo tình trạng sẽ xuất hiện phía trên cùng của Blog Post khi bạn click vào 1 label. Ví dụ, khi bạn click vào 1 label không chứa bài viết nào, dòng thông báo sẽ hiện ra như sau:

Nếu bạn không thích nó xuất hiện, bạn hãy xóa dòng thứ 3 trong đoạn mã trên là được.

Đoạn mã tiếp theo quy định thời gian:

<b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> </b:loop> </div>

Bốn dòng đầu đầu sẽ giúp hiển thị thời gian đăng bài nếu bạn đã chọn ô ngày tháng trong Edit của Blog Post (xem hình)


Hai dòng tiếp theo là những chỉ dẫn để thể hiện phần Comment trong những bài viết riêng trên Blog Post. Phần Comment sẽ không được đưa lên trang chính vì nó sẽ làm đứt quãng giữa mỗi bài viết, cũng như làm Blog Post quá dài và những người đọc sẽ phải chờ khá lâu để load hết trang của bạn. Chú ý rằng: dòng cuối cùng là thẻ kết thúc blog posts class.


Navigation Links

Đoạn code tiếp theo quy định các navigation link: Previous posts, Next Posts và Home. Chúng được đạt dưới cùng của Blog post.

<!-- navigation --> <b:include name='nextprev'/>

Hãy xóa dòng thứ 2 đi nếu bạn không muốn thấy chúng. Bạn có thể thay đổi chúng bằng cách thay đổi code của includable. Chúng trông như thế này dưới Blog Post của bạn:


Feed Link

Những đoạn code tiếp theo cho thấy các Feed link và đây cũng là những đoạn mã cuối của khu vực main includable

<!-- feed links --> <b:include name='feedLinks'/> </b:includable>

Feed link:"Subscribe to: Posts (Atom)" được xuất hiện ngay dưới navigation link trong Blog Post.

Trên đây là toàn bộ thành phần chính trong Blog Post sẽ được thể hiện trên trang của bạn. Phần còn lại của Blog Post Widget bao gồm những đoạn code chi tiết của các include trong main includable.



Navigation includable

Đây là đoạn code tiếp theo trong Blog Post Widget. Bạn có thể đưa hình ảnh vào thay vì các dòng chữ:Newer Posts, Older Posts, Home nếu bạn muốn. Hãy đọc bài viết "Đưa hình ảnh vào Navigation Link"


Posts includable

Đoạn code dưới đây mô tả chi tiết hơn phần Post của các bạn. Bắt đầu với Post id

<b:includable id='post' var='post'> <div class='post uncustomized-post-template'> <a expr:name='data:post.id'/>

Tiếp theo là Post Title (tiêu đề bài viết)

<b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>

Sau đó đến đoạn code của Post Body

<div class='post-header-line-1'/> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Tiếp theo là code của POST FOOTER LINE 1:

<div class='post-footer'> <p class='post-footer-line post-footer-line-1'> <span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> <!-- backlinks --> <span class='post-backlinks post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.showBacklinks'> <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a> </b:if> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <span class='email-post-icon'> </span> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </p>

Post Footer Line 1 bao gồm những đoạn mã chi tiết của Post Author (phần ghi chú tác giả), Post Timestamp (thời gian đăng bài), Post Comment Link, Backlinks, Post Email Icons và Quickedit Pencil. Bạn có thể đọc bài viết "Post Footer với nhiều phong cách, tôi đã hướng dẫn cách thay đổi post author trong bài viết đó.

Code của Label trong Post Footer:

Đoạn code dưới đây dùng để đưa label vào Post Footer Line 2:

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p> <p class='post-footer-line post-footer-line-3'/> </div> </div> </b:includable>

Đây là đoạn code kết thúc khu vực Post includable, bạn có thể đưa thêm các phần tử khác như logo của bạn chẳng hạn.. vào post footer bằng cách chèn chúng ngay dưới

<p class='post-footer-line post-footer-line-3'/>


ví dụ tôi sẽ chèn 1 bức ảnh vào post footer :

code:
....
lt;p class='post-footer-line post-footer-line-3'/>
<a href="http://crazyboy89.blogspot.com" target="_blank"><img width="130" height="45" src="http://i239.photobucket.com/albums/ff202/crazyboyvn89/Untitled-2copy-7.jpg" border="0" alt="Photobucket"/></a>
.....

Kết quả:








Post Quickedit includable

Đoạn mã dưới đây mô tả phần Quickedit của các bạn.

<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable>

Trên blog, bạn sẽ thấy Quickedit như thế này:


Những đoạn còn lại là code của các includable: commentDeleteIcon, backlinkDeleteIcon, comments, backlinks, feedLinks và feedLinksBody. Tôi sẽ cùng các bạn tìm hiểu chúng trong các bài viết sắp tới.

Cám ơn các bạn đã theo dõi bài viết. Mong sẽ nhận được nhiều ý kiến đóng góp từ các bạn để giúp hoàn thiện nội dung bài viết hơn..
Chúc các bạn có 1 ngày vui vẻ!

AdSense Earning = Impression-count x Click-though-rate x Cost-per-click x smart-pricing-factor.impression count is basically referring to increase your traffic. It means the number of times AdSense secret block is displayed.Click-through-rate (CTR) is ratio of clicks per impressions. It can range from 0.1% to 30%, but most commonly around 1% to 10%.Cost-per-click (CPC) is the earning money you get per click. While traditionally it refers to the amount advertisers pay for each click, it can also mean the amount publishers get for each click.Smart-pricing is AdSense method to determine how valuable clicks from your site is worth. If clicks on your site doesn’t provide good value to advertisers, e.g. from visitors’ geo-location that seldom translate to sales, you will only get a fraction of the supposed CPC.Don’t encourage your visitors to click on ads. The only acceptable text is “Sponsored Links” and “Advertisements”.When in doubt don’t hesitate to contact the AdSense team. They are very helpful.Use Overture Bid Tool and Search Engine Keyword Tool to find suitable keyword.Submit your URL to search engines for crawling.Google is not the only search engine. Optimize for different engines as well. You are very likely to face less competition than in Google.Search engines are where most of your new visitors come from. Learn a bit about Search Engine Optimization, or pay people to do it. Doing it yourself will save yourself from troubles created by not-so-honorable SEO (Search Engine Optimizer).Try 300×250 medium rectangle, 336×280 large rectangle, or 160×600 wide skyscraper ad formats. These are the best performing AdSense ad formats.Wrap the AdSense block around your content.AdSense have both CPM (cost per thousand impressions) and CPC (cost per click) ads, and will choose the one it thinks can perform better.Adsense tips have in here.Search “AdSense Tips” on Google. Most webmasters continuously try to optimize their AdSense and many are more than willing to share their result.You can get help of other AdSense pulishers at AdSense Help Group.Remove the “Advertise on this site” from your AdSense block until your site is big enough to attract real advertisers. This will help to clear off many MFA (made-for-adsense) sites. You can disable it from AdSense account setting.Use AdSense Competitive Ads Filter to remove irrelevant ads.Try variations of AdSense colors, format, position on different pages to make it more unpredictable for your visitors.Watch your AdSense tips earning. Notify AdSense hack Team if you find anything suspicious. Your competitors might try to sabotage your account, or your well-meaning friend keep on clicking on the ads thinking they are helping you.Use Google AdSense section targeting to help AdSense deliver more relevant ads.Let earning money!money!