Thiết kế website đẹp

Hiển thị các bài đăng có nhãn blogger. Hiển thị tất cả bài đăng

Thứ Sáu, 2 tháng 3, 2012

Thủ thuật tạo playlist cho video youtube ở sidebar của Blogspot

Người đăng: Thế Giới Website vào lúc 01:49 0 nhận xét

Trước đây mình đã giới thiệu các bạn một bài viết về cách post video youtube dạng list, tuy nhiên với thủ thuật trước thì bên dưới video là ảnh thumbnail của các các video liên quan, điều này khó cho người dùng khi xem video. Điều đó sẽ gây khó khăn khi chúng ta post quá nhiều video trong list thì người dùng sẽ khó biết họ đang xem video nào? Với thủ thuật này thì chúng ta sẽ khắc phục được vấn đề đó và hơn nữa nó sẽ linh hoạt hơn, bạn có thể đặt chúng ở bất kì đâu trên blog, bạn có thể đặt ngay trên sidebar của blog, khi click vào các video ở list thì nó sẽ không phải rời khỏi trang blog của bạn. Bạn có thể xem demo để thấy rỏ hơn công dụng của thủ thuật này.

Hình ảnh minh họa

» Bắt đầu 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 chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<style>
#ytplay {margin:0;padding:0 0 2px 0;border-bottom:1px solid #ccc;}
।yt-container {color:#333;line-height:1.5;font-size:12px;font-family:arial;background:#eee;
width:300px; /*độ rộng của tiện ích*/
border:1px solid #ccc;}
.yt-container ul{list-style-type:none;border-top:1px solid #fff;margin:0;padding:5px;height: 108px; overflow: auto;}
.yt-container ul li a{background:url(https://lh5.googleusercontent.com/-Fm9icK415H8/TzDtraRfvsI/AAAAAAAABro/HBht2Fug_g8/s15/pl.gif) no-repeat;color:#222;padding:0 0 0 19px;}
.yt-container ul li a:hover{background:url(https://lh4.googleusercontent.com/-HHQGhqe9Yv0/TzDuINfTfsI/AAAAAAAABsA/tru7N9t_6-k/s15/hoverpl.gif) no-repeat;color:#036b5d}
.yt-container ul li.currentvideo a{font-weight:bold;color:#c20404; background:url(https://lh4.googleusercontent.com/-PFFQGfP_K_c/TzDvEJJ3iSI/AAAAAAAABsY/yiIfVgwKneI/s15/cur.gif) no-repeat;padding:0 0 0 19px;}
</style>

<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.youtubeplaylist.js"></script>
<script type="text/javascript">
$(function() {
$("ul.ytlist").ytplaylist({
playerWidth: 300, //độ rộng của video
playerHeight:175, //chiều cao của video
addThumbs: false,
thumbSize: 'small',
showInline: false,
showRelated: true,
allowFullScreen: true,
autoPlay: true, holderId: 'ytplay'});
});
</script>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div class="yt-container">
<div id="ytplay"></div>

<ul class="ytlist">

<li class="currentvideo"><a href="http://www.youtube.com/watch?v=nQYlLlSo73s" class="yt-vid">Phim "Nợ đa tình" - 1a</a></li>
<li><a href="http://www.youtube.com/watch?v=I0K7Pw34n5A&feature=related" class="yt-vid">Phim "Nợ đa tình" - 1b</a></li>
<li><a href="http://www.youtube.com/watch?v=Il205mA-en0&feature=related" class="yt-vid">Phim "Nợ đa tình" - 1c</a></li>
<li><a href="http://www.youtube.com/watch?v=pAm2ts1lafQ&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2a</a></li>
<li><a href="http://www.youtube.com/watch?v=WzqFohS16xE&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2b</a></li>
<li><a href="http://www.youtube.com/watch?v=vVvZhfjoKyU&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2c</a></li>
<li><a href="http://www.youtube.com/watch?v=M7Bq_Fx6ezU&feature=related" class="yt-vid">Phim "Nợ đa tình" - 3a</a></li>
<li><a href="http://www.youtube.com/watch?v=pL9WlXtqrYA&feature=related" class="yt-vid">Phim "Nợ đa tình" - 3b</a>
</li> <li><a href="http://www.youtube.com/watch?v=KIb5ubk5L74" class="yt-vid">Phim "Nợ đa tình" - 3c</a></li>

</ul></div>

Bạn chỉ cần thay các link video bên trên thành link video (màu tím) và tên của video đó tương ứng (in đậm) mà bạn muốn hiển thị trong tiện ích này.

7. Save tiện ích lại là xong.

nguồn traidatmui.com

Thủ thuật post video Youtube dạng list cho video có nhiều phần

Người đăng: Thế Giới Website vào lúc 01:45 0 nhận xét

Để tối ưu việc post video có nhiều phần trong blog, mình chia sẻ cùng các bạn thủ thuật tạo Video List, tức là chúng ta sẽ liệt kê các video thành dạng list trông sẽ gọn ràng và nhẹ hơn việc bạn post nhiều code trong cùng một bài viết. Các video sẽ chạy với chương trình của Youtube và danh sách các phần tiếp theo sẽ được liệt kê bên dưới bạn chỉ cần click vào ảnh thumbnail bên dưới là có thể xem phần tiếp theo.

Hình ảnh minh họa

» Bắt đầu 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 chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script language="javascript" src="http://traidatmui-tips.googlecode.com/files/videoyoutube_list.js"></script>
<style type="text/css">
.myYoutubePlaylist_YoutubeMovie, .myYoutubePlaylist_YoutubePlaylist {
display:block;
}
.myYoutubePlaylist_Img {
width:64px; /*độ rộng ảnh thumb*/
height:60px; /*chiều cao ảnh thumb*/
overflow:hidden;
margin-left:3px;
border:1px solid #fff;
padding:2px ;
}
</style>

5. Save templates lại

Như vậy là bạn đã cài đặt chương trình video vào template, bây giờ là đến việc đăng bài của bạn. Sau này nếu bạn muốn post video từ Youtube thì bạn chỉ cần lấy mã Video đó và thay thế nó vào code bên dưới.

<div class="myYoutubePlaylist"><div id="myYoutubePlaylist_0ipWJzkUoMI" class="myYoutubePlaylist_YoutubeMovie"></div><center>
<div class="myYoutubePlaylist_YoutubePlaylist" id="myYoutubePlaylist_YoutubePlaylist_0ipWJzkUoMI"></div></center></div><script language="JavaScript" type="text/javascript">myYoutubePlaylist_cy('0ipWJzkUoMI','myYoutubePlaylist_0ipWJzkUoMI');myYoutubePlaylist_dl('0ipWJzkUoMI, SEFMQfPlC6E, 2GCcVm30Qvo','myYoutubePlaylist_YoutubePlaylist_0ipWJzkUoMI','myYoutubePlaylist_0ipWJzkUoMI');</script>

Phần mã màu đỏ (0ipWJzkUoMI) ở trên chính là mã video đầu tiên hay đó là phần 1, và các mã màu xanh là mã video các phần tiếp theo, nếu có nhiều hơn bạn chỉ việc thêm mã tương ứng, mỗi mã cách nhau bằng dấu phẩy (,) và mã cuối cùng không có dấu phẩy.

Bạn sẽ lấy mã của video trên Youtube bằng cách mở xem video đó và nhìn lên thanh địa chỉ bạn sẽ thấy, ngoài ra bạn còn nhiều cách lấy mã video khác bạn tìm hiểu thêm.
Bạn lấy mã video xong thay thế vào code trên và post bài nó sẽ tự động gọi chương trình chạy video youtube cho bạn.

Lưu ý: Bạn phải đặt code bên chế độ HTML khi post bài.

Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung

Người đăng: Thế Giới Website vào lúc 01:37 0 nhận xét

Thông thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar, footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện ích đặt nối tiếp nhau thì sẽ làm cho trang blog của bạn trở nên dài và load khá chậm. Cách để bạn có thể khắc phục chính là bạn gom các tiện ích là và đặt chúng thành từng tab, điều này sẽ giúp site của bạn ngắn gọn và người dùng dễ dàng xem được các tiện ích trên blog của bạn thông qua các tab đó. Chủ đề về tạo Tab chứa nội dung thì mình trước đây đã chia sẻ cùng các bạn một số bài, tuy nhiên các thủ thuật trước thì thường nội dung của từng tab lại được thêm vào trong thẻ <div> </div>. Thủ thuật hôm nay mình chia sẻ cùng các bạn cách tạo các Tab nội dung từ những tiện ích có sẵn trên blog của bạn. Nói dễ hiểu là thủ thuật này sẽ tự động gom các tiện ích có sẵn trên blog của bạn chỉ cần bạn chỉ định số lượng tiện ích cần gom và điều kiện là các tiện ích có tiêu đề thì mời có thể gom vào trong tab.

Hình ảnh minh họa

» Bắt đầu 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 chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery.min.1.5.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 //số tab bạn muốn gom
});
});
</script>
<style type='text/css'>
.tabber {
padding: 0px !important;
border: 0 solid #687979;}
.tabber h2 {
float: left;
color:#333;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #ccc;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #fff;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;}
html .tabber h2.active {
background: #eee;
border-bottom: 1px solid #eee;}
.tabber .widget-content {
border: 1px solid #ccc;
padding: 10px;
clear:both;
background: #eee;
margin:0;}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id='codeholder'><a href="http://www.bloggersentral.com"></a></div>

Bạn nhớ đặt tiện ích này trước các tiện ích mà bạn muồn gom lại vào tab và các tiện ích muốn gom nên đặt liên tiếp kế nhau.

Thứ Ba, 1 tháng 11, 2011

Tiện ích Popular Posts với CSS3

Người đăng: Thế Giới Website vào lúc 08:58 0 nhận xét

Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:

#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:

Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, tìm đoạn sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Thay thế nó bằng đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Lưu lại mẫu và kiểm tra kết quả.

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

Người đăng: Thế Giới Website vào lúc 08:49 0 nhận xét

☼ 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 : http://www.traidatmui.com

Tạo menu giống trang sổ ngang 24h.com

Người đăng: Thế Giới Website vào lúc 08:45 0 nhận xét

☼ Tiến hành thủ thuật

1. Đăng nhập vào blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Thêm đoạn mã bên dưới vào sau thẻ <head>

4. Tiếp theo bạn hãy tạo 1 HTML/Javascript và thêm vào code bên dưới

Hướng dẫn sử code:
- Các bạn hãy dựa vào các code màu xanh lá hướng dẫn ở trên để chỉnh sửa lại cho phù hợp với blog của mình.
- Code màu cam chính là tên của các thư mục chính
- Code màu nâu là tên của các thư mục cấp hai
- Code màu xanh nhạt chính là tên của thư mục cấp 3
- Code màu xám xanh là tên các thư mục cấp 4
- Bạn hãy chỉnh sửa dấu "#" trong code thành các đường link tương ứng với các tên của thư mục. Ở đây mình chỉ tạo mẫu cho các bạn 10 thư mục, nếu blog bạn có nhiều nội dung thì có thể thêm nhiều thư mục hơn. Ví dụ bạn muốn thêm thư mục 11, 12 thì chỉ việc thêm code bên dưới vào sau thư mục thứ 10 trong code và chỉnh sửa chúng lại tương tự như các thư mục trên.

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

nguồn : http://www.traidatmui.com

Hiển thị bài viết giống trang tin247.com

Người đăng: Thế Giới Website vào lúc 08:42 0 nhận xét

☼ Cách thực hiện thủ thuật

1. Đầu tiên hãy đăng nhập vào tài khoản Blogger
2. Vào bố cục và thêm phần tử HTML/Javascript
3. Chèn đoạn mã bên dưới vào phần tử tiện ích trên

- Tùy chỉnh:
+ Code màu tím dùng để chỉnh sửa phần mô tả cho các bài viết liên quan khi rê chuột vào link
+ Code màu xám dùng để chỉnh sửa màu của text của bài viết tóm tắt
+ Code màu đỏ dùng để chỉnh sửa màu chữ phần bài viết liên quan

Bạn hãy dựa vào những chú thích trong code để chỉnh sữa màu chữ, màu nền, kích cỡ... cho phù hợp rồi save lại.

» Cập nhật ngày 07/10/2011

Các bạn thấy ở thủ thuật trên có một nhược điểm đó là bài viết bị lặp lại, bài viết đầu tiên sẽ lặp lại ở phần link bài viết liệt kê bên dưới và một nhược điểm khác là sử dụng 2 file JS. Điều này sẽ phần nào ảnh hưởng tới độ load của trang blog của bạn. Để khắc phục 2 nhược điểm trên mình xin chia sẻ file JS của thủ thuật này để bạn sử dụng. File dưới đây đã khắc phục được lỗi trên tránh tình trạng lặp lại bài viết. Bạn chỉ việc thay 2 file JS ở trên thành code bên dưới là xong

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

nguồn : http://www.traidatmui.com

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

Người đăng: Thế Giới Website vào lúc 08:35 0 nhận xét

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

<b:if cond='data:title != ""'>
<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'>


<b:if cond='data:title != ""'>
<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"'>


<b:if cond='data:title != ""'>
<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"'>


<b:if cond='data:title != ""'>
<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"'>


<b:if cond='data:title != ""'>
<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.

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

nguồn : http://www.traidatmui.com

Thủ thuật yêu cầu - Tạo menu ngang cho blog

Người đăng: Thế Giới Website vào lúc 08:30 0 nhận xét

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

1. Công việc đầu tiên là vào tài khoản của bạn
2. Vào bố cục (Thiết kế) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ ]]></b:skin>

.parent-menu, .sub-menu {width:900px;}
#topmenu {height:46px; margin-bottom:5px;z-index:-10px;}

.fl {float:left;}
#topmenu {float:left;}
.fr {float:left;}

.parent-menu {height:21px; font:12px arial; color:#ffffff; text-align:center; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZEDpcVYNHTMH5ebnl_kPCWOd9m2NkICrUDUoVdxl7An23xsUjPzpS9xzhzQ2Jbr2VVLAe4h_22fPVfEFcUcUOK4B2blYfVhgqie2wjrt7VUxm48MsXURuW3YdCdFXrtgJJ4wgZ5YZZza/) repeat-x 0px -49px;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;}
.pmenu-sep {width:25px;}
.pmenu-normal{height:15px; padding:4px; ursor:pointer;}
.pmenu-normal, .pmenu-active, .pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {cursor:pointer;}
.pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {width:3px; height:25px;font-size:1px;}
.pmenu-active {height:15px; padding:4px; color:#ff0000; background:#f5f5f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZEDpcVYNHTMH5ebnl_kPCWOd9m2NkICrUDUoVdxl7An23xsUjPzpS9xzhzQ2Jbr2VVLAe4h_22fPVfEFcUcUOK4B2blYfVhgqie2wjrt7VUxm48MsXURuW3YdCdFXrtgJJ4wgZ5YZZza/) repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNTo9_bBFb_dyTylBGkyFwTGA8N14ui31gSyWG4Ugnh3EY8A21C0ZcGjgaq2g6pY0DzdTUiQqh4D9-DXMwE09EBrtIOYB9HATLDYjKXfVhLsn4EkUf4Uj-lalziZh4a2uvx4hOOP1G3EW/') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNTo9_bBFb_dyTylBGkyFwTGA8N14ui31gSyWG4Ugnh3EY8A21C0ZcGjgaq2g6pY0DzdTUiQqh4D9-DXMwE09EBrtIOYB9HATLDYjKXfVhLsn4EkUf4Uj-lalziZh4a2uvx4hOOP1G3EW/') no-repeat 0px -27px;}
.sub-menu {height:21px;padding:1px 0px 0px 1px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZEDpcVYNHTMH5ebnl_kPCWOd9m2NkICrUDUoVdxl7An23xsUjPzpS9xzhzQ2Jbr2VVLAe4h_22fPVfEFcUcUOK4B2blYfVhgqie2wjrt7VUxm48MsXURuW3YdCdFXrtgJJ4wgZ5YZZza/') repeat-x 0px -100px;
width:899px;}
.smenu-content {width:678px; height:17px;padding:2px 7px;}
.smenu-content2 {width:892px; height:17px;padding:2px 7px;}
.smenu-content3 {width:534px; height:17px;padding:2px 7px;}
.smenu-content ul {width:50%;height:17px;margin:0px;padding:0px;list-style-type:none;}
.smenu-content li{float:right;padding:0px 5px;}
.smenu-content li img{border:0px; vertical-align:middle}

.sub-menu {position:relative; font: 12px arial; }

.parent-menu, .sub-menu, .sub-menucontent {overflow:hidden;}

.link-submenu {font:11px arial; color:#004f8b; text-decoration:none;}
.link-submenu:hover {text-decoration:underline;}

.sep-fmenu{width:2px; height:26px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNTo9_bBFb_dyTylBGkyFwTGA8N14ui31gSyWG4Ugnh3EY8A21C0ZcGjgaq2g6pY0DzdTUiQqh4D9-DXMwE09EBrtIOYB9HATLDYjKXfVhLsn4EkUf4Uj-lalziZh4a2uvx4hOOP1G3EW/') no-repeat -5px -138px;}

Ở mã CSS trên bạn có thể thay đổi màu nền lại theo ý mình (chính là các code màu xanh lá ở trên)

4. Bây giờ trở về phần tử trang thêm 1 HTML/Javascript
5. Thêm code sau vào HTML/Javascript đó.

Chỉnh sửa code:

- Phần var menu_fid chính là tổng số menu chính và menu phụ, số này phải lớn hơn hoặc bằng với số menu chính + menu phụ. Và bạn hãy lưu ý là số cuối cùng sẽ không có dấu phẩy (,), nếu không code sẽ bị lỗi và không thể hiển thị được.
- var menu_pid: Phần này là phần cho biết bố cục của menu bạn gồm có bao nhiêu menu chính và bao nhiêu menu phụ. Ở trên có 6 menu chính và 15 menu phụ. Nếu bạn muốn thêm menu chính thì hãy thêm dãy số sau số 5 ở phần bắt đầu bằng số 0, thêm menu con thì hãy thêm tiếp dãy số ở phần sub của menu.
- var menu_name: phần này là phần bạn sẽ đặt tên để hiển thị cho các menu chính và menu phụ. Phần này sẽ hiển thị trên menu của bạn để chỉ các nội dung trên blog của bạn.
- var menu_path: phần này để bạn thiết lập đường dẫn cho các menu chính và phụ. Bạn hãy thay các URL trong phần này thành các link tương ứng cho từng menu.
- var menu_show phần này là phần trình diễn các menu, tổng các số menu (gồm menu chính và phụ) phải bằng tổng các số 0 ở phần này.

Lưu ý: Các phần tử cuối cùng trong các mãng sẽ không có dấu phẩy (,) theo sau, và các phần tử trong các mãng phải bằng nhau thì code mới hiển thị đúng.

Bạn hãy download file JS tại đây về và chỉnh sửa lại các mãng trong phần này lại cho phù hợp với blog mình, rồi sau đó upload lên trang host và lấy link thay cho link trên.

Bạn hãy thay link màu cam thành logo của blog bạn hoặc hình ảnh mà bạn thích kích thước (18px x 18px).

6. Sau khi hoàn tất việc chỉnh sửa bạn hãy save lại và kiểm tra kết quả

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

nguồn : http://www.traidatmui.com

Tạo banner trượt dọc hai bên - Bản hoàn thiện

Người đăng: Thế Giới Website vào lúc 08:25 0 nhận xét

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

4. Bây giờ save template lại và trở về phần tử trang, tạo thêm 1 phần tử HTML/Javascript
5. Thêm vào phần tử HTML/Javascript code bên dưới

Chỉnh code: Bạn hãy thay link ảnh trong code (dòng màu cam) thành banner của mình có thể bạn thêm độ rộng và độ cao của ảnh tùy ý.
- Thay đường dẫn cho banner tương ứng dòng màu xanh đậm trong code trên.

6. Đến đây bạn chỉ việc save lại là xong

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

Nguồn : http://www.traidatmui.com

Hiển thị bài viết giống trang vnexpress.net

Người đăng: Thế Giới Website vào lúc 08:21 0 nhận xét

1. Đầu tiên hãy vào tài khoản blogger
2. Vào thiết kế (bố cục) chọn sửa HTML
3. Chèn code bên dưới vào trước dòng ]]></b:skin>

.fl {float:left;}
.fr {float:right;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:567px;}
.folder-bottom {background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslSnl6bT3c_P1bzhUE1cYVV4YGgxvUd8uj_kOC3ZxYwKXeCB1ZuopYAsXWxwDthaPEEhjEkO4tftD9esoOB9yDJRJ_9Jqb1xNWTVwhzFE02XGzv2hhRMQY2HW8n8dd3EIS02jA-hc5LCL/') repeat-x 0px -73px;}
.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1UIpIZj92dy0NSSX1bpm3tgtX2f7XWyVIdrGXQd9Ua9ryipcUGQ35bpmshyphenhyphen4xeJGjzYo-ibhCbuGJ4G1Eud_wicbdzqWwPfD_kk3j6dQ2K7jZXMsGLQEwqlk69kKTyxKGeRC1Gq2xDIf/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1UIpIZj92dy0NSSX1bpm3tgtX2f7XWyVIdrGXQd9Ua9ryipcUGQ35bpmshyphenhyphen4xeJGjzYo-ibhCbuGJ4G1Eud_wicbdzqWwPfD_kk3j6dQ2K7jZXMsGLQEwqlk69kKTyxKGeRC1Gq2xDIf/ ') repeat-x 0px -23px;}
.folder-content {width:545px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:220px;}
.folder-news {width:545px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}
.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}
.folder-content li {
padding-left:6px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4QVLKV0e4q3-tknIpkFpmItkdMg0xWDlWMOzZ-5bYUlV9LXhKi_LdbjfkMrXAUtsQErmouZnuOYDrqofpzr6h3WXZDvCXqJFECHK48i7AIxU2d7Ok26FVJ4i-mTmZQRSQSVBZQulHKwf/'); background-repeat:no-repeat;
background-position: 0 7px;
}
.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljCuMTzm8N8aTOqcnhdzseLcq6djzMOkw7FfNH2wtCkwWBFVSxpLngZuV2UPLPXbv4YLTo_XlSmheWMAgfVz4m38pMqm7Lg3q65Cgs-VtfagbijGeAb82mLWAF75CvYfzpeCba2AhLbvQ/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljCuMTzm8N8aTOqcnhdzseLcq6djzMOkw7FfNH2wtCkwWBFVSxpLngZuV2UPLPXbv4YLTo_XlSmheWMAgfVz4m38pMqm7Lg3q65Cgs-VtfagbijGeAb82mLWAF75CvYfzpeCba2AhLbvQ/') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

Chỉnh code: Bạn có thể download ảnh nền (link màu cam) về và upload lên trang host của mình và lấy link.
4. Bây giờ trở lại phần tử trang thêm 1 HTML/Javascript và thêm code bên dưới vào phần tử vừa tạo

<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://www.traidatmui.com/search/label/Internet?max-results=5">Internet</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
showRandomImg = true;
aBold = false;
summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)
sumPost = 147;
numposts = 6; //số bài được hiển thị
label = "Advanced blogger";
home_page = "http://www.traidatmui.com/";
</script>

<script src="http://nguyenhoangnam.googlecode.com/files/vnexp_label.js.mp3" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

Chỉnh sửa code: Bạn hãy thay các dòng màu xanh thành các đường link tương ứng với từng mục nhãn (dòng text màu đen đâm trong code). Và để hiển thị bài viết cho từng nhãn trên blog của bạn thì bạn hãy thay dòng label và dòng home_page thành tên nhãn bài viết và địa chỉ blog của mình.

5. Cuối cùng save lại

Với thủ thuật trên các bài viết sẽ hiển thị theo từng nhãn, nếu bạn muốn hiển thị cho toàn bộ bài viết trên blog bạn hãy thay file script trên thành file script (vnexp_label.js) bên dưới.

http://nguyenhoangnam.googlecode.com/files/vnexp_post.js.mp3

» Cập nhật 29/08/2011

Theo yêu cầu của Khánh Trắng mình xin cập nhật thêm cho bài viết này, khi bạn muốn hiển thị bài viết kiểu này cho nhiều nhãn khác nhau thì buộc các bạn phải lặp lại file JS rất nhiều lần, đây cũng là một cái hơi phiền phức, để khắc phục việc lặp lại file JS đó mình có một cách nhỏ các bạn có thể tham khảo, cách này sẽ làm code trong gọn và ngắn hơn. Chúng ta sẽ bắt đàu từ bước 3 ở trên nhé, sau bước 3 bạn chèn tiếp code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>

Bây giờ đến bước 4 chúng ta sẽ sử dụng code bên dưới để thay cho code ở trên

<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://www.traidatmui.com/search/label/Internet?max-results=5">Internet</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/"; // ảnh đại diện cho bài viết không có ảnh của từng nhãn
document.write("<script src=\""+home_page+"/feeds/posts/default/-/Advanced blogger?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class="folder-bottom"></div>
</div>

Bạn chỉnh sửa tên nhãn lại cho phù hợp, và muốn lặp lại cho các nhãn khác nhau bạn chỉ cần lặp lại code trên và thay tên nhãn cho phù hợp là đươc. Đây là cách có thể chưa tối ưu lắm, có gì các bạn trao đổi thêm nhe.

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

nguồn : http://www.traidatmui.com

Pages

Thiết kế website đẹp

Banner 468 x 60px

Title Featured Post 1

Title Featured Post 2

Title Featured Post 3

Title Featured Post 4

Thứ Sáu, 2 tháng 3, 2012

Thủ thuật tạo playlist cho video youtube ở sidebar của Blogspot

Thủ thuật post video Youtube dạng list cho video có nhiều phần

Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung

Thứ Ba, 1 tháng 11, 2011

Tiện ích Popular Posts với CSS3

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

Tạo menu giống trang sổ ngang 24h.com

Hiển thị bài viết giống trang tin247.com

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

Thủ thuật yêu cầu - Tạo menu ngang cho blog

Tạo banner trượt dọc hai bên - Bản hoàn thiện

Hiển thị bài viết giống trang vnexpress.net

Bài đăng phổ biến

Nhãn

Blog Archive

Link List

Followers

About Me

Pages

Banner 468 x 60px

Thứ Sáu, 2 tháng 3, 2012

Thứ Ba, 1 tháng 11, 2011

Updates Via E-Mail

Bài đăng phổ biến

Nhãn

Blog Archive

Link List

Followers

About Me