Gắn tem Avatar cho bài viết của tác giả ở trang nhãn

Người đăng: yeu mai em on Thứ Tư, 3 tháng 8, 2011

Chúng ta đã từng biết đến cách tạo Author Panel giới thiệu sơ nét về tác giả bài viết và khung tác giả thường được đặt ở cuối bài viết ở các trang item. Thế thì liệu chúng ta có thể làm điều tương tự ở trang chủ và trang nhãn hay không. Mình sẽ giúp bạn làm được điều này bằng cách gắn tem Avatar cho tác giả bài viết hiển thị ở trang chính (index) gồm trang chủ, các trang nhãn và trang lưu trữ. Thủ thuật này có thể áp dụng cho blogspot có nhiều tác giả làm cộng tác viên viết bài.

Xem Demo.

Thật thú vị phải không các bạn. Bây giờ còn chờ gì nữa nào, chúng ta cùng thực hiện theo các bước đơn giản để cài đặt vào blogspot của bạn. Xin lưu ý là scipt của mình rất đơn giản ngắn gọn nên không ảnh hưởng gì nhiều đến tốc độ load trang blogspot.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template. Chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </head>.
<script type='text/javascript'>
//<![CDATA[
// Adding Author Avatar Stamp to Label Posts Script by www.thuthuatblogger.info
function author_avatar_stamp (author) {
avatar = new Array()
avatar[0] = ""
avatar[1] = "<img border='0' style="display:block;float:right;width:35px;height:35px;margin:0 auto" src='URL_avatar_tác giả 1'/>"
avatar[2] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 2'/>"
avatar[3] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 3'/>"

if (author == "Tên tác giả 1")
{document.write(avatar[1]);}

if (author == "Tên tác giả 2")
{document.write(avatar[2]);}

if (author == "Tên tác giả 3")
{document.write(avatar[3]);}

}
//]]>
</script>
Trong đoạn code trên, bạn cần thay URL dẫn đến Avatar cho các tác giả tương ứng với tên tác giả (có thể thêm số lượng tác giả theo đúng định dạng ở trên), đồng thời có thể tùy biến CSS cho Avatar phù hợp với blogspot của bạn.

Bước 2. Dưới đây là đoạn scipt để gọi avatar ra:
<script type='text/javascript'>
author_avatar_stamp("<data:post.author/>");
</script>
Đặt đoạn code nới trên vào một trong những vị trí bạn có thể cần hiển thị tem avatar như sau:
<div class='post-header-line-1'>
VỊ TRÍ 1 -->
</div>
<div class='post-body entry-content'>
VỊ TRÍ 2 -->
<p>VỊ TRÍ 3 -->
<data:post.body/></p>
Lưu Template là xong.
More about

TẠO SLILESHOW TRỰC TUYẾN VỚI PROSHOW WEB

Người đăng: yeu mai em

PROSHOW WEB là một dịch vụ mới của Photodex, Proshow Web cung cấp cho bạn chức năng tạo SlideShow ảnh thật bắt mắt chỉ qua 5 bước thực hiện giản đơn, với các hiệu ứng được thừa hưởng từ hai bộ phần mềm nổi tiếng Proshow GoldProshow Producer.
Đầu tiên, bạn đăng ký tài khoản miễn phí TẠI ĐÂY. (Bạn có thể chọn gói miễn phí để sử dụng). Tại trang đăng ký này bạn phải khai báo địa chỉ Email thật để kích hoạt tài khoản sau khi đăng ký.
Khi đăng ký thành công, bạn VÀO ĐÂY và đăng nhập tài khoản đã đăng ký để bắt đầu tạo dựng SlideShow. Bạn nhấn nút Create a Show để bắt đầu.
Bước 1: (chọn themes) tại đây Proshow Web cung cấp sẳn cho bạn một số themes, bạn có thể chọn theo danh mục đã được chia ra các chủ đề như: Celebration, Holidays, Weddings...hoặc bạn xem hình phía trên thích cái nào thì bấm chọn themes đó rồi di chuyển chuột xuống phía dưới bấm Apply Theme. Xong nhấn Next để qua bước 2.


Bước 2: (chọn ảnh) Bạn nhấn nút Add photo & Video để tải hình và video từ máy tính lên trang chủ dịch vụ. Ngoài hình ảnh, bạn có thể chèn chữ vào hình bằng cách bấm vào Add Text. Xong, nhấn Next để qua bước 3.


Bước 3: (chèn nhạc nền) Bạn nhấn Add music để tại nhạc từ máy tính lên để làm nhạc nền cho SlideShow (dạng mp3), sau đó nhấn Next để qua bước 4.


Bước 4: (đặt tên cho SlideShow) Bạn đặt tên cho SlideShow vừa tạo tại mục Give it a name, rồi nhấn Next để qua bước 5.


Bước 5: (xuất bản SlideShow) Cuối cùng, bạn nhấn Build my video để hoàn thành việc xây dựng Slideshow. Khi xây dựng xong, trang Web trình chiếu đoạn SlideShow mà bạn vừa tạo, bạn có thể tải về máy bằng cách nhấn Download...


More about

Ý tưởng thành lập Bệnh viện Blogspot

Người đăng: yeu mai em on Thứ Ba, 2 tháng 8, 2011

Có thể nói cộng đồng Blogspot Việt Nam đã và đang phát triển không ngừng qua từng ngày. Để Blogspot Việt phát triển hơn nữa và có những bước tiến ổn định, vững chắc; mình có ý tưởng thành lập Bệnh viện Blogspot (Blogspot Hospital) là nơi tiếp nhận những ca bệnh đủ hình thái của các bệnh nhân là người sử dụng Blogspot. Bệnh viện Blogspot hoạt động dựa trên nguyên tắc phi lợi nhuận với sự tham gia tự nguyện của các thành viên. Đã là bệnh viện thì phải có bác sỹ, điều dưỡng và bệnh nhân; vì thế ý tưởng Bệnh viện Blogspot như sau:

Sứ mệnh và tôn chỉ của Bệnh viện Blogspot

1. Sứ mệnh:
  • Lấy bệnh nhân làm trọng tâm, chữa lành tất cả các bệnh nan y và bệnh thông thường của Blogspot.
  • “Chiêu hiền đã sĩ” phát triển nguồn nhân lực bác sĩ blogspot trong cộng đồng Blogger Việt Nam.
2. Tôn chỉ:

Với phương châm “Tận tụy – Sáng tạo – Y đức” Blogger Hospital khuyến khích mọi thành viên luôn nêu cao:
  • Lòng tận tụy hết mình vì bệnh nhân.
  • Tính sáng tạo, tìm tòi học hỏi, đổi mới tiên phong.
  • Tinh thần y đức không làm ngơ trước người bệnh.
Ứng cử và đề cử các chức danh chủ chốt của Bệnh viện Blogspot
1. Chủ tịch Hội đồng Quản trị
2. Phó Chủ tịch HĐQT kiêm Giám đốc điều hành
3. Phó Giám đốc
4. Bác sỹ Trưởng khoa Thiết kế Template
5. Bác sỹ Trưởng khoa Tùy biến Template
6. Bác sỹ Trưởng khoa SEO Template
7. Bác sỹ Trưởng khoa Đồ họa Template
8. Bác sỹ Trưởng khoa Bảo trì Template.
9. Điều dưỡng kiêm Thư ký Bệnh viện.
Trên đây là công bố thông tin ứng cử và đề cử vào các chức danh chủ chốt của Bệnh viện Blogspot, trân trọng đề nghị quý bạn đọc tùy vào khả năng của mình có thể tự ứng cử hoặc đề cử người khác vào các chức danh nói trên. Trong vòng 1 tháng kể từ ngày ra thông báo này, Ban Quản trị Thủ thuật Blogger sẽ thống kê và ra thông báo chính thức về danh sách dự kiến và tổ chức cuộc bỏ phiếu bầu cử trực tuyến cho các chức danh chủ chốt của Bệnh viện Blogspot.

Kính mong quý bạn đọc gần xa nhiệt tình ủng hộ!
More about

FLASH ĐẸP CHO BLOG (Phần 7)

Người đăng: yeu mai em

Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần copy và thêm tiện ích HTML/Javacrip rồi dán vào nơi mà bạn muốn. (Bạn có thể thay đổi kích thước ở mục height: chiều cao và width: chiều rộng để cho thích hợp với blog của mình).
Vì files flash nhiều sẽ làm cho Blog load chậm, do đó mỗi bài tôi chỉ giới thiệu 10 files (chia thành nhiều bài), mong các bạn thông cảm.

Mẫu 1:





Mẫu 2:







Mẫu 3:






Mẫu 4:








Mẫu 5:





Mẫu 6:






Mẫu 7:






Mẫu 8:





Mẫu 9:





Mẫu 10:








More about

Thủ thuật yêu cầu: Script liệt kê và gọi script

Người đăng: yeu mai em on Thứ Hai, 1 tháng 8, 2011

Trong quá trình thiết kế weblog trên nền tảng Blogspot, hẳn bạn đã, đang và sẽ vọc rất nhiều script, dẫn đến thực tế là gắn nhiều script vào Template sẽ gây ảnh hưởng đến tốc độ load trang. Có một yêu cầu của bạn đọc về việc làm sao có script gọi được script, tức là gom các file script vào một chỗ rồi đến lúc nào cần script đó hoạt động thì mới gọi nó ra, chứ không cho nó load hết toàn bộ trong trang. Mình viết thủ thuật này theo yêu cầu của bạn MrWinni.

Mình có thể mô tả thủ thuật này như sau: Trước hết mình tạo một tiện ích để chứa các file script và mình đặt tiện ích này lên trên tiện ích Header để dễ bề quản lý, sau đó mình dùng script liệt kê tất cả các file js cần dùng trong Template rồi đặt vào tiện ích này; mỗi khi cần bất kỳ một file js nào hoạt động thì chỉ cần dùng lệnh gọi script đó ra là được, như vậy sẽ không load tất cả các file js ra cùng một lúc. Nói như thế nghĩa là giả sử mình sử dụng đến 1000 file js trong Template song vẫn không hề ảnh hưởng đến tốc độ load trang của Template.

Đến đây, mình tin rằng bạn sẽ cần đến thủ thuật này hơn bao giờ hết. Vậy thì hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm sau thẻ <body> rồi đến thẻ <div id='header'> hoặc thẻ <div id='topnavbar'> (nếu Template của bạn có thanh menu đỉnh) và đặt trước thẻ đó bằng đoạn code bên dưới:
<b:section class='scripcontainer' id='scriptcontainer'>
<b:widget id='HTML100' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
Lưu Template.

Bước 2. Vào Page Elements, kéo đến đầu Layout, sát trên phần Header, chọn Edit để chỉnh sửa tiện ích HTML/Javascript rồi đặt đoạn code như bên dưới vào đó:
<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {

URLBase="http://tenban.googlecode.com/files/";
scriptLIST=new Array(

0,"",
1,"code1.txt",
2,"code2.txt",
3,"code3.txt",
4,"code4.txt",
5,"code5.txt",
6,"code6.txt",
7,"code7.txt",
8,"code8.txt",
9,"code9.txt",
10,"code10.txt",

1000,""
);

regNum = index * 2 +1;
document.write('<script src="' + URLBase + scriptLIST[regNum] + '"><\/script>');
}
</script>
Trong trường hợp này, bạn upload các file js có đuôi .js hoặc .txt vào cùng một nguồn lưu trữ file (ví dụ googlecode hoặc host riêng của bạn), đặt URL ngồn (URLBase) cho script. Cứ mỗi lần dùng thêm file js thì bạn chỉ cần thêm số thứ tự theo định dạng như trên.

Mỗi khi bạn muốn một script nào đó hoạt động tại vị trí theo ý bạn thì chỉ cần sử dụng lệnh gọi script như sau:

<script>readScript(1);</script>

Hoặc <script>readScript(2);</script>

Hoặc <script>readScript(3);</script>

Cứ như thế chỉ cần thay số thứ tự cho file js cần gọi ra là được.

Nếu bạn upload các file js (lưu tên lộn xộn theo đuôi .js và .txt) lên các host khác nhau thì ở Bước 2, bạn sử dụng code như sau:
<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {
scriptLIST=new Array(
// Đây là danh sách các URL dẫn đến nguồn script
0,"",
1,"http://www.tenmien1.com/files/code1.js",
2,"http://www.tenmien2.com/files/code2.txt",
3,"http://www.tenmien3.com/files/code3.js",
4,"http://www.tenmien4.com/files/code4.txt",
5,"http://www.tenmien5.com/files/code5.js",
6,"http://www.tenmien6.com/files/code6.txt",
7,"http://www.tenmien7.com/files/code7.txt",
8,"http://www.tenmien8.com/files/code8.js",
9,"http://www.tenmien9.com/files/code9.txt",
10,"http://www.tenmien10.com/files/code10.txt",

1000,""
);
regNum = index * 2 +1;
document.write('<script src="' + scriptLIST[regNum] + '"><\/script>');
}
</script>
Tuy code này đơn giản song vẫn hy vọng rằng hiệu quả nó đem lại là vô cùng lớn đối với các bạn.
More about

Tạo chú thích cho ảnh trong bài viết blogspot

Người đăng: yeu mai em

Bạn có dịp tham quan những danh lam thắng cảnh trên thế giới và đã chụp lại rất nhiều ảnh đẹp. Bạn muốn chia sẻ những tấm ảnh đó với bạn của mình trên blog. Nhưng không phải ai cũng biết địa danh hay tên gọi của những nơi đó nên khi post ảnh lên bạn phải tạo chú thích cho ảnh.

Bây giờ bạn thử ngắm 2 hình ở trang DEMO này. Lưu ý: không thấy hiệu ứng khi xem ở IE.

Bạn thích kiểu ghi chú của hình 1 hay hình 2, nếu thích hình 1 thì bạn làm theo cách bình thường, upload ảnh lên xong thì viết ghi chú bên dưới nó. Nhưng nếu bạn thích kiểu ghi chú ở hình 2 thì sao?

Thủ thuật đơn giản sau sẽ giúp bạn có kiểu ghi chú ấn tượng này.

Các bạn đặt code này vào trướcdòng ]]></b:skin>.
.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}
Xong rồi bạn lưu template lại.

Trong bài đăng, khi bạn upload ảnh thì ảnh thường có dạng như thế này:

<div class="separator" style="clear: both; text-align: center;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhco_XVQVzRxtlHGJthwTw69O-_tTZKYhYaXCfOa1-V8tfnVLTxXO4QUgGYzETVyhQooqm4o7_UEeNkxDC23sd5cBiQfpu2Dywp_81x_fmQRfQlmqVKI6Noa6oNeu-b9XinTuw4KcfKtTSG/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhco_XVQVzRxtlHGJthwTw69O-_tTZKYhYaXCfOa1-V8tfnVLTxXO4QUgGYzETVyhQooqm4o7_UEeNkxDC23sd5cBiQfpu2Dywp_81x_fmQRfQlmqVKI6Noa6oNeu-b9XinTuw4KcfKtTSG/s1600/Nha+hat+Opera.jpg" /></a></div>

Bây giờ bạn chỉ cần nhìn vào code bên dưới, lưu ý "seperator" đã được thay bằng "imgcaption" và trước thẻ </div> chúng ta thêm vào dòng code màu đỏ là OK.
<div class="imgcaption" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhco_XVQVzRxtlHGJthwTw69O-_tTZKYhYaXCfOa1-V8tfnVLTxXO4QUgGYzETVyhQooqm4o7_UEeNkxDC23sd5cBiQfpu2Dywp_81x_fmQRfQlmqVKI6Noa6oNeu-b9XinTuw4KcfKtTSG/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhco_XVQVzRxtlHGJthwTw69O-_tTZKYhYaXCfOa1-V8tfnVLTxXO4QUgGYzETVyhQooqm4o7_UEeNkxDC23sd5cBiQfpu2Dywp_81x_fmQRfQlmqVKI6Noa6oNeu-b9XinTuw4KcfKtTSG/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

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

TIỆN ÍCH XEM TRUYỀN HÌNH CHO BLOG

Người đăng: yeu mai em

Do có một số bạn yêu cầu, hôm nay mình chia sẻ một số code để chèn tiện ích xem truyền hình cho blog. Ứng với mỗi kiểu mẫu là code phía dưới, bạn thích kiểu nào thì chỉ việc copy code và đăng nhập vào Blog > chọn thiết kế > chọn thêm tiện ích HTML/Javacript rồi dán nó vào, bấm Lưu lại là xong.
Mẫu 1: Đây là mẫu các biểu tượng (Logo) của các đài truyền hình, bạn thích xem đài nào thì bấm vào Logo đó, nó sẽ liên kết đến đài truyền hình để bạn xem. (Vì Logo quá dài, nên tôi chỉ chụp hình mẫu vài cái để bạn xem).




Mẫu 2: Với mẫu này là các Logo sẽ được trình diễn xoay vòng rất đẹp mắt, bạn có thể dùng tiện ích này vừa xem truyền hình vừa trang trí cho blog thêm đẹp.















Mẫu 3: Mẫu này với hình cái Tivi rất đẹp, muốn xem truyền hình chỉ cần bấm vào hình tivi, nó sẽ chuyển bạn đến trang Web xem truyền hình trực tuyến.

Gif maker




Mẫu 4: Còn với mẫu này, bạn có thể xem truyền hình trực tiếp ngay trên Blog của bạn luôn, phía dưới là các kênh, muốn xem kênh nào thì bấm vào kênh đó, nó sẽ hiển thị ngay trên blog của bạn (bạn thử bấm xem một kênh thì sẽ biết)












Mẫu 5: Còn với mẫu này, bạn sẽ thấy được trang Web xem truyền hình trực tiếp ở ngay trên Blog của mình với kích thước nhỏ.






Với các mẫu kể trên, tôi hy vọng các bạn sẽ có một mẫu phù hợp cho Blog của mình.
Chúc các bạn vui!!!
More about