Tạo nút Tăng/Giảm cỡ chữ trong bài viết Blogger

Nút Tăng/Giảm cỡ chữ cũng rất cần thiết cho blog của bạn. Nó giúp người đọc chọn lựa cỡ chữ phù hợp với thị lực của họ. Thông thường trong một blogspot, việc tăng hay giảm cỡ chữ chỉ được được thiết lập cho phần nội dung bài viết (post body). Javascript sẽ giúp bạn thực hiện điều này một cách dễ dàng.

Bước 1: Trước tiên đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates, đặt đoạn code Javascript dưới đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function fontIncrease(){
var obj = document.getElementById("text_Font");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}
}
function fontDecrease(){
var obj = document.getElementById("text_Font");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}
}
//]]>
</script>

Bước 2: Tìm các dòng

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

rồi đặt sau đó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a alt='Tăng cỡ chữ' title='Tăng cỡ chữ' href='javascript:fontIncrease()'>A+</a> |
<a alt='Giảm cỡ chữ' title='Giảm cỡ chữ' href='javascript:fontDecrease()'>A-</a>
</b:if>

Bước 3: Đặt dòng <div id='text_Font'> vào sau dòng <div class='post-body'> (ở một số Template là <div class='entry'>).

Tiếp tục đặt thẻ đóng </div> vào trước dòng <div class='post-footer'>. Lưu Template là OK.

Tiện ích Danh ngôn trong ngày sử dụng Javascript độc lập

Tiện ích Danh ngôn trong ngày (Quote of the Day) là một trong những tiện ích cơ bản đối với blog. Hiện nay có một số website/webblog có dịch vụ tiện ích này. Tuy nhiên để cài đặt tiện ích này vào blogspot của bạn thì phải dùng code javascript hoặc php từ các site đó. Trong trường hợp site cung cấp dịch vụ này bị sự cố thì tiện ích trên blogspot của bạn sẽ không hoạt động được nữa.

Có một cách đơn giản hơn là dùng javascript để tạo tiện ích Danh ngôn trong ngày độc lập cho blogspot của bạn. Đặc tính của tiện ích này là hiển thị một câu danh ngôn cho mỗi ngày, ở đây thiết lập 30 câu danh ngôn chuẩn tượng trưng cho 1 tháng chuẩn và thứ tự luân phiên thay đổi theo chu kỳ 30.

Xem Demo dưới đây.

Danh ngôn trong ngày

Để cài đặt tiện ích này cho blogspot của bạn, chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/Javascript.

<script type="text/javascript">
var today= new Date();
var first = new Date(today.getFullYear(), 0, 1);
var day = Math.round(((today - first) / 86400000), 0);
var numquotes = 30;
quotes = new Array(numquotes+1);
authors = new Array(numquotes+1);
quotes[1] = "Ông chủ làm vẻ vang cho ngôi nhà chứ không phải ngôi nhà làm vẻ vang cho ông chủ.";
quotes[2] = "Mỗi ngày ta biết thêm những điều ta chưa biết. Mỗi tháng không quên những điều ta đã biết. Như vậy là người hiếu học.";
quotes[3] = "Phẩm chất chân chính của một người ở trong cách họ sống chứ không ở trong cái họ có.";
quotes[4] = "Dù nó thật tồi tàn đi nữa, chẳng nơi nào sánh được với mái ấm gia đình.";
quotes[5] = "Biết lo toan chu đáo công việc nhỏ với tầm mắt xa rộng. Đó là bí quyết để mưu đồ đại sự.";
quotes[6] = "Thời gian không đo lường bằng năm tháng mà bằng những gì chúng ta làm được.";
quotes[7] = "Đừng lo cho mình không có chức vị, chỉ lo không đủ tài để nhận chức vị mà thôi.";
quotes[8] = "Tình bạn đòi hỏi sự thông cảm sâu xa giữa những người bạn. Nếu không, tình bạn không thể nảy sinh hoặc tồn tại.";
quotes[9] = "Không phải tất cả những người cười với ta đều là bạn cũng không phải tất cả những người làm ta bực mình đều là kẻ thù của ta.";
quotes[10] = "Hạnh phúc nằm ngay trong nhà mình, không nên đi tìm trong vườn người khác.";
quotes[11] = "Bạn sẽ biết thế nào là niềm vui sướng khi bạn hiểu được giá trị của mồ hôi và nước mắt.";
quotes[12] = "Đừng để ai phiền trách bạn. Trong mọi việc nếu bạn không thành công thì hãy cho là lỗi tại bạn. Đừng đổ lỗi cho ai.";
quotes[13] = "Kẻ lấy thân thế chơi với nhau, thân thế đổ là bạn hết. Kẻ lấy của cải chơi với nhau, của cải hết là mất bạn.";
quotes[14] = "Bạn hãy cười và thế gian sẽ cười với bạn. Bạn hãy khóc và bạn khóc cô đơn.";
quotes[15] = "Khi bạn thấy khó chịu về lỗi của người khác, bạn hãy xét mình lại và coi xem bạn có làm như họ vậy không.";
quotes[16] = "Không có cái gì dễ, nhưng cái gì rồi cũng sẽ trở nên dễ nếu chúng ta biết trì chí kiên tâm.";
quotes[17] = "Bạn hãy hiền dịu bao dung với hết tất cả mọi người trừ chính mình.";
quotes[18] = "Mỗi người có trong đời mình những trang sách mà mình không biết và được viết bởi công trạng của người khác.";
quotes[19] = "Bạn đừng làm một điểm trên vòng tròn mà phải làm một trung tâm điểm.";
quotes[20] = "Làm cho người khác tốt hơn đó là cách duy nhất làm cho người ta hạnh phúc hơn.";
quotes[21] = "Một ông thầy mà không dạy cho học trò được việc ham muốn học tập thì chỉ là đập búa trên sắt nguội mà thôi.";
quotes[22] = "Học tập là hạt giống của kiến thức, kiến thức là hạt giống của hạnh phúc.";
quotes[23] = "Ngủ dậy muộn thì phí mất cả ngày, ở tuổi thanh niên mà không học tập thì phí mất cả cuộc đời.";
quotes[24] = "Phải tôn kính thầy dạy mình, bởi lẽ nếu cha mẹ cho ta sự sống thì chính các thầy giáo cho ta phương cách sống đàng hoàng tử tế.";
quotes[25] = "Ðọc sách cũng giống như xem tranh; ta phải không nghi ngờ, không do dự, mà mạnh dạn chiêm ngưỡng cái đẹp.";
quotes[26] = "Thích đọc sách tức là biết đánh đổi những giờ phút buồn tẻ không thể tránh được trong cuộc đời lấy những giờ phút lý thú.";
quotes[27] = "Nếu quy luật đầu tiên của tình bạn là phải vun đắp nó thì quy luật thứ hai là phải độ lượng khi quy luật thứ nhất bị sao nhãng.";
quotes[28] = "Dám và thử thách là những trận chiến. Nếu bạn thua một lần, hai lần hoặc nhiều lần nữa, bạn hãy giao chiến lại rồi sẽ được lúc bạn toàn thắng.";
quotes[29] = "Nếu đẹp, bạn hãy đáng với nhan sắc của mình, nếu xấu bạn hãy làm cho người ta quên cái xấu của bạn bằng kiến thức của bạn.";
quotes[30] = "Muốn được hạnh phúc đến mức độ nào, ta phải có đau khổ đến mức độ đó.";
authors[1] = "Xi-xê-rông";
authors[2] = "Sách luận ngữ";
authors[3] = "Blackie";
authors[4] = "J. Payner";
authors[5] = "Lã Đông Lai";
authors[6] = "H. Cason";
authors[7] = "Khổng Tử";
authors[8] = "Ghersen";
authors[9] = "Phoebe Vary";
authors[10] = "Danh ngôn Anh";
authors[11] = "Gia-bơ-ri-ơ Pa-lan";
authors[12] = "Earvin";
authors[13] = "Vân Trung Tư";
authors[14] = "E. W. Wilcox";
authors[15] = "Marc-Aurele";
authors[16] = "Andre Moroi";
authors[17] = "Joubert";
authors[18] = "G. Guyau";
authors[19] = "Luc Miriam";
authors[20] = "Ampere";
authors[21] = "Horaceman";
authors[22] = "Ngạn ngữ Gruzia";
authors[23] = "Ngạn ngữ Trung Quốc";
authors[24] = "Philoxêne De Cythêrê";
authors[25] = "Vincent Van Gogh";
authors[26] = "Mông-tex-kiơ";
authors[27] = "Vontaire";
authors[28] = "Epictete";
authors[29] = "Nicole";
authors[30] = "Edgar Poe";
var ran = (day % numquotes) + 1;
document.write(quotes[ran] + '<p style="text-align: right;text-case:sentence"><i>' + authors[ran] + '</i></p>');
</script>
<div class='clear'></div>

Trong đoạn javascript ở trên, có thể thấy 2 phần chính là quotes (danh ngôn) và authors (tác giả). Bạn có thể thay đổi câu danh ngôn tương ứng với tên tác giả theo sưu tầm danh ngôn của bạn.

Hiệu ứng toggle cho nút Xem code sử dụng Scriptaculous

Hiệu ứng toggle được sử dụng nhiều trong thiết kế web, phổ biến nhất là có sự kết hợp của thư viện jQuery giúp tạo sự mượt mà cho hiệu ứng trượt. Hôm nay tôi xin giới thiệu hiệu ứng toogle có sử dụng thư viện Scriptaculous. Bạn có thể vận dụng hiệu ứng này để tạo nút Xem code đối với website/webblog giới thiệu về thủ thuật blog hay webdesign.

Trước tiên bạn cần đặt đoạn code dưới đây vào trước thẻ </head>:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Tiếp theo bạn thiết lập cấu trúc HTML như sau và đặt vào vị trí cần tạo nút Xem code.

<input value="Xem code" onclick="Effect.toggle('Button1','slide'); return false" type="button" /><div id="Button1" style="overflow: visible; text-align: left; display: none;">
NỘI DUNG CODE
</div>

Nếu bạn muốn thêm một nút Đóng sau nội dung code thì bạn tạo HTML như sau:

<input onclick="Effect.toggle('Button1','slide'); return false" value="Xem code" type="button" />
<div id="Button1" style="overflow: visible; display: none; text-align: left;">NỘI DUNG CODE<input onclick="Effect.toggle('Button1','slide'); return false" value="Đóng" type="button" /><div id="Button1" style="overflow: visible; display: none; text-align: left;"></div></div>

Nếu trong một bài viết mà bạn đặt nhiều nút Xem code thì cần phải đặt tên id lần lượt là Button1, Button2, Button3,…

Hiệu ứng Ông già Nô En cho blog nhân dịp Giáng sinh

Giáng Sinh sẽ đến vào cuối tháng 12 này và chắc hẳn từ lúc này, bạn đã bắt đầu chuẩn bị trang trí cho blog của mình đẹp hơn, lạ mắt hơn để thu hút bạn đọc vào blog của bạn.

Có nhiều kiểu trang trí khác nhau cho blog nhân dịp Giáng Sinh. Sau đây là một kiểu trang trí độc đáo bằng một câu chúc Giáng sinh vui vẻ từ Ông già Nô En ngộ nghĩnh trượt khắp blog của bạn.

Xem Demo

Để 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/AVvXsEi-Rua2T5hZKgtTu3kgEnTx_G6PuTqNJRM3Bqq57vqur-zAlGvA-_l-F49dGBKND3PMhMpys2cQxEcYrjKi1q2Yv0HqD_0pZIR8w0cku7Gq6-bplcLIdE9ajnetCQeSY6FaJCCgqeX5LD8j/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.

Tùy biến với sidebar cho Blogger

(Huynh Nhat Ha's Blog) -- Phần sidebar trên Template của Blogger cũng có nhiều biến thể khác nhau. Có Template chỉ 1 cột, có Template 2 cột, thậm chí có thể thêm thành 3, 4 cột… Một số trường hợp phức tạp hơn, đặc biệt đối với dạng 1 cột, thì có thể chia thành 2 phần: phần trên gồm 1 cột, phần dưới chia thành 2 cột hoặc ngược lại, phần trên gồm 2 cột, phần dưới gồm 1 cột.

Lấy ví dụ, nếu sidebar trên Template của tôi có 1 cột thì cấu trúc HTML trong Template sẽ có dạng:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Nếu tôi muốn chia thành 2 phần mà phần trên gồm 1 cột và phần dưới chia thành 2 cột thì tôi phải thiết lập cấu trúc HTML trong Template như sau:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>

<div id='2columns'>
<div class='col-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div class='col-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
</div>

</div>

Sau đó cần thêm thuộc tính CSS cho phần 2 cột, thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Như vậy toàn bộ đoạn code CSS cho kiểu sidebar này có dạng như sau:

#sidebar-wrapper {
float:right;
margin-right:40px;
margin-top:-9px;
overflow:hidden;
width:296px;
word-wrap:break-word;
}
h2 {
border-bottom:1px solid #CCCCCC;
font:$headerfont;
color:$sidebarcolor;
letter-spacing:0;
margin:0 -10px;
padding:0 10px 5px;
text-transform:none;
}
.sidebar {
color:$sidebartextcolor;
font-size:90%;
line-height:1.5em;
}
.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-indent:-15px;
}
.sidebar .widget {
border-bottom:1px dotted #CCCCCC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Giải đáp yêu cầu của bạn Mai Ly: Nếu bạn muốn thêm một cột sidebar vào dưới 2 cột sidebar sẵn có nhưng có chiều rộng bằng tổng chiều rộng của 2 cột đó thì phải điều chỉnh một số điểm, đại khái như sau:

Bạn phải đặt một id có tên rightcol để chứa toàn bộ các cột sidebar, sau đó thêm vào một id có tên sidebar3, đặt code HTML như sau:

<div id='rightcol'>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label2' locked='false' title='Categories' type='Label'/>
</b:section>
</div>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='HTML100' locked='false' title='HTML' type='HTML'/>
</b:section>

</div>

Những phần được đánh dấu màu đỏ là phần thêm vào, những phần còn lại có thể không còn giống như trên Template của bạn bởi vì bạn đã thêm đủ thứ tiện ích vào đó rồi (ở đây chỉ giới thiệu nguyên gốc của Template lúc chưa chỉnh sửa).

Ở phần CSS thêm vào như sau (những phần được đánh dấu màu đỏ là phần thêm vào).

#rightcol {
float:right;
margin-top:182px;
overflow:hidden;
width:350px;
word-wrap:break-word;
}
#sidebar-wrapper {
float:right;
margin-right:20px;
overflow:hidden;
width:150px;
word-wrap:break-word;
}
h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iRnXQqDUZtlaHLnm8NUka9tG7dbk7UpIaP6ugJabKWPdYS4GTdQEBjQpJOx8BsgE_oz8G2oK9hU8dPWaDMD-osk4omU2S2SvJlKDtwTPsGRiZjQHGisZtx1ojz6waPG_PBBnn5p9oDSb/s1600/bg_sb_head1.gif) no-repeat scroll center top;
color:#000000;
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:78%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:32px;
letter-spacing:0;
line-height:1.4em;
margin:1.5em 0 0.75em;
padding-left:20px;
padding-top:7px;
text-transform:uppercase;
}
.sidebar {
color:#666666;
font-family:georgia;
line-height:1.5em;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.sidebar li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjefOz7Yr8X8rLV-iPFFmcq2HKUfLnCIgptVdrYEJ9HIxr0BtlFZWpr46p3lqReUqrRnQHnCMVqmqJJNpze0DaWT4x00FP9XXYZamLvgQemGaeYCMXfMyHmoa8EVjZYEJFvgvGRp-GLIBZ/s1600/bg_sb_arrow1.gif) no-repeat scroll 0 5px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
#sidebar h4 a.rsswidget {
margin-left:0;
overflow:hidden;
text-decoration:none;
}
#sidebar-wrapperL {
float:left;
overflow:hidden;
padding-left:25px;
width:150px;
word-wrap:break-word;
}
#sidebar3 {
float:right;
margin-top:0;
overflow:hidden;
padding-right:20px;
width:300px;
word-wrap:break-word;
}
#sidebar3 h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(URL_hinh anh) no-repeat scroll center top;
color:#000000;}
.widget-content {
padding-left:10px;
}

Bạn cần phải tạo một background cho tiêu đề của sidebar được thêm vào, sau đó upload lên host (hoặc lên Blogger) để lấy đường link rồi thay vào dòng URL_hinh anh.

Tạo nút Theo dõi Blog tự chế

Blogger vốn dĩ đã có tiện ích Người theo dõi (Followers) giúp người đọc dễ dàng theo dõi blogspot của bạn đồng thời tiện ích này cũng góp phần kết nối các blogger lại với nhau. :14)

Nếu bạn không muốn gắn tiện ích Người theo dõi mặc định của Blogger thì bạn có thể tạo một nút Theo dõi Blog (Follow this Blog) riêng biệt. Chỉ cần đặt đoạn code sau đây vào vị trí cần đặt nút Theo dõi Blog trong Template.

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXX" rel="nofollow" title="Theo dõi Blog này" target="_blank">Theo dõi Blog</a>

Thay XXXXXXXXX bằng số ID blog của bạn. Chuỗi số này nằm trên thanh địa chỉ của công cụ trình duyệt khi bạn đăng nhập Blogger ở chế độ chỉnh sửa Template hoặc đăng bài viết. Bạn có thể thay dòng Theo dõi Blog bằng một liên kết hình ảnh.

Nếu bạn muốn liên kết Theo dõi Blog được mở ở dạng cửa số popup thì bạn sử dụng đoạn code sau đây.

<script type="text/javascript">function openupFollow() { window.open("http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXX", "followblog", "height=600, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no" ); }</script>
<a href="javascript:openupFollow()" rel="nofollow" title="Theo dõi Blog này">Theo dõi Blog</a>

Chèn video Youtube tự động vào Blogger

Khi bạn muốn chèn một video trên Youtube vào blogspot của bạn thì trước tiên bạn lấy code embed trên Youtube. Lấy ví dụ sau đây là đoạn code cho một cảnh đấu võ trong bộ phim Diệp Vấn do Chung Tử Đơn thủ vai chính.

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/QQjztBXAnjk?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QQjztBXAnjk?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

Để đưa video trên vào blogspot thì bạn chỉ việc dán đoạn code đó vào bài viết ở chế độ Edit HTML. Tuy nhiên, đối với một blogspot chuyên giới thiệu về những bộ phim hay chứa nhiều video chẳng hạn, thì bạn sẽ phải đưa vào bài viết rất nhiều đoạn mã.

Có một cách đơn giản hóa việc chèn video vào blogspot. Trước tiên sử dụng Javascript để tạo chức năng chèn video Youtube tự động. Bạn hãy đặt đoạn code dưới đây vào trước thẻ </head> trong Template.

<script type='text/javascript'>
//<![CDATA[
function insert_YouTube(IDyoutube) {
var output = "<div style=\"text-align:center;\">";
output += "<object width=\"425\" height=\"350\" id=\"movie\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\">";
output += "<param name=\"movie\" value=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\" />";
output += "<param name=\"wmode\" value=\"transparent\" />";
output += "<param name=\"allowfullscreen\" value=\"true\" />";
output += "</object>";
output += "</div>";
document.write (output);
}
//]]>
</script>

Tiếp theo là tạo Javascript gọi chức năng chèn video Youtube để đặt trong bài viết.

<script>insert_YouTube("XXXXXXXXXXX");</script>

Trong đó XXXXXXXXXXX là ID của video.

Lấy ví dụ trong đoạn code cho màn đấu võ ở trên thì ID là QQjztBXAnjk. Như vậy để chèn video này vào blogspot thì đặt đoạn code như thế này.

<script>insert_YouTube("QQjztBXAnjk");</script>

Bằng cách này mỗi khi chèn một video trên Youtube vào bài viết thì bạn chỉ cần lấy ID của video đó và đặt vào đoạn code Javascript như trên là OK.