1 Hiển thị widget ở những trang nhất định

Trên blog bạn thường có nhiều Widget, và việc hiển thị chúng cũng làm mất thời gian khi load trang. Bây giờ mình giới thiệu cách tùy chỉnh cho nó hiển thị ở những nơi bạn muốn hiển thị. Nó sẽ giúp bạn có thể sắp xếp các widget ở các trang mà bạn muốn để trang blog hay web của bạn trông thẩm mĩ hơn. Để thực hiện thủ thuật này , trước tiên bạn phải xác định được Widget id của widget đó như hình bên dưới:

☼Bây giờ là cách để tùy chỉnh Widget đó:

1. Đăng nhập blog
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 Templates).
4. Tìm đọan Widget id bạn muốn chỉnh (vd:HTML3)
Code thường có dạng mhư bên dưới

<b:widget id='HTML3' locked='false' title='' 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 đã biết được "Widget" đó thì chúng ta sẽ tùy chỉnh hiển thị chúng
bây giờ bạn hãy chọn nơi để hiển thị "Widget" đó, bạn chỉ việc thêm code màu đỏ vào đúng vị trí như bên dưới

I. Chỉ cho phép widget hiển thị ở trang chủ

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

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

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

II. Chỉ cho phép widget hiển thị ở từng bài viết:

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

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

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

III. Chỉ cho phép widget hiển thị ở những trang nhất định:

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "Link của bạn"'>

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

Bạn hãy thay code màu xanh trên thành đường link mà bạn muốn widget đó hiển thị (ví dụ:http://www.traidatmui.com/2010/03/chen-google-translate-vao-blogger.html). Khi bạn chọn đường link như vậy thì khi bạn click đến link đó widget mới hiển thị, còn những đường dẫn khác widget đó sẽ không hiển thị

IV. Hiển thị ở trang label nhất định

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

<b:if cond='data:blog.url == "http://www.traidatmui.com/search/label/Advanced blogger"'>

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

Bạn hãy thay dòng màu xanh (http://www.traidatmui.com) thành địa chỉ blog của bạn và dòng (Advanced blogger) thành tên nhãn bài viết của bạn.

[Read More...]

0 Cuộn góc Peel với hiệu ứng flash cho blogspot

Bài viết trước mình đã có giới thiệu bạn cách thực hiện thủ thuật Cuộn góc Peel cho blog với css và JQuery. Hôm nay cũng cách cuộn góc cho trang như vậy nhưng chúng ta sẽ ứng dụng flash cho hiệu úng này. Với hiệu ứng flash này có về blog bạn sẽ trông đẹp hơn, cuộn góc trông mượt hơn. Bạn có thể xem hình ảnh bên dưới hoặc click demo để thấy rỏ hơn.

DEMO >> http://client-gaincapital-tradingcentral.blogspot.com/

Hình ảnh ban đầu chưa rê chuột

Hình ảnh sau khi rê chuột

☼ Thực hiện thủ thuật

1. Đăng nhập vào tài khoản BLogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add gadget)
4. Thêm 1 phần tử HTMl/Javascript và thêm vào nó code bên dưới

<script type="text/javascript">
var ppimg = new Image();
ppimg.src = '';

var ppo = new Object();
ppo.ad_url = escape("http://www.traidatmui.com/");
ppo.small_path = "http://www.swfcabin.com/swf-files/1292894738.swf";
ppo.small_image = escape("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqjjvdy9K2m6s09WyP55gMVdSQoT0KCtFW-ur2Awj1wf4ddkcdCHsRvMTXFFW60JgTqQr6mXRGAtlcUxpTaK_xbLtEuXJ04KV0uGdOYoTcjGhHhhz8oAHW0aGryx1tZ9HrAI7qrT9aTr4/");
ppo.big_path = 'http://www.swfcabin.com/swf-files/1292894665.swf';
ppo.big_image = escape("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW07I6uSB0FT5AXNM_4ocydfoyqMieFXDs9b5DKvcTt5HQz_z1pHyTJJav3WQJcFysY95eCsughMVDTSEYBjFKiFUeoazNcFjbIKIxbOxdqAQYRCnNRj5LHtu_ERmcjvluOO98LYiOFJQY/s576/peel.png");

ppo.small_width = '100'; //độ rộng phần cuộn khi chưa rê chuột
ppo.small_height = '100'; //độ cao phần cuộn khi chưa rê chuột
ppo.small_params = 'ico=' + ppo.small_image;
ppo.big_width = "450"; //độ rộng phần cuộn khi rê chuột
ppo.big_height = "450"; //độ cao phần cuộn khi rê chuột
ppo.big_params = 'big=' + ppo.big_image + '&ad_url=' + ppo.ad_url;
</script>

<script src="http://traidatmui-tips.googlecode.com/files/flash_peel.js" type="text/javascript"></script>

☼ Chỉnh code:
- Link màu xanh là phần bạn nhìn thấy ban đầu, khi chưa rê chuột vào phần cuộn góc.
- Link màu tím than là phần ảnh bạn nhìn thấy khi phần ẩn bạn rê chuột vào phần cuộn đó, nói cách khác đây là phần nằm bên dưới phần cuộn góc.
- Link màu đỏ đậm là link cho phần cuộn góc, khi người dùng click vào đây nó sẽ dẫn đến địa chỉ được thiết lập trong phần này. Bạn thay thành link mà bạn muốn.

5. Sau khi chỉnh sửa xong, bạn save tiện ích lại.

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

[Read More...]

0 Ẩn bài viết ở trang chủ

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.

[Read More...]