tháng 4 2011 - Tạp chí thời trang và làm đẹp

Home » Archives for tháng 4 2011

Hiển thị thời gian tải trang cho blogspot

19:34 |

- Hiển thị thời gian tải trang cho blog giúp bạn kiểm tra tốc độ load trang web cho blog của bạn để có cơ sở cải thiện nó bởi vì về một phương diện nào đó, tốc độ tải trang web càng nhanh thì blog của bạn càng được ưa thích bởi người đọc hơn.

Để làm được điều này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML.
Đặt đoạn code bên dưới vào sau thẻ <head>.

<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime();
</script>

Tiếp theo đặt đoạn code bên dưới vào trước thẻ </body>.


<script type='text/javascript'>
var d2 = new Date();
var endtime = d2.getTime();
var totaltime = (endtime - starttime)/1000;
var result = Math.round(totaltime*100)/100;
document.getElementById("loadtime").innerHTML = "Thời gian tải trang: "+ result +" giây";
</script>

Lưu Template.
Bước 2. Đặt dòng code bên dưới vào một tiện ích HTML/JavaScript hay tại vị trí cần hiển thị thông tin tải trang.
<p id="loadtime"></p>

Tiện ích Tìm bài viết theo ngày

18:13 |

Có nhiều cách để tìm bài viết trên một blogspot, chẳng hạn như tìm bằng từ khóa trên công cụ tìm kiếm, tìm bài viết tại trang lưu trữ, tìm theo nhãn, tìm bài viết theo ngày tháng. Bài viết này sẽ hướng dẫn bạn cách tạo tiện ích Tìm bài viết theo ngày, một tiện ích cũng rất cần thiết cho blogspot. Bạn có thể xem Demo bên dưới.

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.

<style type="text/css">
#findXdate {
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#findXdate span {
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#findXdate select {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 60px;
}
#findXdate input {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}
</style>

<script type="text/javascript">
home_page = "http://tranphucminh.blogspot.com/";
timezone = "+07:00";
function submitdate(){
year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
if(year=="" || month=="" || day=="") {
alert("Vui lòng chọn ngày chính xác!"); return false;
} else {
self.location.href=tlink;
}
}
</script>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, lưu ý timezone tại Việt Nam chọn là +07:00.

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/Javascript và đặt đoạn code sau đây vào phần nội dung tiện ích.

<form id="findXdate" name="selectdate"><span>Tìm bài viết theo ngày</span>
<select name="day"><option value="" selected="selected">Ngày</option><option value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <select name="month"><option value="" selected="selected">Tháng</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="year"><option value="" selected="selected">Năm</option><option value="2010">2010</option><option value="2011">2011</option></select> <input type="button" onclick="submitdate()" value="TÌM"/></form>
Theo Blog Huynh-nhat-ha

Tạo menu ngang trên phần Header

16:19 |

Các Tempplate cơ bản của Blogger thường không có thanh menu ngang trên phần Header. Một kiểu menu như vậy giúp bạn có thêm không gian web để bố trí các liên kết cần thiết cho blog.
Để tạo kiểu menu này, bạn hãy thực hiện như sau.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code CSS sau đây vào trước dòng ]]</b:skin>.

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000;
border: 1px solid #000;
border-bottom: 0;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}
#linkbar a:hover {
color: #000;
background: #fff;
}

Bước 2. Tìm dòng <div id='header-wrapper'> và đặt trước nó với đoạn code bên dưới. (Đối với Template Simple sẵn có của Blogger hiện nay thì đặt trước thẻ <header>).

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Lưu Template.

Bước 3. Vào Page Elements. Bạn sẽ nhìn thấy trên đỉnh Template có một tiện ích tên là Linkbar nằm trên phần Header, nhấn vào nút Edit. Tại cửa sổ mới, bạn lần lượt thêm các URL và tên cho các liên kết.

Nguồn Blog Huynh Nhat Ha

Tạo Auto Readmore cho blog chuyên về phim

08:02 |

Đối với các blogspot chuyên giới thiệu về phim hay video được upload lên hoặc lấy từ Youtube.com thì để có được chế độ Readmore tự động lấy hình đại diện cho youtube video và đoạn trích dẫn thì cần phải sử dụng thủ thuật riêng chứ không dùng script tạo Auto Readmore cho các blog thông thường được.

Bạn có thể xem một ví dụ về một blogspot như vậy tại đây.

Để thực hiện thủ thuật 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 thẻ </head>.

<script type='text/javascript'><![CDATA[//><!]]></script>

Trong đoạn code trên, bạn có thể điều chỉnh các con số trong phần code được đánh dấu màu đỏ, lần lượt là số ký tự khi không có ảnh đại diện, số ký tự khi có ảnh đại diện, chiều cao ảnh đại diện, chiều rộng ảnh đại diện (px).

Bước 2. Tìm dòng code <data:post.body/> (hoặc <p><data:post.body/></p>) và thay nó bằng đoạn code bên dưới.

<div expr:id='"summary" + data:post.id'>[postlink]<data:post.url/>[/postlink]<data:post.body/></div>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>createVideoThumb2("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>createVideoThumb("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>

Bước 3. Để đăng youtube video lên blogspot trong trường hợp này thì bạn phải tạo tài khoản Youtube trên Youtbube.com hoặc nếu không thì bạn có thể tìm trên Youtube.com để lấy URL nguồn cho video. Để lấy URL, khi bạn xem một video nào đó trên Youtube.com hãy nhấp vào nút Share rồi copy URL trong khung. Bên dưới là một ví dụ.

http://www.youtube.com/watch?v=7g6jc_9OzhI

Bước 4. Trong bảng điều khiển Blogger, vào Settings (Cài đặt) >> Formatting (Định dạng), kéo xuống khung Post Template (Mẫu bài đăng) rồi dán đoạn mẫu sau đây vào khung Post Template.

endofvid
[starttext]
Nội dung bài đăng đặt ở đây
[endtext]

Nhấp SAVE SETTINGS để lưu cài đặt.

Trong đoạn mẫu ở trên thì, "endofvid" được dùng để cho Template hiểu rằng URL video hoàn thành, để bạn dán URL video ngay trước nó mà không có khoảng cách. [starttext] và [endtext] là các phần bao nội dung bài viết, nếu bạn cần viết mô tả nội dung video thì đặt vào giữa hai dòng này.

Bước 5. Vào Posting (Đăng bài) ở chế độ Compose. Trong phần nội dung, bạn đặt URL của video vào trước dòng endofvid, phần nội dung bài đăng thì đặt vào giữa 2 dòng [starttext] và [endtext]. Bên dưới là hình minh họa.

Lưu ý thủ thuật này chỉ áp dụng cho video được upload lên hoặc lấy từ Youtube.com.

Nguồn tham khảo: Xem >>

Gala Lễ Đăng quang Vietnam Idol 2010

23:44 |

Những hình ảnh gây chấn động con người !Đói nghèo & Lãng phí ? (Nên xem)

23:37 |

Kinh hoàng mới về sóng thần!

23:24 |

Phim Huynh đệ thời loạn

01:59 |

Hiển thị địa chỉ bài viết cuối bài viết trong Blogspot

01:37 |

(Traidatmui.com) – Ở một số blog hay web, bạn thỉnh thoảng sẽ nhìn thấy ở cuối mỗi bài viết có một khung chứa đường dẫn hay địa chỉ của bài viết mà người dùng đang xem. Cách này sẽ giúp cho người dùng có thể copy đường dẫn bài viết nhanh chóng để gửi cho bạn bè khi thấy bài viết hữu ích. Tuy nó cũng đơn giản nhưng có một số blogger có lẽ chưa biết cách để tạo tiện ích này. Hôm nay mình sẽ giúp bạn tạo tiện ích này cho Blogspot.

Hình ảnh minh họa

» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng tiện ích (Expand Widget Templates)
5. Tìm đến code bên dưới
<data:post.body/>

6. Chèn code bên dưới vào ngay sau code vừa tìm được
<b:if cond='data:blog.pageType == "item"'>
<textarea onclick='this.select()' rows='1' style='width:100%;text-align:center;'>
<data:post.url/>
</textarea>
</b:if>
Ở code trên chỉ là hiển thị địa chỉ bài viết, nếu muốn nhúng link bài viết vào blog chỉ sử dụng copy và past thì bạn có thể sử dụng code bên dưới thay cho code ở bước 6.

<b:if cond='data:blog.pageType == "item"'>
<textarea onclick='this.select()' rows='1' style='width:100%;text-align:center;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
</textarea>
</b:if>
7. Cuối cùng save template lại
Chúc bạn thành công

Tạo thanh HotNews sử dụng mootools cho blog

17:19 |

Với việc sử dụng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời gian xác định trước, ngoài ra còn có thêm button để điều chỉnh việc hiển thị các bài viết trên thanh hotnews.
Xem demo : LIVE DEMO

p1 Tạo thanh HotNews sử dụng mootools cho blog ~ vn222.com

☼ Các bước thực hiện:
1. Bạn đăng nhập vào tài khoản blogspot
2. Vào phần thiết kế (Design)
3. Chọn tiếp chỉnh sửa HTML (Edit HTML)

4. Thêm code bên dưới vào trước thẻ ]]></b:skin>
.hotnews{
width:448px; /* độ rộng của tiện ích*/
height: 20px; /* độ cao của tiện ích*/
text-align:center;
padding : 0px 0px 0px 82px;
clear : both;
color:#fff;
list-style-type : yes;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDmLMmmzAWItqFMdY8nc94PTwhSkYohI2sEpEm2lh44vieH8acD-o3hWL4LDnDRa4pKV3qZ6BUW62Q9J0sFBkAx9KwI6OHWfZQwSlo6PsQgB9z973YkHp4YnEOU32vdIGBSXOvbiOpPOl/) no-repeat left; /*Nền của tiện ích*/
border-right : 0px solid #ff0000;
border-left : 0px solid #0000ff;
}
.hotnews a{
color:#fff;}
.hotnews a:hover{
color:#00ffff;}

5. Save template lại
6. Trở lại phần tử trang thêm một tiện ích HTML/Javascript và thêm code been dưới vào phần tử đó.
<div class="hotnews">
<marquee onmouseout="this.start()" direction="left" ) align="center" scrollamount="4" onmouseover="this.stop()" width="100%" height="25" >
<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "";
bgTD = "";
imgwidth = 0;
imgheight = 0;
fntsize = 12;
acolor = "";
aBold = false; /*nếu muốn in đậm text bạn thay FALSE thành TRUE*/
icon ="» ";
text = "no";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = "» ";
numposts = 15; /*số bài viết hiển thị trong tiện ích này*/
home_page = "http://www.tranphucminh.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/
</script><script src="http://traidatmui-tips.googlecode.com/files/hotnews_post.js" type="text/javascript"></script></marquee></div>
Bạn hãy dựa vào các dòng text hướng dẫn (dòng màu xanh) trong code để có thể tùy chỉnh lại cho tiện ích phù hợp với blog của mình.
7. Sau khi hoàn tất việc chỉnh sửa thì bạn hãy save lại

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

Tạo 1 thanh thông báo nhỏ cho Blogger (tương tự plugin Stripe Ad của WordPress)

06:35 |

Nếu bạn nào đã từng xem qua các blog được viết dưới nền WordPress, sẽ thấy được một plugin gọi là Stript ad được tạo bởi MaxBlogPress .Plugin này giúp đăng các thông báo nhỏ tới người đọc. Đây là một tiện ích hay, vậy làm sao để thêm được vào Blogger ? Bài viết này sẽ giúp các bạn.

Bên dưới đây là hình ảnh của Stript ad . Mình đã áp dụng nó trên nền Blogger và hoạt động rất tốt

Nếu bạn cảm thấy thích tiện ích này, hãy đọc hướng dẫn cách cài đặt bên dưới nhé

Đăng nhập vào Blogger > Layout > Edit HTML (không cần bật Mở rộng Mẫu tiện ích) . Lưu ý là hãy back-up lại template để tránh trường hợp làm sai nhé.
# Thêm đoạn code này vào ngay trước thẻ ]]></b:skin>

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmPLFfYJafbIFDQQcpdFC8SvTKj1GTpONeiIbehicebT1eMffXqN0QGrq6GMN-RqDGsaDgF1T4Hth5AJ-wb7qGUW_UUAr5eMXiYpNGkb641ASc056CzbSA-4vBCmUGk8lVqI_7hDtsjc/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }
# Tiếp tục thêm đoạn code này vào ngay trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

# Cuối cùng, tìm thẻ </body> và thêm đoạn code sau (Với đoạn code cuối cùng này, bạn có thể tùy chỉnh theo ý thích, dưới đây là code của blog mình)

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/o1666055006' target='_blank'>Đã có hơn 100 người đăng kí nhận tin qua RSS, còn bạn thì sao?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='tranphucminh.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1MdbVSGTVeax1X-GR6Zzr0W9ZIoaL0778RuKuQ_3g6D4t7bqrDeY5kWlUSWA0gRhiLoj-Nh8CzmbrZy5GBzbianRw4wte_4bWIUYIAdzCDGe_AzTvCP9xVzXlxCLdq4ia62O_LTwIvY/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
# Lưu lại template và thưởng thức kết quả

Phim Mê Thảo - Thời Vang Bóng 2002

03:43 |

Phim Tỷ Phú Không Tiền

03:40 |

Phim Hải Đường Trắng

03:39 |

Phim hài hay nhất mọi thời đại:Saclo-Charlie Chaplin

02:45 |

Phim Tân thiếu lâm tự

02:36 |

Phim Phật Đà Truyền Kỳ

02:32 |

Phim Tân Tây Du Ký

18:10 |

Phim Người đàn ông 60 triệu đô

17:48 |

Phim Tiểu tử siêu quậy

17:44 |

ĐỀ CƯƠNG ĐỀ ÁN XÂY DỰNG NÔNG THÔN MỚI CẤP XÃ

20:20 |

MỞ ĐẦU

I. Sự cần thiết phải lập Đề án xây dựng nông thôn mới

Nêu lý do và sự cần thiết phải lập Đề án xây dựng nông thôn mới trên địa bàn xã.

II. Căn cứ pháp lý xây dựng đề án:

- Nghị quyết số 26-NQ/TW, ngày 05/8/2008 của Ban chấp hành Trung ương Đảng khóa X “về nông nghiệp, nông dân, nông thôn”;

- Quyết định 491/QĐ-TTg ngày 16/4/2009 của Thủ tướng Chính phủ về việc ban hành Bộ tiêu chí quốc gia về nông thôn mới và Thông tư số 54/2009/TT-BNNPTNT, ngày 21/8/2009 của Bộ Nông nghiệp và Phát triển nông thôn Hướng dẫn thực hiện Bộ Tiêu chí quốc gia về nông thôn mới;

Phim Chuyen Gia Xao Quyet - Chau Tinh Tri

20:08 |

Phim Nu Co Bac Bip - Chau Tinh Tri

20:06 |

Phim Quốc Săn 007 - Châu Tinh Trì

20:03 |

Hoạt hình Tom & Jerry

20:00 |

Phim Cuộc đời huyền thoại Lý Tiểu Long

18:36 |

Phim Dòng Máu Anh Hùng

18:30 |

Album Như Quỳnh

16:16 |

50 Bài Tân Cổ Giao Duyên Tuyển Chọn

08:29 |

Phim Ván bài lật ngửa

08:19 |

Phim Cánh Đồng Hoang

08:11 |

Phim Bao Giờ Cho Đến Tháng Mười 1984

08:07 |

Phim Em bé Hà Nội 1972

08:06 |

Phim Chuyện Tình Chàng Mắt Hí

08:03 |

Phim Buổi Sáng Đầu Năm

08:01 |

Phim Sống Trong Sợ Hãi

07:58 |

© Ghi Rõ Nguồn SVFU.VN Khi Đăng lại bài viết trên Website này.
»Hotline: 01644416591

© SVFU.VN | Designed by Svfu.Vn
Liên hệ | Điều khoản Sử dụng