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.

Tạo bài viết liên quan cho blog theo label (nhãn)

Bài viết liên quan là loại bài có cùng label (nhãn) với nhau, khi các bạn xem một bài viết bất kỳ trên blog thì sẽ có các bài viết liên quan đến bài mà các bạn đang xem.

Bước 1: Tìm thẻ ]]></b;skin> này và sau đó dán đoạn css lên trên nó.

.post-ads{padding-top:0}
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
@media(max-width:600px){.post-ads{width:100%}.post-right{margin-left:0!important;width:100%;float:left}}
.post-body img{transition:all.3s;max-width:650px}
.post-right{margin:0 0 0 310px;padding:0 0 10px}
p.post-excerpt{overflow:hidden;margin:10px 0 10px 0;padding:10px;background-color:#f5f5f5;border:0 solid #eee;box-shadow:0 0 0 0 #B5B5B5;font-size:17px;line-height:1.5em}
#related-posts1{margin:10px 0}
#related-posts1 ul li{list-style-type:none;color:#0053f9;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts1 ul li a{color:#0053f9}
#related-posts1 ul li a:hover{color:#ff0000}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:5px}
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul{margin-left:0}
#related-posts1.fa{margin-right:5px}
#random-posts img{border-radius:1000px;border:5px solid;color:#dddddd;float:left;margin-right:5px;width:75px;height:75px;background-color:#F5F5F5;padding:3px;transition:all 0.2s linear 0s}

[post_ad]

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

Bước 2: Thêm đoạn Javascript bên dưới trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var titles = new Array();var titlesNum = 0;var urls = new Array();var time = new Array();function related_results_labels(c){for (var b = 0;b < c.feed.entry.length;b++){var d = c.feed.entry[b];titles[titlesNum] = d.title.$t;for (var a = 0;a < d.link.length;a++){if (d.link[a].rel == "alternate"){urls[titlesNum] = d.link[a].href;time[titlesNum] = d.published.$t;titlesNum++;break;}}
;}}
function removeRelatedDuplicates(){var b = new Array(0);var c = new Array(0);e = new Array(0);for (var a = 0;a < urls.length;a++){if (!contains(b,urls[a])){b.length += 1;b[b.length - 1] = urls[a];c.length += 1;c[c.length - 1] = titles[a];e.length += 1;e[e.length - 1] = time[a];}}
titles = c;urls = b;time = e;}
function contains(b,d){for (var c = 0;c < b.length;c++){if (b[c] == d){return true;}}
return false;}
function printRelatedLabels(a){var y = a.indexOf('?m=0');if (y != -1){a = a.replace(/\?m=0/g,'');}
for (var b = 0;b < urls.length;b++){if (urls[b] == a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);}}
var c = Math.floor((titles.length - 1) * Math.random());var b = 0;document.write("<ul>");if (titles.length == 0){document.write("<li>Không có bài viết liên quan → </li>");}
else{while (b < titles.length && b < 20 && b < maxresults){if (y != -1){urls[c] = urls[c] + '?m=0';}
document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8,10) + "/" + time[c].substring(5,7) + "/" + time[c].substring(0,4) + '">' + titles[c] + "</a></li>");if (c < titles.length - 1){c++;}
else{c = 0;}
b++;}}
document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length);}
;//]]>
</script>

Bước 3: Tiếp theo tìm thẻ <data:post.body/> này rồi sau đó dán đoạn code sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='qc-header-post'>
<div class='post-ads'>
Dán quảng cáo của bạn ở đây
</div>
<div class='post-right'>
<p class='post-excerpt'>
<data:post.snippet/>
</p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts1'>
<h4>
<i class='fa fa-bullhorn'/>
Bài viết liên quan:</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot;+ data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script><a class="home-icon" href="http://www.startruongit.net/" style="position:absolute;visibility:hidden;"></a>
</div>
</b:if>
</div>
</div>
</b:if>

**Lưu ý: trong bước 3 có đoạn code dòng là var maxresults=5 đó là số bài viết mà muốn hiện thị, nếu các bạn muốn hiện 3 bài viết liên quan chỉ cần đổi số 5 thàn số 3.

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

Hướng dẫn tạo chữ chạy với lệnh Marquee cho blog/website

Marquee là gì? Marquee là một mã HTML để làm cho một đối tượng có thể chuyển động. Marquee mã là một mã phổ biến vì nhiều blogger sử dụng mã này vào blog của họ, để tạo chữ chạy cho blog/website trong chuyên nghiệp hơn. Lệnh Marquee được thực hiện bằng cách sử dụng thẻ <marquee> {đối tượng}<marquee>

Một số các thuộc tính thường dùng của lệnh marquee:
- BGCOLOR="color" → tạo màu nền cho vùng hiện thị lệnh marquee (có thể dùng hình nền...).

- DIRECTION="left/right/up/down" → chọn hình thức chạy chữ ( trái, phải, lên, xuống...)

- BEHAVIOR="scroll/slide/alternate" → thiết lập kiểu chạy chữ .
Scroll → di chuyển tuần tự.
Slide → di chuyện 1 thời gian, sau đó dừng lại.
Alternate → di chuyển từ trái sang phải sau đó dừng lại.

- TITLE="message" → Một đọan tin nhắn nhỏ được hiển thị khi người dùng rê chuột vào.
- SCROLLMOUNT="number" → điều chỉnh tốc độ chạy
- SCROLLDELAY="number" → chỉnh thời gian hiển thị (tính bằng giây)
- LOOP="number|-1|infinite" → to manage sum of looping.
- WIDTH="number" → chỉnh độ rộng của vùng chạy chữ. Có thể dùng đơn vị pixel (px) hoặc phần trăm (%).[post_ad]

Một vài ví dụ:

- Ví dụ 1:

<marquee align="center" direction="left" height="100" scrollamount="2" width="100%">Chuyển động từ trái qua phải, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2</marquee>

Chuyển động từ trái qua phải, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2

- Ví dụ 2:

<marquee align="center" direction="left" height="200" scrollamount="4" width="100%" behavior="alternate">
Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)
</marquee>

Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)

- Ví dụ 3:

<div align="left"><font face="georgia" color="White"><b><marquee bgcolor="red" width="100%" scrollamount="3" behavior="alternate">
Chạy chữ với màu nền
</marquee></b></font></div>

Chạy chữ với màu nền

- Ví dụ 4:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="200" align="center">
Di chuyển xuống dưới,
dừng lại khi ta rê chuột vào,
chạy tiếp khi rê chuột ra
</marquee>

Di chuyển xuống dưới,
dừng lại khi ta rê chuột vào,
chạy tiếp khi rê chuột ra

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

Tạo tiện ích Thống Kê Cho Blog Chuyên Nghiệp Đẹp

Chắc hẳn những ai có Blogger thì chắc biết có 1 widget là thống kê cho blog hiển thị số lượt truy cập & mức độ biểu đồ tăng giảm.

Dưới đây là hình ảnh minh hoạ

Hướng dẫn:

- Bước 1: Các bạn đăng nhập vào Blog  => Bố cục

- Bước 2: Chọn Thêm Tiện ích => Thống kê blog => Chọn kiểu rồi bấm Lưu

*****Lưu ý: Các bạn để ý vào link của Widget các bạn vừa tạo và nhớ cái ID sau cùng của dòng link. Thường thì mặc định của Widget này là Stats1 

- Bước 3: Các bạn chọn Mẫu => Chỉnh sửa HTML => Chọn đến tiện ích lúc nãy các bạn vừa thêm, như của mình là Stats1 [post_ad]

Sau đó các bạn sẽ thấy 1 đoạn code

<b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<!-- Content is going to be visible when data will be fetched from server. -->
<div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
<!-- Counter and image will be injected later via AJAX call. -->
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
</b:if>
<span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Các bạn đổi thành code này

<b:widget id='Stats1' locked='false' title='Thống kê Blogspot' type='Stats' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2 class='iconthongke'><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Tổng số bài viết &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Tổng lượt Comments &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>

    </div>
  </div>
</b:includable>
  </b:widget>

- Bước 4: Tìm thẻ  </head> và sau đó chèn đoạn code này trên thẻ vừa tìm được.

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type='text/css'>
/* Blogger Custom Stats widget by Thinh ND */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>

- Bước 5: Cuối cùng Lưu Mẫ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.

Hiệu ứng hover cho bài viết đẹp cho blog

Hover là 1 hiệu ứng khi đưa chuột vào ảnh hay tiêu đề bài viết gì đó sẽ xuất hiện 1 hiệu ứng, hiệu ứng này sẽ giúp nhìn blog/website của các bạn trông rất chuyên nghiệp và đẹp. Hover giúp gây sự hứng thú cho người đọc, làm cho blog/website sinh động hơn.

Dưới đây là ảnh demo

Cảm thấy thế nào thật sinh động & chuyên nghiệp đúng không?
Bây giờ mình sẽ hướng dẫn các bạn làm:

Bước 1:

Đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML -> sau đó nhấn tổ hợp Ctrl + F gõ là ]]></b:skin>

Sau khi tìm xong, thêm đoạn css này trên thẻ vừa mới tìm được:

/* Included color classes.. .red .blue .yellow .green .orange .navy */ /* Icon set - http://ionicons.com */ @import url(http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); figure.snip1205 { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 220px; max-width: auto; width: 100%; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } figure.snip1205 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } figure.snip1205 img { max-width: 100%; vertical-align: top; } figure.snip1205 i { position: absolute; top: 50%; left: 50%; border-radius: 50%; font-size: 34px; color: ; width: 60px; height: 60px; line-height: 60px; background: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045); } figure.snip1205 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; } figure.snip1205.blue { background-color: #2472a4; } figure.snip1205.blue i { color: #20638f; } figure.snip1205.red { background-color: #ab3326; } figure.snip1205.red i { color: #962d22; } figure.snip1205.yellow { background-color: #e08e0b; } figure.snip1205.yellow i { color: #c87f0a; } figure.snip1205.green { background-color: #229955; } figure.snip1205.green i { color: #1e8449; } figure.snip1205.orange { background-color: #d67118; } figure.snip1205.orange i { color: #bf6516; } figure.snip1205.navy { background-color: #2b3c4e; } figure.snip1205.navy i { color: #222f3d; } figure.snip1205:hover img, figure.snip1205.hover img { opacity: 0.3; -webkit-filter: grayscale(100%); filter: grayscale(100%); } figure.snip1205:hover i, figure.snip1205.hover i { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

Vậy là xong phần đầu, các bạn muốn hiển thị trên blog thì làm bước sau đây.

Bước 2:

Đăng nhập Blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript

Sau đó copy và dán toàn bộ code dưới đây vào

/* Included color classes.. .red .blue .yellow .green .orange .navy */ /* Icon set - http://ionicons.com */ @import url(http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); figure.snip1205 { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 220px; max-width: auto; width: 100%; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } figure.snip1205 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } figure.snip1205 img { max-width: 100%; vertical-align: top; } figure.snip1205 i { position: absolute; top: 50%; left: 50%; border-radius: 50%; font-size: 34px; color: ; width: 60px; height: 60px; line-height: 60px; background: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045); } figure.snip1205 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; } figure.snip1205.blue { background-color: #2472a4; } figure.snip1205.blue i { color: #20638f; } figure.snip1205.red { background-color: #ab3326; } figure.snip1205.red i { color: #962d22; } figure.snip1205.yellow { background-color: #e08e0b; } figure.snip1205.yellow i { color: #c87f0a; } figure.snip1205.green { background-color: #229955; } figure.snip1205.green i { color: #1e8449; } figure.snip1205.orange { background-color: #d67118; } figure.snip1205.orange i { color: #bf6516; } figure.snip1205.navy { background-color: #2b3c4e; } figure.snip1205.navy i { color: #222f3d; } figure.snip1205:hover img, figure.snip1205.hover img { opacity: 0.3; -webkit-filter: grayscale(100%); filter: grayscale(100%); } figure.snip1205:hover i, figure.snip1205.hover i { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

Sau khi các bạn dán thì hãy nhớ chỉnh sửa lại link liên kết & link ảnh đúng Blog mình nhá

Để thay icon thì các bạn vào đây Click vào đây

Rồi cuối cùng là lưu.

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 thay đổi favicon cho blogspot/blogger

Chắc ai cũng lướt web đều thấy icon nhỏ trước tiêu đề trên một tab trình duyệt khi vào blog/website và đó chính là favicon. Blog xin giới thiệu về nó & cách tạo ra thay đổi favicon cho blog/website ngay sau đây.

Về kích thước nó chỉ có là 16x16 pixels, nó luôn được lưu dưới dạng là .ico 

Về cách tạo favicon, thì hiện nay rất có nhiều website miễn phí tạo ra favicon

• Favicon.cc
• Favicongenerator.com
• Genfavicon.com
• Myfaves.in
• Dynamicdrive.com
• Favicon-generator.org
• Favicon.co.uk
• Degraeve.com

Cách đưa favicon vào blog khi đã tạo .ico xong 

Đăng nhập Blogger -> Bố cục -> favicon (chỉnh sửa)

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 cửa sổ popup fanpage facebook trên Blogspot/Blogger

Các blogger hoặc vài người có 1 website đều muốn giới thiệu đến fanpage của mình đến cho độc giả, khi độc giả xem bài viết không hiểu thì có thể qua fânpage mà inbox qua giải đáp.

Sau đây Blog sẽ hướng dẫn các bạn làm đều đó

Bước 1: Vào đăng nhập Blogger

Bước 2: Các bạn chọn Blog mà các bạn muốn hiện popup fanpage

Bước 3: Tiếp theo, các bạn làm theo các mục hướng dẫn để thêm:

chọn Bố cục -> Thêm tiện ích -> HTML/Javascript

Bước 4: Các bạn copy đoạn code bên dưới này & dán vào

<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #18a2f7;
    width: 410px;
    height: 235px;
    position: absolute;
    top: 32%;
    left: 35%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "THÍCH TRANG PHƯỚC AN BLOG [X]";
    padding: 5px 8px;
    background: #18a2f7;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #0000EE;
    font-size: 11px;
    text-decoration: Tahoma;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/phuocanofficial&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 400px; height: 200px;'></iframe>
<div id="fbox-link">Nhấn - [Thích Trang] - Đã Rồi Tắt Nhé :* <a style="padding-left: 0px;" href="http://www.tranphuocan.tk" rel="nofollow">Phước An Blog</a></div>
</div>
</div>

trong đó

• phần màu đỏ là để thay đổi thời gian xuất hiện của popup fanpage khi vào blog hoặc chuyển trang, 5000 tương ứng với 5giây.

VD: các bạn muốn 3giây hiện thì chỉ việc sửa 5000 thành 3000.

• còn phần màu xanh là địa chỉ link fanpage để popup để hiện, hay thay dòng màu xanh trên thành địa chỉ fanpage của bạn.

Bước 5: Cuối cùng là Lưu & 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.

Chia sẻ Ebook 56 tổng hợp thủ thuật Blogspot/Blogger

Blogspot là một trong những sản phẩm của Google.

Ngoài việc sử dụng như một blog cá nhân, bạn cũng có thể tận dụng và tùy biến Blogspot như một trang web cá nhân hay sử dụng làm trang bán hàng, kinh doanh, v.v.. cũng khá hiệu quả.

Ưu điểm của Blogspot là bạn không phải lo lắng về vấn đề băng thông. Nếu bạn có kiến thức về chỉnh sửa code, bạn có thể tùy biến Blogspot hơn cả một trang web cá nhân và chuẩn Seo thân thiện.

Ebook tổng hợp những bài thủ thuật đơn giản và cơ bản cần có cho một Blogspot.

Nội dung của Ebook này bao gồm:

• [01] Sữa lỗi không hiện Avatar comment
• [02] Tạo Read More (Đọc tiếp) một cách tự động V4
• [03] Tạo nút nhấn cho phép ẩn hiển các widget (tiện ích) khi click vào nó
• [05] Chèn thêm khung Add a gadget (Thêm tiện ích) cho phần Header và Main
• [06] Tùy chỉnh số bài viết hiển thị ở trang Label (Nhãn)
• [07] Ẩn ngày đăng bài viết
• [08] Tạo cửa sổ Popup khi rê chuột vào ảnh
• [09] Bỏ đường viền ảnh khi chèn hình vào blog
• [10] Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive (Lưu trữ) và Label (Nhãn)
• [11] Loại bỏ Read more ở trang tĩnh (static page)
• [12] Tạo màu nền riêng biệt cho các comment
• [13] Thêm tiện ích "Recent comments" cho Blogspot
• [14] Kích hoạt Feed cho Blogspot với Feedburner
• [15] Sửa lỗi ảnh tràn ra ngoài khung bài viết
• [16] Cấm click chuột phải trên Web, Blog
• [17] Không cho quét khối và copy văn bản
• [18] Vô hiệu hóa chức năng Copy, Paste
• [19] Không cho click chuột phải lên hình ảnh
• [20] Button lên, xuống, vào giữa trang blog
• [21] Tạo bài viết liên quan (Related Posts)
• [22] Điều chỉnh bề rộng khung comment, thu hẹp khoảng cách dưới khung
• [23] Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng
• [24] Chèn ảnh luôn hiện ở phía trước mặt Blog
• [25] Chỉ hiển thị widget (tiện ích) khi xem các bài viết của một nhãn nhất định
• [26] Ẩn widget tại trang chủ hay trang riêng biệt
• [27] Tạo số đếm thứ tự cho các comment
• [28] Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh hơn
• [29] Tiện ích hiển thị tổng số bài viết và comment
• [30] Chèn code vào bài viết hoặc comment
• [31] Chèn nền Flash (hoa rơi, tuyết rơi,…) cho blog
• [32] Hiệu ứng hoa, lá, tuyết rơi,... trên nền blog
• [51] Hiệu ứng tuyết rơi cho blog
• [33] Khung thông báo cho blog
• [34] Chèn Emoticons vào comment
• [35] Click chuột vào button, một hộp thoại hiển thị
• [36] Tạo dáng cho trỏ chuột với hình ảnh bất kỳ
• [37] Sao rơi theo trỏ chuột
• [38] Form comment đẹp cho Blogspot
• [39] Tự động Refresh blog, website sau thời gian chỉ định
• [40] Tự động chuyển Domain khi vào blog, website
• [41] Tạo bảng "Admin Control Panel"
• [42] Chèn Box Google Search vào blog
• [43] Hiệu chỉnh tiêu đề cho blog
• [44] Tạo màu chữ, nền comment riêng cho chủ blog
• [45] Tiện ích phân trang PageNavi và một số style
• [46] Thêm chú thích cho nhận xét của chủ blog
• [47] Kwicks Slider for Blogger – Tạo slide trình diễn bài viết
• [48] Xóa số đếm sau mỗi nhãn (label)
• [49] Xóa thông báo: Hiển thị các bài đăng có nhãn…
• [50] Khắc phục lỗi không hiện đủ bài viết trên blog
• [52] Hướng dẫn sửa Lỗi: Missing required field "updated" hCard "author" "entry-title"
• [53] Cách thêm comment facebook vào Blogspot và hướng dẫn quản lý comment
• [54] Tạo nút like Facebook, Google+, Tweet,…
• [55] Tạo site map cho Blogspot
• [56] Tổng hợp một số code thông dụng dùng trong bài viết

Nguồn: caytamgui

Tạo khung nhận xét, làm nổi bật phân biệt bình luận của admin cho blogspot

Phải chăng ai cũng muốn Blog mình khi bình luận nhận xét một bài viết nào đó thì luôn muôn nhận xét của admin luôn nổi bật hơn các khác truy cập vào blog mình bình luận, thì sau đây Blog xin hướng dẫn các bạn làm như sau:

Bước 1: Đăng nhập vào blogger
Bước 2: Chọn Mẫu -> Chỉnh sửa HTML
Bước 3: Nhân tổ hợp phím Ctrl + F để tìm thẻ ]]></b:skin>
Bước 4: Copy đoạn css bên dưới & dán vào trước thẻ vừa tìm

.comments .comments-content .icon.blog-author{background-repeat:no-repeat;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLTTMlTHukwz8j9ouCS3IUXNya2KmXjpH1LLmPy7rRiDMIRUnJTrcr1RTFGRL_2GxKXPV-4j1jjanWEQ6BO5vLM3vAWTDbi6tYxFIkHvUy7emzr4uZd8i5xj5Di9viqc4MJAkuR_IlVo/s1600/icon.png);display:inline-block;height:20px;margin-right:3px;width:20px;}

Cuối cùng là save (lưu mẫu)

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

Bỏ đường viền ảnh khi chèn hình vào blog

Giới thiệu: Nếu bạn đăng hình lên blog và thấy có đường viền bao quanh ảnh. Điều này khiến bạn không hài lòng, nhất là với những ảnh trong suốt, xuất hiện đường viền thật không đẹp tí nào, và lúc này bạn muốn bỏ nó đi. Thủ thuật đơn giản sau sẽ giúp bạn loại bỏ đường viền đáng ghét ấy.CÁCH THỰC HIỆN 

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Tìm dòng .post img {

- Đoạn code có dạng như sau:

.post img {
max-width: 480px;
min-width: 10px;
clear: both;
padding: 0px;
border:1px solid #343434; /*Viền ảnh*/
}

- Cũng có template code có dạng khác, nếu không tìm thấy thì:

- Tìm dòng img {

- Đoạn code có dạng như sau:

img {
border:0px;
padding:0px;
max-width: 570px; /*not working in IE6*/
min-width: 1px;
border:1px solid #343434; /*Viền ảnh*/
}

border: Là code tạo viền bao quanh ảnh. Bỏ nguyên dòng border đi thì không còn viền ảnh nữa.

Bước 2: Save template. (Lưu mẫu)

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

Tối ưu thẻ Robots.txt chuẩn nhất cho Blogspot

Hướng dẫn tối hóa cho file Robot.txt

Đầu tiên đăng nhập vào Blog => Cài đặt => Tùy chọn tìm kiếm (“Robots.txt tùy chỉnh” và “Thẻ tiêu đề robot tùy chỉnh”)

1. Code tối ưu “Robots tùy chỉnh” Chọn chỉnh sửa => Yes => Paste đoạn Code dưới đây và Lưu thay đổi.

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html
Sitemap: http://www.tranphuocan.tk/feeds/posts/default?orderby=UPDATED

Tag	Ý nghĩa
User-agent: *	Xác định các công cụ tìm kiếm mà quy tắc được áp dụng.
Disallow: /	Báo cho công cụ tìm kiếm biết nó không nên "Lục lọi" ở những file này.
Allow: /	Cho phép công cụ tìm kiếm index đọc tất cả các nội dung.
tranphuocan.tk	Thay thành địa chỉ trang của các Bạn.

2. Cài đặt tối ưu cho “Thẻ tiêu đề robot tùy chỉnh” Chọn chỉnh sửa => Yes => thiết lập như hình bên dưới và Lưu thay đổi.

Tag	Ý nghĩa
all	Cho phép công cụ tìm kiếm lập chỉ mục.
noindex	Không hiển thị trang này trong kết quả tìm kiếm.
nofollow	Thông báo cho công cụ tìm kiếm không nên lần theo các liên kết này.
none	Tương tự như nonidex và nofollow.
noarchive	Không hiển thị một liên kết "Cached" trong kết quả tìm kiếm.
nosnippet	Không hiển thị một đoạn mã trong kết quả tìm kiếm cho trang này.
noodp	Không sử dụng dữ liệu từ các dự án Open Directory (DMOZ) cho tiêu đề hoặc đoạn hiển thị cho trang này.
notranslate	Không cung cấp bản dịch của trang này với các ngôn ngữ khác trong kết quả tìm kiếm.
noimageindex	Không lập chỉ mục cho hình ảnh trên trang này.
unavailable_after	Không hiển thị trang này trong kết quả tìm kiếm sau khi ngày/thời gian quy định. Ngày/thời phải được xác định trong các định dạng RCF 850.

Kết luận: vậy là quá trình cài đặt đã xong cũng đơn giản phải không, nhưng chủ yếu các bạn có sử dụng nó phù hợp với Blog hoặc Website của mình hay không.