Thứ Bảy, 24 tháng 12, 2011

8 Thủ thuật blogger

1.Bắt đầu tạo một bản mẫu
Một mẫu đẹp là rất quan trọng cho sự thành công của blog của bạn trong việc truy cập và kiếm tiền với AdSense. Trước khi bắt đầu tùy chỉnh mẫu của bạn, bạn có thể tải xuống một mẫu đơn giản của Blogger, ví dụ như "Minima" (một mẫu khá phổ biến, và được nhiều người dùng): sau đó ta xóa tất cả code CSS trong thẻ<b:skin> và như thế thẻ <b:skin> chỉ còn lại như bên dưới:

<b:skin> /*</b:skin>

Sau đó ta sẽ thay thế bằng các code CSS cho riêng mình vào trong thẻ <style>

Ví dụ như ta có code như bên dưới:

<b:skin> /*</b:skin>
/*----------------------------*/
/*--- RESET HTML TAG ---*/
/*----------------------------*/
<style type="text/css">
body{
width:650px;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial;
font-size:11px;
color:#333333;
background-color:#FFFFFF;
}

a:link, a:visited, a:hover{text-decoration:none;}

h2 {
clear:both;
padding-top:20px;
}
ul {
list-style:none;
margin:0;
padding:0;
}

li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}

li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}

li a {
background:url(image.jpg) repeat 0 0;
}

li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}

<style>
...
...
...

- Và lúc này bạn có thể thêm các id, class, các thành phần, yếu tố mới cho mẫu của bạn.

2. Tạo tiêu đề và miêu tả cho blog của bạn
- Để tạo một ấn tượng riêng, phong cách riêng cho bạn, thì tiêu đề của bạn phải nói lên được nội dung blog của bạn. Cơ bản thì trong mỗi template blog đều có dòng code tiêu đề của blog

Và hãy thay đổi chúng, ví dụ như blog của mình sẽ là:

<title>Tips For Blogger | BlOg FD</title>

- Ngòai ra, bạn nên tạo thêm một thẻ <meta> để viết vài dòng mô tả blog của bạn, để làm điều này bạn copy đọan code bên dưới và dán vào sau dòng <head>

hãy thay code màu xanh thành 1 vài câu để mô tả blog của bạn, ví dụ như blog của mình sẽ là

Và khi đó bạn sẽ thấy các tiêu để và mô tả đó được hiển thị trên cỗ máy tìm kiếmgoogle như hình bên dưới:

3. Tạo favicon cho blog của bạn
- Một trong những cái để tạo nên phong cách riêng cho bạn đó chính là biểu tượng trên thanh address (favicon). Thông thường, các blogspot đều có favicon mặc định là biểu tượng của Blogger

- Để thay thế favicon của blogger thành favicon của mình thì bạn chỉ cần thêm code bên dưới vào trước thẻ </head>

- Các bạn có thể vào đây để tạo một file favicon cho riêng mình.

4. Tạo một thanh menu chính.
- Đơn giản nhất là bạn tạo một thanh menu nằm ngang và đặt nó trên cùng của blog bạn, và tạo các liên kết cho các menu đó. Ví dụ như blog của mình, mình sẽ tạo các menu chính như : About us, Contact, RSS, ...

5. Tạo các chuyên mục với các chuyên mục con trong nó:
- Nếu blog của bạn có nhiều nhãn, chuyên mục, hãy gôm chúng chung lại thành một chuyên mục nào đó. Và bên trong nó sẽ chứa các nhãn có nội dung liên quan tới chuyên mục đó. Và một dạng menu nhiều tầng là thích hợp nhất với việc này. Với menu lớp cao nhất là chuyên mục mà bạn đặt để gôm chung các nhãn có cùng nội dung, và các lớp menu nhỏ hơn sẽ là các nhãn...

Các bạn có thể tham khảo bài viết này để tạo một thanh menu nhiều cấp như trên.

6. Hiển thị vài tiện ích HTML ở trang chủ
- Đôi khi rất hữu ích khi cho một tiện ích HTML nào đó chỉ được phép hiển thị ở trang chủ, và để làm điều này, bạn chỉ cần sử dụng thẻ <b:if> của blogger là được, xem đọan code bên dưới :

<b:if cond='data:blog.url == data:blog.homepageUrl'>



</b:if>

Bằng cách này, nếu trang bạn đang hiển thị không phải là trang chủ thì tiện ích đó sẽ không được hiển thị.

7. Tạo các widget "Bài viết mới nhất" và các "comment mới nhất" từ link RSS
- Thông thường blogger đều có hỗ trợ link RSS cho bài viết và comment của bạn. Và nó có dạng như bên dưới:

link RSS bài viết
http://YOURBLOG.blogspot.com/feeds/posts/default
link RSS comment
http://YOURBLOG.blogspot.com/feeds/comments/default

-Ngòai ra các nhãn của bài viết bạn cũng được cấp link RSS, và có dạng như bên dưới:

http://YOURBLOG.blogspot.com/feeds/posts/default/-/Label

- Tuy nhiên bạn cũng có thể tạo link RSS cho bài viết từ FeedBurner, và bạn sẽ sử dụng được nhiều tiện ích từ feedburner, thông dụng nhất là tiện ích nhận bài viết từ blog của bạn qua mail.
Và link RSS của feedburner có dạng như bên dưới:

http://feeds2.feedburner.com/yourname-RSSlink

Và bạn có thể vào đây để tạo một link RSS cho cái bài viết của bạn.

8. Add các trang xã hội vào blog của bạn
- Các trang xã hội mà một trong những cách để cho người khác biết đến blog của bạn

Chúc các bạn thành công.(fandung.com)

Sắp xếp lại ổ cứng sau khi bị phân mảnh

Hướng dẫn sắp xếp lại ổ cứng khi bị phân mảnh

Việc sắp xếp lại ổ cứng có ý nghĩa rất quan trọng đối với máy tính của bạn, giúp máy tính của bạn chạy nhanh hơn, ổ định hơn, ít bị treo máy ....

Trong Winxp có sẵn một công cụ cho bạn sắp xếp lại ổ đĩa.
Các bạn vào ổ đĩa cần sắp xếp lại (thường là ổ C) >>> click chuột phải chọn "Properties" >>> chọn tap "Tool" >>>> Chọn "Defragment Now" >>> chọn tiếp "Defragment"
để sắp xếp lại ổ đĩa.

Ý nghĩa của các vạch màu:
Màu đỏ: File bị xóa
Màu xanh nhợt: File bị di chuyển
Màu xanh tím: Tình trạng các file trong đang có trong ổ đĩa

Để chống phân mảnh ổ địa bạn không nên chép copy hay delete nhiều file trên ổ đĩa có chứa hệ điều hành.

Thứ Tư, 2 tháng 3, 2011

Tìm hiểu template của Blogspot

Blogspot không có nhiều tiện ích đi kèm và muốn có thêm những tính năng mới thì chúng ta cần chỉnh sửa trong template. Vấn đề ở đây là đặt vào vị trí nào cho hợp lý? Template của Blogspot rất nhiều, cùng với một thủ thuật nhưng có thể người này áp dụng dễ dàng còn người khác lại gặp khó khăn với template của mình? Bởi việc áp dụng một cách thụ động các thủ thuật đã dẫn đến tình trạng như vậy. Cho dù có nhiều template khác nhau nhưng chạy trên blogspot thì những đoạn mã cơ bản nhất chúng vẫn giống nhau. Một thủ thuật hoạt động được trên template này thì cũng sẽ hoạt động được trên template khác. Trước tiên muốn có thêm tính năng cho template của mình thì bạn cần phải hiểu rõ template đó đã.

Template của Blogspot là file XML, vậy XML là gì? XML viết tắt của chữ eXtensible Markup Language (ngôn ngữ nâng cấp có thể mở rộng) là một bộ qui luật về cách chia một tài liệu ra làm nhiều phần, rồi đánh dấu và ráp các phần khác nhau lại để dễnhận diện chúng.

Qui luật về cách chia một tài liệu ra làm nhiều phần: nó được định nghĩa ở trong template, đây cũng là điểm khiến XML linh hoạt hơn HTML.
Đánh dấu và ráp các phần khác nhau lại: cái này được xử lý ở máy chủ của Blogger.
Nhận diện chúng: chính là hiển thị của blog trên trình duyệt.

Dưới đây là mô phỏng vắn tắt một template Blogspot:

<?xml version="1.0" encoding="UTF-8" ?>     <!-- định nghĩa XML -->
<!DOCTYPE html>     <!-- định nghĩa doctypes -->
<html ...>
<head>
...
<b:skin>
...
</b:skin>
</head>
<body>

<div ...>

<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>

<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>

...

</div>

</body>
</html>

Như một website thì blog cũng có phần đầu <head>...</head> và phần thân<body>...</body>.

1. Phần đầu - head:
Trong XML có những Tag pair (cặp thẻ) được định nghĩa và đây là một thẻ<b:include data='blog' name='all-head-content'/>. Thẻ này không chứa gì ở giữa nên cần chấm dứt bằng "/>". Đây là một thẻ quan trọng, nó chứa những thông tin về nội dung của phần đầu blog và cả dữ liệu về avatar của tài khoản Blogger.
Trong cặp thẻ <b:skin> là style sheet dành cho blog. Muốn chỉnh sửa giao diện hiển thị của blog thì đây là nơi bạn cần quan tâm. Ngoài ra thì khi view source blog bạn còn thấy một style sheet bên ngoài dành cho widget có tên dạng xxxxxxxxxx-widget_css_bundle.css, là css bên ngoài nên mức độ ưu tiên thấp hơn css trong template.

2. Phần thân - body:
Mỗi template có những layout (bố cục, sắp xếp) khác nhau, chúng được quy định bởi những thẻ <div>, <span>, <ul>, <li>... tuy nhiên chúng có điểm chung là những thanh Add a Gadget, trên thanh đó có những Widget như Blog Posts, Popular Post, HTML/Javascript... Một thanh Add a Gadget được quy định bằng cặp thẻ<b:section>, những Widget được quy định bằng cặp thẻ <b:widget> và những đoạn mã để chạy Widget này được đặt trong cặp thẻ <b:includable>. Blog của bạn có bao nhiêu thanh Add a Gadget thì cũng có từng ấy cặp thẻ <b:section>. Trong cặp thẻ <b:section> có thể chứa 1 hoặc nhiều cặp thẻ <b:widget> hay không có gì nếu chưa add Widget. Trong cặp thẻ <b:widget> có ít nhất một cặp thẻ<b:includable> với id='main'. Mỗi cặp thẻ <b:includable> có thể có các cặp thẻ<b:includable> khác lồng nhau.

Chúng ta sẽ tìm hiểu đoạn mã của Widget Blog Posts, đây là Widget được chỉnh sửa nhiều nhất. Hãy mở template của bạn bằng notepad++ và tìm thẻ <b:widget>với id='Blog1'. Ví dụ: <b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'>. Chúng ta quan tâm tới các cặp thẻ <b:includable> nằm trong cặp thẻ <b:widget> này. Lần lượt click vào từng thẻ <b:includable> rồi nhấn dấu [-] để thu gọn thẻ này lại, xem hình dưới:

Thẻ <b:includable> với id='main' có nhiệm vụ gắn nối các thẻ <b:includable> còn lại với nhau. Thẻ <b:includable> với id='post' và thẻ <b:includable> vớiid='comments' lần lượt là nơi chứa mã của bài đăng và khung nhận xét, có nhiều thủ thuật liên quan tới chúng.

Những thẻ được định nghĩa bởi Blogger bắt đầu bởi b: và thường gặp nhiều nhất là <b:if>, <b:loop> đây là lệnh điều kiện và lệnh lặp. Thẻ<b:includable> là những hàm, mỗi một Widget có một hàm chính với ID làmain.

Khoanh vùng và tìm hiểu dần, bạn sẽ hiểu rõ template của blog mình hơn và dễ dàng thêm bớt, tinh chỉnh để blog tối ưu nhất.

Thứ Năm, 27 tháng 1, 2011

Tạo liên kết bằng ảnh chạy

Thứ Tư, 12 tháng 1, 2011

Rút ngắn bài đọc

Tạo đọc tiếp (read more) cho Blogspot

DUY PHAM | 17:22 17/08/2010 | BLOGGER

Vào Thiết kế, chọn Chỉnh sửa HTML, đánh dấu Mở rộng Mẫu Tiện ích mẫu và tìm dòng sau:

<data:post.body/>

Thay thế nó bằng đoạn code dưới đây.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'/>
<script type='text/javascript'>
var blogID = &quot;6628069224773557671&quot;;
function retriveSummaryPost<data:post.id/>(json){document.getElementById(&quot;summary<data:post.id/>&quot;).innerHTML = json.entry.summary.$t + &quot;...&quot;}
function createSummaryPost<data:post.id/>(POSTID){ var script = document.createElement(&quot;script&quot;);
script.src = &quot;http://www.blogger.com/feeds/&quot;+blogID+&quot;/posts/summary/&quot;+POSTID+&quot;?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>&quot;;
script.type = &quot;text/javascript&quot;; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>(&quot;<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post_body'><data:post.body/></div>
</b:if>

Thay số 6628069224773557671 thành BlogID của bạn và lưu lại.

Tạo bài viết liên quan theo nhãn (related posts by categories)

DUY PHAM | 17:19 18/08/2010 | BLOGGER

Vào Thiết kế -> Chỉnh sửa HTML, chọn Mở rộng tiện ích mẫu và tìm dòng sau:

<data:post.body/>

Dán vào phía dưới <data:post.body/> đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Chọn lưu lại.

Blog

Trang