Widget Recent Posts Using jQuery

[FD's BlOg] - Sau một lần lục lọi, tìm kiếm trên mạng được một hiệu ứng từ jQuery, mình đã quyết định áp dụng nó cho tiện ích "Bài viết mới - có kèm ảnh thumbnail" mà website VietWebGuide đã phổ biến. Để áp dụng jQuery vào widget "Recent Posts" của VWG, mình có chỉnh sửa đôi chút từ file JavaScript của VWG.

Xem hình minh họa:

Xem demo của thủ thuật gốc:
http://fandung.110mb.com/JS-files/recent-post-Jquery/demo/recent-post.html

Như các thủ thuật trước, để đơn giản, bạn hãy tạo 1 Widget HTML/Javascript và copy tất cả code bên dưới vào :

// Code javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3500;

function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}

interval = setInterval(removeFirst, pause);
});
</script>

// Code CSS
<style type="text/css">

#listticker{
height:300px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 6px 6px 6px;;
background:#fff;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:60px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:2px;
padding:4px;
border:solid 1px #DEDEDE;
}
</style>

// Code HTML
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";

showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 15;

home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/js/recent-post-Jquery/recentposts_thumb_5.js" type="text/javascript"></script>

- Có thể các link Javascript của mình load chậm, nên các bạn có thể download về và up lên host nào load nhanh hơn.
- Chú ý điều chỉnh các code màu đỏ (độ rộng) cho hợp lý
- http://www.fandung.com : thay bằng địa chỉ của blog bạn.
- Và một điều lưu ý cuối cùng : chiều cao của ảnh thumbnail (imgheight = 60;) và chiều cao của thẻ <li> (height:60px;) fải bằng nhau.

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

Read more…

Create TabNews with jQuery

[FD's BlOg] - Một lần có 1 bạn nhờ mình thay đổi template cho blog, và mình đã tìm thấy một thủ thuật khá đẹp mắt từ template đó, nên mình quyết định lọc thủ thuật đó ra và post lên cho mọi người.

Xem demo trực tiếp ở đây : http://data.fandung.com/blog/demo/tabnews-jquery/tabNews.html

Hình ảnh mình họa:

Để đơn giản, bạn hãy copy tòan bộ đọan code bên dưới, và dán nó vào 1 widget HTML/Javascript. Tốt nhất nên tạo 1 widget ở header là thích hợp nhất

Code:

//code Javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript">
</script>
<script src="http://data.fandung.com/blog/demo/tabnews-jquery/slider.js" type="text/javascript">
</script>

//code CSS
<style type="text/css">
#slider {
background:url(http://i36.photobucket.com/albums/e2/alvaris924/Zinmag%20Primus/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
</style>

//code HTML
<div id="slider">
<div id="mover">


<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

</div>
</div>

- Vài lưu ý :

+ Do ảnh nền của tabnews có độ rộng là 1000px, nên muốn hiển thị tốt, blog của bạn phải có độ rộng trên 1000px.
+ Nên down các file javascript về máy và up lên host riêng của bạn để tráng trường hợp hết bandwidth

Tham khảo từ template Zinmag Primus

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

Read more…

[FD's BlOg] - Ở thủ thuật trước, thủ thuật "Tạo chữ kí (ảnh) ứng với từng tác giả ở cuối bài viết" (xem thêm ở đây) bạn Ngân (NganKVN) hỏi mình là "có thể tạo cho chữ kí (ảnh) thành ảnh nền không?" và mình có comment trả lời và có đưa ra code. Nhưng code đó mình chưa test, và bây giờ, sau khi test xong thì mình post bài này lên.

Hình ảnh minh họa:

Ở thủ thuật trước, cơ bản của thủ thuật là thêm 1 hình (chữ kí) vào cuối mỗi bài viết tương ứng với từng tác giả (sử dụng lệnh "b:if"). Nhưng nếu ảnh đó là ảnh nền thì lại là 1 thủ thuật khác.

Với blog có 1 tác giả thì việc biến chữ kí của tác giả thành ảnh nền cho bài viết rất đơn giản, ta chỉ việc thêm code CSS background vào trong code CSS của id post là xong. hoặc có thể thay thế đọan code <data:post.body/> thì đọan code như bên dưới:

<div style='ảnh nền') no-repeat right top;'>
<data:post.body/>
</div>

Tuy nhiên với blog có nhiều thành viên thì ta không thể áp dụng được như vậy.

☼ Có 2 cách để thực hiện:
- 1 là không dùng thêm các id, class
- 2 là tạo thêm các id (như : Author1, Author2)

Và ta bắt đầu với từng cách:

1. Không dùng thêm các id :
- Vào trong code template (nhớ chọn mở rộng mẫu tiện ích)
- Tìm đọan code <data:post.body/> và thay thế nó bằng code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;Author1&quot;'>
<div style='background: url(link ảnh chữ kí của tác giả 1) no-repeat right top;'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:post.author == &quot;Author2&quot;'>
<div style='background: url(link ảnh chữ kí của tác giả 2) no-repeat right top;'>
<data:post.body/>
</div>
</b:if>

<b:else/>
<data:post.body/>
</b:if>

- Save template.

2. Dùng thêm các id, class:
- vào trong code template (nhớ chọn mở rộng mẫu tiện ích)
- Thêm các đọan code CSS bên dưới vào trước dòng ]]></b:skin>

.Author1 {
background: url(link chữ kí của tác giả 1) no-repeat bottom right;
}

.Author2 {
background: url(link chữ kí của tác giả 2) no-repeat bottom right;
}

- Thay đổi code màu xanh tương ứng với vị trí mà bạn muốn hiển thị trong bài viết.

+ bottom right : góc phải bên dưới
+ top right : góc fải phía trên
+ top left : góc trái phía trên
+ bottom left : góc trái bên dưới

- Tiếp tục tìm đọan code <data:post.body/> và thay thế nó bằng code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;Author1&quot;'>
<div class='Author1'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:post.author == &quot;Author2&quot;'>
<div class='Author2'>
<data:post.body/>
</div>
</b:if>

<b:else/>
<data:post.body/>
</b:if>

- Lưu ý: code màu đỏ là tên của tác giả, các bạn phải điền cho chính xác, và nhớ mã hóa các kí tự đặc biệt có trong tên tác giả, ví dụ : ", ', <, >

- Save template là xong.

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

Read more…

[FD's BlOg] - Bài viết giới thiệu cho các bạn cách tạo tiện ích "bài viết xem nhiều nhất (popular posts) " cho blog của mình. Với các tiện ích được cung cấp bới foxrecord.com và feedjit.com

1. FeedJit.com
- Đầu tiên các bạn truy cập vào trang này : http://feedjit.com/join
- Xuống phía dưới cùng chọn Get a JS widget! như hình bên dưới:


- Sau đó di chuyển tới mục Page Popularity và nhấn First Customize it! để thay đổi style của wiget theo ý mình. (xem hình bên dưới)


- Sau khi thay đổi xong nhấn Add to Blogger blog, rồi nhấn Thêm tiện ích để hòan tất cài đặt.


Và đây là kết quả:


2. FoxRecord.com
- Đăng nhập vào trang chủ http://foxrecord.com
- Chọn phần Top popular pages widget và nhấn Add to Blogger để thêm tiện ích vào blog (xem hình bên dưới)


- Và cuối cùng là nhấn "Thêm tịên ích" để kết thúc cài đặt

Và đây là kết quả

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

Read more…

[FD's BlOg] - Ở thủ thuật trước, mình có giới thiệu cách để post code vào bài viết, và trang trí cho khung chứa code với CSS (xem thêm ở đây). Bài viết này cũng sẽ hướng dẫn cách chèn code vào bài viết nhưng pro hơn và dễ dàng hơn.

Ở thủ thuật này ta sẽ sử dụng kết hợp giữa javasscript và CSS để post code vào bài viết và trang trí nó. Với CSS là để trang trí, còn Java là để hiển thị code .

Với thủ thuật trước, khi ta muốn post code vào bài viết, ta phải mã hóa những kí tự đặc biệt của code thành những chuỗi thay thế. Nhưng ở thủ thuật này, ta sẽ không phải mã hóa chúng, mà chèn thẳng chúng vào trong bài viết luôn. Và thủ thuật này cũng hỗ trợ hầu hết các ngôn ngữ như : HTML, Java, Javascript, SQL, php...

Do việc hỗ trợ tự động nhận dạng các ngôn ngữ, nên code của bạn khi chèn vào bài viết phải chính xác, nếu không nó sẽ báo lỗi.

Thủ thuật hỗ trợ 2 thẻ là <pre> và thẻ <textarea> để chèn code vào. Sử dụng 2 thẻ đều cho kết quả như nhau.

Hình ảnh minh họa :

Ta thấy trong hình, các class, id, title... đều được làm nổi bật (có màu xanh), và ở các ngôn ngữ khác thì nó sẽ hiển thị khác.

Do có sử dụng javascript, nên khi hiện thị bài viết nó phải load, và lúc load code nó sẽ trông giống như bên dưới:

☼ Bây giờ ta bắt đầu thủ thuật :
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HMTL)
4. Chèn đọan code Javascript bên dưới vào trước thẻ đóng </head>

<link href='http://data.fandung.com/js/codeview/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://data.fandung.com/js/codeview/shCore.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCpp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCSharp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCss.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushDelphi.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushJava.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushJScript.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushPhp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushPython.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushSql.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushVb.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushXml.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushRuby.js' type='text/javascript'/>

5. Tiếp tục xuống phía dưới chèn thêm đọan code Javascript bên dưới vào trước thẻ đóng </body>

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>

6. Save template.

7. Để post code vào bài viết, bạn sử dụng 2 cách bên dưới

a. Dùng thẻ <pre>

<pre name="code" class="c-sharp">

Dán code ở đây (code nguyên mẫu)

</pre>

b. Dùng thẻ <textarea>

<textarea name="code" class="c#" cols="60" rows="10">

Dán code ở đây (code nguyên mẫu)

</textarea>

Nguồn internet

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

Read more…

Create Signature Online With MyLiveSignature

[FD's BlOg] - Bài viết giới thiệu cho các bạn cách tạo chữ kí (online) độc đáo với MyLiveSignature.Com . Và kèm theo là thủ thuật chèn chữ kí của từng tác giả vào cuối mỗi bài viết. Bài viết này áp dụng thủ thuật tương tự như thủ thuật "chèn ảnh của tác giả trước tiêu đề mỗi bài viết".

1. Tạo chữ kí online với mylivesignature.com:
- Đầu tiên ban truy cập vào trang web mylivesignature.com và thực hiện 5 bước sau để có 1 chữ kí như ý muốn.

Bước 1: điền tên của bạn


Bước 2: Chọn font (có tất cả 120 font cho bạn chọn)


Bước 3: chọn kí thước


Bước 4: CHọn màu


Bước 5: Chọn kiểu hiển thị (nằm ngang, nghiêng...)

Cuối cùng ta có kết quả như bên dưới:


2. Chèn chữ kí của tác giả vào cuối mỗi bài viết:
- Thủ thuật này thích hợp nhất cho các blog có nhiều thành viên , với thủ thuật này, cuối mỗi bài viết sẽ hiển thị chữ kí của tác giả bài viết đó.
- Để thực hiện thủ thuật này, bạn phải có đủ tất cả các chữ kí của các thành viên. Và sau đó upload lên host nào đó để lấy link.

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

☼ Bắt đầu thủ thuật:
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 sau (hoặc tương tự):

<div class='post-body entry-content'>
<data:post.body/>

6. Chèn vào sau nó đọan code sau:

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

<b:if cond='data:post.author == "Author1"'>
<img src='link ảnh chữ kí của tác giả 1 của' style='float:right;'/>
</b:if>

<b:if cond='data:post.author == "Author2"'>
<img src='link ảnh chữ kí của tác giả 2' style='float:right;'/>
</b:if>

</b:if>

- Lưu ý :

+ tên tác giả phải chính xách, nếu trong tên của tác giả có các kí tự đặc biệt như : ' , " , < , > , ... thì phải thay đổi chúng bằng các chuỗi thay thế (mã hóa)
+ Nếu blog bạn có 1 tác giả thì dùng code bên dưới cho gọn:

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

<img src='link ảnh chữ kí của bạn' style='float:right;'/>

</b:if>

7. Save template.

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

Read more…

Fixed Navbar
(fix ngày 29/05/2009 - khắc phục việc không hiển thị trên IE6)

[FD's BlOg] - Một thủ thuật đơn giản cho phép bạn tạo một thanh Navbar hiển thị nội dung cố định trên blog của bạn. Thủ thuật cho phép bạn có thể đặt thanh Navbar này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom)...

Với thủ thuật này, bạn có thể tạo nhiều ứng dụng, ví dụ như:

+ Tạo một thanh menu truy cập
+ Tạo một dòng thông báo
+ Tạo một danh sách các bài viết hot (kèm theo hiệu ứng chạy chữ)
+ Hoặc bất cứ thứ gì mà bạn muốn hiển thị (một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn)

Và đây là hình minh họa 1 ví dụ về cách tạo một danh sách các bài viết hot.

Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS này vào trước dòng code ]]></b:skin>

div.fixed-navbar {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
div.fixed-navbar a:hover {
color: #00f;
}

- đọc hiểu code:

+ background-color: #ccc; : màu nền của thanh navbar, nếu bạn dùng ảnh nền thì đổi code lại thành background: #ccc url(link ảnh) ;
+ position: fixed; top: 0; left: 0; : code xác định vị trí hiển thị của thanh navbar trên blog. Thuộc tính fixed là để cho thanh cố định khi di ta di chuyển chuột. còn thuộc tính left top dùng để xác định vị trí (cái này mình sẽ nói thêm ở bên dưới)
+ width: 100%; : độ rộng của thanh Navbar
+ border: 2px #00f solid; tạo đường bo cho thanh navbar, nếu bạn không thích thì cứ bỏ nó đi.

5. Save template.
6. Tạo 1 widget HTML/javascript và dán code HTML bên dưới vào:

<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên thanh navbar}
</div>

☼ Sau đây là một số ví dụ về các vị trí hiển thị
a. Hiển thị trên cùng với độ rộng là 100% :(hình minh họa như ở phía trên).
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; top: 0; left: 0;
width: 100%;

b. Hiển thị phía bên dưới bên trái với độ rộng là 200px
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; bottom: 0; left: 0;
width: 200px;

Hình minh họa:

Còn các vị trí : bên dưới bên phải, phía trên bên phải thì cũng tương tự, bạn chỉ cần thay vào là bottom:0; right: 0; hoặc top: o; right: 0;

☼ New update (29/05/2009)

Khắc phục lỗi không hiển thị được trên IE6.

- Với code trên, thủ thuật thì thủ thuật không hiển thị tốt trên IE6, và dưới đây là cách khác phục.
- Bạn chỉ thay thế code CSS trên bằng đọan code bên dưới:

div.nicetitle {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align: left;
width: 200px;
border: 2px #00f solid;
position: fixed;
_position:absolute;
left: 0px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

- code màu đỏ là code được thêm vào.
- Với code trên thì thanh Navbar sẽ hiển thị ở góc trái bên dưới. Nếu muốn hiển thị bên góc phải bên dưới thì sửa code màu xanh (right) thành left.
- Vớilênh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.
- Còn 2 vị trí góc trái (phải) phía trên thì mình vẫn chưa fix được.

Hình minh họa

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

Read more…

Show Only Post Title at Label and Archive Pages

[FD's BlOg] - Một ứng dụng khác trong việc sử dụng các cấu trúc lệnh có sẵn trong template. Đó là lệnh "b:/if", với bài viết này mình sẽ hướng dẫn cách chỉ cho phép hiển thị tiêu đề bài viết (nội dung được ẩn) ở các trang Archive và Label.

Thông thường khi bạn truy cập vào các nhãn (Label) hay các mục lưu trữ của blog (archive) thì các bài viết sẽ hiển thị đầy đủ, tiêu đề lẫn nội dung, nếu vì một lý do nào đó, các bài viết quá nặng, nó sẽ làm chậm tốc độ load của các trang Label và Archive này. Vì thế một giải pháp làm tăng tốc độ load đó chính là chỉ cho phép các bài viết hiển thị tiêu đề.

Hình minh họa:

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

sau khi thực hiện thủ thuật với các trang Label và Archive

☼ Bây giờ ta bắt đầu thủ thuật:
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:include data='post' name='post'/>

6. Thay thế nó bằng đọan code bên dưới:

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

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

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

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

</b:if>

<b:else/>

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

</b:if>

- Chú ý :

+ Code màu đỏ là code không cho tiện ích chạy trên trang chủ.
+ Code màu xanh là code không cho tiện ích chạy ở bài viết.
+ Muốn tiện ích chạy luôn đối với trang chủ thì bạn bỏ code màu đỏ đi.

7. Save template.

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

Read more…

[FD's BlOg] - Đây là một thủ thuật cải tiến từ thủ thuật "Tạo tiện ích đóng mở tab nội dung" (thực hiện online trên website flooble.com). Bài viết này sẽ thực hiện lại thủ thuật đó trực tiếp trên blog của bạn mà không cần thông qua web trung gian.

Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/hide-show-tabcontent.html

Hình minh họa

☼ Bắt đầu thực hiện thủ thuật:
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 đọan code bên dưới vào trước thẻ đóng </head>

<script language="javascript">

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '-'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }


</script>

<style type="text/css">

.expandtitle{
background-color: #999;
color:#000;
padding-left:5px;
width: 300px;
}

.expandcontent{
background-color: #ccc;
color: #000;
width: 300px;
}

</style>

- Thay đổi độ rộng (width: 300px;) cho phù hợp với sidebar của bạn.

5. Save template.
6. Tạo widget HTML/Javascript và dán code HTML bên dưới vào:

<div class="expandtitle" >
<table border="0" cellspacing="0" cellpadding="2" width="100%">

<tr>
<td> Title widget (tiêu đề của widget) </td>

<td align="right">
[<a title="show/hide" id="expand_link" href="javascript:
void(0);" onclick="toggle(this, 'expand');">&#8722;</a>]
</td>

</tr>

</table>
</div>


<div id="expand" style="padding: 3px;" class="expandcontent" >

{YOUR WIDGET CONTENT} (nội dung của widget)

</div>

<script language="javascript">toggle(getObject('expand_link'),
'expand');</script>

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

Read more…

[FD's BlOg] - Đây là một trong những thủ thuật cơ bản để trang trí cho blog của bạn. Ví dụ như chèn banner flash cho header hoặc cho footer, hoặc chèn những quảng cáo dạng flash vào sidebar hay bất kì chỗ nào trong blog của bạn.

Như chúng ta đã biết, file flash có phần mở rộng là ".swf" cũng là một dạng file video, nhưng có kích thước nhỏ hơn nhiều so với các file video thông thường. Và nó là 1 sản phẩm của Macromedia . Và muốn xem nó trên máy tính của bạn thì máy bạn phải cài chương trình flash Player. Nhưng còn muốn nó chạy trên Web (blog) thì sao?

Muốn xem nó chạy trên web(blog) thì bạn phải thông qua 1 plugins của trình Flash Player từ 1 trang web. Và thông dụng nhất là sử dụng plugins của chính là sản xuất, đó là trang http://www.macromedia.com.

Và đây là đọan code cho phép file Flash hiển thị trên blog của bạn (muốn nó hiển thị ở nơi nào trong blog của bạn thì bạn chỉ việc tạo widget HTML/javascript rồi dán code bên dưới vào là xong):

<embed bgcolor="#FFFFFF" height="140" width="700" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://URLsite.com/yourfile.swf" type="application/x-shockwave-flash" >
</embed>

- một vài lưu ý :

+ bgcolor="#FFFFFF" : màu nền nơi mà bạn muốn hiển thị.
+ height="140" width="700" : kích thước của nơi mà bạn muốn hiển thị file flash
+ http://URLsite.com/yourfile.swf : link file flash của bạn

☼ Và một điều nữa là : "làm sao để có link file flash ?", sau đây mình sẽ giới thiệu 8 dịch vụ cho phép bạn upload file flash của mình lên mạng ( Theo Blog proboydx)

1. SwfCabin.com
Đúng với tên gọi của trang web, đây là một "cabin" chuyên lưu trữ các file Flash nhanh gọn và tiện dụng. Trang này được nhiều người dùng trên Internet đánh giá cao.

2. SwfUpload.com
Ngoài SwfCabin, thì SwfUpload cũng là 1 dịch vụ khá tốt , xứng đáng là lựa chọn thứ 2 dành cho bạn.

3. MegaSwf.com
Không nổi trội như 2 dịch vụ trước vì hạn chế chỉ up được file có dung lượng tối đa 10MB , đây là trang web dành cho việc up các file Flash có dung lượng vừa.

4. FhqHosting.com
Tương tự MegaSwf , cho phép dung lượng tối đa 10MB.

5. ImageShack.us
Khá nổi tiếng với chức năng upload ảnh , ImageShack còn cho phép upload flash với dung lượng tối đa 5MB.

6. ImageCabin.com

7. ImageHosting.gr

8. Plunder.com
Plunder cho phép up mọi loại file, với dung lượng cho phép lên đến 100MB (hơn Mediafire ở chỗ hỗ trợ direct link)

Read more…

[FD' BlOg] - Khi vào xem mỗi bài viết, ta sẽ thường thấy phần hiện thị ngày đăng bài viết ở phía trên tiêu đề của bài viết. Nếu ai không thích điều này, thì có thể tham khảo bài viết này để ẩn nó đi. Và chỉ với lệnh display là ta có thể thực hịên được điều này.

Hình ảnh minh họa:

Trước khi thực hiện

Sau khi thực hiện

Thủ thuật này rất đơn giản, bạn chỉ cần thêm dòng lệnh display:none; vào trong class h2.date-header
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Tìm dòng code CSS sau

h2.date-header {
margin:1.5em 0 .5em;
}

5. Thêm dòng code màu đỏ vào như bên dưới:

h2.date-header {
margin:1.5em 0 .5em;
display:none;
}

6. Save template.

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

Read more…