Code trình diễn ảnh cực đẹp

Hôm nay mình sẽ giới thiệu các bạn một code trình diễn ảnh cực đẹp

Demo
Code
1. Cho code sau vào thẻ head
<style type="text/css">

.flashclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
border: 5px solid orange;
padding: 5px;
}

.flashclass img{
border-width: 0;
}

</style>

<script type="text/javascript" src="http://bloggiaovienthaibinh.110mb.com/anh3/transitionshow.js"></script>
2. Code sau cho vào thẻ body ( chỗ nào muốn hiển thị)

<script type="text/javascript">

var flashyshow=new flashyslideshow({ //create instance of slideshow
    wrapperid: "myslideshow", //unique ID for this slideshow
    wrapperclass: "flashclass", //desired CSS class for this slideshow
    imagearray: [
        ["1.jpg", "http://webtruonghoc.oni.cc", "_new", "Thủ thuật blog violet."],
        ["2.jpg", "http://webtruonghoc.oni.cc", "", "Thiết kế web trường học?"],
        ["3.jpg", "http://webtruonghoc.oni.cc", "", "Code cho blog."],
        ["4.jpg", "http://webtruonghoc.oni.cc", "", "Hệ thống tra cứu điểm trường học."]
    ],
    pause: 2000, //pause between content change (millisec)
    transduration: 1000 //duration of transition (affects only IE users)
})

</script>

3.HD
- Các bạn thay link ảnh ,link web khi click vào ảnh và lời giới thiệu về ảnh
        ["1.jpg", "http://webtruonghoc.oni.cc", "_new", "Thủ thuật blog violet."],
        ["2.jpg", "http://webtruonghoc.oni.cc", "", "Thiết kế web trường học?"],
        ["3.jpg", "http://webtruonghoc.oni.cc", "", "Code cho blog."],
        ["4.jpg", "http://webtruonghoc.oni.cc", "", "Hệ thống tra cứu điểm trường học."]
-Muốn nhiều ảnh các lặp lại code trên
Chú ý : Với blog violet thì các bạn cho tất code trên vào khối chức năng là được
Kích thước anhe lên điểu chính cho cùng kích thước

Unknown Make a comment!

Tiện ích bài viết ngẫu nhiên với ảnh thumbnail (random posts with thumbnail)

Tiện ích bài viết ngẫu nhiên đã được giới thiệu từ lâu, nhưng có rất ít người dùng, 1 phần là do làm trang blog của bạn load chậm, 1 phần là do giao diện của tiện ích hiển thị không được bắt mắt lắm. Vì lý do đó hôm nay mình sẽ giới thiệu cho các bạn tiện ích random posts khác sẽ khắc phục được 2 vấn đề trên. Và cũng vì 1 lý do nữa là đã từng có 1 bạn yêu cầu xem 1 tiện ích random posts với ảnh thumbnail, nhưng tiện ích bạn đó đưa nhờ mình xem bị lỗi trên IE, tức không hiển thị được ảnh thumbnail. Bản tiện ích này mình đã làm mới lại từ bản cũ mà đã được giới thiệu từ trước. Như ở trên mình có nói, bản cũ load hơi lâu. Tuy ở bản này thời gian load không được cải thiện, nhưng với 1 chút thủ thuật nhỏ thì việc load tiện ích này sẽ không ảnh hưởng tới việc load các thành phần khác trong blog.
Xem DEMO : Random posts with thumbnail

Hình ảnh minh họa:

* Sau đây là các bước thực hiện :
1. vào bố cục
2. Vào phần tử trang và tạo 1 widget HTML/javascript và dán đọan code bên dưới vào :

<style type="text/css">
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(http://data.fandung.com/blog/demo/rd-post-thumb/img-bg-rd1.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
img#rd-thumb {
float:left;
width: 40px;
height:40px;
margin-right:5px;
border:1px solid #ccc;
padding:2px;
}

img#rd-thumb0 {
float:left;
width: 80px;
height:80px;
margin-right:5px;
border:1px solid #ccc;
padding:2px;
}

#random-posts ul {list-style:none;}
#random-posts li {
height:50px !important;
padding:5px 3px 0 5px;
list-style:none;
}
li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}
li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}
li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}
li#li-rd-chan {background:#f6f6f6;}
</style>

<div id="random-posts"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
</div>
</div>

3. Save widget lại.
- Để có thể tùy chỉnh dễ dành code CSS, các bạn xem ảnh minh họa bên dưới :

4. Vào chỉnh sửa code HTML
5. Dán đọan code bên dưới vào trước thẻ đóng </body>

- Đọan code : /feeds/posts/default/-/Label nó sẽ cho phép hiển thị các bài viết radom từ 1 nhãn, và cụ thể ở đây là nhãn mang tên Label, nếu các bạn muốn hiển thị cho cả blog thì thay đọan code đó thành /feeds/posts/default
- đọan code ở bước 5 là muốn để cho tiện ích được load sau cùng.
- Chú ý :
+ nếu blog càng có nhiều bài viết thì tiện ích load càng lâu, vì thế nếu load cho 1 nhãn thì sẽ nhanh hơn là cho cả blog.
+ Ngòai ra để muốn hiển thị được ảnh thumbnail thì bạn phải điều chỉnh trang feed ở dạng xem đầy đủ
6. Save template.
- Lưu ý chung: để an tòan, các bạn nên download các hình ảnh và file js về, phòng trường hợp host của mình gặp vấn đề
Chúc các bạn thành công

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "Chưa có nhận xét nào";
cmtext = "Nhận xét";
</script>
<script src="http://data.fandung.com/blog/demo/rd-post-thumb/rd-post-thumb.js" type="text/javascript"></script>
<script src="/feeds/posts/default/-/Label?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Unknown Make a comment!

Menu nằm ngang với hiệu ứng thay đổi ảnh

- Bài viết trước mình có giới thiệu cách tạo menu nằm ngang có sổ dọc với hiệu ứng thay đổi màu nên. Hôm nay mình xin giới thiệu 1 style khác, đó là hiệu ứng dùng hình ảnh. Bài này mình sẽ giới thiệu 11 style khác nhau cho các bạn lựa chọn.

☼Các bước chuẩn bị:
- Đầu tiên các bạn download file này về: CSSMenu.zip
- Sau đó giải nén ra, ta sẽ thấy 22 file ảnh, có tên tương ứng từ A --> K (mỗi lọai 2 file), và 1 file menus.htm .
- Các bạn có thể mở file menus.htm để xem offline các bản demo của các style, rồi lựa chọn style mình thích. (xem hình bên dưới)

- Các style được đặt tên theo thứ tự, từ A đến K, khi bạn đã lựa chọn được file nào thì copy 2 file hình của style tương ứng, và up lên host để lấy link.
- Ví dụ ở đây mình chọn style E, khi đó mình sẽ chọn 2 file ảnh :tableftE.gif và tabrightE.gif để up lên host.

☼Bây giờ ta bắt đầu tạo menu chính:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa CodeHTML
4. Chèn đọan code CSS bên dưới lên trên dòng ]]></b:skin>

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("LINK OF tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("LINK OF tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */

#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

Chú ý: thay code màu xanh bằng link hình mà bạn đã up, nhớ fải đúng thứ tự các file.
- Và 1 điều lưu ý nữa là : khi bạn thay đổi ảnh (tức là không sử dụng những hình ảnh mình đưa) thì bạn phải chỉnh code màu cam cho phù hợp với ảnh của bạn. Ở đây 42px chính là 1/2 chiều cao của ảnh.

5. Save template lại.
6. Tiếp tục vào Bố cục
7. Tạo một Widget HTML/Javascript.
8. Chèn đọan code bên dưới vào :

<div id="tabsE">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Link 4"><span>Link 4</span></a></li>
</ul>
</div>

Chú ý:
- Thay href="#" thành href="URL Liên kết"
- Thay code màu đỏ bằng thành tên menu của bạn.
- Thay Code màu xanh là mô tả menu.

Như vậy ta đã thực hiện xong 1 menu nằm ngang dùng hiệu ứng thay đổi ảnh.

☼ Tạo thêm menu con cho menu chính với hiệu ứng sổ dọc.
- Đầu tiên để có hiệu ứng sổ dọc xuống bạn phải chèn đọan file javascript ngay sau dòng lệnh

1. Vào Bố cục - Chỉnh sửa code HTML - và dán đọan code bên dưới vào ngay bên dưới thẻ

<script src='http://vo1984.googlepages.com/dropdown2.js' type='text/javascript'/>

2. Khoan save template lại, tiếp tục chèn đọan code CSS của menu con lên trên dòng ]]></b:skin>

.submenu {
background:#F57900;
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #fff solid;
cursor:pointer;
}

3. Save template lại.
4. Và bây giờ bắt đầu tạo menu hòan chỉnh (ở đây mình chỉ ví dụ cho 2 menu chính và 2 menu con cho nó gọn, còn muốn nhiều hơn thì các bạn cứ thêm vào).
- Bây giờ tạo 1 widget HTML/JavaScript và dán code bên dưới vào:

<script type="text/javascript">
function otab()
{
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="submenu" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}

function ctab(){
document.write('<\/table>');
}
function otab(child_id)
{
document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
</script>

<div id="tabsE">
<ul>
<li><a id="sub1" href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a id="sub2" href="#" title="Link 2"><span>Link 2</span></a></li>
</ul>
</div>

<script type="text/javascript">

otab("sub1_child");
submn('Label1','Label1');
submn('Label2','Label2');
ctab();
at_attach("sub1", "sub1_child", "hover", "y", "pointer");

otab("sub2_child");
submn('Label3','Label3');
submn('Label4','Label4');
ctab();
at_attach("sub2", "sub2_child", "hover", "y", "pointer");

</script>

☼Giải thích 1 chút về code:
- Các code màu tím của menu chính và con phải hòan tòan giống nhau.
- Các code màu xanh chính là các Nhãn trong của blog bạn mà bạn muốn hiển thị trên trên menu.
- Thay dòng YOURBLOG.blogspot.com thành blog của bạn
- onmouseover="this.style.background='#039'" : code màu đỏ chính là màu hiển thị khi bạn rê chuột lên 1 menu con.
- onmouseout="this.style.background='#F57900'" : code màu đỏ là khi ta không rê chuột vào 1 menu con.
- Hãy thay đổi các code màu đó theo ý bạn.

5. Save lại, như vậy đã xong.

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

Unknown Make a comment!

Tạo Menu Thanh menu ngang có sổ dọc xuống

[FD BlOg] - Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.

Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.

Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ: giải trí , học tập... và các mục giải trí, học tập sẽ là 1 menu chính, còn các nhãn trong nó sẽ là 1 menu phụ.

Thứ 2 là xác định nơi đặt menu, thông dụng nhất sẽ là ở trên phần header.Như vậy các bạn phải tạo 1 widget HTML/Javascript vào header rồi dán code của thủ thuật vào.

☼ Bây giờ ta bắt đầu vô chi tiết:
1. Đăng nhập blog
2. Vào Bố cục (layout)
3. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng tiện ích)
4. Chèn đọan code sau vào ngay bên dưới thẻ mở <head>

5. Save template lại.
6. Quay trở lại bố cục, vào phần tử trang, tạo 1 cái widget HTML/Javascript,sau đó dán đọan code bên dưới vào.

►CODE:

-Chú ý :

+ Các code cùng màu (đỏ, xanh dương, xanh, cam, đen, tím, xanh xám)sẽ liên kết với nhau (kiểu : cha - con)
+ Các code màu nâu chính là các nhãn(Label) trong blog của bạn(những nhãn có kí tự khỏang trắng sẽ thay bằng %20), và tên theo sau dòng code màu nâu chính là Tên hiển thị của menu con. Các bạn xem hình minh họa bên dưới sẽ rõ.

+ Thay đổi các nhãn và tên các menu theo như blog của bạn.

Bạn nên đặt menu này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật "Thêm tiện ích" vào phần header thì có thể xem ở đây.

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

Unknown Make a comment!

Create Tabbed Side Menu with jQuery

[FD BlOg] - Một ứng dụng khác từ jQuery, bài viết sẽ hướng dẫn các bạn tạo tab menu, với 5 tab con chứa nội dung. Và tiêu để của các tab sẽ được biểu thị bằng hình ảnh.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/jquery-tab-menu/index.html

Hình minh họa :

- Đầu tiên các bạn download gói hình ảnh của thủ thuật về máy, rồi up lên host để sử dụng cho thủ thuật. (images.rar)
Để đơn giản, ta sẽ chép tất cả code của thủ thuật vào 1 widget HTML/Javascript.
- Tạo widget HTML/Javascript ở nơi muốn đặt tab
- Dán tất cả code bên dưới vào:

//Code Javascript
<script src="http://data.fandung.com/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

// Code CSS
<style>

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(images/boxTop.gif) no-repeat;height:11px;clear:both}
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.gif) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>

// Code HTML
<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">
<ul>
<li>Post 1.</li>
<li>Post 2.</li>
<li>Post 3.</li>
<li class="last">Post 4.</li>
</ul>
</div>

<div id="comments">
<ul>
<li><a>Commet 1. <span> - Author 1</span></a></li>
<li><a>Commet 2. <span> - Author 2</span></a></li>
<li><a>Commet 3. <span> - Author 3</span></a></li>
<li class="last"><a>Commet 4. <span> - Author 4</span></a></li>
</ul>
</div>

<div id="category">
<ul>
<li><a href="#">css-html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">logo</a></li>
<li class="last"><a href="#">Blogger</a></li>
</ul>
</div>

<div id="famous">
<ul>
<li>List famous 1.</li>
<li>List famous 2.</li>
<li>List famous 3.</li>
<li class="last">List famous 4.</li>
</ul>
</div>

<div id="random">
<ul>
<li>Random post 1.</li>
<li>Random post 2.</li>
<li>Random post 3.</li>
<li class="last">Random post 4.</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

- Chú ý : các class "posts, comments, category, famous, random" là các tiêu đề của 5 tab. Và để ý ta thấy ở class posts có thêm dòng selected, dòng này để mặc định tab "posts" sẽ hiển thị mỗi lần load.
- Dòng code : .box {width:227px} : là độ rộng của tab chính.

-Save widget.

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

Unknown Make a comment!

Tạo menu thả xuống nhiều thư mục con

(Traidatmui.com) – Hôm nay mình sẽ hướng dẫn các bạn thực hiện một thủ thuật để tạo một menu ngay dạng thả xuống với nhiều cấp bậc con khác nhau. Với menu này bạn có thể tạo thêm rất nhiều thư mục trong menu, vì với một thư mục chính bạn có thể tạo thêm nhiều thư mục con khác. Menu này có sẽ làm cho blog bạn trông đẹp hơn đấy và cũng giúp bạn trong việc chia nhỏ các thư mục trong blog của bạn. Thủ thuật này cũng khá phức tạp, bạn hãy xem hình ảnh bên dưới sẽ thấy rỏ hơn.

Hình ảnh minh họa

☼ Bắt đầu thủ thuật

1. Đầu tiên đăng nhập vào blog của bạn
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>

4. Save template lại
5. Bây giờ bạn hãy thêm 1 HTML/Javascript và dán code bên dưới vào

Chỉnh code:
- Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
- Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
- Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
- Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
- Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
- Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>

Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:

6. Save lại
Chúc bạn thành công

Nguồn: TRAIDATMUI.com

Unknown Make a comment!

TẠO KHUNG CHỨA NỘI DUNG TỰ ĐỘNG THAY ĐỔI

Với thủ thuật này, các nội dung được hiển thị trong khung sẽ tự động thay đổi theo thời gian, ở mỗi khung các bạn có thể tạo một hoặc nhiều nội dung khác nhau.

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

Tiếp tục, bạn gõ vào ô dòng lệnh: ]]></b:skin> và dán code phía dưới vào trên dòng lệnh ]]></b:skin>

.sliderwrapper{<br /> position: relative;<br /> overflow: hidden;<br /> border: 10px solid #000099;<br /> border-bottom-width: 6px;<br /> width: 400px; /*Độ rộng của khung*/<br /> height: 250px; /*Chiều cao của khung*/<br /> }<br /> <br /> .sliderwrapper .contentdiv{<br /> visibility: hidden;<br /> position: absolute;<br /> left: 0;<br /> top: 0;<br /> padding: 5px;<br /> background: #ddd; /*màu nền của khung chứa các nội dung bên trong */<br /> width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */<br /> height: 100%;<br /> filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);<br /> -moz-opacity: 1;<br /> opacity: 1;<br /> }<br /> <br /> .pagination{<br /> width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/<br /> text-align: center;<br /> background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/<br /> padding: 5px 10px;<br /> }<br /> <br /> .pagination a{<br /> padding: 0 5px;<br /> border:1px solid #fff;<br /> text-decoration: none;<br /> color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/<br /> background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/<br /> }<br /> <br /> .pagination a:hover, .pagination a.selected{<br /> color: #fff;<br /> background: #3333cc;<br /> }<br />

Bạn có thể thay thế màu nền, kích thước khung...theo các chú thích ghi trong code
Cuối cùng, bấm Lưu mẫu và trở về thiết kế > thêm tiện ích HTML/Javacript rồi dán các code phía dưới vào

<div id="slider1" class="sliderwrapper"><br /> <div class="contentdiv">Nội dung 1 muốn hiển thị nhập vào đây<br /> </div><br /> <div class="contentdiv">Nội dung 2 muốn hiển thị nhập vào đây </div><br /> <div class="contentdiv">Nội dung 3 muốn hiển thị nhập vào đây </div><br /> <div class="contentdiv">Nội dung 4 muốn hiển thị nhập vào đây </div><br /> </div><br /> <div id="paginate-slider1" class="pagination"></div><br /> <script type="text/javascript">  featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [true, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } })  </script><br />

Bây giờ bạn nhập nội dung mà mình muốn hiển thị vào, code này có 4 nội dung, nếu muốn thêm nhiều nội dung hơn thì bạn copy code này

<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây </div>

dán vào phía dưới sau mỗi dòng nội dung theo mẫu

Unknown Make a comment!

Auto readmore không sử dụng javascript cho Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpi-s7MhiCufa8sV8jRi5ZvzrkUbNYyj0CFi6xldi4MNg56WmhrdQxK6oIZISbg-A8CHFbaWFbg6c_B_xxNav8z-NNtQyQc0GBoaCrude8x_8-8arQodFDBckuxJ5I0zvKpvbIWfOaJeKC/s72-c/emoticon.png

Blogger đã có readmore tuy nhiên nó khá thủ công, với blog đã có nhiều bài viết thì việc tạo readmore cho từng bài là rất vất vả và blogger thường tìm đến với auto readmore javascript. Auto readmore javascript thực ra chỉ hiển thị một phần bài viết qua hàm document.write, nội dung cả bài viết vẫn được trình duyệt tải về. Nhược điểm của nó là không thân thiện với các bộ máy tìm kiếm và các công cụ dịch trực tuyến, ngoài ra với bài viết dài nếu không dùng thêm readmore của Blogger thì sẽ gặp lỗi phân trang do Blogger tự ngắt trang. Thủ thuật auto readmore mình giới thiệu sau đây hoàn toàn mới, không sử dụng javascript mà dùng các câu lệnh do chính Blogger cung cấp. Nó sẽ cải thiện tốc độ blog của bạn khi duyệt các trang kiểu index, archive do chỉ tải về trích đoạn nội dung của bài viết.

Các bước thực hiện:

Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh. Có 2 dạng hiển thị hình ảnh là bên trái hoặc bên phải.

1. Hiển thị hình ảnh bên trái:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>:

.post-thumbnail{float:left;margin-right:20px}

2. Hiển thị hình ảnh bên phải:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>:

.post-thumbnail{float:right;margin-left:20px}

Bước 2: Thêm đoạn mã auto readmore. Có 4 dạng auto readmore để lựa chọn.

1. Auto readmore với hình ảnh:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   <b:else/>
    <img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore với bài viết mới nhất:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ <data:post.snippet/> của Blogger. Như đã từng đề cập tới ở bài đăng trước đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Hình ảnh được lấy thông qua lệnh data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.

Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.

Unknown Make a comment!

Thêm một cột cho blog

Hãy quan sát kỹ nhé! Tôi sẽ cho bạn biết:

- Một giao diện với ba cột.
- Một header đã thay đổi có rộng lớn hơn mặc định.
- Thanh navbar trên đỉnh đầu không có.
- Cái Icon của Blogger không có trước địa chỉ của tôi mà thay vào đó là cái của tôi.
- ...

Tôi đã là điều đó như thế nào? Ở bài này tôi sẽ hướng dẫn cho bạn chèn thêm một cột cho blog.

(Xem hình kích cở đầy đủ)
Hình. Giao diện Add and Arrange A Page Element của http://thuthuatchoblogger.blogspot.com

Sau khi đăng nhập, hãy vào Template->Edit HTML. Bây giờ công việc của chúng ta là thêm một cột cho blog. Template mà tôi sử dụng trong cho http://thuthuatchoblogger.blogspot.com là Minima. Bạn có thể chọn giao diện này để thêm. Tùy theo template, mỗi template sẽ có phần này khác nhau. Xin lưu ý là trước khi thay đổi, bạn nhớ copy lại Template mà mình hiện có đề phòng chúng ta làm sai mà sửa chữa kịp thời.
Chúng ta đang ở Edit Template. Bây giờ chúng ta kéo thanh trược ở khung bảng mã HTML xuống. Bạn tìm cho tôi một đoạn mã như sau:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#out-wrapper: Phần giữa của toàn màn hình bao gồm các phần dưới.
#main-wrapper: Phần chính, nơi các bài đăng của bạn sẽ nằm ở đây
#sidebar-wrapper: Cột bên phải theo mặt định của template này.

Bây giờ chúng ta copy hết phần #side-wrapper và paste bên dưới nó như và sửa lại như sau (thay đổi màu đỏ)

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Bây giờ thì bạn đã có thêm một cột bên trái. Đừng vội lưu lại mà hãy làm tiếp. Chúng ta thấy #out-wrapper có phần rộng 660px (pixel). Một màn hình 15’ thông thường hiển thị ngang và dọc: 800 x 600, vậy chúng ta sẽ thiết lập cho #outer-wrapper một giá trị chiều ngang bé hơn 800. Bạn có thể thiết lập rộng hơn tùy thích.

Tôi sẽ thay đổi độ rộng của trang ở giá trị width: 660px->750px. Tôi sẽ thiết lập lại độ rộng của #main-wrapper là 400px, của các cột hai bên #sidebar-wrapper và #newside-wrapper lần lượt là 150px. Tuy nhiên bên trái cột bên trái mà tôi tạo ra sẽ dính nhau với cột giữa, do đó tôi thêm lề trái margin-left: 20px; vào #main-wrapper. Cuối cùng tôi sẽ được một đoạn mã tương ứng như bên dưới. (Màu đỏ chỉ các thay đổi cho phần này)

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
  margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Bây giờ tôi sẽ thêm một Profile để xuất hiện một bên trái như cột bên phải với Add a Page Element.

Tiếp tục hãy kéo thanh trược xuống dưới nữa và tìm đoạn mã sau:

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Công việc của bạn là chép đoạn mã này dán lên phía trước đoạn mã đó, nhớ là phía trước nhé!

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Xong rồi thì bạn lưu lại. Nào hãy thử kiểm tra sự khác biệt nhé. Tuy nhiên vẫn chưa hết, cái header và footer của bạn vẫn còn bé xíu như vậy. Thế thì chúng ta thay đổi kích cở chúng đi.

Vào lại Edit HTML, bạn tìm đoạn mã như sau:

*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Bạn sửa số 660 thành 750 là xong. Tương tự như vậy hãy kéo xuống phía dưới nữa tìm đoạn mã bên dưới và sửa lại con số vừa kể.

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Nào, chúng ta đã có một mẫu với ba cột. Thật tuyệt phải không. Hãy đón đọc các bài khác nhé!

Bạn có thể download template này tại đây. Tôi cũng lưu ý là tất cả những widget mà bạn làm trước đó sẽ không còn nữa. Để sử dụng bạn giải nén file download về, vào Template ->Edit HTML, tìm đến file giải nén ở Backup and Restore và Upload để kết thúc.

Unknown Make a comment!

Chỉ hiện tiêu đề bài viết trong Blogger

Có thể các bạn đều biết đến tính năng Read-more được áp dụng rộng rãi ở nhiều Blogger , giúp trang chủ Blog trở nên gọn gàng, hoàn thiện hơn. Tuy nhiên, nếu bạn vẫn chưa ưng ý với Read-more mà chỉ muốn hiện tiêu đề bài viết, thì thủ thuật mình xin giới thiệu bên dưới đây sẽ giúp bạn.

Để thực hiện thủ thuật này, bạn tiến hành các bước dưới đây :

Đăng nhập vào Blogger > Layout > Edit HTML và Mở rộng Mẫu tiện ích.
Tìm đoạn code <data:post.body/> , sau đó thay thế nó với code dưới đây :
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'><data:post.body/></div></b:if>
Save lại template và kiểm tra kết quả.

P/s : Đoạn code trên được trích từ thủ thuật Read-more v1 của Anh Võ và có chỉnh sửa lại cho hoàn thiện. Vì thế mà bạn có thể áp dụng mà không cần lo bị sai sót. Hy vọng bạn thích thủ thuật này. Chúc vui !

Unknown Make a comment!

Tạo một bức ảnh luôn xuất hiện trên Blog

Nếu bạn muốn tạo một bức ảnh luôn xuất hiện trên trang Blog của mình để trang trí, hoặc để làm một bảng thông báo nho nhỏ thì thủ thuật hôm nay mình xin giới thiệu sẽ giúp cho bạn đấy. Mời bạn xem screenshot bên dưới.

Các bạn tiến hành theo thứ tự những bước sau đây :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm đến thẻ ]]></b:skin> và thêm đoạn code dưới đây ngay bên trên nó :
#top_image {
position:fixed;
bottom:5px;
right:5px;
clip:inherit;
Lưu ý : Với đoạn code này, mình đã thiết lập cho hình luôn xuất hiện ở vị trí góc Cuối/Phải . Nếu không thích vị trí này, bạn hãy thế Bottom/Right thành Top/Left (góc Trên/Trái) hay đại loại thế.
Tìm tiếp thẻ </body> và thêm đoạn code này vào :
<div id='top_image'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png'/></div>
Lưu ý : Bạn hãy chỉnh lại Link hình bên trên thành Link hình của bạn (Hãy dùng hình có kích cỡ nhỏ để ít tốn thời gian load Blog và không gây phiền phức cho người đọc). Đồng thời, nếu muốn chèn URL vào hình, hãy sử dụng thẻ <a href="URL"><img src="Link hình"></a>.
Save lại template và kiểm tra kết quả.

Vậy là bạn đã thực hiện xong thủ thuật chèn ảnh luôn nổi trên Blog rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !

Unknown Make a comment!

Tạo 3 Cột Phần tử ở phần Footer của Template

Nếu Blog bạn chứa nhiều phần tử (element), thì việc tiết kiệm không gian trong template là điều rất cần thiết để tạo ra một bố cục hợp lý và gọn gàng cho Blog. Nhưng không phải Template nào cũng được thiết lập sẵn để cho phép sắp xếp phần tử ở vị trí tùy thích.
Chẳng hạn như đối với giao diện hiện tại của Blog tin học, mặc định template chỉ có 1 sidebar nên đã bị mất đi khá nhiều khoảng trống, chưa kể phần Footer thì chỉ có 1 cột (column) càng khiến cho Blog không thể chèn thêm nhiều tiện ích. Nếu Blog của bạn cũng gặp trường hợp tương tự, thì bài viết hôm nay sẽ giúp bạn giải quyết tình trạng này, bằng cách tạo 3 column cho Footer.

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Thay thế thẻ <b:section class='footer' id='footer'/> bằng đoạn code dưới đây :
<div id='customize-footer-column'>
<div id='Footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='Footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='Footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='Col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Tìm thẻ ]]></b:skin> và dán đoạn code này ngay bên trên
#customize-footer-column {
clear:both;
}
.footer-column {
padding: 10px;
}
Save lại template và chuyển sang tab Page Elements (Phần tử trang để xem kết quả)

Vậy là mình đã hướng dẫn xong cách tạo 3 column ở phần Footer cho Template của Blogger rồi đấy. Hy vọng thủ thuật này sẽ giúp bạn tùy biến giao diện cho Blog của mình một cách đẹp mắt. Chúc vui !

Unknown Make a comment!

Tiện ích Recent Posts with 3 columns for Blogger Recent Posts with 3 columns for Blogger

Chắc các bạn cũng thấy trên site iTechPlus.info ở sidebar có một trương mục là Bản quyền phần mềm, với bố cục là logo và tên của phần mềm được chia làm 3 cột hiển thị khá gọn gàng và đẹp mắt.

Tiện ích này rất thích hợp cho các trang giới thiệu phần mềm, ebook, quảng cáo sản phẩm,…kết hợp sử dụng tiện ích Multi Tabbed Widget For Blogger sẽ càng làm cho Blog của bạn trông ngăn nắp và chuyên nghiệp hơn.

Recent Posts with 3 columns + Multi Tabbed Widget

Hình minh họa | Demo

Thể theo yêu cầu của bạn Mobile, cũng như muốn chia sẻ với các bạn tiện ích hữu ích này, bài viết bên dưới iTechPlus sẽ hướng dẫn các bạn cách tạo widget Recent Posts with 3 columns for Blogger qua 2 bước đơn giản.
Thực hiện :
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :
    <style type="text/css">
    #itechplus-rc-3cot {width:320px;}
    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 arial;}
    #itechplus-rc-3cot h2 {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-448W0NAs0Mu08rjKZNh_7CsMKA7V1f3SRlAdMM4wYkATcfHx0l8hdcQy-YzYUHR2txSC8PLDWLyvCsqpqd9HaJG3gvWN-eg3sA7H5PgOYrxPL-1NC3plKR_iSh2HDNavW17BCzDJSC0/) 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://itechplus.info/";
    label = "License";
    numposts = 9;
    sumTitle = 24;
    colortitle = "#333";
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVf58zdCXZ-pMDDjwtFKc0BdHdx2pMCpZ8MMcGFG26VEEDVhTmq1axP9G-ETWNDT6K3HUf_bgW02wOYk3Ex2HobWSKjQnjm_DAirG6xuGTj8-CQ2rs0lrPN14Yoqp1WLHV8Ipn_MdpesQ/";
    showRandomImg = true;
    </script>
    <div id="itechplus-rc-3cot">
    <h2>Recent Posts 3 column</h2>
    <script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript"></script>
    <p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://www.itechplus.info/search/label/License?&max-results=8"> Phần mềm bản quyền »</a></p>
    </div>

Trong đoạn code trên :

    width:320px; : chiều rộng của widget
    height:60px; width:50px; : chiều rộng và chiều cao của ảnh đại diện
    home_page = "http://itechplus.info/"; : địa chỉ blog của bạn
    label = "License"; : tên trương mục muốn hiển thị
    numposts = 9; : số bài viết sẽ hiển thị
    sumTitle = 24; : số ký tự dòng tiêu đề bài đăng
    colortitle = "#333"; : màu tiêu đề bài đăng
    imgr[0] = “…”; : hình đại diện cho bài viết không có ảnh

Các bạn thay đổi cho phù hợp. Hy vọng các bạn sẽ thích tiện ích này.

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

Unknown Make a comment!

Tiện ích Multi Tabbed Widget For Blogger

Tiện ích Multi Tabbed Widget For Blogger

Multi Tabbed Widget là tiện ích được sử dụng khi trên Blog bạn có chứa khá nhiều widget. Một giải pháp thường được các Blogger áp dụng là chia footer-wrapper làm nhiều cột để chứa các widget này.

Tuy nhiên, điều này không phải ai cũng thích, nhất là các blog được thiết kế mang phong cách báo chí (như iTechPlus.info chẳng hạn). Từ đó mới xuất hiện tiện ích gọi là Multi Tabbed Widget.
Tiện ích này xuất hiện từ khá lâu, mà bắt nguồn từ các Blog sử dụng nền tảng Wordpress, sau đó được các Pro Blogger “bào chế” để áp dụng cho Blogspot.
Sử dụng Multi Tabbed Widget không những giúp tiết kiệm không gian trên Blog, làm cho Blog của bạn trông gọn gàng hơn, mà còn có thể giúp tăng thời gian tải trang cho Blog của bạn do nó kết hợp hai hay nhiều widget làm một.
Và trong bài viết dưới đây, iTechPlus sẽ giới thiệu đến các bạn 2 Style của tiện ích này.
1. Style 1 : Simple Multi Tabbed Widget for Blogger

Đây là tiện ích đơn giản nhất, có thể chèn vào nó các widget HTML\JavaScript.
Thực hiện :
A. Vào Thiết kế > Chỉnh sửa HTML
B. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
var Tabtampil = document.getElementById(TPID);
var TTs = Tabtampil.firstChild;
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
var TT = TTs.firstChild;
var i   = 0;
do
{
    if (TT.tagName == "A")
    {
      i++;
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
      TT.className = (i == id) ? "Active" : "";
      TT.blur();
    }
}
while (TT = TT.nextSibling);
var Halamans = Tabtampil.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i    = 0;
do
{
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
document.write('');}
//]]>
</script>

C. Tạo một widget HTML\JavaScript và chèn vào đoạn code sau :

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color:#ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tiêu đề Widget 1</a> <a>Tiêu đề Widget 2</a> <a>Tiêu đề Widget 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Nội dung Widget 1
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Nội dung Widget 2
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Nội dung Widget 3
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Trong đoạn code trên :

#eee : là màu nền của Tabs, mặc định là màu xám
#fff : là màu đường viền của tiện ích
#ffffff : là màu nền của thân widget
#eee : là màu đường viền bao quanh Tabs
#000000 : là màu tiêu đề Tabs

Để thay đổi thành màu khác, các bạn có thể sử dụng bảng mã màu tại đây.
2. Style 2 : Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!

Đây là tiện ích cao cấp hơn. Với nó, bạn có thể chèn vào nó bất kỳ widget nào nếu muốn ( archives, labels, author,… )
Thực hiện :
A. Vào Thiết kế > Chỉnh sửa HTML
B. Chèn đoạn code sau vào trong trường Variable definitions, khi đó trông sẽ giống như sau :

/* Variable definitions
====================
………………………………………………………
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
*/

Đoạn code trên nhằm xác định màu sắc cho các thành phần của widget như sau :

#f8f8f8 : màu nền của tiện ích
#dcdcdc : màu đường viền của tiện ích và Tabs
#ffffff : màu nền của thân tiện ích và cũng là màu khi rê chuột vào tiêu đề Tabs
#5588aa : màu nền của tiêu đề Tabs

Để thay đổi thành màu khác, các bạn có thể sử dụng bảng mã màu tại đây.
C. Chèn đoạn code sau vào trước thẻ đóng </b:skin>

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}

D. Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
    this.init(this.div);
    this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
    this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }
    if (!t.headingText) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
      DOM_a.id = aId;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
    tempObj,
    divs,
    i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
} else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
    tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>

E. Cuối cùng, tìm trong template dòng <div id='sidebar-wrapper'> và chèn đoạn code sau vào trên\dưới hoặc trước thẻ đóng </div> của nó :

<div style='clear:both;'/>
<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

Khi đó sẽ trông giống như hình dưới ( trường hợp chèn bên trong <div id='sidebar-wrapper'> )

$Tìm trong template dòng <div id='sidebar-wrapper'> và chèn đoạn code sau vào trên\dưới hoặc trước thẻ đóng </div> của nó$

F. Lúc này, bạn chỉ việc quay trở lại Phần tử trang và thêm bất kỳ widget nào vào trong nó

Trên đây iTechPlus đã giới thiệu đến các bạn 2 Style của tiện ích Multi Tabbed Widget do Mohammad Mustafa Ahmedzai phát triển. Nếu các bạn biết thêm các Style nào khác độc đáo và chất lượng hơn nữa, xin vui lòng để lại phản hồi bên dưới.
Chúc các bạn thành công !

Unknown Make a comment!

Templated by Blogger Items

Popular Posts

Bookmark site

Hôm nay mình sẽ giới thiệu các bạn một code trình diễn ảnh cực đẹp

Label