[ Yêu cầu ] : Hiển thị comment dạng nâng cao

Người đăng: chaobuoisang on Thứ Năm, 18 tháng 6, 2009

Theo yêu cầu của Ngân và YêuSứcKhỏe
[FD's BlOg] - Bài viết sẽ giới thiệu thủ thuật hiển thị comment dạng nâng cao mà Anhvo vừa mới cho ra lò. Thủ thuật này sẽ cho phép hiển thị comment mới nhất trước và điều chỉnh số comment sẽ hiển thị trên 1 trang. Nay mình xin giới thiệu bài viết này để thực hiện yêu cầu của bạn NgânYêuSứcKhỏe.

Thủ thuật này đã được 2 blogger NgânYêuSứcKhỏe yêu cầu mình từ lâu, nhưng mình chưa thể đáp ứng được, thì hôm nay ghé thăm blog của Anhvo, phát hiện bài viết này, nên tranh thủ giới thiệu cho mọi người. Thủ thuật này tương tự như kiểu hiển thị comment của Template Neo.

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


Các bạn có thể tham khảo thủ thuật này của Anhvo ở link bên dưới:


Cám ơn Anhvo đã thực hiện thủ thuật này.

Nguồn VietWebGuide

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

Post Views HitCounter - Bộ đếm lượt xem bài viết (Version 2)

Người đăng: chaobuoisang

[FD's BlOg] - Lần trước mình giới cho các bạn bộ đếm lượt xem bài viết. Do là tham khảo trên net, nên file php của thủ thuật đã bị cấm (hoặc die). Do đó tiện ích đó không còn hiển thị được. Sau đó mình có lên mạng tìm kiếm nguồn khác và cũng thu được 1 số kết quả.


Ở bài viết này mình sẽ giới thiệu cho các bạn 2 bộ đếm: 1 bộ đếm dùng ảnh, 1 bộ đếm thông thường. Ở các bộ đếm lần này có sự khác biệt với bộ đếm lần trước, đó là không có link quảng cáo trong tiện ích. Cũng vì lí do này mà một số bạn không sử dụng tiện ích này.

Hình ảnh minh họa :


☼ Các bước thực hiện:
1. Vào bố cục
2. vào chỉnh sửa code HMTL
3. Chọn Mở rộng mẫu tiện ích
4. Tìm đoạn code sau:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

5. Thêm code của bộ đếm vào sau đoạn code vừa tìm được:
- Code của bộ đếm thông thường :

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<p><b>Đã xem :</b> <i><font color='#666666'><script src='http://wizom.net/counter.php' type='text/javascript'/> Lần </font></i></p>
</div>
</b:if>

- Code của bộ đếm dùng ảnh :

<b:if cond='data:blog.pageType == "item"'>
Lượt xem: <img alt='counter' expr:src='"http://earthpop.net/counter.php?page=" + data:post.id + "&amp;digit=v88"'/>
</b:if>

6. Save template.

- Một lời khuyên nhỏ: chỉ nên để tiện ích hiển thị ở trang bài viết, như thế bộ đếm mới chính xác.

Tham khảo từ nhiều nguồn trên internet.
Chúc các bạn thành công.
More about

Tiện ích "Related Posts" với hiệu ứng mô tả bài viết

Người đăng: chaobuoisang

Theo yêu cầu của bạn LouLou (luomlatblog.blogspot.com)
[FD's BlOg] - Tiện ích "Bài viết liên quan"(Related Posts) là một trong các tiện ích không thể thiếu cho mỗi bài viết. Nó giúp người xem dễ dàng truy cập vào các bài viết khác tương tự. Và tiếp theo chuỗi ứng dụng của hiệu ứng mô tả bài viết, hôm nay theo yêu cầu của bạn LouLou mình sẽ tiếp tục ứng dụng nó cho tiện ích các bài viết liên quan.
Đã fixed lỗi - và có thay đổi 1 chút về code CSS + Link JS

Hình ảnh minh họa:


Thủ thuật này sẽ lấy ra một số bài viết mới nhất (ví dụ 5 bài) từ các link RSS của mỗi nhãn trong bài viết làm list các bài liên quan. vì thế nếu bài viết của bạn có nhiều nhãn thì các bài liên quan cũng sẽ nhiều hơn. Ví dụ bài viết có 2 nhãn ta sẽ có 2x5= 10 bài viết liên quan.
Do kiến thức về javascript của mình còn ít ỏi, nên thủ thuật này mình chỉ có thể làm được như thế. Và thủ thuật này vẫn phát triển từ thủ thuật recent post của VWG.

☼ 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 mở rộng mẫu tiện ích
5. Chép tất cả đoạn code bên dưới vào trước thẻ đóng </head>

<style type='text/css'>
.mota-desc{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota-desc:hover{
background-color: transparent;
z-index: 50;
}

.mota-desc span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota-desc span img{
border-width: 0;
padding: 2px;
}

.mota-desc:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:70px;
width:250px;
background:#ddd;
text-align: justify;
}

#related-posts {
padding-top:40px;
}

#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
</style>


<script language='JavaScript'>
imgr = new Array();

imgr[0] = "http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif";


showRandomImg = true;

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#555";
aBold = true;
motacolor = "#f00";

text = "Nhận xét";

showPostDate = true;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;

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

</script>

<script src='http://data.fandung.com/blog/demo/newposts-Description/style2/desc-related-post3.js' type='text/javascript'/>

- Lưu ý:

+ imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả .
+ fntsize = 12; : size chữ của tiêu đề bài viết
+ acolor = "#555"; : màu của tiêu đề bài viết
+ motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
+ summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
+ summaryFontsize = 12; : size chữ của phần mô tả
+ summaryColor = "#000"; : màu chữ của phần mô tả
+ numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 bước 7.
+ home_page = "http://www.fandung.com/"; : thay bằng địa chỉ URL của blog bạn


6. Tiếp tục xuống dưới, tìm đoạn code sau :
<data:post.body/>

7. Thêm vào sau nó đoạn code bên dưới:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><br/>
<b:loop values='data:post.labels' var='label'><b>Nhãn : </b><font color='#FF0000'><data:label.name/></font><br/>

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

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;' type='text/javascript'/>

</b:if>
</b:loop>

</div>

</b:if>

8. Save template.

- Lưu ý : (update 18/06/2009)

+ Do tên của các class trong code CSS của thủ thuật này trùng với tên của các class trong các thủ thuật Recent posts mà mình đã post, nên mình có 1 chút thay đổi so với bài viết ban đầu.
+ Cụ thể : tên của class mota sẽ đổi lại thành mota-desc, và file JS đổi lại thành file desc-related-post3.js . Các bạn xem và sửa lại nhé.

Cáo lỗi với các bạn vì sự cố này.

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

[ Yêu cầu ] : Ẩn bài viết ở trang chủ

Người đăng: chaobuoisang on Thứ Ba, 16 tháng 6, 2009

Theo yêu cầu của bạn Hiệp Cò (hiepco.blogspot.com)
[FD's BlOg] - Thực ra việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh <b:if> để ẩn nó.


Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.
Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1". (xem trong code template (mở rộng mẫu tiện ích))

Xem hình họa :


Sau khi xác định đc id này, ta thực hiện các bước sau:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>

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

#Blog1 {
display:none;
visibility:hidden;
}

</b:if>
</style>

4. save template.

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

[ Yêu cầu ] : Hiển thị widget ở 1 trang Label nhất định + Chèn code quảng cáo vào giữa bài viết

Người đăng: chaobuoisang

Theo yêu cầu của bạn 360korea (http://360korea.com)

[FD's BlOg] - Bài viết sẽ hướng dẫn 2 thủ thuật, 1 chỉ cho phép widget hiển thị ở 1 trang nhãn (label) nhất định. Thứ 2 là việc chèn code quảng cáo vào giữa bài viết. Ngoài ra còn 1 yêu cầu nữa là cho phép widget đó hiển thị cả trong các bài viết thuộc nhãn đó. Nhưng yêu cầu này mình không thể thực hiện.

A. Thủ thuật thứ 1 : Chỉ cho phép hiện thị widget ở 1 trang nhãn cụ thể .
- Đây là một ứng dụng từ thủ thuật mà mình đã đăng. Đó là thủ thuật hiển thị các widget ở những trang nhất định trong blog.


Hình ảnh minh họa kết quả
Kết quả hiển thị ở trang nhãn (trong hình là Nhãn "bai3")


Kết quả hiển thị ở trang khác (trong hình là trang chủ)


- Đầu tiên để thực hiện, bạn phải xác định vị trí code của widget mà mình muốn thực hiện nằm ở chỗ nào trong code template. Muốn xác định điều này, trước tiên bạn phải biết ID của widget mà mình muốn thực hiện. Để làm điều này, bạn nhấp chọn vào phần chỉnh sửa của widget đó, rồi xem ID của nó.
Xem hình minh họa :


Như trong hình minh họa, ID của widget này là HTML4

Bây giờ ta vào bố cục » vào chỉnh sửa code HTML » chọn mở rộng mẫu tiện ích rồi tìm code của widget này (có thể nhẫn Ctrl + F rồi điền ID của widget vào để tìm), và nó sẽ là code bên dưới :

<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

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

- Sau khi tìm được code của widget, ta sẽ thêm đoạn code màu đỏ vào như bên dưới :

<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == &quot;http://YOURBLOG.blogspot.com/search/label/LabelName&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

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

- Thay YOURBLOG.blogspot.com thành địa chỉ URL blog của bạn.
- LabelName là tên nhãn mà bạn muốn hiển thị widget.
- Một lưu ý nhỏ : thủ thuật chỉ chỉ hiển thị tốt với các label không dấu , không hiển thị được với label tiếng việt. Và với các label có kí tự khoảng trắng, bạn phải đổi nó lại thành %20

- Sau cùng save template lại là hoàn thành.

B. Thủ thuật 2 : Chèn code quảng cáo vào giữa bài viết.
- Trên thực tế nếu chỉ đơn thuần chèn code quảng cáo vào bài viết thì ta chỉ có thể chèn vào trước hoặc sau bài viết, còn chèn vào giữa bài viết thì không thể. Nếu muốn chèn vào giữa bài viết thì phải dùng tới 1 đoạn javascript nhỏ.
- Tuy nhiên phương pháp chèn code quảng cáo vào giữa bài viết này không phải tự động hoàn toàn, đoạn javascript chỉ có tác dụng thay thế code quảng cáo mỗi khi ta soạn thảo bài viết mới. Do vậy khi bạn thực hiện thủ thuật này, chỉ với các bài viết mà ta chèn đoạn code quảng cáo thay thế vào bài viết thì nó mới hiển thị vào giữa bài viết, còn các bài viết không có đoạn code thay thế này nó sẽ hiện ở phía trên cùng.
- Mở rộng ra ta có thể gọi thủ thuật này là chèn code quảng cáo vào bất kì vị trí nào trong bài viết.

Hình ảnh minh họa:
Với bài viết có đoạn code thay thế:


Với bài viết có không đoạn code thay thế:


☼ Bây giờ ta bắt đầu:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn "Mở rộng mẫu tiện ích"
4. Tìm đoạn code sau:
<data:post.body/>

5. Thay thế nó bằng đoạn code bên dưới:

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

{Đoạn code của quảng cáo - Lưu ý là đoạn code quảng cáo phải được mã hóa(tức là chuyển các kí tự đặc biệt thành các chuỗi thay thế) trước khi dán vào đây}

</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- ads-code --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

5. Save template.

- Nếu thực hiện được tới đây thì code quảng cáo hiển thị được, nhưng sẽ không phải là ở giữa bài viết mà ở đầu bài viết. Muốn nó hiển thị ở giữa bài viết thì ta phải thực hiện thêm 1 bước, đó là chèn đoạn code thay thế đoạn mã quảng cáo vào vị trí giữa bài viết mỗi khi bạn soạn thảo bài viết.
- Và đây là đoạn code thay thế :
<!-- ads-code -->

Hãy dán code thay thế này tại vị trí bạn muốn hiển thị trong bài viết mỗi khi soạn thảo. Và nếu muốn các bài viết cũ cũng hiển thị được thì bạn phải thêm đoạn code thay thế này vào tất cả các bài viết đó. Và đây chính là công đoạn thủ công của thủ thuật.

Thủ thuật 2 tham khảo từ anshuldudeja

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

Tạo thanh Navbar News (hiển thị bài viết mới nhất) với hiệu ứng chạy chữ

Người đăng: chaobuoisang on Chủ Nhật, 14 tháng 6, 2009

[FD's BlOg] - Một vài lệnh đơn giản từ CSS kết hợp với tiện ích "Recent posts" sẽ tạo cho bạn 1 thanh tin tức đơn giản. Do việc hiển thị các bài viết mới theo 1 hàng, nên ta phải dùng tới hiệu ứng chạy chữ từ lệnh marquee.
Xem demo trực tiếp ở đây

Hình minh họa:

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

<style type="text/css">

.hotnews{
height: 27px;
padding : 0 0 0 100px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3323/3625026490_56322aeda3_o.gif) no-repeat left;
border-top : 2px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

</style>

<div class="hotnews">
<marquee direction="left" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="4" align="center">

<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;
label = "Love";
home_page = "http://www.fandung.com/";


</script>
<script src="http://data.fandung.com/blog/demo/navbar-news/nb-post.js" type="text/javascript"></script>

</marquee>
</div>

- Ở đây mình giữ nguyên code javascript của thủ thuật "Recent posts" mà Anhvo viết, chỉ thay đổi 1 chút trong file javascript. vì thế ta chỉ quan tâm tới 3 dòng code bên dưới:

+ numposts = 15; : số bài viết sẽ hiển thị
+ label = "Love"; : nhãn mà bạn muốn hiển thị, khi muốn hiển thị các bài viết từ nhãn, bạn phải thay link file Javascript phía trên (http://data.fandung.com/blog/demo/navbar-news/nb-post.js) lại thành http://data.fandung.com/blog/demo/navbar-news/nb-label.js
+ home_page = "http://www.fandung.com/"; : đổi lại thành URL của blog bạn.


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

[ Yêu cầu ] : ẩn hiện bài viết khi click vào button

Người đăng: chaobuoisang

[FD's BlOg] - Đây là một ứng dụng từ thủ thuật "Ẩn hiện widget" mà mình đã đăng. Tương tự như thủ thuật đối với widget, mặc định ta sẽ cho bài ẩn đi, và sẽ được hiển thị khi ta click vào button. Và ở thủ thuật này mình chỉ làm ẩn phần body của bài viết mà thôi.



Hình minh họa:




☼ Bây giờ ta đi vào thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới:

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

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

<b:if cond='data:post.title'>

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

<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(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[&#9660;]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>

</b:if>

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

6. Tiếp tục xuống dưới tìm đoạn code sau:

<data:post.body/>

7. Vào thay thế nó bằng code bên dưới :

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

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

<data:post.body/>

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

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

- Lưu ý: đối với các blog có tiện ích "Readmore..." thì các bạn di chuyển code của nó vào sau dòng code <data:post.body/> , giống như bên dưới:

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

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

<data:post.body/>
{Code của thủ thuật readmore}
<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>

<b:else/>
<data:post.body/>
{Code của thủ thuật readmore}
</b:if>


Code của thủ thuật readmore có dạng như bên dưới:

<span class='rmlink'><a expr:href='data:post.url'/>Read more...</span>

8. Save template.

- Lưu ý: thủ thuật này mình chỉ cho phép hiển thị ở trang chủ, nếu các bạn muốn hiển thị thủ thuật này ở tất cả các trang (trừ bài viết) thì các bạn thay đổi code như bên dưới:

Đổi dòng code này:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
thành:
<b:if cond='data:blog.pageType != "item"'>


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