Placing Google Adsense Under The Posting

[FD's BLOg] - Như chúng ta đã biết, Google Adsense là 1 dịch vụ quảng của Google. Để khách viếng thăm blog của bạn có thể thấy chúng thì vị trí tốt nhất có lẽ header và trong bài viết. Hôm nay mình sẽ hướng dẫn cách chèn code này vào cuối bài viết(hoặc đầu tùy bạn lựa chọn).

Trước tiên, bạn cần phải biết rằng chúng ta không thể đặt trực tiếp code của Google Adsense vào blogger, vì nếu chúng ta đặt nó trực tiếp, sẽ có một thông báo lỗi như dưới đây:

Mẫu của bạn không thể được phân tích cú pháp vì nó không phải là hình thành tốt. Hãy chắc chắn rằng tất cả cácthẻ XML được đóng đúng. XML thông báo lỗi: Các hướng dẫn xử lý phù hợp với mục tiêu "[xX] [mm] [LL]" là không được phép.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

Để làm điều này trước tiên bạn phải mã hóa đọan code của Google ADsense. Ví dụ ta có đọan code của Google ADs sau:

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_slot = "0976076963";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>

Bạn có thể vào trang http://blogcrowds.com và dán code của Google ADs vào và nhấn Parse, trang web sẽ tự động mã hóa cho bạn. Sau đó copy code đó về.

Như vậy đã xong 1 bước, sang bước kế tiếp là chèn đọan code đã mã hóa

1. Đăng nhập blog
2. Vào chỉnh sửa Code HTML
3. Chọn mở rộng tiện ích
4. Tìm đọan code bên dưới, hoặc code tương tự: (code bên dưới là đọan code đã thêm chức năng Read More cho bài viết)

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

5. Và thêm code đã mã hóa vào như bên dưới:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<br/><br/> {đọan code đã mã hóa của Google ADs}

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

6. Save template. Như vậy đã xong

Chúc các bạn thành công.

Read more…

Tips To Delete The message of Blogger Searching Result

[FD's BlOg] - Mỗi khi ta nhấp vào 1 nhãn nào đó trong blogspot thì blogger sẽ hiển thị tất cả các bài có cùng nhãn. Và trêm cùng sẽ có một hộp thọai tin nhắn nhỏ xuất hiện "Hiển thị các bài đăng có nhãn ABC. Hiển thị tất cả bài đăng". Bài viết này mình sẽ hướng dẫn cách xóa nó với 1 thủ thuật nhỏ.

Bắt đầu thực hiện :
1. Đăng nhập blog
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code sau vào phía trên dòng ]]></b:skin>

.status-msg-wrap{
display:none;
}

4. Save template
5. Như vậy là xong, bạn thử coi đọan message đã mất chưa!

Chúc các bạn thành công.

Read more…

Make Multi Column on Blogger Template

[FD's BlOg] - Bạn có bao giờ nhìn thấy phần footer của 1 trang blog nào đó được chia thành 2, 3 hay 4 cột chưa. Hôm nay mình sẽ giới thiệu thủ thuật này cho các bạn.

Để làm điều này, mình khuyên các bạn nên tạo 1 blog mới để thử nếu như bạn có ít kinh nghiệm về chỉnh sửa template của blogger. Không nên thực hiện trực tiếp tên blog của mình khi mà mình chưa dám chắc. Nếu bạn đã khá rành về bố cục blog trong phần HTML (cũng như code CSS) thì mình không ngăn cản bạn làm điều này.

Bước đầu tiên chúng ta cần chuẩn bị là chú ý đến độ rộng của cột mà ta muốn chia nhỏ thành nhiều cộ, số lượng cột mà chúng ta sẽ làm, khoảng cách từ cột này đến cột kia.

Bây giờ mình sẽ hướng dẫn cho các bạn ở mẫu có độ rộng là 660px, và ở đây chúng ta chia thành 3 cột. Như vậy 660px=3x220px, với khoảng cách giữa các cột (padding) là 10px thì độ rộng của các cột theo tính tóan là 205px.

Bây giờ bắt đầu:
1. Đăng nhập blog -> vào chỉnh sửa code HTML (ko nhấn vào mở rộng tiện ích)
2. Chèn đọan CSS bên dưới trên dòng ]]></b:skin>

/* bottom
==================== */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom {
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

4. Tìm đọan code sau:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5. Chèn đọan code bên dưới ngày trên đọan code vừa tìm được:

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>

6. Save template.

Hình minh họa

Trước khi thực hiện thủ thuật

Sau khi thực hiện thủ thuật

Chúc các bạn thành công.

Read more…

Add Digg Button to Post Page

[FD's BlOg] - Bạn có biết trang digg.com? Digg.com là 1 trang web khá phổ biến trên thế giới. Với Digg.com bạn có thể khám phá và chia sẻ nội dung blog của bạn, đây cũng là 1 trong những cách để tăng lượng truy cập vào blog của bạn.

Khi chèn nút Digg vào bài viết, nó sẽ có dạng như sau:

Sau đây là cách làm:

1. Đăng nhập blog
2. Vào Chỉnh sửa Code HTML
3. Nhấn vào Mở rộng tiện ích (Expand Widget Templates)
4. Lưu template lại trước khi thực hiện
5. Tìm đọan code sau, hoặc tương tự:

<p><data:post.body/></p>

6. Xóa chúng và thay thế bằng đọan code sau:

<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>

7. Save template --> Như vậy là xong.

Tuy nhiên, hướng dẫn trên chỉ là cho các template mặc định, còn đối với các template đã chỉnh sửa và thêm tiện ích Read More (Đọc thêm) vào bài viết thì các bạn cần chỉnh sửa lại 1 chút. Và khi chỉnh sửa xong code trông giống như bên dưới:

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>


<b:else/>

<style>.fullpost{display:none;}</style>

<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>


<a expr:href='data:post.url'><b>Read More...</b></a>

</b:if>

Cuối cùng là save template lại.

Chúc các bạn thành công.

Read more…

IMAGE TO LEFT and TITLE TO RIGHT

[FD's BlOg] - Bài viết trước mình có đưa ra thủ thuật chia Header thành 2 cột. Hôm nay với thủ thuật khác cũng sẽ tạo phần header có dạng như 2 cột. Và với thủ thuật này ta sẽ đưa "ảnh logo" sang 1 bên và "Tiêu đề + Mô tả" sang 1 bên.

Khi vào phần chỉnh sửa tiêu đề của blog, ta sẽ thấy có 2 phần. Phần tiêu đề (gồm tiêu đề blog và mô tả blog), phần thứ 2 là logo (banner). Và xuống dưới nữa là lựa chọn ảnh logo nằm sau tiêu đề hay thay thế tiêu đề. Để có thể hiển thị được ảnh sang phía bên trái và tiêu đề sang phải, trước tiên ta phải có 1 tấm hình có kích thước nhỏ hơn chiều rộng của Header.

Với thủ thuật này ta chỉ chỉnh sửa bên CSS mà thôi.

Ví dụ ta có đọan CSS của template Minima như bên dưới:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

- Ở đây chiều rộng là 660px, vậy ta sẽ chọn 1 tấm hình có kích thước khỏang 300px hoặc hỏ hơn. Và tải nó lên blog (trong phần tiêu đề blog), và chọn vị trí là nằm sau "Tiêu đề + Mô tả".
Bấy giờ ta bắt đầu chỉnh sửa CSS. (ở đây ta chỉ chú ý đến 3 class(id) là Header, header h1 và header .description)

1. Tìm đọan CSS sau:(hoặc tương tự)

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

sửa lại là:

#header-inner {
background-position: left;
width:650px;
}

2. Tìm đến CSS của header h1:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

và sửa lại thành:

#header h1 {
margin:0 5px 5px 300px;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

3. Tìm đến CSS của header.description

#header .description {
margin:0 5px 5px;
.........
}

và cũng thay đổi tương tự như của header h1

#header .description {
margin:0 5px 5px 500px;
.........
}

4. Save template lại.

Xem ảnh minh họa bên dưới:

Trước khi chỉnh sửa

Sau khi chỉnh sửa

Read more…

Showing Top Commentators in Blogger

[FD's BlOg] - Với thủ thuật này bạn có thể biết ai đã comment nhiều nhất trong blog của bạn.

Đề làm điều này, bạn tạo 1 widget HTML/Java ở nơi muốn đặt bẳng hiển thị những người comment nhiều nhất. Sau đó dán code bên dưới vào. Như vậy là xong.

Code:

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&filter=nickname&url=http%3A%2F%2FYourBlogName.blogspot.com&num=10" type="text/javascript"></script>

►Chú ý 3 đọan code màu đỏ
+ filter=nickname : Điền tên mà bạn muốn lọc. Ví dụ tên bạn là ABC, nếu bạn không muốn tên mình hiển thị trong list những người comment nhiều nhất thì hãy thay nickname thành ABC
+ YourBlogName.blogspot.com : Địa chỉ URL blog của bạn.
+ num=10 : Số người sẽ xuất hiện trên list.

Xem ảnh minh họa:

Read more…

PUT GOOGLE SEARCH BOX IN BLOG

[FD's BlOg] - Thủ thuật này hơi cũ, nhưng hôm nay mình cũng xin giới thiệu lại. Với thủ thuật này, bạn có thể áp dụng cho nhiều trang web search khác nhau, chỉ cần thay đổi code 1 chút là có thể làm được. Ở đây mình chỉ giới thiệu với Google.

Đầu tiên, chọn nơi muốn hiển thị Box search, rồi tạo 1 widget HTML/Java rồi dán code vào. Ở đây mình sẽ giới thiệu Google Search và Google BlogSearch.

1. Google search:

Hình minh họa:

Code:

<form action="http://www.google.com/search" method="get" target="_blank"><div style="border: 0px solid #ccc; padding: 4px; width: 20em;">
<table border="0" cellpadding="0">
<tbody><tr><td>
<input style="width: 120px;"maxlength="255" value="" name="q" size="25" type="text"/>
<input value="Tìm Kiếm" type="submit"/></td></tr>
<tr><td align="left">
<input checked="checked" value="YourBlog.blogspot.com" name="sitesearch" type="checkbox"/> Chỉ tìm kiếm ở Blog này</td></tr></tbody></table></div></form>

Có thể thay đổi các dòng code màu đỏ để trang trí box search theo ý bạn.

2. Google Blogsearch:

Hình minh họa:

Code:

<FORM METHOD="GET" ACTION="http://blogsearch.google.com/">
<INPUT TYPE="hidden" name="num" value="10" />
<INPUT TYPE="hidden" name="hl" value="en" />
<input name="as_sitesearch" value="YOURBLOG_URL" type="hidden">
<INPUT TYPE="text" NAME="as_q" style="width: 100px;" />
<INPUT TYPE="submit" value="Google Blog Search" />
</FORM>

Read more…

Split header column became two column

[FD's BlOg] - Có bạn sẽ thắc mắc là làm sao để chèn Box search vào header. Tất nhiên là được, nhưng trước khi làm điều này bạn phải chia header của bạn thành 2 hay 3 cột khác nhau.

Có nhiều cách khác nhau để chia cột cho header, ở đây mình sẽ chỉ hướng dẫn với template Magazine template 1. Vì vậy bạn nào muốn làm việc này thì hãy tạo một blog mới, sau đó chèn template Magazine template 1 vào blog của mình, hay có thể thay đổi template cho blog cũ của mình. Có thể download template Magazine template 1 tại đây.

Bây giờ ta bắt đầu:

Dưới đây là hình ban đầu của template (khi chưa có chia cột)

1. Đăng nhập blog
2. Vào Chỉnh sửa Code HTML
3. Tìm đọan code bên dưới

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

4. Thay thế chúng bằng đọan code sau:

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Xuống thấp hơn tìm đọan code sau (hoặc tương tự):

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

6. Thay thế chúng bằng đọan code sau:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Save template.

Như vậy đã xong

xem hình kết quả bên dưới

Read more…