Công ty in

Hiển thị

Home »

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

23:02 |
VNEXPRESS.NET các bạn chắc hẳn không còn lạ lẫm gì với trang web tin tức hàng ngày này, bạn cũng đã thấy được cách hiển thị bài viết ở trang chủ của web này. Bài viết được hiển thị với bài mới nhất của dạng tóm tắt của một nhãn nào đó và các bài viết khác sẽ hiển thị dạng list bên phải.
Có lẽ không ít bạn đã biết cách hiển thị bài viết như trang vnexpress trên blog, tuy nhiên ở đây mình xin hướng dẫn các bước thực hiện thủ thuật này để những bạn chưa biết cách thực hiện tham khảo và có thể ứng dụng trên blog của mình.




Hình ảnh minh họa

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 ]]>
.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/AVvXsEjsI5ZPKpsH249Izz1W3GZzRxafjjxHs7iS5utp4BrhjPC7tNRk6Hn4iuDuu-1WtSEEysbJMqum06ta9kc0u6bfyoLa2lutyLC9mfy3h1j1WFllAb7ERH7TyRuGFmHAg7HDyBS_79MCX_EX/') 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/AVvXsEiJXtUw9m3tO5Py15VkoO1tz6lheNBgZY02u0X4ixiaZ-e3uZVH_TqtJzmFQPLNYoGuKWeZ2jnxX9wiWhGT2R7Jcgg_F_Yb7u_n4CgQ3iAyzVOAhXwFXN9jIXiwwJBEt63nH7dYAwupzlDH/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXtUw9m3tO5Py15VkoO1tz6lheNBgZY02u0X4ixiaZ-e3uZVH_TqtJzmFQPLNYoGuKWeZ2jnxX9wiWhGT2R7Jcgg_F_Yb7u_n4CgQ3iAyzVOAhXwFXN9jIXiwwJBEt63nH7dYAwupzlDH/ ') 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/AVvXsEjFG68b44m80UQI0QFnvRXGl4795KhM2Ch9l3mM9bvB3xM6lOcYw2aMw_4uERLewvF7nFtfFqojN8RZI8VnuvfwRIaOvndL0X79LNGUcGTzC2GL3DbXsfCoVK_SPA63yKWIPB9YGwYlMdwv/'); 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/AVvXsEgrrUQWVgs_rlOpL7a2OH1o8fnvkjrfcF18GEBbGPbwRvKZ8zgbgz8ZMi_gZHs6RUiLZkohynuXKpc7uRO4Qhwjz9Um-vIwxMmO8pJ9TJFu-h6n4WApzvsNngK1OI2YXoAVBRXYCW8akcLk/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrrUQWVgs_rlOpL7a2OH1o8fnvkjrfcF18GEBbGPbwRvKZ8zgbgz8ZMi_gZHs6RUiLZkohynuXKpc7uRO4Qhwjz9Um-vIwxMmO8pJ9TJFu-h6n4WApzvsNngK1OI2YXoAVBRXYCW8akcLk/') 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



http://www.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot



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










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://traidatmui-tips.googlecode.com/files/vnexp_post.js


» 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ẻ hoặc trước thẻ


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

http://www.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot



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






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
Theo http://www.traidatmui.com/2010/08/hien-thi-bai-viet-giong-trang.html
Read more…

Tạo menu giống trang VnExpress.net

05:49 |
Các Tempplate cơ bản của Blogger thường không có thanh menu ngang trên phần Header. Một kiểu menu như vậy giúp bạn có thêm không gian web để bố trí các liên kết cần thiết cho blog.
Giới thiệu các bạn menu ngang mang phong cách giống như trang vnexpress.net. 
Xem demo ở đây : LIVE DEMO


Hình ảnh minh họa:

☼ Để tạo kiểu menu này, bạn hãy thực hiện như sau:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.parent-menu, .sub-menu {width:800px;}
#topmenu {height:46px; margin-bottom:10px;z-index:-10px;}

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

.parent-menu {height:25px; font:11px tahoma; color:#ffffff; text-align:center; background:#f5f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg-fd.gif') repeat-x 0px -46px;}
.pmenu-sep {width:25px;}
.pmenu-normal{height:15px; padding:7px; cursor: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:7px; color:#004f8b; background:#f5f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg-fd.gif') repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg_corner.gif') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg_corner.gif') no-repeat 0px -27px;}
.sub-menu {height:21px; background:#f5f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg-fd.gif') repeat-x 0px -100px;}
.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('http://i342.photobucket.com/albums/o433/bkprobk/bg_corner.gif') no-repeat -5px -138px;}

</style>

<script type="text/javascript">
var menu_fid = new Array(
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21

);
var menu_pid = new Array(
0, // home
0, // Menu1
0, // Menu2
0, // Menu3
0, // Menu4
0, // Menu5

2, // sub 1.1
2, // sub 1.2
2, // sub 1.3

3, // sub 2.1
3, // sub 2.2
3, // sub 2.3

4, // sub 3.1
4, // sub 3.2
4, // sub 3.3

5, // sub 4.1
5, // sub 4.2
5, // sub 4.3

6, // sub 5.1
6, // sub 5.2
6 // sub 5.3
);

var menu_name = new Array(
'Home',
'Menu 1',
'Menu 2',
'Menu 3',
'Menu 4',
'Menu 5',

'Submenu 1.1',
'Submenu 1.2',
'Submenu 1.3',

'Submenu 2.1',
'Submenu 2.2',
'Submenu 2.3',

'Submenu 3.1',
'Submenu 3.2',
'Submenu 3.3',

'Submenu 4.1',
'Submenu 4.2',
'Submenu 4.3',

'Submenu 5.1',
'Submenu 5.2',
'Submenu 5.3'

);

var menu_path = new Array(
'http://fandung.blogspot.com/',
'/Menu1/',
'/Menu2/',
'/Menu3/',
'/Menu4/',
'/Menu5/',

'/menu1/submenu1.1/',
'/menu1/submenu1.2/',
'/menu1/submenu1.3/',

'/menu2/submenu2.1/',
'/menu2/submenu2.2/',
'/menu2/submenu2.3/',

'/menu3/submenu3.1/',
'/menu3/submenu3.2/',
'/menu3/submenu3.3/',

'/menu4/submenu4.1/',
'/menu4/submenu4.2/',
'/menu4/submenu4.3/',

'/menu5/submenu5.1/',
'/menu5/submenu5.2/',
'/menu5/submenu5.3/'

);

var menu_show = new Array(
0, // home
0, // Menu1
0, // Menu2
0, // Menu3
0, // Menu4
0, // Menu5

0, // sub 1.1
0, // sub 1.2
0, // sub 1.3

0, // sub 2.1
0, // sub 2.2
0, // sub 2.3

0, // sub 3.1
0, // sub 3.2
0, // sub 3.3

0, // sub 4.1
0, // sub 4.2
0, // sub 4.3

0, // sub 5.1
0, // sub 5.2
0 // sub 5.3

);

</script>

<script type="text/javascript" language="javascript" src="http://fandung.googlecode.com/svn/trunk/js/Menu1.js"></script>

- Ở phần code CSS, để thay đổi hình nền, các bạn có thể down các file ảnh về (link màu cam, rồi dùng photoshop tùy chỉnh lại theo ý mình).

- Phần chính của thủ thuật này là việc chỉnh sửa các mảng (menu_fid, menu_pid, menu_name, menu_path, new Array) trong đoạn code javascript ở trên.

a. mảng menu_fid :
- các dãy số tương ứng trong mảng này chính là id của các menu (menu chính + menu phụ), ví dụ ta có tổng cộng 10 menu (cả chính và phụ) thì con số của mảng này là từ 1 tới 10.
- Như ở trong đoạn code JS trên, ta có 6 menu chính và 15 menu phụ thì dãy số của chúng ta sẽ lên tới 21. nếu các bạn điền dãy số này lớn hơn 21 thì vẫn không sao, nhưng nếu nhỏ hơn 21 thì các menu sau cùng sẽ ko hiển thị được (cụ thể ở đây các submenu 5 sẽ hiển thị không đủ)

b. mảng menu_pid :
- Mảng này giúp tạo bố cục của menu.
- Các menu chính được quy định bằng các con số 0
- Còn các menu phụ sẽ được quy định bằng các con số tiếp theo, và giống nhau (ở đây ko sử dụng dãy số 1 là do số 1 được đặt cho menu HOME), và như thế submenu 1 sẽ bắt đầu bằng các dãy số 2 giống nhau, tiếp theo submenu 2 là các dãy số 3 , ...
- Muốn thêm hoặc bớt các menu chính hoặc phụ, ta chỉ cần thêm hoặc bớt các con số tương tự trong dãy số là được (lưu ý việc thêm hoặc bớt phải thực hiện đồng nhất ở 5 mảng)

c. mảng menu_name :
- Mảng này sẽ quy định tên cho các menu chính và phụ.

d. mảng menu_path :
- mảng này sẽ thiết lập địa chỉ liên kết cho các menu chính và phụ.
- thay thế các đoạn /menu1/submenu1.1/ , /menu1/submenu1.2/ , ... thành các link tương ứng với menu đó.
- lưu ý là vị trí các phần tử trong mảng này và mảng menu_name phải khớp nhau, khi đó đường dẫn tới các menu mới chính xác.

e. mảng menu_show :
- các phần tử ở mảng này được biểu diễn bằng những con số 0. Lưu ý là tổng số các con số 0 phải bằng tổng các menu chính và phụ.

Một vài lưu ý sau cùng : khi tùy chỉnh lại các phần tử trong mảng, phải đảm bảo số lượng các phần tử trong 5 mảng bằng nhau, và phải khớp với nhau theo đúng thứ tự của nó, và điều quan trọng nữa là chỉ có phần tử cuối cùng trong mảng mới ko có dấu phẩy (,) theo sau, nếu sai xót thì code sẽ bị lỗi.

4. Sau khi tùy chỉnh xong. Save template
5. Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào:

<div id="topmenu">

<div class="parent-menu" id="parent-menu"></div>

<div class="sub-menu">

<div class="fl"><img src="http://i342.photobucket.com/albums/o433/bkprobk/fd-icon.gif" alt="" height="21" /> </div>

<div class="smenu-content fl" id="submenu" onmouseover="clear_delayhide();activeMenuParent();" onmouseout="resetit();">&nbsp;</div>

</div>
</div>

<script type="text/javascript" language="javascript">
menuobj=document.getElementById? document.getElementById("submenu") : document.all? document.all.submenu : document.layers? document.dep1.document.dep2 : ""
Active(); writeParentMenu(); reWriteMenu();
</script>


- ở đoạn code trên, có thể thay đổi logo hiển thị ở submenu (code màu xanh) thành logo của bạn . Nếu không muốn hiển thị nó thì có thể xóa nó đi.
☼ Cập nhật việc hiển thị SubMenu ngay bên dưới Menu chính :
- Đây là cách mà bên VnExpress cũng thực hiện, đó là dùng phương pháp thủ công cho các submenu con, tức là đẩy nó dịch 1 đoạn nhỏ sang phải để các submenu có thể hiển thị ngay bên dưới Menu chính.

Đây là hình ảnh mình đã fix:


- Để thực hiện việc này các bạn chỉ cần thay thế đoạn code :

<script type="text/javascript" language="javascript" src="http://fandung.googlecode.com/svn/trunk/js/Menu1.js"></script>

thành đoạn code bên dưới :

<script type="text/javascript" language="javascript" src="http://fandung.googlecode.com/svn/trunk/js/Menu1-fix.js"></script>


Trong file JS mình cập nhật, nó chỉ hiển thị tốt với các menu trong bản demo mà thôi, khi bạn áp dụng cho blog bạn, mỗi menu chính sẽ có các menu phụ nhiều ít khác nhau, vì thế nếu bạn dùng nguyên file JS mình đưa sẽ hiển thị không được tốt lắm. Vì vậy để việc hiển thị tốt nhất, bạn hãy tự mình điều chỉnh lại việc hiển thị của mỗi submenu.

☼ Sau đây mình sẽ hướng dẫn các bạn thực hiện việc điều chỉnh này:
- Các bạn download file JS mà mình vừa cập nhật về.
- Mở nó lênh bằng NotePad, và tìm đến đoạn code sau :

switch (parseInt(which)){
case 3: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(18).concat(thecontent); break;
case 4: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(33).concat(thecontent); break;
case 5: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(55).concat(thecontent); break;
case 6: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(70).concat(thecontent); break;
case 7: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(88).concat(thecontent); break;
case 8: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(108).concat(thecontent); break;
case 9: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(110).concat(thecontent); break;

default:
menuobj.className = 'smenu-content fl';
break;
}

- Trong đoạn code trên các bạn sẽ thấy chỉ có lệnh case từ 3 đến 9 mà thôi, tức là việc hiệu chỉnh lại vị trí của các submenu mình chỉ áp dụng cho các menu chính thứ 3 trở đi. Và mình chỉ làm mẫu tới menu chính thứ 9 mà thôi, còn đối với các submenu của menu 1 và 2, do nó nằm sát phía bên trái quá, nên ta không nhất thiết phải dịch submenu của nó qua phải. Tùy biến hơn, nếu submenu3 quá nhiều thì việc dịch chuyển nó qua phải cũng không cần thiết. Vì thế tùy theo việc hiển thị thanh menu của mỗi blog mà sẽ có những hiệu chỉnh khác nhau, và sẽ không có 1 khuôn mẫu nhất định nào cho việc tùy chỉnh này.

- Các code màu đỏ chính là khoảng căn lề trái của các submenu, các bạn thấy nó tăng dần lên tương ứng với từng menu chính. Xem hình dưới đây sẽ rõ :
- Xem mình minh họa các bạn có thể rõ. Hãy thay đổi các con số đó sao cho hợp lý nhất.

Một kinh nghiệm nhỏ : nên test nó trước với 1 file HTML tự tạo bằng NotePad (giống như các trang demo của mình) rồi chỉnh sửa file JS, sau khi chỉnh sửa hoàn tất thì hãy áp dụng cho blog của mình.

Chúc các bạn thành công. 
Nguồn http://www.fandung.com/2009/07/thu-rhuat-yeu-cau-tao-menu-giong-trang.html
Read more…

Tạo menu ngang cho blog

23:20 |
Xin chia sẽ cùng các bạn cách tạo menu giống báo Dân trí. Menu này sẽ gồm có các mục menu chính và các menu con được ẩn bên dưới các menu chính đó, chúng sẽ hiện ra khi bạn rê chuột vào menu chính chứa chúng.
Bạn có thể tạo ra rất nhiều menu con mà không làm mất nhiều không gian trên blog. Để tạo được menu này bạn hãy thực hiện theo các bước bên dưới.









☼ 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ẻ
]]>





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/AVvXsEgZgZSwh7Bg6oOhWpDEh0cOxTEyQK5Hrve6ZU5FZbZXyvuYppI5qYh6pP4MHG99jdhZO85sPIpo8UwiUoSOEgilBh9Wu9M8EIR8rc5Ayo-Udhi9y5dxbNXiV_qituuJD2gA9hPQYresbgco/) 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/AVvXsEgZgZSwh7Bg6oOhWpDEh0cOxTEyQK5Hrve6ZU5FZbZXyvuYppI5qYh6pP4MHG99jdhZO85sPIpo8UwiUoSOEgilBh9Wu9M8EIR8rc5Ayo-Udhi9y5dxbNXiV_qituuJD2gA9hPQYresbgco/) repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMTvE7rOOJFt8N9q68wQbEx1ikG-3JOztD05ApDgPZNr9XRxx163l-c4xHZWigaXsY3PveaqiMiBzfm7Yp5FwjN4jcehBC3XruGWH9ZBIuQbk6Hne_teCycPPVHb2PpYCM0SbOPMyT3w4/') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMTvE7rOOJFt8N9q68wQbEx1ikG-3JOztD05ApDgPZNr9XRxx163l-c4xHZWigaXsY3PveaqiMiBzfm7Yp5FwjN4jcehBC3XruGWH9ZBIuQbk6Hne_teCycPPVHb2PpYCM0SbOPMyT3w4/') no-repeat 0px -27px;}
.sub-menu {height:21px;padding:1px 0px 0px 1px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgZSwh7Bg6oOhWpDEh0cOxTEyQK5Hrve6ZU5FZbZXyvuYppI5qYh6pP4MHG99jdhZO85sPIpo8UwiUoSOEgilBh9Wu9M8EIR8rc5Ayo-Udhi9y5dxbNXiV_qituuJD2gA9hPQYresbgco/') 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/AVvXsEiUMTvE7rOOJFt8N9q68wQbEx1ikG-3JOztD05ApDgPZNr9XRxx163l-c4xHZWigaXsY3PveaqiMiBzfm7Yp5FwjN4jcehBC3XruGWH9ZBIuQbk6Hne_teCycPPVHb2PpYCM0SbOPMyT3w4/') 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.
Tại đầu mỗi đoạn code trên bạn bỏ đi :
và mỗi đoạn code
vì đây là code đề chèn vào bài viết.

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
Read more…

Ẩn các widget ở một trang nhất định

21:52 |
Việc thao tác trên các widget của blogspot cũng rất quan trọng, đặc biệt khi bạn có nhiều tiện ích trên blog. Hôm nay mình hướng dẫn bạn cách để ẩn một số widget cho một bài viết, một nhãn hay một trang nhất định nào đó.
Trước đây thì mình đã giới thiệu bạn cách hiển thị bài viết ở một trang nhất định, tuy nhiên để ẩn các widget khác ở trên cùng trang này thì bạn cần đến thủ thuật này, bạn có thể kết hợp 2 thủ thuật này để tạo một trang riêng trên blog của mình.
1. Đăng nhập và vào phần thiết kế
Để ẩn được widget bạn cần xác định được ID của widget đó, ID của widget sẽ hiển thị trên thanh địa chỉ khi bạn click Chỉnh sửa (Edit) widget đó.

Sau khi xác định được ID của widget đó, bạn muốn ẩn widget này (ở đây mình ví dụ là ẩn widget có ID là HTML12) bạn làm như sau:

2. Bây giờ bạn nhấn chỉnh sửa HTML (Edit HTML)
3. Tìm đến thẻ đóng và thêm vào trước nó một trong các code tùy chọn bên dưới.

A. Ẩn widget ở các trang bài viết


B. Ẩn widget ở trang chủ

C. Ẩn widget ở trang nhãn

Bạn hãy thay dòng màu xanh (http://danvienthong.blogspot.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.

D. Ẩn widget ở trang nhất định

Bạn thay link màu đỏ thành link mà bạn muốn ẩn widget.

Ở trên mình chỉ ví dụ là ẩn 1 widget, nếu bạn muốn ẩn nhiều widget ở một trang nào đó bạn thêm ID của widget đó sau dòng #HTML12, ví dụ mình muốn ẩn 3 widget (HTML13, HTML18, HTML20) ở các trang bài viết, mình thêm như bên dưới.

4. Cuối cùng save template lại.

Ở đây bạn có thể ẩn bất kì wiget nào nếu bạn xác định đúng ID của nó.

    ☼ Mở rộng thêm thủ thuật

Ở trên là chúng ta thực hiện việc ẩn các Widget, đôi khi bạn thực hiện một số thủ thuật ở trang nhãn hay một trang nhất định nào đó và muốn cho bài viết ở trang đó ẩn đi (chỉ còn lại phần widget) thì bạn chỉ việc thay ID HTML trên thành Blog1 như bên dưới và làm tương tự như trên.

Chúc bạn thành công
Read more…

Đăng ký tên miền miễn phí

19:58 |
Đã có hướng dẫn đăng ký tên miền miễn phí cho các bạn trong phần "Thủ thuật nâng cao".
Các bạn ghé đọc và thực hiện. Nếu có gì không hiểu hãy để lại Comments và e-mail, tôi sẽ hướng dẫn cụ thể hơn.
Read more…

Đăng ký và thiết lập tên miền miễn phí cho Blogger

19:49 |
dotTK đã chính thức cung cấp miễn phí tên miền CẤP MỘT .tk CÓ DNS cho tất cả mọi người. Đó có thể xem là 1 tin tốt lành cho những người có hầu bao ít ỏi không nỡ chi 1 khoản tiền cho .com .net hay những bạnđang dùng những tên miền miễn phí có dns như .co.cc, uni.cc, co.tv.
So mới các tên miền miễn phí có DNS hiện nay thì TK là dịch đầu tiêntiên phong BẠO GAN cung cấp tên miền cấp 1 hiện nay. Mình nghĩ nó sẽcạnh tranh khá quyết liệt với co.cc và các tên miền có phí trong thờigian tới. Hãy nhanh tay chọn cho mình 1 tên miền HOT nha các bạn.

Các bạn chú ý TK không giới hạn số lượng tên miền đăng ký trong 1 tàikhoản nhưng nó sẽ xóa nếu tên miền đó không được truy cập đủ 25 lầntrong 90 ngày.

Đăng ký tên miền TK
Hãy bấm vào đây

Tại trang chủ TK, bấm vào Web Domain và nhập tên miền bạnmuốn đăng ký. Tên miền bạn chọn có thể đã bị đăng ký rồi. Hãy kiên nhẫnsuy nghĩ tên miền độc quyền của bạn hoặc có thể kết hợp thêm số, vn,net… vào phía sau.

Sau khi chọn tên miền ưng ý sẽ chuyển qua bước cấu hình cho tên miền.



Nếu bạn đăng ký tên miền nhằm dùng tên miền đó chuyển hướng đến websitehay một địa chỉ website dài nào đó thì hãy điền địa chỉ đó vào mục Your website URL. Nếu bạn dùng DNS thì bấm vào Use DNS this domain.



TK ngoài cung cấp miễn phí tên miền nó còn dịch vụ DNS miễn phí chotên. Nếu bạn sử dụng vụ này thì hãy nhập địa chỉ IP của server đangchứa trang web của bạn vào cột IP Address(hình trên). Nếu bạn không biết IP server chứa web của bạn thì hãy liênhệ với nhà cung cấp Host hoặc vào Control Panel của host để xem.

Khi bạn mua 1 host để chứa web thì nhà cung cấp host sẽ cung cấp địadns cho bạn, thường có dạng ns1.tenmien.com, ns2.tenmien.com… nếu bạndùng DNS server của nhà cung cấp host thì hãy check vào mục Use my DNS Services và nhập địa chỉ dns tương ứng của nhà cung cấp (hình dưới).



Sau khi đã lựa chọn xong thiết lập cho tên miền hãy nhập tiếp vào địa chỉ email và mã kiểm tra sau đó bấm Next (hình dưới).



Bước tiếp theo là nhập Tên (k phải tên đăng nhập), mật khẩu và bấn Next.



Sau khi thấy thông báo Your registration has succeeded!. Hãy truy cập vào hộp thư của bạn. TK có gởi cho bạn 1 lá thư chứa mã kích hoạt và link kích hoạt cho bạn. Tiêu đề thư là Dot TK registration center. Copy mã kích hoạt và bấm vào link kích hoạt (hình dưới).



Paste mã kích hoạt, click Confirm



Vậy là đã xong.

Mội khi bạn muốn chỉnh sửa lại DNS của tên miền thì truy cập vào địa chỉ http://my.dot.tk/ và nhập vào địa chỉ email, pass vào.

Trỏ domain tk về blogspot

Đầu tiên đăng nhập vào tên miền ở TK (http://my.dot.tk/). Vào My Domians > List my domains ở khung bên trái. Bấm vào nút Modify ở tên miền bạn muốn trỏ về blogspot. Chọn Use Dot TK Free DNS service rồi bấm Configure



Sau khi bấm Configure bạn sẽ thấy phần bên dưới sẽ thay đổi. Hãy nhấn vào link Add another hostname4 lần để tạo thêm 4 dòng mới. Sau đó hãy thiết lập các giá trị như bêndưới (Thay tenmien.tk bằng tên miền đang thiết lập của bạn) (hình dưới).



Bấm Next để hoàn tất.

Thay đổi tên miền cho blogspot

Đăng nhập vào http://blogger.com. Vào phần Cài đặt > Xuất bản của blog bạn muốn đổi tên miền, bấm vào link Miền tùy chỉnh (hình dưới).



Và bấm tiếp vào Chuyển sang các cài đặt nâng cao.



Nhập tên miền của bạn vào (phải nhập đầy đủ có cả www) (hình dưới).



Nhập Xác minh từ ở phía dưới rồi bấm Lưu cài đặt.

Sau khi bấm Lưu cài đặt xong và thàng công (ko bị lỗi do nhập sai xác minh từ…) hay check tiếp phần Chuyển hướng tenmien.tk tới www.tenmien.tk nếu bạn muốn như vậy! nếu không bạn phải gõ tên miền đầy đủ của blog là http://www.tenmien.tk mỗi khi truy cập (hình dưới).



Nhập xác minh từ lại lần nữa, Lưu cài đặt và chờ khoản12-24h để cho DNS của TK và blogger cập nhật tên miền mới của bạn. Theokhuyến cáo của blogspot và TK là như vậy nhưng tôi đã thử chỉ khoản1-2h thôi. Trong quá trình đợi cập nhật sẽ không truy cập được vào blogcủa bạn.
Read more…

Tạo phân trang (page navigation) cho Blogspot

17:16 |
Thanh điều hướng cho Blogger được viết bởi Anhvo, đây là phân trang mình đánh giá cao cùng với phân trang của Abu Farhan bởi tính nhẹ nhàng. Chỉ dựa vào tổng số lượng bài viết và ngày tháng bài đăng mới nhất toàn blog hoặc từng nhãn được lấy từ feed. Tổng số lượng bài viết chỉ cần thông tin đầu tiên từ feed và dữ liệu được ngắt bởi max-results=0, ngày tháng bài đăng mới nhất được ngắt bởi max-results=1 có chứa thông tin của bài đăng mới nhất toàn blog hoặc từng nhãn. Việc không lấy toàn bộ dữ liệu từ feed để tạo phân trang không những giúp blog tải nhanh mà còn không bị lỗi với blog có trên 500 bài viết, đây là số lượng bài viết tối đa mà feed lưu trữ.
Vào Thiết kế chọn Chỉnh sửa HTML, đánh dấu Mở rộng Mẫu Tiện ích và tìm đoạn mã: 



Thay thế nó bằng đoạn mã dưới đây: 






  /   




  

Thay thế 2247542137056218612 thành BlogID của bạn và 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.
+- Cách xác định ID blogspot:
- bạn vào Thiết kế sau đó copy URL của trang Thiết kế
Trong đó phần chữ màu đỏ là ID:
http://www.blogger.com/rearrange?blogID=2247542137056218612
Xem thêm: Phân trang cho Blogspot dùng CSS 
Chúc thành công!

Read more…



























Hot