Tạo menu dropdown từ các nhãn

[FD's BlOg] - Bài viết hướng dẫn tạo widget Label dạng menu dropdown từ widget Label có sẵn của blogger. Với thủ thuật này sẽ blog bạn sẽ gọn hơn, và sẽ không bị chiếm nhiều chỗ do list Label của bạn quá dài.

Hình minh họa:

Để thực hiện, trước tiên bạn phải tạo cho blog mình một widget Label được tích hợp sẵn trong blogger.
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Thêm tiện ích Label vào blog. (xem hình bên dưới)

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

Sau khi thêm tiện ích label vào blog các bạn tiếp tục thực hiện các bước bên dưới:
1. Vào bố cục
2. Vào phần chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đọan code bên dưới:

<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>
(<data:label.count/>)
</li>
</b:loop>
</ul>

5. Thay thế tất cả bằng code bên dưới:

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>

<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

6. Save template

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

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

More about →

Tạo các tab chuyên mục nổi bật cho blog với việc tích hợp tiện ích "Tự động cập nhật bài viết mới"

[FD's BlOg] - Đây lại là 1 thủ thuật mới do mình phát triển lên từ thủ thuật "Recent Posts" của VWG. Thủ thuật sẽ tạo các tab chuyên mục hot nhất trên blog của bạn với việc cập nhật các bài viết mới nhất. Và trong bài viết này mình sẽ chọn vị trí đặt các tab là ở footer.

hoặc có thể xem hình minh họa kết quả bên dưới:

☼ Thủ thuật này sẽ gồm 2 bước:
A. Bước 1: chia footer thành nhiều cột (tương ứng với số tab chuyên mục mà bạn muốn hiển thị)
- Để thực hiện được thủ thuật này bạn hãy tham khảo bài viết này .
- Và nhớ thay đổi độ rộng các cột cho phù hợp với blog của bạn.
- Và đây là hình minh họa kết quả sau khi chia:

B. Bước 2: tạo widget HTML/javascript cho từng cột và dán code của thủ thuật vào. Mỗi cột tương ứng với một chuyên mục (nhãn) mà bạn sẽ lựa chọn để hiển thị.
- Và code của các chuyên mục sẽ tương tự nhau.
- Trước tiên ta sẽ xem hình minh họa bên dưới:


- Để thực hiện, bạn tạo widget HTML/Javascript ở các cột footer mà ta đã chia, rồi dán code bên dưới vào:

<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#695641;">Tiêu đề của tab Label1</div>
<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 = 244;
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 = 5;
label = "Label1";
home_page = "http://www.fandung.com/";

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

- Chú ý :

+ Thay đổi code màu xanh theo ý bạn.
+ tablewidth = 244; : đây là code độ rộng của tab các bài được hiển thị. Hãy điều chỉnh nó cho phù hợp với độ rộng của các cột footer mà ta đã chia ở bước 1, tốt nhất là 2 giá trị này ta cho bằng nhau.
+ numposts = 5; : đây là số bài viết sẽ được hiển thị.
+ label = "Label1"; : đây là nhãn mà bạn chọn. lưu ý : đối với các nhãn có kí tự khỏang trắng ta phải thay bằng chuỗi %20.
+ home_page = "http://www.fandung.com/"; : sửa lại thành địa chỉ của blog bạn.
+ Và đối với các cột còn lại ta cũng thực hiện tương tự : là chèn code bên trên vào và thay đổi lại nhãn tương ứng là được.

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

More about →

Tiện ích "Bài viết mới nhất - có ảnh thumbnail" kết hợp với hiệu ứng slide từ jQuery

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.

More about →

Tạo thanh TabNews cho Header khá ấn tượng với jQuery

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.

More about →

Tạo ảnh nền (chữ kí) cho bài viết ứng với từng tác giả

[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.

More about →

2 site cung cấp tiện ích " Bài viết xem nhiều nhất (Popular Posts) "

[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.

More about →

Trang trí cho khung codeview - Sử dụng Javascript

[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.

More about →