Tạo thanh menu sổ dọc sử dụng Scriptaculous

(Huynh Nhat Ha's Blog) -- Thư viện Scriptaculous có thể được sử dụng để tạo hiệu ứng động trong việc tạo thanh menu sổ dọc. Ở đây xin giới thiệu kiểu menu sổ dọc do Sven Wappler phát triển có sử dụng Prototype + Scriptaculous.

Xem Demo 1.

Nếu bạn muốn tạo một thanh menu đẹp như vậy thì có thể thực hiện theo các bước sau đây.

1. Đặt toàn bộ đoạn code dưới đây vào trước thẻ </head>

<script src="http://www.wappler.eu/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="http://www.wappler.eu/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="http://www.wappler.eu/scriptaculous/swdropdownmenu/menu.js" type="text/javascript"></script>

<style type="text/css">
#menu{ background:#678;border-bottom:1px solid #ABC;border-top:1px solid #ABC;padding-left:10px;height:32px;width:100%}
#menu ul{ display:block;line-height:1em;list-style:none;margin:0 !important;padding:0 !important;z-index:90}
#menu ul li{ float:left;font-size:12px;line-height:1,5em;list-style-type:none;margin:0;padding:0}
#menu ul li a{ background:transparent;color:GreenYellow;display:block;font-weight:bold;line-height:32px;text-decoration:none;margin:0;padding:0 1em;width:auto}
#menu ul li a:hover{ color:#FFF;text-decoration:none}
#menu ul.level2,#menu ul.level3{ background:#678;border-top:1px solid #ABC;left:0;position:absolute;top:0;visibility:hidden}
#menu ul.level2 li,#menu ul.level3 li{ border-bottom:1px solid #ABC;float:none;margin:0;padding:0;width:150px}
#menu ul.level2 li a,#menu ul.level3 li a{ padding:0 1em}
#menu ul.level2 li a:hover,#menu ul.level3 li a:hover{ background-color:#456}
</style>

Hiển thị widget chỉ ở trang chủ hoặc trang riêng biệt

Một khi bạn tạo một widget trên blog thì nó sẽ được hiển thị ở tất cả các trang theo mặc định, bao gồm cả trang chủ. Đôi khi bạn chỉ cần hiển thị một vài widget ở trang chủ hoặc chỉ ở một số trang hoặc thậm chí ở một trang riêng biệt nào đó. Thủ thuật này cũng khá đơn giản. Điều quan trọng là bạn phải nắm được id của widget mà bạn tạo ra.

Lấy ví dụ widget mà bạn tạo có id là HTML10 và bạn đặt tiêu đề cho widget đó là BLOGGER TIPS. Vào Bố cục (Layout) rồi chỉnh sửa HTML ở chế độ mở rộng mẫu tiện ích.

Trường hợp 1: Hiển thị widget chỉ ở trang chủ: Tìm và thêm đoạn code được đánh dấu màu đỏ và màu xanh như bên dưới.

<b:widget id='HTML10' locked='false' title='BLOGGER TIPS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Trường hợp 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "item"'>

Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "URL của trang riêng biệt"'>

Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "index"'>

tạo danh ngôn hàng ngày cho blog của bạn

Tạo widget danh ngôn trong ngày để đặt lên blog cũng là một trong những đề tài của cộng đồng Blogger. Một số trang web cung cấp widget danh ngôn ngẫu nhiên, danh ngôn trong ngày. Nếu bạn sử dụng các widget này thì chỉ việc gắn các đoạn code được cung cấp vào blog của bạn, tuy nhiên có một điều là bạn không thể tự ý chỉnh sửa nội dung danh ngôn theo ý mình.

Có một cách khắc phục điều này là sử dụng ngôn ngữ Javascript để tạo một widget độc lập cho blog của bạn mà không cần nhờ đến website thứ 3.

Đối với Blogger, bạn chỉ cần đặt đoạn code dưới đây vào trong một tiện ích HTML/JavaScript là có thể thành công. Lưu ý ở đây sử dụng thủ thuật hiển thị mỗi ngày một câu danh ngôn (quote) kèm theo tác giả (author) tương ứng. Trong đoạn code mẫu là những câu danh ngôn bằng tiếng Anh. Bạn nên thay thế bằng những câu danh ngôn tiếng Việt mà bạn thích kèm theo tác giả của câu danh ngôn đó.

<table border="1" bordercolor="#ADD8E6" cellpadding="20" width="200" bgcolor="#dff6ff" title="Danh ngôn chọn lọc"><tr><td><a target="_blank" href="http://huynh-nhat-ha.blogspot.com/2010/10/tao-widget-danh-ngon-trong-ngay-bang.html">Danh ngôn trong ngày</a><p></p><p></p>
<script language="javascript" type="text/javascript">
var d=new Date();
var quotes=new Array(31);
var authors=new Array(31);
quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";
quotes[1]="Friendship is far more tragic than love. It lasts longer.";
quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";
quotes[3]="Never trust men with short legs. Brains too near their bottoms.";
quotes[4]="Fame is failure disguised as money.";
quotes[5]="I always wait for The Times each morning. I look at the obituary column, and if I'm not in it, I go to work.";
quotes[6]="I just came from a pleasure trip: I took my mother-in-law to the airport.";
quotes[7]="Too bad that all the people who know how to run the country are busy driving taxicabs and cutting hair.";
quotes[8]="The success of the marriage comes after the failure of the honeymoon.";
quotes[9]="Husbands are like fires. They go out when unattended.";
quotes[10]="If one hears bad music, it is one's duty to drown it in conversation.";
quotes[11]="Being right half the time beats being half-right all the time.";
quotes[12]="If you do not know where you are going, every road will get you nowhere.";
quotes[13]="My wife is a light eater. As soon as it's light, she starts eating.";
quotes[14]="A door is what a dog is perpetually on the wrong side of.";
quotes[15]="Never trust a husband too far or a bachelor too near.";
quotes[16]="I can resist everything except temptation.";
quotes[17]="Education is not the filling of a pail, but the lighting of a fire.";
quotes[18]="Every one is a moon, and has a dark side which he never shows anybody.";
quotes[19]="Man is born free; and everywhere he is in chains.";
quotes[20]="Anger is never without an argument, but seldom with a good one.";
quotes[21]="Most folks are about as happy as they make up their minds to be.";
quotes[22]="Love and scandal are the best sweeteners of tea.";
quotes[23]="To find a friend one must close one eye. To keep him - two.";
quotes[24]="I've made it a rule never to drink by daylight and never to refuse a drink after dark.";
quotes[25]="When I read about the evils of drinking, I gave up reading.";
quotes[26]="When work is a pleasure, life is a joy! When work is duty, life is slavery.";
quotes[27]="She used to diet on any kind of food she could lay her hands on.";
quotes[28]="An uneasy conscience is a hair in the mouth.";
quotes[29]="Bigamy is having one wife too many. Monogamy is the same.";
quotes[30]="My idea of an agreeable person is a person who agrees with me.";

hiệu ứng trang trí cho con trỏ trên blogger

Có nhiều kiểu hiệu ứng cho con trỏ trên trang web. Ở đây xin giới thiệu hiệu ứng tuyết rơi khi rê con trỏ trên khắp các vị trí của trang web.

Bạn chỉ cần đặt đoạn javascript dưới đây vào trước thẻ </head>. Đối với Blogger có thể đặt trong một tiện ích HTML/JavaScript.

<script type='text/javascript'>
// <![CDATA[
var colour="blue";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Bạn có thể thay đổi màu sắc (white, green, yellow, red, brown...) cho tuyết rơi trong dòng var colour="blue". Chú ý đoạn javascript này có dùng trục tọa độ ox, oy nên sẽ gây xung đột code CSS đối với một số Blogger Template. Ví dụ điển hình là ở trang sachtroi.blogspot.com có sử dụng hiệu ứng này dẫn đến hậu quả là một khoảng trống dài thăm thẳm phía sau phần Footer và xuất hiện thanh cuộn nằm ngang trên công cụ trình duyệt Internet Explorer 8, như hình minh họa bên dưới.

Cách khắc phục lỗi như vậy đối với trang này chỉ có một cách đơn giản là loại bỏ đoạn javascript ở trên ra khỏi Template.

hiệu ứng đẹp cho blog

Để làm được hiệu ứng này, bạn chỉ cần đặt đoạn code dưới đây vào trước thẻ </body> trong Template là được.

<script type= "text/javascript ">
var textSpeed = 2;
var contentWidth;
var contentHeight;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';

function initializeText()
{
if (typeof window.innerWidth != 'undefined')
{
xMax = window.innerWidth;
yMax = window.innerHeight;
}
else
if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
xMax = document.documentElement.clientWidth;
yMax = document.documentElement.clientHeight;
}
else
{
xMax = document.getElementsByTagName('body')[0].clientWidth;
yMax = document.getElementsByTagName('body')[0].clientHeight;
}

var supertext = document.getElementById('supertext');
contentWidth = supertext.offsetWidth;
contentHeight = supertext.offsetHeight;

setTimeout('moveText()', 400);
}

function moveText()
{
var supertext = document.getElementById('supertext');

calculatePosition();
supertext.style.left = xPos + document.body.scrollLeft + "px";
supertext.style.top = yPos + document.body.scrollTop + "px";
animatetext = setTimeout('moveText()', 20);
}

function calculatePosition()
{
if (xDir == "right")
{
if (xPos > (xMax - contentWidth - textSpeed))
{
xDir = "left";
}
}
else
if (xDir == "left")
{
if (xPos < (0 + textSpeed))
{
xDir = "right";
}
}
if (yDir == "down")
{
if (yPos > (yMax - contentHeight - textSpeed))
{
yDir = "up";
}
}
else
if (yDir == "up")
{
if (yPos < (0 + textSpeed))
{
yDir = "down";
}
}
if (xDir == "right")
{
xPos = xPos + textSpeed;
}
else
if (xDir == "left")
{
xPos = xPos - textSpeed;
}
else
{
xPos = xPos;
}
if (yDir == "down")
{
yPos = yPos + textSpeed;
}
else
if (yDir == "up")
{
yPos = yPos - textSpeed;
}
else
{
yPos = yPos;
}
}

setTimeout('initializeText()', 500);
</script>
<span style="position:absolute;left:0;top:0;color:red;font-size:12px;font-family:Arial;font-weight:normal;font-style:normal;text-align:center;text-decoration:none;z-index:9999999999999" id="supertext"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpEF3OxmG0R39MrHE_TbAMlOtbuSCBwX13n9o6mG64Muog-HyPxZRLsV9T_Ysa30dWGPdLwilI3PnkWptkpXtDfhlHL5dVTIfvXwFN5OgSXbgqUELsbfKKKhVc9aZUoIQhD2n-Q8Pc2Z5/s1600/papa-noel.gif"/><br/>MERRY CHRISTMAS!!!</span>

Và tất nhiên bạn có thể tìm những ảnh động về Giáng sinh khác trên Internet để lấy đường link và đặt vào dòng được đánh dấu màu đỏ trong đoạn code ở trên để tạo bản sắc riêng cho blog của bạn.
bạn có thể thay " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpEF3OxmG0R39MrHE_TbAMlOtbuSCBwX13n9o6mG64Muog-HyPxZRLsV9T_Ysa30dWGPdLwilI3PnkWptkpXtDfhlHL5dVTIfvXwFN5OgSXbgqUELsbfKKKhVc9aZUoIQhD2n-Q8Pc2Z5/s1600/papa-noel.gif " bằng 1 ảnh động nào khác để thêm hiệu ứng đẹp hơn cho blog

làm nổi bận nhận xét của addmin trên blog

Chúng ta đã biết cách làm nổi bật nội dung nhận xét của Admin để phân biệt với phần nội dung nhận xét của khách ghé thăm blog của bạn (visitors). Qua bài viết này, tôi muốn giới thiệu đến quý bạn đọc cách gắn tem Admin – Author cho chủ blogspot để mỗi khi bạn viết nhận xét trên chính blogspot của bạn thì tem đó sẽ làm nổi bật bạn lên trong số vô vàn nhận xét trên blogspot của bạn.

Bạn có thể xem Demo qua hình minh họa bên dưới.

Để làm được điều này, bạn 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 đoạn code bên dưới vào trước dòng ]]></b:skin>.

.owner-adminstamp {
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
padding: 2px;
float: left;
border: thin solid #CCCCCC;
margin-top:2px;
}
.owner-adminstamp span
{
background-color: #FF6600;
padding-right: 2px;
padding-left: 2px;
}
.owner-authorstamp {
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
padding: 2px;
float: left;
border: thin solid #CCCCCC;
margin-top:2px;
margin-left: 5px;
}
.owner-authorstamp span
{
background-color:#0066FF;
padding-right: 2px;
padding-left: 2px;
}

Bước 2. Tìm dòng <dd class='comment-body'> và đặt trước nó với đoạn code sau đây.

<b:if cond='data:comment.author == data:post.author'>
<div class='stamp-wrapper'>
<div class='owner-adminstamp'><span>ADMIN</span></div>
<div class='owner-authorstamp'><span>AUTHOR</span></div>
</div>
<div style='clear:both'></div>
<dd class='comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Lưu Template là OK. Chúc bạn thành công. :66)

Tùy biến Comment Form sao cho đẹp

Trong quá trình chăm chút cho blogspot, một admin bao giờ cũng muốn cho phần nhận xét trên blog của mình thật đẹp. Tuy nhiên để thỏa ước muốn đó thì cũng không phải dễ dàng gì nếu admin không hiểu tường tận về hệ thống nhận xét của Blogger.

Phần nhận xét của một blogspot được đặt nằm gọn trong id có tên là #comments chứa các id và class khác, trong đó có hai id chính là #comments-block và #comment-form. Bạn không nên nhầm mà đồng nhất #comment-form với #comments bởi vì #comment-form là một bộ phận của #comments mà thôi. Tôi sẽ đề cập đến phần #comments-block trong một bài viết khác, trong phạm vi bài này, chỉ xin giải quyết vấn đề làm sao để có một Comment Form cho đẹp.

Dưới đây là phân tích cấu trúc một Comment Form cơ bản chưa được chỉnh sửa gì nhiều.

Như các bạn thấy thì id #comment-form chứa 2 id khác quan trọng gồm #comment-post-message (dòng thông báo Đăng một nhận xét) và #comment-editor (khung nhập nhận xét). Để hiểu sâu hơn, chúng ta tiếp tục phân tích phần XML trong Template của Comment Form.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comment-form tìm đến đoạn code như bên dưới.

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

Chú ý trên đoạn code trên, đối với một số Template thì bạn sẽ thấy thẻ <div class='comment-form'>, thay vì là thẻ <div id='comment-form'>.

Nào, chúng ta bắt đầu tùy biến bằng CSS nhé.

1. Nếu bạn muốn tùy biến dòng thông báo Đăng một nhận xét thì bạn đặt CSS như sau.

#comment-post-message {
float:left;
font-size:14px;
font-family:Arial;
font-weight:bold;
border:1px solid #fc5604;
color: #0000ff;
text-case:sentence;
}

Chú ý text-transform:uppercase đặt chữ viết HOA, còn text-case:sentence đặt chữ viết Hoa chữ cái đầu.
Nếu bạn rành về CSS thì có thể tùy ý điều chỉnh theo ý muốn.
Nếu bạn muốn id này float về giữa thì đặt float:center;
Nếu muốn ẩn quách nó đi thì đặt thêm display:none !important;
Còn nếu muốn xóa luôn nó đi thì (trong Template) xóa dòng <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Nếu muốn thay đổi dòng Đăng một nhận xét thì thay <data:postCommentMsg/> bằng câu gì đó bạn muốn.

2. Nếu để ý phần #comment-editor bạn sẽ thấy bề ngang nó cách xa biên bên phải của phần Main và bề dọc nó cách xa phần #blog-pager làm cho nó trông rất xấu xí, vì chừa đất trống rất nhiều mà chẳng biết “trồng” cái gì vào đấy. Để cắt phần đất thừa đó đi thì bạn tùy biến CSS cho phần #comment-editor như sau.

#comment-editor{
width:580px;
height:240px;
padding-left:10px;
}

Ở đây bạn chỉnh các thông số về chiều rộng (width) sao cho không quá bề rộng phần Main, chiều cao (height) sao cho tương xứng và padding-left phù hợp với trang của bạn.

3. Ngoài ra bạn có thể tùy biến CSS cho cả id #comment-form như sau.

#comment-form {
background: ;
}
#comment-form p {
………
}

Bạn có thể đặt nền (background) cho phần Comment Form và thêm CSS khác vào đoạn code trên.

Đối với Template có thẻ <div class='comment-form'> thì thay #comment-form bằng .comment-form

Và còn nhiều thứ khác nữa có thể tùy biến xung quanh Comment Form, hy vọng có thể cập nhật tiếp trong thời gian tới.