GALLERY

Đây là Theme có một menu ngang nằm phía trên, có 1 sidebar hiển thị bên tay phải bài đăng, khu vực bài đăng được chia tay 3 ô nhỏ, các bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho Blog

THEMES GALLERY

Xem trước  Download

Nguồn:PB templates

More about →

SHADES OF GRAY

Đây là Theme có một menu ngang nằm phía trên, có 8 sidebar nằm phía dưới (chia thành 2 tầng),. khu vực bài đăng được chia tay 4 ô nhỏ (giao diện này rất thích hợp dùng để chia sẻ hình ảnh ), các bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho Blog

THEMES SHADES OF GRAY

Xem trước  Download

Nguồn:PB templates

More about →

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

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị trong một khung hình chữ nhật được chia thành 2 cột, cột bên trái là hình đại diện và một số dòng giới thiệu của bài viết mới nhất, cột bên phải sẽ hiển thị hình đại diện và tiêu đề bài viết thứ hai, số còn lại sẽ hiển thị theo dạng List. Ngoài ra, ở trên cùng của khung còn hiển thị một số Tab để các bạn có thể theo dõi các nhãn khác....

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">
    .fl{float:left}
    .fr{float:right}
    .folder{width:630px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
    .folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(http://goo.gl/CyQBL) repeat-x}
    .folder-active{height:24px; padding:4px 10px; background:url(http://goo.gl/EgxmY) repeat-x; font-weight:bold}
    .link-folder:link, .link-folder:visited{color:#fff}
    .subfolder{height:24px; padding:5px 5px 0 15px; background:url(http://goo.gl/Z29yN) no-repeat}
    .folder-content{width:620px; background:#fff url(http://goo.gl/qy9iZ) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
    .folder-content p{margin:0}
    .folder-content ul{list-style:none; margin:0; padding:0}
    .folder-content li{padding:0 0 4px 6px; background:url(http://goo.gl/4OvNo) no-repeat 0 8px}
    .folder-topnews{width:350px; padding-right:10px}
    .folder-othernews{width:250px}
    .other-folder{margin:0}
    .img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
    .img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
    .xemthem{float:right; display:block; margin:0; padding:5px}
  
</style>

<div class="folder">
<div class="folder-title">
<div class="folder-active fl">
<a class="link-folder" href="http://dunghennessy.blogspot.com/search/label/N%C3%82NG%20CAO">Thủ thuật nâng cao</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/C%C6%A0%20B%E1%BA%A2N">Thủ thuật cơ bản</a> | <a class="link-subfolder" href="http://dunghennessy.blogspot.com/search/label/TRANG%20TR%C3%8D%20BLOG">Trang trí Blogspot</a> | <a class="link-subfolder" href="http://www.dunghennessy.blogspot.com/search/label/Template">Giao diện Blogspot</a> | </div>
</div>
<div class="folder-content" id="tdHomeFolder2">

<script language="javascript">
    imgr = new Array();
    showRandomImg = true;
    summaryPost = 230;
    numposts2 = 5;
    homepage = "http://dunghennessy.blogspot.com/";
    label = "NÂNG CAO";
  
</script>

<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript">
</script></div>
</div>

Bây giờ, bạn thay đổi các đường link màu xanh (http://www.dungheineken.blogspot.com/search/label.......) 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: 630px (chiều rộng của tiện ích).
* Folder-topnews (width: 350px-chiều rộng của cột bên trái)
* Folder-othernews (width: 250px-chiều rộng của cột bên phải)
* Img-subject (chiều cao và chiều rộng của hình đại diện bên trái)
* Img-other (chiều cao và chiều rộng của hình đại diện bên phải)

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

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

* Numposts2=5: Số bài muốn hiển thị (kể cả bài có hình và bài hiển thị dạng List)

* SummaryPost=230: Số ký tự phần giới thiệu bài viết mới nhất.

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

LƯU Ý: 
 - Nếu thay đổi chiều rộng của tiện ích thì các bạn phải thay đổi đồng thời chiều rộng của cột bên trái và bên phải luôn.
- 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 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/AVvXsEicZa5Z9BXSzVyQBQkE7n-6UV6y__VGyt5oMgdKQ6m3om4EBRAEKYMM7rh3TbFb2gqeU66xhdeZPy8s9JGbLzwUAP82uA3DPO2Ihgnr5vgoc9bFBdDUaw5x4qtFYLi8_1At2gPSK2y4I_g/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/AVvXsEiMHufkqKnIitx9rYcP6NNWJVH1txCSo57s2_ZMbUkLFFmQAD-e7wB8mBXf2HoeSQ851zRJDnYmbKudlUI55qD5rnH-yPjxk9ynh5S1LmpdODBbmo1P5d32TADIgJNygSEhqOzycyimM3M/";
    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 →