Thi Ẩm Lâu

Phiên bản đầy đủ: Góc Blogger
Bạn đang xem phiên bản rút gọn. Bạn có thể xem bản đầy đủ.
Trang: 1 2
Gần đây, bởi vì sự ra đi sắp tới của Yahoo Blog, các bác nhà mình chuyển qua dùng blogspot. Các vấn đề có thể vài bạn quan tâm. Hớ có nhiều năm kinh nghiệm với thằng này nên ai hỏi gì thì có thể trả lời (gần hết). Các bác dạo qua các trang nền blogger. Thấy thằng nào có gì hay thì cứ để link lại. Hớ sẽ nghiên cứu hướng dẫn cho mọi người làm giống hoặc gần giống như vậy.
Các thủ thuật đã đăng
1/Tiện ích Recent Comment
2/ Giúp ảnh post không tràn lề
3/Hiển thị bài viết trong một nhãn cho Blogger
4/ Tạo menu ngang cho blog
5/-Tạo Hình Cho trang
-Tạo Nhãn (thư mục) cho các bài viết
-ghim bài ưa thích luôn ở trang chính
-Đặt số bài hiển thị ở trang chính
-chèn nhạc Vào trang
Xem ở đây

6/ Làm thanh công cụ thò ra thụt vào
-------------------
1/Recent Comment

Đầu tiên là cái Recent Comment.

Chả hiểu sao tiện ích recent comment bị lỗi. Vì vậy, các bạn có thể bổ sung bằng cách sau:
Các bạn đăng nhập vào điều khiển trang blog, vào bố cục, thêm 1 tiện ích HTML/Javascript. (các bác nhớ thao tác này vì sau này dùng nhiều lắm)

Tiêu đề nhập là: Nhận xét. Nhập nội dung dưới đây vào blog của bạn. Lưu lại và kéo tiện ích đó đến vị trí như ý muốn
Trích dẫn:<script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a target="_blank" href="' + ctlink + '">[[Đọc tiếp]]</a>');
}
}
document.write('</li>');
}
</script>
<script src="http://lanhdien.thiamlau.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

Thay đoạn http://lanhdien.thiamlau.com bằng địa chỉ blogger của bạn.



-----------
Một số trang nền blogger Hớ đã tạo, các bác có thể tham khảo và hỏi code:
phim.thiamlau.com
truyen.thiamlau.com
blog.thiamlau.com
tonghop.thuthuataccess.com
anhvien.thiamlau.com
tieulam.thiamlau.com
----------------

Mỗi account blogger có thể tạo tới 50 địa chỉ blog. tongue
Cụ vào chỗ chỉnh CSS, thêm dòng này vào :

.post-body img { max-width: {PAGE-WIDTH}px; height: auto; }

Thay {PAGE-WIDTH} bằng chiều rộng của phần post bài.

Style trên giúp các hình ảnh không bị tràn ra khỏi vùng nội dung khi chúng quá to.
Hiển thị bài viết trong một nhãn cho Blogger
21:57 Lê Hoàng Chiến No comments
Nếu bạn chịu khó tìm kiếm trên Google thì sẽ tìm thấy một số bài viết hướng dẫn cách tạo widget bài viết mới nhất có ảnh thumbnail cho cả Blog và cho riêng 1 nhãn nào đó. Đôi khi bài viết mới nhất cho riêng 1 nhãn mà chỉ cần liệt kê tiêu đề bài viết cũng rất cần thiết. Thủ thuật sau đây sử dụng feed chuyên biệt theo 1 nhãn với định dạng JSON kết hợp Javascript. Nó giúp liệt kê tiêu đề những bài viết mới nhất cho 1 nhãn nào đó trên Blogger. Dưới đây là những bước cài đặt widget.

1. Đăng nhập vào Blogger.
2. Vào Bảng điều khiển (Dashboard) >> Thêm tiện ích (Add A Gadget) >> Chọn HTML/Javascript .
3. Đặt tiêu đề cho widget của bạn. Dán đoạn code bên dưới vào phần nội dung của widget.
Mã:
<!-- Recent Posts by Label Start -->
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://yourname.blogspot.com/feeds/posts/summary/-/Label name?max-results=postnumber&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End -->
4. Thay thế yourname bằng tên địa chỉ Blogger của bạn.
Thay Label name bằng tên nhãn cần hiển thị những bài viết mới nhất.
Thay Postnumber bằng số bài viết cần hiển thị, ví dụ: 5, 7, 10, … Nếu muốn hiển thị tất cả bài viết thì để là 500 (số tối đa cho widget này).
Chú ý: Tiêu đề các bài viết được liệt kê có dấu chấm đầu dòng (dùng thẻ <ul>). Nếu bạn muốn được liệt kê theo số thứ tự thì thay đoạn document.write('</ul>'); bằng document.write('</ol>');
Posted in: Thủ thuật blog
Tạo menu ngang cho blog
22:07 Lê Hoàng Chiến No comments

(Traidatmui.com) – Theo yêu cầu của bạn trungnguyen2010 là tạo menu ngang cho blog, hôm nay mình xin chia sẽ cùng các bạn cách tạo menu này. Với menu này sẽ giúp bạn bố trí các menu con dễ dàng và gọn gàng hơn. 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ẻ ]]></bConfusedkin>
Mã:
.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(http://lh4.ggpht.com/_BTztXRwC9ik/THuo9WrLneI/AAAAAAAADEU/ldueUUIIe54/bg_r.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/THuo9WrLneI/AAAAAAAADEU/ldueUUIIe54/bg_r.gif) repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('http://lh5.ggpht.com/_BTztXRwC9ik/THup7YkcmbI/AAAAAAAADEc/sLdAKMNjQ5Y/bg_corner.gif') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('http://lh5.ggpht.com/_BTztXRwC9ik/THup7YkcmbI/AAAAAAAADEc/sLdAKMNjQ5Y/bg_corner.gif') no-repeat 0px -27px;}
.sub-menu {height:21px;padding:1px 0px 0px 1px; background:#f5f5f6 url('http://lh4.ggpht.com/_BTztXRwC9ik/THuo9WrLneI/AAAAAAAADEU/ldueUUIIe54/bg_r.gif') 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('http://lh5.ggpht.com/_BTztXRwC9ik/THup7YkcmbI/AAAAAAAADEc/sLdAKMNjQ5Y/bg_corner.gif') 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 đó.
<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, 22, 23, 24, 25
);

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',
'Tên Menu 1',
'Tên Menu 2',
'Tên Menu 3',
'Tên Menu 4',
'Tên Menu 5',

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

'Tên Submenu 2.1',
'Tên Submenu 2.2',
'Tên Submenu 2.3',

'Tên Submenu 3.1',
'Tên Submenu 3.2',
'Tên Submenu 3.3',

'Tên Submenu 4.1',
'Tên Submenu 4.2',
'Tên Submenu 4.3',

'Tên Submenu 5.1',
'Tên Submenu 5.2',
'Tên Submenu 5.3'
);

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

'URL submenu1.1',
'URL submenu1.2',
'URL submenu1.3',

'URL submenu2.1',
'URL submenu2.2',
'URL submenu2.3',

'URL submenu3.1',
'URL submenu3.2',
'URL submenu3.3',

'URL submenu4.1',
'URL submenu4.2',
'URL submenu4.3',

'URL submenu5.1',
'URL submenu5.2',
'URL 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 language="javascript" src="http://traidatmui-tips.googlecode.com/files/vn_menu2.js" type="text/javascript"></script>

<div id="topmenu">

<div id="parent-menu" class="parent-menu" onclick="remmn();"></div>

<div class="sub-menu">

<div class="fl"> <img idth="25" alt="traidatmui.com" src=" http://lh6.ggpht.com/_BTztXRwC9ik/TK3mWV3XUAI/AAAAAAAAEI4/qzWyR7LBvMM/tdm%20copy.png" height="18" /> </div>

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

</div>
</div>


<script language="javascript" type="text/javascript">
menuobj=document.getElementById? document.getElementById("submenu") : document.all? document.all.submenu :

document.layers? document.dep1.document.dep2 : ""
Active(); writeParentMenu(); reWriteMenu();
</script>
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

Tham khảo Fandung Blog
Posted in: Thủ thuật blog
Lâu lâu cho ta chảnh chọe xíu để hương dẫn huynhdety muội làm blog nha

Ta biết gì nói đó cấm cười

1/Tạo hình ảnh nền cho trang của mình.

Đa số các hình ảnh trong mẫu chả có cái nào mình thích cả, mà có thì nó không độc.

Vì vậy chúng ta sẽ tạo nền cho trang như sau

Vào Trang >>Thiết Kế>> Mẫu > Nền .Lúc nào nó có mũi tên xuống ngay cạnh hình chúng ta sẽ bấm vào và tải hình lên.Hình nền không chịu những ảnh kích thước quá lớn.Tải lên xong chọn cuộn theo bài..và căn hình lại cho đẹp


2/Tạo Nhãn cho các bài viết :

Vào trang >> Thiết kế> Bố Cục> Thêm Tiện Ích > Nhãn >> xếp Nhãn vào vị trí mong muốn bằng cách đè chuột và kéo>> thay chữ nhãn bằng tùy thích cá nhân ví dụ Thư Mục, Mục Lục v,,v

Kế đến tất cả các bài viết phải được đặt nhãn ví dụ : Tản văn, Truyện, Thơ, Chém Gió, Nấu ăn , Ảnh..

Lư lại tất cả cài đặt là xong

3/Muốn ghim bài ưa thích luôn ở trang chính thì phải dùng mưu là luôn set nó ở trạng thái bài viết mới nhất và các bài viết sau phải luôn để ngày đăng sau bài chính.
chỉnh sửa ngày đang ngay khi viết bài hoặc chỉnh sửa bài cũng được

4/ Bố cục bài đang hay tuôn 1 loạt dài quá bất tiện
Vì vậy ta chỉ cho hiển thị 1 bài bằng cách
Vào trang >> Bố Cục>>Bài đăng trên blog >. Chỉnh sửa>> set số trang =1

5/Cách chèn nhạc Vào trang thì
Vào Tranh> Thiết Kế> Bố Cục> Thêm Tiện Ích>chọn HTML/Javascript
Chép code vào rồi lôi ra vị trí trong bố cục là xong

Biết nhiu thôi á laughing
Làm thanh công cụ thò ra thụt vào
[Hình: menu.png]

Nhiều huynh đệ tỷ muội chê thanh menu (còn gọi là navbar) của Blogger xấu quá, ở trên các trang thủ thuật blogger, huynh đệ tỷ muội đều dễ dàng tìm thấy Thủ thuật ẩn Navbar. Tuy nhiên, khó khăn của chúng ta là khi ẩn thì rất khó viết bài hoặc chỉnh sửa. Hớ đề nghị một cách khác là làm ẩn thanh này một phần. Và nó sẵn sàng thò ra khi ta rê chuột ngang qua.

Cách làm như sau:

Vào bảng điều khiển blogger.com của bạn=> mẫu=> tùy chỉnh=> nâng cao.
Kéo thanh trượt xuống cuối cùng. Tìm dòng Thêm CSS. Thêm hai dòng sau:
Mã:
#navbar-iframe{position:relative;left:-95% !important;}
#navbar-iframe:hover {left:-83% !important;}

Chọn Áp Dụng cho Blog ở góc phải trên.
Vào lại trang blog của bạn để tận hưởng.

Demo: http://blog.thiamlau.com
(21-12-2012, 01:48 PM)hothiethoa Đã viết: [ -> ]Làm thanh công cụ thò ra thụt vào
[Hình: menu.png]

Nhiều huynh đệ tỷ muội chê thanh menu (còn gọi là navbar) của Blogger xấu quá, ở trên các trang thủ thuật blogger, huynh đệ tỷ muội đều dễ dàng tìm thấy Thủ thuật ẩn Navbar. Tuy nhiên, khó khăn của chúng ta là khi ẩn thì rất khó viết bài hoặc chỉnh sửa. Hớ đề nghị một cách khác là làm ẩn thanh này một phần. Và nó sẵn sàng thò ra khi ta rê chuột ngang qua.

Cách làm như sau:

Vào bảng điều khiển blogger.com của bạn=> mẫu=> tùy chỉnh=> nâng cao.
Kéo thanh trượt xuống cuối cùng. Tìm dòng Thêm CSS. Thêm hai dòng sau:
Mã:
#navbar-iframe{position:relative;left:-95% !important;}
#navbar-iframe:hover {left:-83% !important;}

Chọn Áp Dụng cho Blog ở góc phải trên.
Vào lại trang blog của bạn để tận hưởng.

Demo: http://blog.thiamlau.com

Giả như cụ đổi relative thành fixed cho nó cố định lại 1 chỗ có khi lại hay :

Mã:
#navbar-iframe{position:fixed;left:-95% !important;}
#navbar-iframe:hover {left:-83% !important;}
ReadMore

Readmore hay đọc thêm, có nghĩa là phần văn bản được ẩn khi bạn đang xem ở trang chủ hoặc tìm kiếm nhãn.

[Hình: ATJ3.PNG]

Khi người đọc click vào chữ readmore thì sẽ xem được toàn bài viết. Trên mạng có rất nhiều thủ thuật hướng dẫn thêm readmore tự động, nhưng theo Hớ, bạn nên thêm bằng tay, bằng công cụ của Blogger, nhất là những bạn post truyện hoặc bài viết quá dài.
Với những blog post truyện, không rõ Google cho bao nhiêu ký tự trên 1 trang hiển thị, nhưng nếu dùng các cách readmore trên mạng thông qua script thì số bài sẽ nhảy rất không ổn định, khi thì 3 khi thì 5 khi thì 10 bài /trang. Chỉ khi dùng chính readmore của Blogger cung cấp thì nó mới đúng với số trang ta cần hiển thị bất kể bài viết của bạn dài bao nhiêu.

Cũng giới thiệu các bạn công cụ được trang bị sẵn khi soạn thảo.
[Hình: blogger_154172_jump_icon_en.png]
chỉ cần đặt con trỏ tới đoạn cần ẩn, click vào nút readmore là nó tự chèn vào

[Hình: blogger_154172_jump_line_en.png]


Các bạn có thể tham khảo blog của hai chiến hữu đang áp dụng readmore
http://lanhdien.thiamlau.com

http://ndaidong.blogspot.com/ (dùng script tạo readmore)
Ngạo đã thử xài chức năng read more từ lâu rồi nhưng sao không thấy nó thể hiện sad..để khuya đi làm về test thử coi sao tongue
Ui, đúng cái mình đang cần. 010
Trang: 1 2