Friday, September 30, 2011

TẠO CHỮ ĐỔI MÀU LIÊN TỤC

Để tạo sự chú ý cho một đoạn văn bản hoặc một thông báo, các bạn có thể tạo sự nổi bật cho đoạn văn bản đó bằng cách cho các chữ đổi màu liên tục, thủ thuật này khá đơn giản nhưng không kém phần đẹp mắt, các bạn xem các chữ thí dụ phía dưới.





Để làm được điều này, rất đơn giản, các bạn chỉ cần đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất các các code phía dưới vào

<b>
<script>
var text="NỘI DUNG ĐOẠN VĂN BẢN BẠN ĐẶT VÀO ĐÂY, SAU DẤU NGOẶC KÉP"
var speed=40
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</b>

Bây giờ, bạn thay đổi nội dung nhập và tốc độ chuyển đổi của chữ theo ý mình muốn (các chữ và con số màu xanh). Cuối cùng bấm Lưu lại và trở lại Blog xem kết quả.
CHÚC CÁC BẠN THÀNH CÔNG!!!



Wednesday, September 28, 2011

GẮN LOGO CHO BLOG

Trong máy tính của bạn đang có nhiều ảnh đẹp và bạn muốn gắn làm Logo (ảnh đại diện) cho Blog? Bạn có thể gắn bất kỳ Logo nào (ảnh động ảnh tĩnh đều được) vào bên trái của blog, bên phải của blog, chính giữa hoặc ở góc trên bên phải, góc dưới bên trái....kèm theo là lời chào hoặc tên blog của bạn. Logo này sẽ trượt theo chuột khi bạn xem blog.


Để gắn được Logo vào Blog, đầu tiên bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code phía dưới vào.
<div id="imgLOAD" style="position:fixed;top:300px;right:500px" align="center">
Hello!!!.. <br/>
<img src="http://blog.flamingtext.com/blog/2010/12/09/flamingtext_com_1291959905_27498.gif"/></div>

Bây giờ, bạn có thể thay đổi top (đầu trang), right (góc phải), chữ Hello!!! thành chữ bạn muốn và thay đổi link hình của bạn ở dòng lệnh img src=.......
Cuối cùng lưu lại và trở vào Blog xem kết quả
Mách nhỏ: Các bạn nên gắn Logo là ảnh động thì sẽ đẹp hơn

Tuesday, September 20, 2011

TẠO KHUNG CHỨA NỘI DUNG TỰ ĐỘNG THAY ĐỔI

Với thủ thuật này, các nội dung được hiển thị trong khung sẽ tự động thay đổi  theo thời gian, ở mỗi khung các bạn có thể tạo một hoặc nhiều nội dung khác nhau.
Để hiểu rõ hơn, các bạn bấm vào xem thử để trải nghiệm nhat







Đầu tiên, bạn đăng nhập vào Blog > Chọn Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm, gõ vào hộp đó lệnh<head> và dán code phía dưới vào sau dòng lệnh <head>

<script src='http://traidatmui-tips.googlecode.com/files/content_slider.js' type='text/javascript'/>

Tiếp tục, bạn gõ vào ô dòng lệnh:  ]]></b:skin> và dán code phía dưới vào trên dòng lệnh ]]></b:skin>


.sliderwrapper{
position: relative;
overflow: hidden;
border: 10px solid #000099;
border-bottom-width: 6px;
width: 400px; /*Độ rộng của khung*/
height: 250px; /*Chiều cao của khung*/
}

.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
background: #ddd; /*màu nền của khung chứa các nội dung bên trong */
width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/
text-align: center;
background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
border:1px solid #fff;
text-decoration: none;
color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/
background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/
}

.pagination a:hover, .pagination a.selected{
color: #fff;
background: #3333cc;
}



Bạn có thể thay thế màu nền, kích thước khung...theo các chú thích ghi trong code
Cuối cùng, bấm Lưu mẫu và trở về thiết kế > thêm tiện ích HTML/Javacript rồi dán các code phía dưới vào

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Nội dung 1 muốn hiển thị nhập vào đây
</div>

<div class="contentdiv">
Nội dung 2 muốn hiển thị nhập vào đây
</div>

<div class="contentdiv">
Nội dung 3 muốn hiển thị nhập vào đây
</div>

<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây
</div>

</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>



Bây giờ bạn nhập nội dung mà mình muốn hiển thị vào, code này có 4 nội dung, nếu muốn thêm nhiều nội dung hơn thì bạn copy code này

<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây </div>


dán vào phía dưới sau mỗi dòng nội dung theo mẫu


Nguồn: Trai đất mũi

Tuesday, September 13, 2011

HIỂN THỊ TIÊU ĐỀ BÀI VIẾT TRONG MỘT NHÃN (KIỂU 2)

Trước đây, tôi có chia sẻ cho các bạn bài HIỂN THỊ TIÊU ĐỀ BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 1), nay tôi xin giới thiệu tiếp KIỂU 2. Kiểu 2 này cũng khá giống kiểu 1 chỉ khác đôi chút, các bạn xem hình.
Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất cả các code phía dưới vào.
<h2>TIÊU ĐỀ NHÃN</h2>
<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 600px;
}

#top-news {
width: 330px;
height:126px;
padding:5px;
border:#bbb solid 1px;
background:#eee;
font-size:12px;
}


#bottom-news {
width: 333px;
padding:5px;
}

#bottom-news-item {
width: 106px;
margin-right:5px;
float:left;
}

#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 120;
topheight = 120;

botheight = 100;
botwidth = 100;

fntsize = 12;
vnesize = 16;
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;


text = "comments";

showPostDate = true;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";


numposts =13;
label = "WIN XP";
home_page = "http://dungheineken.blogspot.com/";

</script>
<script src="http://sites.google.com/site/fdblogsite/js/vne-recent%28fix%29.txt" type="text/javascript"></script><blockquote></blockquote>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://dungheineken.blogspot.com/search/label/WIN XP" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPuWGexoOoHkLXKoCed5FPW-gGBfLrZLD9cJsDFebcHfo9iPPsZ0hUSlwxZ7iI4jMaH2pc_Gkk70wKk6AZxbwp6dUsAO8VDQqZ7CUXxjIizfp79KvJLgYpV61Ztp3MnqgydxZGsW5WXc/s1600/coollogo_com-273538502.png" /></a></div>
Bây giờ bạn thay hãy thay đổi tiêu đề nhãn, địa chỉ nhãn, địa chỉ Blog của mình, kích thước (có chú thích trong code)...để phù hợp với blog mình và Lưu lại là xong
Chúc các bạn thành công

Nguồn: Phan Dung

Monday, September 12, 2011

FLASH ĐẸP CHO BLOG (PHẦN 9)

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:







Sunday, September 11, 2011

HIỂN THỊ TIÊU ĐỀ CÁC BÀI TRONG NHÃN (KIỂU 1)

Blogger có cung cấp sẳn cho các bạn tiện ích tạo "nhãn" cho các bài viết, nếu các bạn chưa biết cách tạo nhãn thì xem BÀI NÀY.
Với thủ thuật dưới đây, tiêu đề các bài trong cùng một nhãn sẽ hiển thị thành 3 cột, cột đầu tiêu sẽ hiển thị bài viết mới nhất có hình kèm theo, cột thứ 2 sẽ hiển thị 2 bài viết kế tiếp và cột còn lại sẽ hiển thị tiêu đề các bài viết còn lại trong một nhãn (cột này bạn có thể tuỳ chỉnh số lượng tiêu đề bài viết). Cuối cùng có chữ  "READ MORE" Các bạn bấm vào XEM THỬ phía dưới để trải nghiệm trước.





Để làm được thủ thuật này, bạn đăng nhập vào blog > Chọn thiết kế > Thêm tiện ích HTML/Javacript, copy code phía dưới dán vào

<h2>Thủ thuật Win 7</h2>
<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(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.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(http://farm4.static.flickr.com/3574/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(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title{
background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.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(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.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] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.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 = "WIN 7"; // 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://www.dungheineken.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://dl.dropbox.com/u/66348944/Z_recent_label.js" type="text/javascript"></script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dungheineken.blogspot.com/search/label/WIN 7" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPuWGexoOoHkLXKoCed5FPW-gGBfLrZLD9cJsDFebcHfo9iPPsZ0hUSlwxZ7iI4jMaH2pc_Gkk70wKk6AZxbwp6dUsAO8VDQqZ7CUXxjIizfp79KvJLgYpV61Ztp3MnqgydxZGsW5WXc/s1600/coollogo_com-273538502.png" /></a></div>


Bây giờ bạn thay hãy thay đổi tiêu đề nhãn, địa chỉ nhãn, địa chỉ Blog của mình, kích thước (có chú thích trong code)...để phù hợp với blog mình và Lưu lại là xong
Chúc các bạn thành công




Nguồn: Trai đất mũi

Saturday, September 10, 2011

ẨN TIỆN ÍCH HTML

Blogger có cung cấp sẳn cho các bạn một số tiện ích để các bạn có thể gắn vào Blog như: Trang tìm kiếm, Người theo dõi, thống kê Blog, nhãn, trang...Trong số đó tiện ích HTML/Javacript có thể xem là tiện ích hữu dụng nhất, tiện ích HTML/Javacript dùng để chứa các mã HTML khác để tạo nên những Widget hữu dụng như: tạo đồng hồ, xem báo, lịch...với các code HTML tương ứng.
Với thủ thuật nhỏ dưới đây, các bạn có thể "hô biến" tiện ích này "biến mất" và cho nó "xuất hiện" ở một số trang trong Blog mà bạn muốn.
Đầu tiên, bạn cần phải xác định số thứ tự (ID) của HTML/Javacrip mà mình muốn làm thủ thuật. Cách xác định như sau: Bạn đăng nhập vào blog > chọn thiết kế và bấm vào chỉnh sửa  phía dưới của HTML/Javacript nào mà mình muốn để xem số thứ tự của HTML/Javacript đó. (Rê chuột vào ảnh để xem ảnh với kích thước lớn hơn).



Thường thì số thứ tự sẽ nằm cuối cùng ở địa chỉ HTML/Javacript.


Khi đã xác định được số thứ tự của tiện ích HTML/Javacript rồi, bạn đóng nó lại và bấm vào Chỉnh sửa HTML phía trên rồi dùng cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh </head> và copy các đoạn code tương ứng phía dưới dán trên dòng lệnh </head>.

* Ẩn HTML ở các trang bài viết:
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#HTML1
{display:none;}
</b:if>
</style>

* Ẩn HTML ở trang chủ:
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#HTML1
{display:none;}
</b:if>
</style>

* Ẩn HTML ở các trang hay nhãn:
<style type='text/css'>
<b:if cond='data:blog.url == "địa chỉ trang hoặc nhãn"'>
#HTML1 {display:none;}
</b:if>
</style>
.

Bạn thay thế các chữ màu đỏ cho thích hợp với yêu cầu của bạn và bấm Lưu mẫu. Bây giờ bạn trở lại Blog để xem "thành quả" nha 
Lưu ý: nếu muốn ẩn nhiều HTML thì bạn chỉ cần thêm các số thứ tự HTML vào phía dưới là xong. Ví dụ như: tôi muốn ẩn 3 HTML ở trang chủ thì thêm như sau:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#HTML1
{display:none;}
#HTML12 {display:none;}
#HTML5{display:none;}
</b:if>
</style>


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

Tuesday, September 6, 2011

LINK LIÊN KẾT CHẠY TỪ DƯỚI LÊN

Bạn có thể tạo tiện ích các link liên kết với hiệu ứng chạy từ dưới lên (hoặc từ trên xuống) để tiết kiệm không gian Blog, ngoài ra nó có thể trang trí Blog thêm đẹp...
Bạn xem thử tiện ích phía dưới





Để làm được như vậy, đầu tiên bạn đăng nhập vào Blog > chọn Thiết kế > chọn thêm tiện ích HTML/Javacript rồi dán một trong hai code tương ứng với mỗi mẫu phía dưới vào, chỉnh sửa lại cho phù hợp với bạn rồi bấm Lưu lại là xong

* Liên kết có hình nền

* Liên kết không có hình nền

Bây giờ, bạn thay đổi link liên kết ở dòng lệnh a herf=http:// địa chỉ liên kết
Thay đổi màu ở mục color
Thay đổi kích thước ở mục Width (chiều rộng), Height (chiều cao)
Thay đổi hình nền ở mục background (đối với code có hình nền)
Muốn chạy từ trên xuống thì thay đổi chữ "up" thành chữ "down"

Friday, September 2, 2011

TẠO THÔNG BÁO CHO COMMENTS

Ở cuối mỗi bài viết, các bạn sẽ thấy một khung comments (nhận xét), nơi đây để khách tham quan trao đổi hoặc gởi thắc mắc của bài viết đến với người quản trị blog..
Mặc định thì khung comments sẽ không có thông báo nào cả. (Rê chuột vào ảnh để xem ảnh với kích thước lớn hơn.)









 Các bạn có thể thêm phần thông báo cho khung comments bằng thủ thuật nhỏ dưới đây. Đầu tiên bạn đăng nhập vào Blog > chọn Cài đặt > chọn Nhận xét


Tiếp tục bạn kéo xuống phía dưới và tìm đoạn "THƯ THÔNG BÁO MẪU NHẬN XÉT" , bây giờ bạn gõ vào khung những dòng thông báo mà mình muốn gởi đến các khách tham quan khi comments




Cuối cùng kéo xuống phía dưới bấm Lưu cài đặt và quay trở lại blog xem kết quả nha!!!