Cách sử dụng icon font cho blog/website

Icon font ngày được sử dụng rộng rãi trong các website hiện nay. Icon font mang nhiều ưu điểm:

• Giảm số lượng HTTP Request, giúp website của bạn load nhanh hơn.
• Dễ dàng thay đổi màu sắc, kích thước của biểu tượng.
• Cung cấp nhiều biểu tượng phù hợp giúp bạn tiết kiệm thời gian thiết kế.
• Có thể sử dụng CSS3 như transition, transform, text-shadow giúp các icon được linh hoạt hơn.

Ta có thể nhúng icons vào trong CSS đơn giản như sau:

@font-face {
  font-family: 'your-fonts';
  src: url('fonts/your-fonts.eot');
  src: url('fonts/your-fonts.eot?#iefix') format('embedded-opentype'),
       url('fonts/your-fonts.woff') format('woff'),
       url('fonts/your-fonts.ttf') format('truetype'),
       url('fonts/your-fonts.svg#[set]Foundicons') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
[class*="icon-"] {
    font-family: 'your-fonts';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}
 
[class*="icon-"]:before {
  content: "your-fonts-character";
}

Trong bài viết này mình sẽ giới thiệu các bạn về IcoMoon và We Love Icon Fonts.[post_ad]

IcoMoon

IcoMoon cung cấp cho bạn hơn 450 icons miễn phí. Bên cạnh đó ngoài những icons của IcoMoon, IcoMoon cho phép bạn lựa chọn và tải các icons bạn muốn với những bộ icons khác như Broccolidry, Entypo, Font Awesome...với số lượng lên đến gần 3800 icons. Ngoài ra IcoMoon còn cho phép bạn tải các thiết kế của bạn lên (tập tin SVG) để customize thành fonts bạn yêu thích.

We Love Icon Fonts

We Love Icon Fonts là một mã nguồn mở và dịch vụ lưu trữ miễn phí các icon fonts. Cũng như IcoMoon, We Love Icon Fonts cũng cung cấp cho bạn rất nhiều bộ icons miễn phí khác như Fontelico, Maki, Typicons, Zocial.

Một số icons fonts miễn phí khác

• Entypo
• Font Awesome
• Foundation Icon
• Meteocons
• Typicons
• Raphaël Icon

Làm thế nào để giới hạn số bài viết tại Trang chủ khi tìm kiếm

Làm thế nào để giới hạn số bài viết tại Trang chủ khi tìm kiếm Nay mình sẽ hướng dẫn các hạn chế số lượng bài viết xuất hiện khi tìm kiếm tại trang chủ.

Đầu tiên các bạn vào Blogger -> Mẫu -> Chỉnh sửa HTML sau đó tìm đoạn code giống như bên dưới.

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

Khi tìm xong và copy đoạn code này bên dưới rồi sau đó dán vào:

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
<input name='max-results' type='hidden' value='7'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

Ngay dòng màu vàng thì value có gán giá trị là "7", thì số "7" đó là số bài viết sẽ hiển thị trên trang chủ khi tìm kiếm.
Vậy các bạn muốn hiện bao nhiêu bài viết trên trang chủ thì chỉ thay số 7 bằng một con số khác. Thật đơn giản phải không.

CHÚC CÁC BẠN THÀNH CÔNG! Cám ơn các bạn đã xem bài viết.

Cách tạo popup thông báo khi thoát Website/Blog

Nay Phước An Blog sẽ hướng dẫn mọi người làm thế nào tạo popup thông báo khi thoát website/blog. Thì popup này xuất hiện khi có người vào truy cập vào website/blog của chinh mình thì khi thoát sẽ hiện thông báo hỏi có chắc muốn thoát không? hoặc các bạn có thể tận dụng popup này để gửi lời cám ơn mọi người đã đến website & chút một ngày tốt lành!!.

Dưới đây là popup khi thoát

Cách thực hiện: [post_ad]
- Bước 1: Đăng nhập vào Blogger
- Bước 2: Chọn Mẫu -> Tuỳ chỉnh HTML
- Bước 3: Tiếp theo copy toàn bộ đoạn script này và thêm trước thẻ </head>

<script> var exittraffic_splashalertmessage = "CÁM ƠN CÁC BẠN ĐÃ ĐẾN VỚI PHƯỚC AN BLOG"; </script>
<script type='text/javascript'>
//<![CDATA[
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

function DisableExitTraffic() {
PreventExitSplash = true;
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function addClickEvent(a, i, func) {
if (typeof a[i].onclick != 'function') {
a[i].onclick = func;
}
}
theBody = document.body;
if (!theBody) {
theBody = document.getElementById("body");
if (!theBody) {
theBody = document.getElementsByTagName("body")[0];
}
}
var PreventExitSplash = false;
var LightwindowOpening = false;
function DisplayExitSplash() {

if (PreventExitSplash == false) {


window.scrollTo(0, 0);
if (is_firefox) {
//window.alert(exittraffic_splashalertmessage);
}
PreventExitSplash = true;
if (is_chrome||is_firefox) {
timeout_variable = setTimeout("exittraffic_change_url();", 1000);
} else {
document.location.href = exittraffic_RedirectUrl;
}

return exittraffic_splashalertmessage;
}
}
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
disablelinksfunc = function() {
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
}

addLoadEvent(disablelinksfunc);

disableformsfunc = function() {
// Makes that clicking on the links on the page will not cause this popup to appear
var f = document.getElementsByTagName('form');
for (var i = 0; i < f.length; i++) {
if (!f[i].onclick) {
f[i].onclick = function() {
if (LightwindowOpening == false) {
PreventExitSplash = true;
}
}
}
else if (!f[i].onsubmit) {
f[i].onsubmit = function() {
PreventExitSplash = true;
}
}
}
}

function exittraffic_change_url() {
disable_confirmation = false;
clearTimeout(timeout_variable); // just to make sure
document.location.href=exittraffic_RedirectUrl;
}

addLoadEvent(disableformsfunc);
window.onbeforeunload = DisplayExitSplash;
//]]>
</script>

CHÚC CÁC BẠN THÀNH CÔNG! Cám ơn các bạn đã xem bài viết này.

Tạo hiệu ứng pháo hoa cho Blog/Website

Hôm nay Phướn An Blog chia sẻ đến các bạn làm sao tạo hiệu ứng pháo hoa ở ngay tại blog/website của các bạn.

Thì nay mình sẽ hướng dẫn cách làm để thêm pháo hoa.

Có thể xem mẫu thử tại đây:
Demo

Các bạn làm theo các bước dưới đây: [post_ad]
- Bước 1: Đăng nhập vào Blogger
- Bước 2: Chọn Bố Cục -> Thêm Tiện Ích -> HTML/Javascript
- Bước 3: Copy đoạn script bên dưới và dán vào.

<script type="text/javascript" src="http://yourjavascript.com/141525167513/hieuungphaohoa.js"></script>
<iframe src="http://www.nhaccuatui.com/mh/background/uCxytx9BioUS" width="1" height="1" frameborder="0" allowfullscreen=""></iframe>

- Bước 4: Lưu và xem kết quả.
CHÚC CÁC BẠN THÀNH CÔNG! Cám ơn các bạn đã xem bài viết này.

Share CODE Loading Đẹp Cho Wepsite/Blog

Hôm nay Phước An Blog sẽ chia sẻ đoạn code Load phần trăm mỗi khi click trang cho Web/blog

Phần 1. Chèn code HTML[post_ad]

Khi sao chép bài viết vui lòng ghi nguồn Phước An Blog.

B1- Đăng nhập (login) vào Blog
B2- Vào Bố Cục
B3- Vẫn Ỡ Bố Cục Chọn Tiện Ích => HTML/Javascript
B4- Chèn đoạn HTML Này Vào

<script> var bar=0 var line="||" var amount="||" function count(){ bar=bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.value=bar+"%" if (bar<99) {setTimeout("count()",125);} else {loaibo()} } </script> <div id="TGTH_Loading" align="center" style="position:fixed;visibility:hidden;-moz-opacity: 0.80px;background: #000000;filter: alpha(opacity=80);height: 100%;left: 0%;top: 0%;opacity: 0.80;width: 100%;z-index: 1001;"> <form name="loading"> <table align="center" style="position:fixed;top:11%; left: 0px;" height="90%" width="100%"><tbody> <tr><td valign="center"><p align="center" style="font-family:Verdana;color:red;font-size:20pt;font-weight:bold"> Welcome to Phước An Blog</p> <p align="center" style="font- family:Verdana;color:#295dc6;font-size:15pt;font-weight:bold"> Cảm Ơn Bạn Đã Dành Thời Gian Ghé Thăm Blog Nếu Thấy Hay Thì Like + Share Ủng Hộ Nhé</p> <p align="center" style="font-family:Verdanal;font-size:8pt"> <input style="border: medium none ; color: white; background-color:black; text-align: center;" size="47" name="percent" /><br /><input style="border-style: none; padding: 0px; font-weight: bolder; color:white ; font-family: Arial; background-color: rgb(53, 53, 53);" size="45" name="chart" /><br /><script>count()</script><b><font style="font-size: 8pt;" color="#ff6600" face="Verdana"> Đang tải dữ liêu … Đợi chút xíu nhé!</font></b></p> <br /><p align="center"style="font-family:Verdana;font-weight:bold"> <a href="Javascript:loaibo()()" style="color:yellow;font-size:10pt"> Nhấn vào đây nếu bạn không muốn đợi lâu </a></p> </td></tr> </tbody></table> </form> </div> <script type="text/javascript"> var once_per_session=1 function loaibo(){ document.getElementById('TGTH_Loading').style.visibility="hidden" document.cookie="TGTH_Loading=yes" } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { // if cookie exists offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function Dongloading(){ if (get_cookie('TGTH_Loading')=='') { Moloading() } } function Moloading(){ document.getElementById('TGTH_Loading').style.visibility="inherit" } if (once_per_session==0) Moloading() else Dongloading() </script>

CHÚC CÁC BẠN THÀNH CÔNG! Cám ơn các bạn đã xem bài viết này.

Hướng dẫn tạo popup like facebook ở góc cho blog/website

Các bạn đã vào blog mình chắc cũng thấy cái popup này sau khi các bạn tắt popup thì khoảng 1 ngày sau nó sẽ hiện lại. Vì popup này sẽ không gây cảm giác phiền phức cho người đọc.

Và sau đây mình xin hướng dẫn tạo popup like facebook ở góc cho blog/website các bạn làm theo mình như bên dưới.[post_ad]

Khi sao chép bài viết vui lòng ghi nguồn Phước An Blog.

Đầu tiên các bạn vào link này http://conversionsbox.com và sẽ hiện giao diện website đó.

Sau đó các bạn sẽ thấy một form để tạo like box (như hình dưới)

Ở đây các bạn điền như sau:

1.  Điền tiêu đề mà các bạn muốn 
2. Link fanpage facebook của các bạn
3. Click vào "Get The Code"

Khi đã nhấn Get The Code sẽ hiện một bảng là một đoạn javascript, copy đoạn javascript đó .

Vào Blogger chọn phần Bố cục -> Thêm tiện ích -> HTML/Javascript và dán đoạn javascript vừa copy sau đó nhấn Lưu và xem kết quả.