Đưa nhạc tiếng (MP3,wma,wav...) và nhạc hình vào blog
Đối với nhạc hình và nhạc nhạc tiếng thì các bạn coppy đoạn code sau đây và đổi lại đoạn đường link đến file nhạc.mp3 hoặcđường link đến file nhạc.wmv thành đường link thật đến bài hát của bạn sau đó paste vào bài post là được
Nhạc tiếng: <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="đường link đến file nhạc.mp3" name="MediaPlayer1" width="400" height="80" autostart="0" showcontrols="1" showstatusbar="1" showaudiocontrols="1" showpositioncontrols="1" volume="100"></embed>

Nhạc hình: <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="đường link đến file nhạc.wmv" name="MediaPlayer1" width="400" height="80" autostart="0" showcontrols="1" showstatusbar="1" showaudiocontrols="1" showpositioncontrols="1" volume="100"><embed>
Đưa nhạc Flash vào blog
Đối với nhạc Flash thì các bạn chèn đoạn Code sau và nhớ thay đoạn đường link đến file nhạc.swf thành đường link đến file Flash thật nhé. <embed quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" src="đường link đến file nhạc.swf" type="application/x-shockwave-flash" width="400" height="300" loop="false"></embed> Nhưng để có được đường link thật sự của file nhạc mp3 hoặc nhạc hình thì lại là cả một vấn đề với các bạn phải không? Bởi vì có rất nhiều cách để lấy link nhạc nhưng không phải ai cũng biết, bởi vì đa số các trang web nhạc hiện nay đều khóa chuột phải vì vấn đề bảo mật. Vì vậy link trên thanh trạng thái chỉ là một đường link ảo, chính vì thế mà nhiều bạn coppy đường link đó rồi past vào trong đoạn code trên thì nhạc không chạy. Vì vậy cách đơn giản là các bạn download bài nhạc đó về và upload vào trong mục Myfile trong phần My acount của blog của bạn. Sau đó bạn click chuột phải rồi chọn Properties của file nhạc mới Upload lên và thay vào chỗ đường link đến file nhạc.mp3 hoặc đường link đến file nhạc.wmv . Còn nếu bạn nào muốn lấy link nhạc trong 1 số trang web nhạc lớn thì hãy tham khảo bài hướng dẫn lấy link nhạc Tại đây

Với tiêu chí tổng hợp thật nhiều style khác nhau cho tiện ích "Recent posts" hôm nay mình sẽ lại giới thiệu cho các bạn 1 style khác theo phong cách giống trang news.zing.vn . Style này giống với style giống trang vnExpress mà mình đã từng giới thiệu. Trong bài viết này mình có convert lại độ rộng để có thể hiển thị được trên blogspot.

Hình ảnh minh họa :

- Ở style này có thêm 1 điểm khác với các style cũ, là mình có chèn phần "Mô tả bài viết (summaryPost)" vào các link ở cột topo_news dưới dạng title. Các bạn có thể xem hình bên dưới :

☼ Các bước thực hiện thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Tạo widget HTML/javascript và dán code bên dưới vào :

Code

<style type="text/css">

*{ padding: 0;

margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news{
width: 525px;
margin: 5px;
}

#main_content{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news{
width: 234px; /*Độ rộng cột đầu tiên*/
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img{
border: 1px solid #CCC;
padding: 1px;
width:230px; /*độ rộng của ảnh ở cột đầu tiên*/
height:155px; /*Chiều cao của ảnh ở cột đầu tiên*/
}
#main_content .top1_news .top1_news_title{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a{
font-size: 16px;
color: #002392; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover{
text-decoration: underline;
color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/
}
#main_content .top1_news p{
text-align: justify;
}
#main_content .top1_news p a{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img{
vertical-align: bottom;
}
#main_content .top2_news{
width: 95px; /*Độ rộng cột thứ 2*/
float: left;
margin-left: 8px;
margin-top: 12px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image{
background: url(https://sites.google.com/site/vietlao2003/home/khunganhcot2.gif) no-repeat;
width: 90px; /*độ rộng của ảnh ở cột 2*/
height: 65px; /*chiều cao của ảnh ở cột 2*/
padding: 4px;
}
.top2_news_image img {
width:90px; /*độ rộng của ảnh ở cột 2*/
height:65px; /*chiều cao của ảnh ở cột 2*/
}

#main_content .top2_news h2{
padding-top: 2px;
}
#main_content .top2_news h2 a{
color: #000033;
text-decoration: none;
}
#main_content .top2_news h2 a:hover{
text-decoration: underline;
color: #ff0000;}

#main_content .top2_news .dot3x1{
background: url(https://sites.google.com/site/vietlao2003/home/3847739556_d334d7aa61_o.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news{
width: 174px; /*Độ rộng cột thứ 3*/
float: right;
background: url(https://sites.google.com/site/vietlao2003/home/nenbaivietcot3.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title{
background: url(https://sites.google.com/site/vietlao2003/home/thanhBaiviet%20khac.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li{
background: url(https://sites.google.com/site/vietlao2003/home/chimuc.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {
color: #ff0033;
text-decoration: underline;}
</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://sites.google.com/site/vietlao2003/home/nothumbnail.gif";

imgnew = "https://sites.google.com/site/vietlao2003/home/newicon.gif";

showRandomImg = true;
aBold = false;
summaryPost = 147; // Số kí tự hiển thị cho phần tóm tắt bài viết
numposts = 10; // số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)
topoTitle = "Bài viết khác";
label = "thu thuat blog"; // Nhãn bài viết hiển thị (nếu hiển thị tất cả bài viết thì không cần gõ nhãn)
home_page = "http://huunghi-t78.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

- Code màu cam : là độ rộng của ảnh lớn nhất
- Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn
- Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột : top1_news, top2_news, topo_news)
- Xem hình minh họa bên dưới :

- Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình (kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng 525px;)

- 2 dòng code màu đỏ bạn có thể thay đổi tùy thích (xem hình minh họa bên dưới)

☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới :

http://vietlao2014.googlecode.com/files/z-recent-label.js

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

(Theo Fandung)

Code dự phòng được dùng trong Blog Huunghi-t78.blogspot.com

Code

<style type="text/css">

*{ padding: 0;

margin: 0;

font-family: Arial;

font-size: 12px;

}

#index_news{

width: 650px;

margin: 10px;

}

#main_content{

width: 650px;

float: left;

overflow: hidden;

}

#main_content .top_news{

width: 650px;

margin-bottom: 10px;

}

#main_content .top1_news{

width: 345px; /*Độ rộng cột đầu tiên*/

float: left;

margin-top: 8px;

}

#main_content .top1_news .top1_news_image img{

border: 1px solid #CCC;

padding: 1px;

width:210px; /*độ rộng của ảnh ở cột đầu tiên*/

height:155px; /*Chiều cao của ảnh ở cột đầu tiên*/

}

#main_content .top1_news .top1_news_title{

padding: 8px 0;

text-align: justify;

}

#main_content .top1_news .top1_news_title a{

font-size: 16px;

color: #002392; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/

text-decoration: none;

}

#main_content .top1_news .top1_news_title a:hover{

text-decoration: underline;

color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/

}

#main_content .top1_news p{

text-align: justify;

}

#main_content .top1_news p a{

padding-left: 4px;

}

#main_content .top1_news p img, #main_content .top2_news img{

vertical-align: bottom;

}

#main_content .top2_news{

width: 100px; /*Độ rộng cột thứ 2*/

float: left;

margin-left: 8px;

margin-top: 12px;

padding-right: 6px;

}

#main_content .top2_news .top2_news_image{

background: url(https://sites.google.com/site/vietlao2003/home/khunganhcot2.gif) no-repeat;

width: 90px; /*độ rộng của ảnh ở cột 2*/

height: 65px; /*chiều cao của ảnh ở cột 2*/

padding: 4px;

}

.top2_news_image img {

width:90px; /*độ rộng của ảnh ở cột 2*/

height:65px; /*chiều cao của ảnh ở cột 2*/

}

#main_content .top2_news h2{

padding-top: 2px;

}

#main_content .top2_news h2 a{

color: #000033;

text-decoration: none;

}

#main_content .top2_news h2 a:hover{

text-decoration: underline;

color: #ff0000;}

#main_content .top2_news .dot3x1{

background: url(https://sites.google.com/site/vietlao2003/home/3847739556_d334d7aa61_o.gif) repeat-x center

center;

margin: 10px 0;

height: 1px;

font-size: 1px;

}

#main_content .topo_news{

width: 175px; /*Độ rộng cột thứ 3*/

float: left;

background: url(https://sites.google.com/site/vietlao2003/home/nenbaivietcot3.gif) no-repeat;

padding: 4px 1px 0 0px; /*Vị trí thanh Bài viết khác 3*/

}

#main_content .topo_news .topo_news_title{

background: url(https://sites.google.com/site/vietlao2003/home/thanhBaiviet%20khac.gif) no-repeat;

width: 176px;

height: 35px;

color: #FFF;

padding: 4px 0 0 40px;

font-weight: bold;

font-size: 12px; /*Cỡ chữ thanh Bài viết khác 3*/

}

#main_content .topo_news ul li{

background: url(https://sites.google.com/site/vietlao2003/home/chimuc.gif) no-repeat 8px 10px;

padding: 1px 12px 3px 20px;

list-style: none;

}

#main_content .topo_news ul li a{

color: #002392;

font-weight: bold;

font-size: 12px;

line-height: 1.5em;

text-decoration:none;

}

#main_content .topo_news ul li a:hover {

color: #ff0033;

text-decoration: underline;}

</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://sites.google.com/site/vietlao2003/home/nothumbnail.gif";

imgnew = "https://sites.google.com/site/vietlao2003/home/newicon.gif";

showRandomImg = true;

aBold = false;

summaryPost = 400; // Số kí tự hiển thị cho phần tóm tắt bài viết

numposts = 10; // số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)

topoTitle = "Bài viết khác";

home_page = "http://huunghi-t78.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>

<script src="http://vietlao2014.googlecode.com/files/z-recent-label.js" type="text/javascript"></script>

Xem tiếp ...

Thứ Hai, 18 tháng 4, 2011

Hướng dẫn đưa nhạc vào Blog

Thứ Năm, 14 tháng 4, 2011

Chèn link vào comment của blogger

Thứ Tư, 23 tháng 3, 2011

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

THỐNG KÊ

DỊCH VỤ

TAG

Quan tâm