Teen Giao Thanh

Home » Archives for 05/13/09

4+ giải pháp cho việc chèn Javascript vào template blog

20:12 |

4+ Solutions for JavaScript hosting in Blogger

[FD's BlOg] - Ngôn ngữ lập trình javascript là một ngôn ngữ thông dụng cho việc thiết kế web(blog) để tạo lên các hiệu ứng. Tuy nhiên nó là một ngôn ngữ khó, và rất dễ gặp vấn đề về code của nó khi ta chèn nó vào blog, và cụ thể bài viết này là blogspot của Blogger.

Sau đây là 4 giải pháp cho việc chèn file javascript vào blog.

1. Changing .js for .txt (chuyển phần mở rộng .js thành .txt)
- cái mà chúng ta gọi là "scripts" chỉ là một dạng file văn bản, có phần mở rộng là .js, và nó không bắt buộc phải chính xác. Vì thế mà nhiều host không cho phép chúng ta up các file dạng này lên.
- Vì thế để có thể dễ dàng up lên các host, ta sẽ đổi phần mở rộng .js thành .txt, và khi đó code java của chúng ta có dạng như sau:

2. Using Google’s AJAX Libraries API (sử dụng thư viện API của Google AJAX)
- Có nhiều đọan script mà chúng ta sử dụng trong blog thường chỉ làm việc trên những thư viện nhất định, ví dụ như : Prototype or jQuery. Để các thư việc khác được load trên blog của bạn với Google’s AJAX Libraries API, hãy chèn đọan code sau vào sau thẻ <head> (hoặc trước thẻ </head>)

Dưới đây là danh sách đầy đủ của các thư viện có sẵn, và các cài đặt.

3. Adding scripts directly to our templates (chèn trực tiếp file javascript vào template blog)
- chúng ta thường khác quen với dong code bên dưới, đây là một dạng sử dụng file javascript quen thuộc (sử dụng gián tiếp các file java bằng các đường dẫn của nó)

- Bây giờ ta sẽ chèn trực tiếp nó vào blog, như bên dưới

- Việc chèn cả một đọan script vào template blog có lẽ sẽ làm cho chúng ta cảm thấy code template quá dài dòng, và khó quản lý. Nhưng code javascript dài không có nghĩa là nó không họat động.

4. Using Blogger’s “HTML/JavaScript” gadget( sử dụng các widget HTML/Javascript của blogger)
- Tạo một widget HTML/Javascript và dán code của java vào:

- Tuy nhiên trong code java sẽ có những code không mong đợi xuất hiện như : <, >,... và nó sẽ làm code java không chạy được, có nhiều các để khắc phục điều này, ở đây mình sẽ giới thiệu 2 cách:

+ Chèn các kí tự khỏang trắng vào trước và sau các kí tự đặc biệt này, xem bên dưới:

Before:

for(var i=0;i<a_rc;i++) {

After:

for(var i=0;i < a_rc;i++) {

+ mã hóa các kí tự này : < chuyển thành < , > chuyển thành > , ngòai ra có thể mã hóa cả đọan code tại đây.

Nguồn : quiterandom

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

Read more…

Tạo List catalog từ các nhãn

11:30 |

[FD's BlOg] - Tiếp tục các thủ thuật về nhãn (label), bài viết này mình xin giới thiệu cho các bạn một thủ thuật tạo widget hiển thị các bài viết của của các nhãn theo kiểu danh sách catalog. Với mỗi nhãn là 1 catalog.
Thủ thuật này cho phép bạn tùy chọn các nhãn muốn hiển thị trong list catalog.

Hình minh họa thủ thuật:

Thủ thuật này mình sẽ cho tiện ích này hiện ở trên đầu của sidebar, các bạn muốn đặt vào vị trí nào khác thì cứ copy code của thủ thuật vào vị trí đó trong code template.
☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục(Layout)
3. Vào chỉnh sửa code HTML(edit code HTML)
4. Chọn "Mở rộng mẫu tiện ích" (expand widget template)
5. Tìm đọan code bên dưới :

<b:section class='sidebar' id='sidebar' preferred='yes'>

- Code này là để xác định vị trí đặt tiện ích này, nếu bạn muốn đặt sau một tiện ích nào khác thì cứ làm tương tự, ví vụ muốn đặt tiện ích này sau tiện ích HTML2 thì tìm code của widget HTML2, như code bên dưới

<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
...
...
...
</b:includable>
</b:widget>
{code của tiện ích này sẽ dán ở đây}

6. Trở lại với thủ thuật, sau khi tìm được code ở bước 5, ta dán code bên dưới vào ngay sau dòng code tìm được:

<b:widget id='HTML99' locked='false' title='List Catalog' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='data2006'/>
<script type='text/javascript'>

var homeUrl2 = "fandung.blogspot.com";
var labels = ["label1","label2","label3","label4"];

// Given a json label search, this function return the decoded label.
function getLabelFromURL(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
}

function listEntries2(json) {
var ul = document.createElement('ul');

for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}

for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl2.length+21);

var label = getLabelFromURL(json);
var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2006').appendChild(div1);
}
}
}

function search2(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i < labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

- Lưu ý :

+ HTML99 : ID mà ta gán cho widget, sở dĩ đặt HTML99 là để tránh trùng với các ID khác
+ fandung.blogspot.com : thay bằng địa chỉ blog của bạn
+ "label1","label2","label3","label4" : là danh sách các nhãn bạn muốn dùng để tạo catalog

7. Save template.

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

Read more…

Tạo nút nhấn cho phép ẩn hiển các widget khi click vào nó.

09:51 |

Show/Hide widget using javascript

[FD's BLOg] - Với việc thêm 1 đọan code java nhỏ vào code của widget là bạn có thể tạo 1 nút liên kết nho nhỏ (nằm ở tiêu đề của mỗi widget) cho phép ẩn/hiện widget đó khi click.

Xem hình minh họa kết quả:

☼ Bắt đầu thủ thuật:
1. Vào bố cục (layout)
2. Vào chỉnh sửa code HTML(edit code HTML)
3. Chọn "mở rộng mẫu tiện ích" (expand widget template)
4. Tìm đọan code của widget mà bạn muốn chèn tiện ích này vào, như ở hình minh họa, mình sẽ áp dụng thủ thuật cho tiện ích Label, như vậy ta sẽ tìm code của nó, và bên dưới sẽ là code của nó:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Và thêm code màu đỏ vào đọan code trên như bên dưới:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>

<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[▼/▲]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Lưu ý : có thể thay đổi code màu xanh theo ý bạn, cụ thể
+ [▼/▲] : đổi các kí tự ▼/▲ theo ý thích của bạn.
+ float:left;margin-right:5px; : đây là code xác định vị trí hiển thị của nút [▼/▲] trên tiêu đề của widget. nếu bạn muốn nó hiển thị bên phải thì sửa lại là float:right;margin-right:5px;

6. Save template.

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

Read more…

Tạo một tab label với Link RSS + hiển thị các bài viết của label đó

07:10 |

Pro label widget v1.0

[FD's BlOg] - Bài viết sử dụng thủ thuật tương tự Tiện ích Post Archive của Blogger, đó là click vào liên kết để sổ các bài viết có trong archive đó. Ở đây với Tab label này ta sẽ dùng java để thực hiện tương tự việc này. Ngòai ra tiện ích còn cho phép hiện thị link RSS ở mỗi label.

Hình minh họa kết quả :

<b:section class='sidebar' id='sidebar' preferred='yes'>

- Code này là để xác định vị trí đặt tiện ích này, nếu bạn muốn đặt sau một tiện ích nào khác thì cứ làm tương tự, ví vụ muốn đặt tiện ích này sau tiện ích HTML12 thì tìm code của widget HTML12, như code bên dưới

<b:widget id='HTML12' locked='false' title='' type='HTML'>
<b:includable id='main'>
...
...
...
</b:includable>
</b:widget>
{code của tiện ích này sẽ dán ở đây}

6. Trở lại với thủ thuật, sau khi tìm được code ở bước 5, ta dán code bên dưới vào ngay sau dòng code tìm được:

<b:widget id='Label12' locked='false' title='Posts in tab label' type='Label'>
<b:includable id='main'>

<script type='text/javascript'>
home_page = "http://YOURBLOG-URL.blogspot.com/";
max_rc_posts = 10;
</script>
<script src='http://fandung.110mb.com/JS-files/show_prev_item_in_label.js' type='text/javascript'/>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://farm4.static.flickr.com/3589/3526202950_6f1e32777f_o.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><b>
<data:label.name/></b> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>▼</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><b><data:label.name/></b></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>▼</a>
</b:if>

</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

- Lưu ý:

+ http://YOURBLOG-URL.blogspot.com/ : thay bằng địa chỉ blog của bạn
+ http://fandung.110mb.com/JS-files/show_prev_item_in_label.js : nên down file này về và up lên host riêng của mình, tránh dùng chung sẽ gặp trường hợp hết bandwitdh (chỉ là phòng hờ, nếu ai không có host riêng thì xài link trên vẫn được)
+ http://farm4.static.flickr.com/3589/3526202950_6f1e32777f_o.png : địa chỉ ảnh của icon link RSS
+ Label12 : id của widget, thực ra bạn muốn đặt tên gì cũng được, đặt Label12 để dễ quản lí các widget của mình , cố gắng không để trùng với các id khác.
+ Posts in tab label : tiêu đề của widget, có thể bỏ trống.
+ max_rc_posts = 10; : đây là code cho phép hiển thị tối đa số bài viết ở mỗi label, có thể thay số 10 thành số bài viết mà bạn muốn hiển thị.
+ kí tự ▼ : có thể thay thế bằng kí tự khác, hoặc icon hình ảnh đều được, tùy bạn chọn.

7. Save template.

Đôi lời về thủ thuật này : thủ thuật này sẽ hiển thị tất cả các nhãn có trong blog của bạn, tuy nhiên đối với những ai chỉ muốn hiển thị những nhãn có số bài viết lớn(ví dụ hiển thị những nhãn có bài viết lớn hơn 20 chẳng hạn) thì thủ thuật này chưa đáp ứng được. Mình có tham khảo code Java về thủ thuật chỉ cho hiển thị những nhãn có số bài viết lớn hơn 1 số định sẵn, nhưng khi đem áp dụng vào thì thủ thuật không chạy được, nên mình không giới thiệu được thủ thuật này cho các bạn. Về code Javascript thì mình không rành lắm, như chúng ta đã biết, lập trình java là một trong các ngôn ngữ lập trình khó. Vì thế ai rành về java có thể chỉ giáo thêm cho mình với nhé.

Nguồn : tham khảo từ elescaparatederosa

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

Read more…

Hiển thị ảnh của tác giả ở tiêu đề mỗi bài viết

00:42 |

Different images for each post author

[FD's BlOg] - Mình đã từng post một bài về thủ thuật chèn ảnh (logo) vào tiêu đề bài viết (có thể xem ở đây), hôm nay mình sẽ ứng dụng thủ thuật này để hiển thị ảnh của tác giả vào tiêu đề của bài viết.

Thủ thuật này sẽ rất có ích cho các blog có nhiều thành viên, việc hiển thị ảnh tác giả ở mỗi bài viết sẽ tạo cho blog trông sôi động hơn.

Để cho dễ nhìn, nên dùng ảnh của các tác giả tầm từ 30x30px đến 50x50px là đẹp.

Hình minh họa kết quả:

Bây giờ ta bắt đầu thủ thuật, như thường lệ ta thực hiện các bước quen thuộc sau:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "Mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code CSS bên dưới vào trước dòng ]]></b:skin>:

.author-fd img{
padding: 0;
float: left;
border: none;
margin: 0 10px 10px 0;

- Code CSS này là để trang trí cho ảnh của tác giả, bạn có thể tùy chỉnh theo ý của mình.
6. Tìm đọan code như bên dưới (hoặc tương tự):

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<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>

7. Chèn đọan code bên dưới ngay sau đọan code màu đỏ :

<b:if cond='data:post.author == "AUTHOR1"'>
<span class="author"><img src="IMAGE1_URL"/></span>
</b:if>

<b:if cond='data:post.author == "AUTHOR2"'>
<span class="author"><img src="IMAGE2_URL"/></span>
</b:if>

- Lưu ý:

+ Tên tác giả : bạn phải điền chính xác tên của tác giả, phân biệt cả chữ hoa, chữ thường. Những tên tác giả có các kí tự đặc biệt như : ', ", <, > ,... sẽ làm code bị lỗi, vì thế bạn phải mã hóa chúng lại (vào đây để mã hóa code). (xem hình minh họa bên dưới)

+ Mã hóa một số kí tự cơ bản như : ' sẽ thay bằng : ' , " sẽ thay bằng: " , < sẽ thay bằng < , > sẽ thay bằng > , ...
+ IMAGE1_URL : là ảnh của tác giả thứ 1

8. Save template.

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

Read more…

Blogroll

Xem nhiều trong tuần

Tổng số lượt xem trang

Teen Giao Thanh

bài đã xuất bản

thư mục bài đăng

Blogger news

4+ giải pháp cho việc chèn Javascript vào template blog

Tạo List catalog từ các nhãn

Tạo nút nhấn cho phép ẩn hiển các widget khi click vào nó.

Tạo một tab label với Link RSS + hiển thị các bài viết của label đó

Hiển thị ảnh của tác giả ở tiêu đề mỗi bài viết

Top Hot