TẠO TAB CHO BLOG (MẪU 4)

Để tiết kiệm không gian Blog, bạn có thể gom các tiện ích vào một tiện ích HTML chung, các tiện ích này sẽ có các TAB riêng, khi cần xem tiện ích nào đó bất kỳ chúng ta chỉ việc bấm vào tiện ích đó, TAB tiện ích hiện hành sẽ đổi màu khác biệt so với các TAB khác...

Thủ thuật này cũng khá đơn giản.

Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)

XEM THỬ  

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh </head>  và dán tất cả code phía dưới trên lệnh </head> và bấm Lưu mẫu.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

</script>

<script>

    $(document).ready(function() {

        $("#tabs").tabs();

    });

</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />

Tiếp theo, bạn thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.

<div id="tabs">

<ul>

<li><a href="#tabs-1">Tiêu đề tiện ích 1</a></li>

<li><a href="#tabs-2">Tiêu đề tiện ích 2</a></li>

<li><a href="#tabs-3">Tiêu đề tiện ích 3</a></li>

</ul>

<div id="tabs-1">Nhập nội dung tiện ích 1 vào đây</div>

<div id="tabs-2">Nhập nội dung tiện ích 2 vào đây</div>

<div id="tabs-3">Nhập nội dung tiện ích 3 vào đây</div>

Bây giờ, bạn có thể thay tên hiển thị và dán nội dung của bạn vào code trên và bấm lưu mẫu, quay trở lại blog xem kết quả.

More about →

Thêm favicon cho tiện ích LinkList

Đối với Blogspot, khi bạn muốn thêm một tiện ích liệt kê các trang web hoặc blog mà bạn ưa thích thì bạn thường dùng đến tiện ích LinkList. Tính năng của tiện ích này rất đơn điệu, bạn chỉ có thể tùy biến CSS cho các liên kết. Qua bài viết này, mình sẽ giúp bạn sáng tạo thêm một chút, thêm favicon cho các liên kết của tiện ích LinkList.

Kể từ khi Blogger tích hợp tính năng Favicon thì một liên kết favicon của blogspot có dạng như sau:

http://tenblogcuaban.blogspot.com/favicon.ico

Theo quy tắc phổ biến, liên kết favicon của một website (được xây dựng trên các nền tảng Wordpress, Joomla, …) có dạng như sau: http://www.tenwebsite.com/favicon.ico.

Bây giờ hãy xem xét cấu trúc XML của một tiện ích LinkList. Trước tiên Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích LinkList rồi lần lượt thêm địa chỉ (URL) và tên trang tương ứng cho các liên kết ưa thích mà bạn muốn tạo. Sau đó vào Edit HTML chọn Expand Widget Templates. Dùng từ khóa LinkList để tìm đến đoạn code của tiện ích này như sau:

1. <b:widget id='LinkList1' locked='false' title='My Favourite Resources' type='LinkList'>
2. <b:includable id='main'>
3. <b:if cond='data:title'><h2><data:title/></h2></b:if>
4.  <div class='widget-content'>
5.    <ul>
6.      <b:loop values='data:links' var='link'>
7.        <li><a expr:href='data:link.target'><data:link.name/></a></li>
8.      </b:loop>
9.    </ul>
10.   </div>
11. </b:includable>
12. </b:widget>

Trong đoạn code trên, cần chú ý đến dòng

<li><a expr:href='data:link.target'><data:link.name/></a></li>

Nó biểu thị các liên kết. Trong đó data:link.target chính là đích đến của các liên kết. Như vậy để tự động thêm favicon vào trước các liên kết thì chúng ta thay thế dòng code nói trên bằng đoạn code như sau:

1. <li>
2.   <a expr:href='data:link.target'>
3.     <img expr:src='data:link.target + &quot;favicon.ico&quot;' />
4.     <data:link.name/>
5.   </a>
6. </li>

Cuối cùng, bạn có thể tùy biến CSS cho tiện ích, thêm đoạn code bên dưới vào trước dòng ]]></b:skin>.

#LinkList1 li {
background-color: #C89A2B;
border-top: 2px solid #C89A2B;
border-bottom: 2px solid #C89A2B;
cursor: pointer;
margin: 2px 0;
padding:0;
float:left;
width:50%;
list-style:none;
clear:none
}
#LinkList1 li a {
color: #069 !important;
font-weight: normal !important;
padding-left:5px
}
#LinkList1 li img {
display: inline-block;
height: 16px;
width: 16px;
margin-right: 5px;
vertical-align:middle;
border:none
}
#LinkList1 li:hover {
background-color: #C25A3B;
border-color: #606971
}

Lưu Template là hoàn thành.

• Telegraph Online
• New York Times
• Báo mới
• Tuổi trẻ Online
• Stockbiz
• Việt Báo
• Bóng đá+
• Vnexpress
• Thủ thuật Blogger
• Eblogviet
• Fan Dung Blog
• Vnblogspot
• Duy Pham Blog
• Noct Blog

More about →

FLASH TƯƠNG TÁC VỚI CHUỘT (PHẦN 1)

Flash là file có đuôi.SWF, các file flash thường rất đẹp và sinh động thích hợp cho việc trang trí, quảng cáo trên Web/Blog...

Ngoài ra, các bạn có thể tìm thấy các file Flash có tính tương tác với con trỏ chuột, có nghĩa là bạn phải bấm con chuột vào một trong các dữ liệu của file Flash để nó thực thi (ví dụ: Play, Preview, Replay...)

Tôi có sưu tầm một số Flash từ các trang Web nước ngoài khá đẹp và lý thú thích hợp cho việc giải trí sau vài giờ làm việc "mệt mỏi", mời các bạn cùng khám phá file Flash phía dưới.

Với file Flash này, khi bạn rê chuột vào khung lớn phía trên thì sẽ có một số kiểu dáng và hiệu ứng rất đẹp theo con trỏ chuột, bạn cũng có thể đổi kiểu dáng bằng cách bấm vào thẻ Effect number, đổi hiệu ứng rơi ở thẻ Type, sau cùng bấm Apply để thực thi.

Bây giờ, mời các bạn "giải trí" với một file Flash phía dưới.

Các bạn nhớ khi thay đổi khi thay đổi kiểu dáng hoặc kiểu rơi thì phải bấm Apply thì mới "hiệu nghiệm" nha.
Còn muốn dán vào Blog, thì đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code phía dưới vào

<embed bgcolor="#FFFFFF" height="320" width="450" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://420560203807516800-a-1802744773732722657-s-sites.googlegroups.com/site/dunghennesy/ngoisaodoimau.swf?attachauth=ANoY7cqQZlM8bexVHF9jr7njzzVzeKVVYi--XPJTAXOmxW9rQWBzfHmFHVXjDxpqIZe0_oDZrwx3elRz_Ncx2gAINlt7cSARdw5d6SFcnDuHtqhmUaN0wzj2EYWCfAYaEAZyrnyEUMjxrRwVn9kC7p4Eu-5naJU9DlgQ8CB1rH2qNY5ZJI6v5TF4YYHWlnMWAZPC7ZCSbB6l5HWXII7-uXu5H1KWB9rTrg%3D%3D&amp;attredirects=0" type="application/x-shockwave-flash" ><br /> </embed>

Bạn có thể thay đổi chiều ngang ở mục Width, chiều dài ở mục Height, sau cùng bấm Lưu lại là xong.

Chúc các bạn vui!!!

More about →

HIỂN THỊ BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 4)

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị theo 3 cột thẳng hàng, bài viết mới nhất sẽ nằm trên cùng, phía trên là hình đại diện, phía dưới là tiêu đề bài viết...Nếu bạn muốn xem hết các bài viết trong nhãn này thì bấm vào Xem tất cả.... ở phía dưới cùng.

Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.

Xem thử

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.

<style type="text/css">
    #itechplus-rc-3cot {width:300px;}
    table#itechplus-rc-3cot {border:1px solid #ccc;}
    #rc-3cot {padding:0 8px;width:30%;}
    #rc-3cot p{padding:0;margin:0 0 5px 0;}
    #rc-3cot img {margin:8px 0 2px; height:60px; width:50px; border:1px solid #ccc; padding:1px;}
    #rc-3cot a:link {font:normal 12px Times new roman;}
    #itechplus-rc-3cot h2 {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXkbx0nhgqAj30BJU_xV7qbmdoo0r9uuWc5k5s7og98L5rqH0eifeKApOHrENgkGEZJELfE3RG6QKvWr0qkXQpyXWY6irvYWZxZrUG9ZMKOu-iO4QYRb7j9L_VQ9zZVyGMzAG09bLD2c/s1600/04.png) no-repeat top left;
    padding:5px 0 14px 15px;
    font:bold 13px Verdana;
    margin:0px;
    color:#fff;
    }
  
</style>
<script type="text/javascript">
    home_page = "http://dungheineken.blogspot.com/";
    label = "WIN 7";
    numposts = 9;
    sumTitle = 24;
    colortitle = "#333";
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTzjm72GRg95ZmhC5qSA5CbwBh20zAr5bpL9zFwBeH0S4kv1P5KRqHEznpTGTmrVra4B5nbngQkKfOTnAcPuDHOZJwL5t-uvlHxR8XdXH1xGPDQIk6fEHsifldNIDcxdXZUcaAkRUHZg/";
    showRandomImg = true;
  
</script>
<div id="itechplus-rc-3cot">
<h2>
Thủ thuật Windows 7</h2>
<script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript">
</script>
<div style="float: right; margin: 0; padding: 3px;">
Xem tất cả<a href="http://www.dungheineken.blogspot.com/search/label/WIN%207"> Thủ thuật Windows 7 »</a></div>
</div>

Bây giờ, bạn thay đổi các đường link màu xanh (http://www.dungheineken.blogspot.com/search/label/WIN%207) là địa chỉ trang nhãn mà bạn muốn hiển thị, thay đổi các số màu đỏ theo ý muốn của bạn:

* Width: 300px (chiều rộng của tiện ích).

* Height: 60px width: 50px (chiều cao và chiều rộng của ảnh đại diện)

* Background: url http://3bp......png (link hình thanh ngang của tiêu đề)

* Home_page: địa chỉ blog của bạn

* Label: Tên nhãn muốn hiển thị

* Numposts=9: Số bài muốn hiển thị

* SumTitle=24: Số ký tự của tiêu đề bài đăng.

* Colortitle: Màu tiêu đề bài đăng

* Thủ thuật Windows 7: Tiêu đề tiện ích

và bấm LƯU lại là xong

LƯU Ý: Các bạn phải điền thật chính xác địa chỉ trang nhãn của bạn ở các dòng màu xanh và ở Label, nếu không nó sẽ bị lỗi và không hiển thị được.

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

Nguồn: Itech Plus

More about →

TẠO ẢNH KÈM FLASH VÀO BLOG

Bạn có thể dễ dàng gắn ảnh tĩnh và ảnh động vào Blog hoặc vào các bài đăng, tuy nhiên để hình ảnh thêm đẹp bạn nên thêm vào ảnh một hiệu ứng flash...

Nhưng thêm hiệu ứng Flash vào ảnh như thế nào? Bài viết dưới đây sẽ giúp các bạn làm được điều này.

Để hiểu rõ hơn, mời các bạn xem các hình phía dưới.

Hình phía trên là hình gốc, hình phía dưới là hình đã thêm hiệu ứng Flash nhưng hình ảnh gốc vẫn "y chang" không thay đổi gì khác.

Để làm được như vậy, bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript, rồi dán code phía dưới vào.

<table><tbody><tr><td style="border:0px solid rgb(180, 4, 4);background:transparent url(Link Ảnh) repeat;width:X;"><embed type="application/x-shockwave-flash" AllowScriptAccess='never' src="http://i173.photobucket.com/albums/w49/chiplove9xpro/Flash/Share/chiploveFlashloader.swf?file=Link Flash&scalemod=true" wmode="transparent" height="Y" width="X2"></embed></tr></tbody></table>

Bây giờ, bạn thay thế các lệnh màu đỏ để phù hợp với blog của mình:

Link Ảnh : Thay Link ảnh muốn chèn vào.
X là chiều rộng của ảnh

Y là chiều cao.

X2 = X
Link Flash : Thay Link của file Flash muốn chèn vào.

Và cuối cùng bấm Lưu lại là xong.

Nếu bạn chưa có sẳn link file Flash, các bạn có thể xem các bài: TRANG TRÍ TIÊU ĐỀ BLOG (gồm có 7 phần) để lựa chọn cho mình một số file Flash đẹp.

Còn muốn có một số hình ảnh đẹp để trang trí cho blog thì mời bạn VÀO ĐÂY

Chúc các bạn vui!!! 

More about →

THÊM 2 CỘT TIỆN ÍCH PHÍA DƯỚI KHU VỰC BÀI ĐĂNG

Thông thường các bạn có thể thêm nhiều tiện ích phía dưới khu vực bài đăng nhưng những tiện ích này sẽ có chiều ngang bằng với chiều ngang của khu vực bài đăng, điều này gây nhiều bất tiện khi bạn muốn chèn nhiều tiện ích có chiều ngang nhỏ hơn. 

Với thủ thuật dưới đây, các bạn có thể thêm được 2 cột tiện ích có chiều ngang dài bằng phân nửa chiều ngang của khu vực bài đăng.

Bạn xem hình phía dưới sẽ rõ

Đầu tiên, bạn đăng nhập vào Blog > Chọn Thiết kế > Chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh <div id='main-wrapper'> rồi Enter, bạn sẽ thấy trên bảng lớn có dòng lệnh này và được highlight màu xanh.

Bạn copy code phía dưới và dán vào ngay sau dòng lệnh đó

<b:section class='sidebar' id='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section> <b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>

Bước kế tiếp, bạn gõ vào hộp tìm kiếm dòng lệnh ></b:skin> và copy code phía dưới vào ngay trên dòng lệnh ></b:skin>


#magazine-left2 {
width: 45%;
float: left;
}
#magazine-right2 {
width: 45%;
float: right;
}

Cuối cùng, bấm Lưu mẫu rồi trở vào bố cục, bạn sẽ thấy dưới khu vực bài đăng của mình xuất hiện thêm 2 cột tiện ích.

Lưu ý: Thủ thuật này chỉ thực hiện thành công cho giao diện Blogspot V2 (giao diện tải về trên mạng), không thực hiện được đối với giao diện mặc định của Blogspot

More about →

ĐỒNG HỒ CÓ KÈM LỊCH

Trước đây, tôi có chia sẻ với các bạn một số mẫu đồng hồ đẹp (xem TẠI ĐÂY), kỳ này tôi chia sẻ thêm với các mẫu đồng hồ có kèm theo lịch (made in tự tui), mời các bạn xem các mẫu phía dưới.

 Mẫu 1:

Mẫu 2:







Mẫu 3:






Mẫu 4:






Mẫu 5:







Mẫu 6:







Mẫu 7:







Mẫu 8:







Mẫu 9:









Mẫu 10:







Mẫu 11:






Mẫu 12:

Các bạn thích mẫu nào thì gởi mã số và địa chỉ mail của bạn qua dungheineken@gmail.com, tôi sẽ gởi code cho các bạn...

More about →