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ả.

Thêm nút like và share (chia sẻ) vào bài viết của blog/website

Hiện nay mạng xã hội facebook được sử dụng rất rộng rãi vì thế các chủ blog và website tận dụng chức năng này để bài viết của blog/website sẽ đến với nhiều người qua công cụ "thích và chia sẻ " từ facebook  (như hình bên dưới này)

Cho nên, nay mình sẽ hướng dẫn các bạn thêm nút like và share (chia sẻ) vào bài viết của blog/website và các bạn làm theo mình như bên dưới theo các bước.[post_ad]

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

Bước 1: Đăng nhập Blogger

Bước 2: Chọn Mẫu -> Chỉnh sửa HTML.

Bước 3: Tìm thẻ ]]></b:skin> thêm đoạn CSS bên dướii này lên trên thẻ vừa tìm được.

.blg-socialls{display:block;position:relative;width:100%}
.section-quangcao>img{display:block;width:100%}
.fixed-height-250{height:250px;overflow:hidden}
.blg-hightlight{display:block;position:absolute;left:100px;top:-30px;animation:moved ease-in .3s;animation-iteration-count:infinite;transform-origin:50% 50%;-webkit-animation:moved ease-in .3s;-webkit-animation-iteration-count:infinite;-webkit-transform-origin:50% 50%;-moz-animation:moved ease-in .3s;-moz-animation-iteration-count:infinite;-moz-transform-origin:50% 50%;-o-animation:moved ease-in .3s;-o-animation-iteration-count:infinite;-o-transform-origin:50% 50%;-ms-animation:moved ease-in .3s;-ms-animation-iteration-count:infinite;-ms-transform-origin:50% 50%}
@keyframes moved{0%{transform:translate(0,0)}50%{transform:translate(5px,0)}100%{transform:translate(0,0)}}
@-moz-keyframes moved{0%{-moz-transform:translate(0,0)}50%{-moz-transform:translate(5px,0)}100%{-moz-transform:translate(0,0)}}
@-webkit-keyframes moved{0%{-webkit-transform:translate(0,0)}50%{-webkit-transform:translate(5px,0)}100%{-webkit-transform:translate(0,0)}}
@-o-keyframes moved{0%{-o-transform:translate(0,0);}50%{-o-transform:translate(5px,0);}100%{-o-transform:translate(0,0);}}
@-ms-keyframes moved{0%{-ms-transform:translate(0,0)}50%{-ms-transform:translate(5px,0)}100%{-ms-transform:translate(0,0)}}

Bước 4: Tìm <span class='rating'>5</span> </div> thêm đoạn HTML bên dưới sau dòng vừa tìm.

<section class='no-margin-bottom padding-top-20 padding-bottom-20 text-center'>
<div class='blg-socialls '><span class='blg-hightlight'/>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='true'/>
</div>
</section>

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 banner quảng cáo 2 bên blog/website

Hôm nay Blog hướng dẫn các bạn cách Tạo banner quảng cáo 2 bên blog/website, hình thức banner quảng cáo 2 bên này rất phổ biến các trang web lớn.

Tiện ích khi đặt banner này là: tận dụng diện tích website, gây chú ý cực cao với người đọc với hiệu ứng trượt theo chuột.

Hãy xem demo ngay tại đây

Sau đây blog xin hướng dẫn các bạn thêm banner, làm theo các bước:

1. Đăng nhập vào Blog
2. Vào Mẫu
3. Chọn "Chỉnh sửa HTML"
4. Copy đoạn mã bên dưới và đặt trên thẻ </body>.

[post_ad]

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

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">html{height:auto!important}body{background:#EEE;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="
https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/14079543_1739761206292007_6573830582385213032_n.jpg?oh=5db1b4b206aab42a7295efec48d9078d&oe=5842C940"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/14079543_1739761206292007_6573830582385213032_n.jpg?oh=5db1b4b206aab42a7295efec48d9078d&oe=5842C940"/>'); var no=100,hidesnowtime=0,snowdistance="pageheight",ie4up=document.all?1:0,ns6up=document.getElementById&&!document.all?1:0;function iecompattest(){return document.compatMode&&"BackCompat"!=document.compatMode?document.documentElement:document.body}var dx,xp,yp,am,stx,sty,i,doc_width=800,doc_height=600;ns6up?(doc_width=self.innerWidth,doc_height=self.innerHeight):ie4up&&(doc_width=iecompattest().clientWidth,doc_height=iecompattest().clientHeight);dx=[];xp=[];yp=[];am=[];stx=[];sty=[]; for(i=0;i<no;++i)dx[i]=0,xp[i]=Math.random()*(doc_width-50),yp[i]=Math.random()*doc_height,am[i]=20*Math.random(),stx[i]=0.02+Math.random()/10,sty[i]=0.7+Math.random(),(ie4up||ns6up)&&document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"></div>'); //]]> </script>

Trong đó:

• phần màu đỏ: là thay bằng link ảnh của các bạn mà muốn hiện.

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 lấy lại mã code của Google Analytics

Khi các bạn vào Google Analytics vẫn xem thấy số người truy cập vẫn là 0

Vì thế các bạn có thể xem lại code Google Analytics đã thêm trên website, có sửa đổi hoặc thêm rồi hay chưa?

Và để chắc chắn luôn là để thêm lại code mới. Sau đây thì mình xin Hướng dẫn lấy lại mã code của Google Analytics 

Đầu tiên: vào https://www.google.com/analytics sau đó đăng nhập bằng tài khoản google (nếu chưa có tài khoản google thì tạo tài khoản)

Sau đó các bạn chọn quản trị & làm theo các bước như trong hình bên dưới.

Khi các bạn làm bước 1 xong, làm bước 2 là chọn "Thông tin theo dõi" rồi làm theo như trong hình.[post_ad]

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

Các bạn đã chọn "Mã theo dõi" sẽ mở cho bạn khung mới bên phải, sau đó các bạn kéo xuống tới đây như trong hình, rồi copy đoạn code đó & dán vào trước thẻ </head>

CHÚC CÁC BẠN THÀNH CÔNG.

Chèn like box fanpage facebook vào blog mới nhất

Có rất nhiều blog/website hướng dẫn cách thêm "like box fanpage" này rồi, nhưng đa số tất cả các bài viết đều hướng dẫn là đều vào link này tại đây sau đó chỉ dán link fanpage vào và rồi copy tất cả vào blog là sẽ hiện like box.

Nhưng hôm nay Blog xin sẽ hướng dẫn cách thêm like box rất thuận tiện hỗ trợ & bố cục giao diện chuyên nghiệp đẹp thuận tiện cho người dùng khi cần thắc mắc.

Giao diện like box này sẽ có 3 cái select mà các bạn có thể lựa chọn: Tin nhắn, Dòng thời gian, Sự kiện.[post_ad]

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

Sau đây thì Blog xin hướng dẫn cách thêm like box, các bạn chỉ copy toàn bộ đoạn code này bên dưới &  paste vào trong Bố cục -> Thêm tiện ích. Rồi nhấn Lưu

<center><div class='widget-content'>
<div class="fb-page" 
data-href="https://www.facebook.com//phuocanofficial" 
data-tabs="messages, timeline, events"
data-small-header="true" 
data-adapt-container-width="true" 
data-hide-cover="false" 
data-show-facepile="false"
data-height="320">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com//phuocanofficial"><a href="https://www.facebook.com//phuocanofficial">Facebook</a></blockquote></div></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></div></center>

Thay các phần màu đỏ thành địa chỉ ID fanpage của các bạn vào.

CHÚC CÁC BẠN THÀNH CÔNG.