Blog của bạn sẽ trở nên đẹp và bắt mắt hơn nếu bạn thêm số đếm cho phần nhận xét thay vì chỉ để các nhận xét bình thường. Do mặc định  khi số nhận xét quá 200 thì sẽ tự động phân trang (mỗi trang gồm 200 nhận xét), script đếm nhận xét cơ bản chỉ dành cho trang đầu tiên, sang trang thứ 2 (nhận xét số 201 đến số 400) sẽ bắt đầu đếm lại từ số 1, tương tự đến trang thứ 3, 4, 5… cũng lặp lại như vậy.

Với các thủ thuật tạo số đếm thông thường thì sẽ không thể đếm được. Do vậy hôm nay mình sẽ giới thiệu cách khác.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML 
4. Chọn Mở rộng tiện ích .
5. Thêm đoạn mã trước đây trước thẻ ]]></b:skin>

.comment-number {
float: right;
background: url(URL hình ảnh) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

Trong đó: Bạn có thể thay hình nền cho số đếm nhận xét theo URL hình ảnh màu đỏ. Nếu vị trí số đếm không cân xứng với hình nền thì bạn điều chỉnh thông số ở 2 dòng màu xanh. margin-right: 15px; margin-top: -35px;

- Code này áp dụng cho tất cả các mẫu bên dưới

6. Tìm cho mình 2 đoạn code sau:

          Đoạn (1):

<b:loop values='data:post.comments' var='comment'>

          Đoạn (2):

<data:commentPostedByMsg/>

Sau đây mình sẽ giới thiệu cho ác bạn một số phương pháp tạo số đếm comment từ nhiều tác giả khác nhau:

PHƯƠNG PHÁP 1. MẪU CỦA BLOGTRUYEN.COM:

- Đặt trước đoạn (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
var cmPage = (location.href.match("commentPage=")) ? location.href.split("commentPage=")[1].split("#")[0] : 1;
var cm_show_num = (cmPage - 1)*200;
function showcomnumber(){ cm_show_num++; document.write(cm_show_num); }
//]]>
</script>

-  Đặt sau đoạn (2) bằng đoạn code bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>showcomnumber()</script>
</a>
</span>

PHƯƠNG PHÁP  2: MẪU CỦA FANDUNG.COM:

Đặt đoạn code sau vào trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
//]]>
</script>

- Đặt trước đoạn (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
var urlcm = location.href;
var pagecm = urlcm.GetValue("commentPage");
if (pagecm==undefined) { pagecm = 1; }
var CommentsCounter =(pagecm - 1)*200; ;
//]]>
</script>

Đặt sau đoạn (2) bằng script bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

PHƯƠNG PHÁP 3: PHƯƠNG PHÁP CỦA CÁC BLOGSPOT TIẾNG ANH

- Đặt trước đoạn (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
var regexpatt = new RegExp('commentPage=([0-9]*)');
var results = regexpatt.exec( window.location.href );
if(results == null)
{
var CommentsCounter = 0;
}
else
{
var CommentsCounter = (results[1] - 1) * 200;
}
//]]>
</script>

Đặt sau đoạn (2) bằng script bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

PHƯƠNG PHÁP 4: PHƯƠNG PHÁP CỦA THỦ THUẬT BLOGGER:

Cách 1: 

- Đặt trước đoạn (1) bằng script bên dưới:

<script type='text/javascript'>
//<![CDATA[
urlPagi = unescape(location.href);
isPage = urlPagi.indexOf('?commentPage');
if(isPage > -1) {
searchP = isPage + 13;
numPag = urlPagi.substr(searchP);
} else {
CommentsCounter = 0;
}
//]]>
</script>

Đặt sau đoạn (2) bằng script bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Cách 2: 

- Đặt trước đoạn (1) bằng script bên dưới:

<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=1&quot;'>
<script type='text/javascript'>var CommentsCounter=200;</script>
<b:else/>
<script type='text/javascript'>var CommentsCounter=0;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=2&quot;'>
<script type='text/javascript'>var CommentsCounter=400;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=3&quot;'>
<script type='text/javascript'>var CommentsCounter=600;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=4&quot;'>
<script type='text/javascript'>var CommentsCounter=800;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=5&quot;'>
<script type='text/javascript'>var CommentsCounter=1000;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=6&quot;'>
<script type='text/javascript'>var CommentsCounter=1200;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=7&quot;'>
<script type='text/javascript'>var CommentsCounter=1400;</script>
</b:if>

Đặt sau đoạn (2) bằng script bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

7. Lưu mẫu lại.

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

Xem thêm…

Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog vận hành trên nền tảng Wordpress. Cùng với tiện ích "Page Navigation – phân trang cho Blogspot", cả hai góp phần điều hướng tốt hơn cho Web/Blog của bạn.

Lần trước namkna đã giới thiệu cho các bạn cách tạo thanh điều hướng (trạng thái) Breadcrums nhưng nhược điểm của nó là chỉ chạy tốt với các bài viết có một nhãn. nhưng với các bài viết 2 nhãn thì không chạy được hôm nay namkna sẽ hướng dẫn các bạn cách khắc phục nó.

Demo for Post

Cách thực hiện:

1. Đăng nhập Blogger
2. Vào Thiết Kế (Design)
3. Chọn tab Chỉnh Sửa HTML (Edit HTML)
4. Chọn Mở Rộng tiện ích mẫu (Expand Widget Templates). 
5. Thêm đoạn code sau trước thẻ  ]]></b:skin>

.breadcrumbs{
float:left;
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:15px;font-weight:bold;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Tìm đến đoạn code tương tự như sau:

<b:if cond='data:post.title'>
<h3 class='post-title entry-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>

- Trong đoạn code trên  thẻ h3 tùy blog có thể thay đổi là h1 hay h2

Đoạn code này định dạng tiêu đề bài viết ỏ các kiểu trang (trang index, trang item và trang static_page). Việc của bạn cần làm là thay toàn bộ đoạn code nói trên bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
               <b:if cond='data:label.name == &quot;Blogspot-tips&quot;'>
&#187;<a href='/search/label/Blogspot-tips?max-results=5'>Blogspot-tips</a>
                 <b:loop values='data:post.labels' var='label'>
                   <b:if cond='data:label.name == &quot;Blogspot-tips&quot;'>
                   <b:else/>
&#187;<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'> <data:label.name/></a>
                   </b:if>
                 </b:loop>
               <b:else/>
               </b:if>  
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-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>
</h2>
</b:if>
</b:if>

Trong đó: 

• Thay Blogspot-tips thành nhãn số 1 của bạn.
• Nếu blog của bạn có nhiều nhãn lớn bạn chỉ cần Copy phần mau xanh vào sau nó là ok.
• Nếu blog của bạn chỉ sử dụng 1 nhãn cho mỗi bài viết thì bạn tham khảo các khác Tại đây

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

Xem thêm…

Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog vận hành trên nền tảng Wordpress. Cùng với tiện ích "Page Navigation – phân trang cho Blogspot", cả hai góp phần điều hướng tốt hơn cho Web/Blog của bạn.

Hơn nữa, với breadrumb, độc giả có thể biết được chủ đề mình đang theo dõi thuộc trương mục (Breadcrumbs based on a post's category) nào, thời gian nào (Breadcrumbs based on a post's date), có thể giúp gia tăng lượng click của độc giả và kéo họ ở lại Blog của bạn lâu hơn.

Chính từ những ưu điểm đó, hôm nay Namkna sẽ giới thiệu cho các bạn 2 style của tiện ích này:
1. Style 1: dựa trên trương mục (có dạng : Browse » Home » Category » Post Title)
2. Style 2: dựa trên thời gian (có dạng : You are here: Home > Year > Month > Post Title)

A. Style 1 : Breadcrumbs based on a post's category (BloggerPlugins)

1. Đầu tiên các bạn Đăng nhập vào blog => Thiết Kế => Chỉnh Sửa HTML => Mở rộng tiện ích mẫu và làm theo các bước bên dưới:
2. Tìm đoạn code bên dưới :

<b:include data='top' name='status-message'/>

Và thay thế thành :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

3. Tiếp theo, tìm đoạn code này :

<b:includable id='main' var='top'>

Và thay thế thành :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

- Bạn có thể sửa phần màu xanh theo ý thích của bạn.
4. Cuối cùng, thêm đoạn code CSS bên dưới vào trước thẻ đóng  ]]</b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

5. Save template

B. Style 2 : Breadcrumbs based on a post's date (PurpleMoggy)

1. Đầu tiên các bạn Đăng nhập vào blog => Thiết Kế => Chỉnh Sửa HTML => Mở rộng tiện ích mẫu và làm theo các bước bên dưới:
2. Tìm đoạn code tương tự như bên dưới :

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>

- Chèn đoạn code dưới vào sau đoạn code trên : 

<b:include data='post' name='breadcrumbs'/>

3. Cuộn xuống dưới cùng của widget này (xem hình minh họa bên dưới)

Kéo xuống tìm thẻ đóng  </b:includable>  ngay sau Code trên và dán Code bên dưới vào sau thẻ </b:includable>  hoặc dán vào giữa  </b:includable>  và  </b:widget>  tương ứng:

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<script type="text/javascript">
//<![CDATA[
var strCrumbHref = location.href.toLowerCase();
var intCrumbHtml = strCrumbHref.indexOf('.html');
var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
var intCrumbYearStart = intCrumbWhereAt - 7;
var intCrumbMonthStart = intCrumbWhereAt - 2;
var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
var intCrumbYearPlusOne = intCrumbYear + 1;
var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
var strCrumbMonth = '';
switch(strCrumbMonthNum) {
case '01':
strCrumbMonth = 'January';
break;
case '02':
strCrumbMonth = 'February';
break;
case '03':
strCrumbMonth = 'March';
break;
case '04':
strCrumbMonth = 'April';
break;
case '05':
strCrumbMonth = 'May';
break;
case '06':
strCrumbMonth = 'June';
break;
case '07':
strCrumbMonth = 'July';
break;
case '08':
strCrumbMonth = 'August';
break;
case '09':
strCrumbMonth = 'September';
break;
case '10':
strCrumbMonth = 'October';
break;
case '11':
strCrumbMonth = 'November';
break;
case '12':
strCrumbMonth = 'December';
break;
}
var strCrumbOutput = ' > ';
strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> > ';
strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
document.write(strCrumbOutput);
//]]>
</script>
<noscript>
<b:if cond='data:post.labels'>
>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
</b:if>
</noscript>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>

- Bạn có thể sửa phần màu xanh theo ý thích của bạn. 
4. Cuối cùng, chèn đoạn code sau vào trước thẻ đóng  ]]</b:skin>

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}

5. Save template

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

Xem thêm…

Hiện nay đa số các blogger chuyên nghiệp đều ẩn hoặc xóa thanh navbar trên đầu blog. Do vậy khi thao tác chỉnh sửa là tương đối khó khăn. Để tiện cho việc chỉnh sửa template và post bài, hôm nay mình xin giới thiệu cho các bạn 1 thủ thuật tạo một bảng "Admin Control Panel" vào ngay trong blog. Việc tạo bảng này sẽ giúp cho bạn khỏi phải chuyển qua lại giữa 2 trang : trang blog của bạn và trang chủ Blogger khi mình cần chỉnh sửa, đăng bài và xem mẫu.

Để làm được một tiện ích như vậy bạn càn phải đặt nó trong một class có dạng: class='item-control blog-admin'

» Bắt đầu thủ thuật:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Phần tử trang 
4. Chọn Thêm tiện ích => Chọn Thêm tiện ích HTML/Javar Scrip .

5. Thêm đoạn code bên dưới vào.

<span class='item-control blog-admin'>
<h2>Bảng điều khiển</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>Đăng bài</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#allposts'>Sửa bài đăng</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#basicsettings'>Cài đặt</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Bố cục</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Sửa HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#publishedcomments'>Nhận xét</a>
|
<a href='http://www.blogger.com/logout.g'>Thoát</a>
</span>

- Trong đó bạn thay BlogIdNumber thành số ID của blog bạn vào nha. Phần này mình hướng dẫn với các bạn đang dùng giao diện mới của blogspot.

- Mở rộng: Các bạn có thể thay đổi nội dung bên trong bằng các thay đổi phần nằm giữa 2 thẻ:

<span class='item-control blog-admin'>
Nội dung bạn muốn hiển thị.</span>

- Nếu chỉ áp dụng đến đây thì đoạn code trên sẽ nằm cố định một vị trí. Về căn bản tiện ích này chỉ có chủ nhân blog mới nhìn thấy nên không cần phải trang bị quá nhiều. Tuy nhiên các bạn có thể sử dụng CSS để làm đẹp và tăng tính năng động bằng cách thêm các class như only-amin

<span class='item-control blog-admin'>
<span class='only-amin'>
Nội dung bạn muốn hiển thị.</span></span>

- Khi đó bạn sẽ phải khai báo CSS cho class đó như sau:

<style>
.only-amin{position:fixed; top:100px;//thuộc tính của CSS}
</style>
<span class='item-control blog-admin'>
<span class='only-amin'>
Nội dung bạn muốn hiển thị.</span></span>

- Trong phần thuộc tính CSS mình thêm position:fixed; top:100px; để cho tiện ích này luôn luôn xuất hiện trên một vị trí cách đầu blog 100 px cho dù bạn đang xem ở bất kỳ vị trí nào. (tất nhiên bạn có thể thay đổi 100px theo ý bạn rùi). Và đừng quyên thêm các thuộc tính khác như widht (chiều rộng), height (chiều cao- Cái này thường không cần thiết vì nếu bạn cho chiều cao nhỏ quá sẽ xuất hiện thanh quận) ringht:..px để quyết định xem nó nằm bên phải hay bên trái

- Tóm lại bạn có một đoạn code mới dạng như sau:

<style>
.only-amin{width:200px; position:fixed; top:100px;right:10px; background: #E0FCB9;box-shadow: 2px 2px 2px #666}
</style>
<span class='item-control blog-admin'>
<span class='only-amin'>
<h2>Bảng điều khiển</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>Đăng bài</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#allposts'>Sửa bài đăng</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#basicsettings'>Cài đặt</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Bố cục</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Sửa HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#publishedcomments'>Nhận xét</a>
|
<a href='http://www.blogger.com/logout.g'>Thoát</a>
</span>
</span>

- Bạn hãy tự thể hiện khả năng sáng tạo của bạn nha.

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

Xem thêm…

Khung liên hệ là một công cụ để người đọc Blog có thể gửi các thắc mắc phản hồi với Administrator của Blog hay Website nào đó. Do vậy khung liện hệ đối với mỗi Blog Web site rất quan trọng.

DEMO

Nếu còn nhớ các bạn sẽ thấy mình từng giới thiệu cho các bạn 2 Form liên hệ từ kontactr  và   Foxyform

Hôm nay Namkna giới thiệu cho các bạn một cách hoàn toàn khác đó là: Tạo Khung Liên Hệ Đẹp với docs.google.com . 

☼ Bắt đầu thủ thuật:

Đăng nhập vào  docs.google.com  click Tạo mới và chọn Mẫu.

- Ở cửa sổ chỉnh sửa biểu mẫu điền tiêu đề biểu mẫu. 

- Biểu mẫu cho 2 trường là Câu hỏi Mẫu 1 và Câu hỏi Mẫu 2. Viết Tiêu đề Câu hỏi vào, nếu là câu hỏi bắt buộc thì click vào ô Đặt là câu hỏi bắt buộc.

- Sau đó chọn Đã xong để lưu. Muốn thêm câu hỏi mới thì chọn Nhân bản phía bên phải. 

- Với trường Message (Tin nhắn) thì ở Loại câu hỏi bạn chọn văn bản của đoạn văn bản.

Bạn có thể click vào Chủ đề rồi chọn chủ đề phù hợp với blog của mình. Tiếp đó click vào Tác vụ khácchọn Chỉnh sửa xác nhận để thay đổi dòng thông báo mọi người sẽ thấy sau khi gửi biểu mẫu của bạn.

Giờ click vào Tác vụ khác chọn Nhúng và copy lấy mã HTML để chèn vào blog của bạn.

Quay lại trang quản lý blog chọn Bài đăng mới, chọn Chỉnh sửa HTML và paste đoạn mã vừa copy vào, nhớ thay đổi width và height cho phù hợp với blog của bạn.

Giờ thì blog của bạn đã có trang liên hệ khá chuyên nghiệp rồi. Quay trở về Google Docs click vào file biểu mẫu vừa tạo và tìm đến menu Công cụ rồi chọn Quy tắc thông báo...

Ở cửa sổ Thiết lập quy tắc thông báo bạn chọn các hình thức thông báo rồi lưu lại.

Bây giờ mỗi lần có người sử dụng biểu mẫu để gửi tin nhắn cho bạn thì Google Docs sẽ thông báo về email.

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

Xem thêm…

Menu sử dụng jQuery nhìn rất đẹp mắt và gọn nhẹ. Thích hợp cho các bạn theo phong cách đơn giản, gọn nhẹ, tất cả sẽ hiện ra khi bạn di cuột vào chữ Menu.

Xem Demo

☼ Bắt đầu thủ thuật
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế 

3. Chọn Phần tử trang 
4. Thêm tiện ích HTML/Javarscrip  
5. Và dán code bên dưới vào:

<script type="text/javascript"src="http://tanchau123.googlecode.com/files/Code_Tanchau123.blogspot.com.txt"></script>
<style type="text/css">
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 5px;
padding: 10px;
font: normal 12px verdanal;
z-index: 100;
}
.megamenu .column{
float: left;
width: 180px;
margin-right: 5px;
}
.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 5px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 13px verdana;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
</style>
<script type="text/javascript">
jQuery.noConflict();
var jkmegamenu={
effectduration: 300, //duration of animation, in milliseconds
delaytimer: 200, //delay after mouseout before menu should be hidden, in milliseconds
//No need to edit beyond here
megamenulabels: [],
megamenus: [], //array to contain each block menu instances
zIndexVal: 1000, //starting z-index value for drop down menu
$shimobj: null,
addshim:function($){
$(document.body).append('<iframe id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
this.$shimobj=$("#outlineiframeshim")
},
alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},
showmenu:function(e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $menu=megamenu.$menuobj
var $menuinner=megamenu.$menuinner
if ($menu.css("display")=="none"){
this.alignmenu(jQuery, e, megamenu_pos)
$menu.css("z-index", ++this.zIndexVal)
$menu.show(this.effectduration, function(){
$menuinner.css('visibility', 'visible')
})
}
else if ($menu.css("display")=="block" && e.type=="click"){ //if menu is hidden and this is a "click" event (versus "mouseout")
this.hidemenu(e, megamenu_pos)
}
return false
},
hidemenu:function(e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $menu=megamenu.$menuobj
var $menuinner=megamenu.$menuinner
$menuinner.css('visibility', 'hidden')
this.$shimobj.css({display:"none", left:0, top:0})
$menu.hide(this.effectduration)
},
definemenu:function(anchorid, menuid, revealtype){
this.megamenulabels.push([anchorid, menuid, revealtype])
},
render:function($){
for (var i=0, labels=this.megamenulabels[i]; i<this.megamenulabels.length; i++, labels=this.megamenulabels[i]){
if ($('#'+labels[0]).length!=1 || $('#'+labels[1]).length!=1) //if one of the two elements are NOT defined, exist
return
this.megamenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2], hidetimer:null})
var megamenu=this.megamenus[i]
megamenu.$anchorobj.add(megamenu.$menuobj).attr("_megamenupos", i+"pos") //remember index of this drop down menu
megamenu.actualwidth=megamenu.$menuobj.outerWidth()
megamenu.actualheight=megamenu.$menuobj.outerHeight()
megamenu.offsetx=megamenu.$anchorobj.offset().left
megamenu.offsety=megamenu.$anchorobj.offset().top
megamenu.anchorwidth=megamenu.$anchorobj.outerWidth()
megamenu.anchorheight=megamenu.$anchorobj.outerHeight()
$(document.body).append(megamenu.$menuobj) //move drop down menu to end of document
megamenu.$menuobj.css("z-index", ++this.zIndexVal).hide()
megamenu.$menuinner.css("visibility", "hidden")
megamenu.$anchorobj.bind(megamenu.revealtype=="click"? "click" : "mouseenter", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
clearTimeout(menuinfo.hidetimer) //cancel hide menu timer
return jkmegamenu.showmenu(e, parseInt(this.getAttribute("_megamenupos")))
})
megamenu.$anchorobj.bind("mouseleave", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
if (e.relatedTarget!=menuinfo.$menuobj.get(0) && $(e.relatedTarget).parents("#"+menuinfo.$menuobj.get(0).id).length==0){ //check that mouse hasn't moved into menu object
menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu
jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))
}, jkmegamenu.delaytimer)
}
})
megamenu.$menuobj.bind("mouseenter", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
clearTimeout(menuinfo.hidetimer) //cancel hide menu timer
})
megamenu.$menuobj.bind("click mouseleave", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu
jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))
}, jkmegamenu.delaytimer)
})
} //end for loop
if(/Safari/i.test(navigator.userAgent)){ //if Safari
$(window).bind("resize load", function(){
for (var i=0; i<jkmegamenu.megamenus.length; i++){
var megamenu=jkmegamenu.megamenus[i]
var $anchorisimg=(megamenu.$anchorobj.children().length==1 && megamenu.$anchorobj.children().eq(0).is('img'))? megamenu.$anchorobj.children().eq(0) : null
if ($anchorisimg){ //if anchor is an image link, get offsets and dimensions of image itself, instead of parent A
megamenu.offsetx=$anchorisimg.offset().left
megamenu.offsety=$anchorisimg.offset().top
megamenu.anchorwidth=$anchorisimg.width()
megamenu.anchorheight=$anchorisimg.height()
}
}
})
}
else{
$(window).bind("resize", function(){
for (var i=0; i<jkmegamenu.megamenus.length; i++){
var megamenu=jkmegamenu.megamenus[i]
megamenu.offsetx=megamenu.$anchorobj.offset().left
megamenu.offsety=megamenu.$anchorobj.offset().top
}
})
}
jkmegamenu.addshim($)
}
}
jQuery(document).ready(function($){
jkmegamenu.render($)
})
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
<a href="http://tanchau123.blogspot.com/" id="megaanchor"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpboL6xvLxOUHZWknRfMdRzPTuuFufePnB93EGdF0yFdVP9DFztYqNfKIu5QQN2Hfkhbk6PUmM1tnWP3ntlRXgvZg5MR_Kc4yuIBX3VJBkV6jaXFdJlZB98Q1zpjGgX5k1USA8-o9VTFU/s1600/Megaanchor-menu-namkna-ngoctra-1.gif" style="border:0px"/ > MENU </a>
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7opUcpkSRJk2-4ij-x7FhWYoLwUmCZOIpButX-WFf0sKcrSvliDXsyVJkAsnw-VIMxkUfXjk3pZmrZHZLvFPj4T4rVth3QwhUnvOLcDI-6X9evuDNXurmljgF6g-KLalw7weqTupLfuw/s1600/Megaanchor-menu-namkna-ngoctra-2.gif" alt="" style="border:0px;"/ >Phim</h3>
<ul>
<li><a href="http://tanchau123.blogspot.com/p/phim-bo.html"> Phim Bộ </a></li>
<li><a href="http://tanchau123.blogspot.com/p/code-du-phong.html"> Kinh Dị </a></li>
<li><a href="http://tanchau123.blogspot.com/p/lien-he.html"> Hành Động </a></li>
<li><a href="http://tanchau123.blogspot.com/p/phim-hai-huoc.html"> Hài Hước </a></li>
<li><a href="http://tanchau123.blogspot.com/p/phim-vo-thuat.html"> Võ Thuật </a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xUggs0ZnSw0cL6Jexb3sk3OS3wh6IcM36H75xVqNbA3ASPhb88Oa-oI5nYWkyiuJkOaifkCh3P5txOYHWt0kb75QQJee_k8XoUUeesXCTPtwmI-LfBoRl_mTx4R0rzf0V3GEcXrwKXM/s1600/Megaanchor-menu-namkna-ngoctra-3.gif" alt="" style="border:0px;"/ > Xem </h3>
<ul>
<li><a href="http://tanchau123.blogspot.com/">VTV</a></li>
<li><a href="http://www.blogger.com/home">Đăng nhập</a></li>
<li><a href="http://namkna.blogspot.com/">Control Panel</a></li>
<li><a href="http://namkna.blogspot.com/">Thoát</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjFSxEjKUCG7ds80ezzhwdICOdrkLOyn0gB1XWnbHtqfUk-ySL7ZB4KcNRXWyh53dvkBiA4OWizOavZwc6UXcnunNS6dwEoinQZdo_a00Gn8AsSKn0wR9otZ6B5ajDSNLmso7hatRU2s/s1600/Megaanchor-menu-namkna-ngoctra-3_2.gif" alt="" style="border:0px;"/ > Story</h3>
<ul>
<li><a href="http://namkna.blogspot.com/search/label/Love%20-%20Friend"> Love story </a></li>
<li><a href="http://namkna.blogspot.com/search/label/BlogRadio"> Blogradio </a></li>
<li><a href="http://namkna.blogspot.com/2011/02/qua-tang-cuoc-song_7172.html"> Quà tặng cuộc sống </a></li>
<li><a href="http://namkna.blogspot.com/2011/12/khoanh-khac-ky-dieu-tuyen-tap.html"> Khoảnh khắc kỳ diệu </a></li>
</ul>
</div>
<br style="clear: left" />
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMkHFR3jAMIcrBiHX_bJJ7Q98XFu8UXXPfqYeAcZrUKMDZj1iAyi4SYtavFhXAaomognddcQLs0ngE_hT7A-oFAb9IebRu1uEBiYs0sFLljTBO-5yBeH5FPfyDdMYK1r238HeUuuXYV4/s1600/Megaanchor-menu-namkna-ngoctra-3_3.gif" alt="" style="border:0px;"/ > Thủ thuật</h3>
<ul>
<li><a href="http://namkna.blogspot.com/search/label/Blogspot-tips"> Blogspot </a></li>
<li><a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips"> Blog Yahoo </a></li>
<li><a href="http://namkna.blogspot.com/search/label/Yahoo"> Messenger</a></li>
<li><a href="http://namkna.blogspot.com/search/label/World-PPT"> World-PPT/a></li>
<li><a href="http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html"> Photoshop</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnA9i-1OZnbCJeOYtzuj4C7226SyIeDDQcjbxyutxLbltH3BBnZ1SsfAk4istNulhm8EsjmFG38CmSJHztQ7MLLrxNQM7-hJ_o89pVlcAOIm7dJJuUCL7l0KFPB-hVl3w62kiTHr7HpRQ/s1600/Megaanchor-menu-namkna-ngoctra-3_4.gif" alt="" style="border:0px;"/ > Download</h3>
<ul>
<li><a href="http://namkna.blogspot.com/search/label/Lam-Phim">Làm phim</a></li>
<li><a href="http://namkna.blogspot.com/search/label/IDM-Downloand">IDM</a></li>
<li><a href="http://namkna.blogspot.com/search/label/Phan%20Mem">Miễn phí</a></li>
<li><a href="http://namkna.blogspot.com/2011/02/nhac-hinh.html#">Phim</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KBApPBpmNFJTlKHS32frrYRpQdO_l-R6-5_SKWeCN7WotUr7esgYFSpLchFZ0KJDYQkFzRfwOjpXbHTvCG7JFo499xHOtQoyq9a6tXIT7FHYGYYreqPuvjH3rQBhWxeFpcZpX8aZWMc/s1600/Megaanchor-menu-namkna-ngoctra-3_4_2.gif" alt="" style="border:0px;"/ > Nge nhạc</h3>
<ul>
<li><a href="http://namkna.blogspot.com/2011/02/nhac-hinh.html">Nhạc hình</a></li>
<li><a href="http://namkna.blogspot.com/2011/02/quang-le-va-nhung-ca-khuc-tru-tinh-hay_26.html">Nhạc vàng</a></li>
<li><a href="http://namkna.blogspot.com/2011/01/music.html">Không lời</a></li>
<li><a href="http://namkna.blogspot.com/2011/01/nhac-quoc-te.html">Quốc tế</a></li>
</ul>
</div>
</div>

- Các bạn thay các liên kết và tên cho phù hợp với blog là OK.

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

Xem thêm…