Tạo lưu trữ dạng lịch cho blogger với nhiều style đẹp

Với thủ thuật này Widget lưu trữ blog (Archive blog) mặc định của blogspot sẽ được biến đổi thành một lịch tuyệt đẹp Thủ thuật giúp bạn dễ dàng tạo ra một tiện ích lưu trữ lịch cho blog của bạn bằng cách sử dụng những bức hình nền tùy chọn.Đây là những bước hướng dẫn cơ bản.Bạn có thể tùy biến thêm nữa.

Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Layout)
3- Chọn Thêm Tiện ích (Add widget) => Chọn mục Lưu trữ Blog (Archive blog) -> nếu blog bạn đã có mục này thì có theer bỏ qua bước này.

4- Sau đó bấm vào chỉnh sửa (Edit) tiện ích lưu trũ blog đã được thêm. Và Chọn các tùy chọn sau đây như thể hiện trong ảnh:

-Chọn kiểu là danh sách phẳng.
-Tại mục tùy chọn bỏ chọn "Hiển thị Bài đăng cũ nhất trước".
-Chọn tần xuất kho lưu trữ định dạng hàng tháng, hàng ngày tùy ý bạn.

- Bấm Lưu để cập nhật cài đặt.

5- Bây giờ vào Mẫu (Template) => Sao lưu template của bạn lại => Chọn Edit HTML =>Tiếp tục (Proceed)
6-Tìm đoạn mã sau. (Lưu ý id thường là khác nhau "BlogArchive1" , có thể là "BlogArchive2" ,"BlogArchive3" ...)

<b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' type='BlogArchive'/>

Thay thế các mã trên trong (bước 6) với mã sau đây:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='toggle' var='interval'> <!-- Toggle not needed for Calendar --> </b:includable> <b:includable id='flat' var='data'> <div id='bloggerCalendarList'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </div> <div id='blogger_calendar' style='display:none'> <table id='bcalendar'><caption id='bcaption'> </caption> <!-- Table Header --> <thead id='bcHead'></thead> <!-- Table Footer --> <!-- Table Body --> <tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr> <tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr> <tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr> <tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr> <tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr> <tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr> </tbody> </table> <table id='bcNavigation'><tr> <td id='bcFootPrev'></td> <td id='bcFootAll'></td> <td id='bcFootNext'></td> </tr></table> <div id='calLoadingStatus' style='display:none; text-align:center;'> <script type='text/javascript'>bcLoadStatus();</script> </div> <div id='calendarDisplay'/> </div> <script type='text/javascript'> initCal();</script> </b:includable> <b:includable id='posts' var='posts'> <!-- posts not needed for Calendar --> </b:includable> <b:includable id='menu' var='data'> Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format </b:includable> <b:includable id='interval' var='intervalData'> Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format </b:includable> </b:widget>

7- Dán đoạn code bên dưới vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDYZe46qdESOM2YemRnPZ5mBOTO5qVmiHBJmmdoy1T3iwbeICUB2Ryg8fJvq09xglkzWSkXERQZn7w4A-PG3tXThFsfBdRyopCXdoMEvnrlUN0fVjkNrNkLRkKQ7XuF6ItHMWE6kDvCQ/s400/loading-trans.gif.png";
var bcLoadingMessage = " Đang tải....";
var bcArchiveNavText = "Xem lưu trữ";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);
}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}
function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}
function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>

8- Lưu mẫu của bạn và bạn đã gần như xong!
9- Thêm CSS tạo phong cách riêng.Bạn hãy chọn lựa 1 số mẫu sau đây có thể tùy chỉnh để hợp với màu nền với blog của bạn.
- Tìm thẻ ]]></b:skin> và thêm ngay phía trên nó 1 trong những đoạn mã css tương ứng sau đây:

Style Sáng - Nếu bạn đang sử dụng một chủ đề nhẹ hơn với nền trắng sau đó sử dụng mã này:

/* Start of Post Navigator by MBT (LIGHT Theme) ------ */ #calendarDisplay {display:none;} /* div that holds calendar */ #blogger_calendar { margin:0px auto 0px 0px;width:100%;} /* Table Caption - Holds the Archive Select Menu */ #bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif} /* The Archive Select Menu */ #bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;} /* The Heading Section */ table#bcalendar thead {} /* Head Entries */ table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;} /* The calendar Table */ table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff} /* The Cells in the Calendar */ table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;} /* Links in Calendar */ table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;} table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;} /* First Row Empty Cells */ td.firstCell {visibility:visible;} /* Cells that have a day in them */ td.filledCell { background:#fff;} td.filledCell:hover { background:#dddddd;} /* Cells that are empty, after the first row */ td.emptyCell {visibility:hidden;} /* Cells with a Link Entry in them */ td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7} td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7} /* Table Footer Navigation */ table#bcNavigation {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;} table#bcNavigation a:link {text-decoration:none;color:#0080ff} table#bcNavigation a:hover{text-decoration:underline;} td#bcFootPrev {width:10px;} td#bcFootAll{text-align:center;} td#bcFootNext {width:10px;} ul#calendarUl {margin:5px auto 0!important;} ul#calendarUl li a:link {} /* End of Post Navigator by MBT (LIGHT Theme) ------ */

Để thay đổi màu văn bản thay đổi 0080FF
Để thay đổi màu nền tìm mã này 53A9FF
Để thay đổi màu nền của ô hiện hành trong những điểm nổi bật tìm kiếm mã 72B9FF

Style Tối: Nếu bạn đang sử dụng một mẫu với nền đen hoặc tương tự hãy sử dụng mã này:

/* Start of Post Navigator by MBT (DARK Theme) ------ */ #calendarDisplay {display:none;} /* div that holds calendar */ #blogger_calendar { margin:5px 0 5px 10px;width:98%;} /* Table Caption - Holds the Archive Select Menu */ #bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif} /* The Archive Select Menu */ #bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;} /* The Heading Section */ table#bcalendar thead {} /* Head Entries */ table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd} /* The calendar Table */ table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333} /* The Cells in the Calendar */ table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;} /* Links in Calendar */ table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:underline;} table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;} /* First Row Empty Cells */ td.firstCell {visibility:visible;} /* Cells that have a day in them */ td.filledCell {} /* Cells that are empty, after the first row */ td.emptyCell {visibility:hidden;} /* Cells with a Link Entry in them */ td.highlightCell {background:#000000;border:1px solid #666666} /* Table Footer Navigation */ table#bcNavigation {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;} table#bcNavigation a:link {text-decoration:none;color:#F5F202} table#bcNavigation a:hover{text-decoration:underline;} td#bcFootPrev {width:10px;} td#bcFootAll{text-align:center;} td#bcFootNext {width:10px;} ul#calendarUl {margin:5px auto 0!important;} ul#calendarUl li a:link {} /* End of Post Navigator by MBT (DARK Theme) ------ */

Để thay đổi văn bản màu vàng tìm mã này F5F202

Style Girl 1: Dành cho những bạn thích Girl xinh

#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:150px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNntdOwNwjZVdhiOkxp_M3pYy349MlxjIzVfhBH4N49DyPo3oZ8XpKcKyc3cywW1Y_40h3_J_aJStzDT1-IOoHBXX6FBIwfhYiaUF6_Pk-kTlVOllKhhu-bRGbAJvsDdq4h7vbHmAyFAY/w250/YUIb.png) no-repeat 100% 0} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #2B2B2B;padding:1px;width:90%;color:#0D2B47;font-weight:bold;} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #1A1A1A;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border-radius:3px;color:#DFDFDF} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #D6D6D6;color:#0D2B47;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:#303030;background:rgba(0,0,0,0.41);border:1px solid #2C2C2C} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.53)} td.filledCell:hover{background:#EBEBEB;background:rgba(235,235,235,0.75)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#232F3F;border:1px solid #2B2B2B} table#bcalendar tbody tr td.highlightCell:hover{background:#1B4174;border:1px solid #2B2B2B} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:#DADADA;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#DADADA} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus img{display:block;width:80px;margin:10px auto}

Style Girl 2: Dành cho những bạn thích Girl xinh

#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqP6GMCPW7f9oEn0clp0__073skts2t8iBD7EOBxScI006NI3f1pbDtDC9qEI5dOJfRpfFAa2bvGx0Yw8f98y9YJWco2N6igQD2jszLdT1yJqGUM4O9NFPZ4d_C7FqG7mU0nQyQj8RXA/w250/AtsukoMaeda.png) no-repeat 50% -3px} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #0081BE;padding:1px;width:90%;color:#0591C7;font-weight:bold} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#01A5CE;border:1px solid #DCEFF5;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:white;background:rgba(255,255,255,0.45)} /* Cells that have a day in them */ td.filledCell{background:white} td.filledCell:hover{background:#D8F4FF} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#1BA3CE} table#bcalendar tbody tr td.highlightCell:hover{background:#00BAF5} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#DBF5FF} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus{background:white;padding:10px 0} #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

Style Girl 3: Dành cho những bạn thích Girl xinh

#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7cLwnmu5BkmK-PdR-mFPHp9-9pLOCstOmbwQi07YAv3eVZpWp0-ZbcKxQ0pLq7LJ7UnBS4PC1j8Xp5AEleKpdkadWQ0z2S0WaXhbcAhdTgEuGIRUaZGece2EST3AK1gs0Ke2CPDVyBk/w250/2011215_ohshimayuko.png) no-repeat 50% -10px} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:0 solid #420000;width:90%;color:#8B0101;font-weight:bold;} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #400;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #CCC;color:#500;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ td.firstCell{visibility:visible} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.54)} td.filledCell:hover{background:#EBEBEB;background:rgba(255,255,255,0.79)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#790000;border:1px solid #9E0000} table#bcalendar tbody tr td.highlightCell:hover{background:#B60000;border:1px solid #9E0000} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:#F1F1F1;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#DADADA} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus img{display:block;width:80px;margin:10px auto}

Style Girl 4: Dành cho những bạn thích Girl xinh

#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxm0BJpTLaRuEDPyMnxPjxxVKaZDkQOl56d8cdBhJ7ZV3Z6cowAmwVZRiJ0P-_W7OBJ6ZvxGz8RcuNSXpPxg6YVdvdbZj2kXUMQCLtOWH5qd58uWKyUDJ5-tqCixW20-GsAq1oJLSB5yM/w320/Minami.png) no-repeat 50% 0} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #BE3E00;padding:1px;width:90%;color:#B13100;font-weight:bold} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #FFC2AE;color:#CE3A01;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C54204;background:rgba(197,66,4,0.41);border:1px solid #C74E0A} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.53)} td.filledCell:hover{background:#FFE5D8;background:rgba(255,229,216,0.75)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#BE3206;background:rgba(190,50,6,0.8);border:1px solid #BE3E00} table#bcalendar tbody tr td.highlightCell:hover{background:#D63300;background:rgba(240,57,0,0.8)} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#FFE4DB} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus{background:white;padding:10px 0} #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

Style Girl 5: Dành cho những bạn thích Girl xinh

#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:170px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Q6HyRQcdNudwq1s4Ii-Of_R5cWCL8OE8i0e5wyxUANR8ePC_CYbhXwRtEV9-iSohVbyi57-ztdOiHWKUQHIcDDHeiC8fgrsuj0s67-rsKYvK1cLvGliAL-vZY48G1SJJmuTohj-ddwg/w250/Melody.png) no-repeat 50% -3px} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #BE002E;padding:1px;width:90%;color:#C70543;font-weight:bold} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#CE013A;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C50442;background:rgba(197,4,66,0.32)} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.53)} td.filledCell:hover{background:#FFD8E0;background:rgba(255,216,224,0.67)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#CC0039;background:rgba(204,0,57,0.59)} table#bcalendar tbody tr td.highlightCell:hover{background:#EB0042;background:rgba(243,0,49,0.59)} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#FFDBE5} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus{background:white;padding:10px 0} #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

10- Lưu mẫu lại và xem thành quả nha.

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

Read more »

Phân trang Navigation màu đen cho blogger

Đây là mãu phân trang mình sưu tầm với style đen rất dễ cài đặt và sử dụng. Khi cài đặt phân trang sẽ giúp blog của bạn nhìn rất chuyên nghiệp,đẹp mắt,thuận tiện theo dõi bài viết .Ngoài ra mình thấy thì tốc độ load trang cũng khá nhanh.Thôi bắt đầu thủ thuật nào !

Hình minh họa

Cách thực hiện :
B1- Đăng nhập vào blog
B2- Chọn Mẫu
B3- Chọn Chỉnh sửa HTML
B4- Chèn code bên dưới trước thẻ </body>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var postperpage=10;
var numshowpage=4;
var upPageWord ='« Previous ';
var downPageWord ='Next »';
var urlactivepage=location.href;
var home_page="/";
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
//]]>
</script>
</b:if>
</b:if>

B5- Chèn trước ]]></b:skin>

#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link{width:80px;text-align:center;display:inline-block;color:#fff;font:bold 12px Arial;text-transform:none;margin:0;padding:5px 5px;background:#555;border:1px solid #111}
.blog-pager,#blog-pager{clear:both;font:bold 12px Arial;text-align:center;padding:15px 10px}
.showpageNum a,.showpage a{background:#fff;text-decoration:none;white-space:nowrap;color:#222;margin:10px 3px;padding:5px 10px;border:1px solid #999}
.showpageNum a:hover,.showpage a:hover{color:#fff;text-decoration:none;background-color:#444;border:1px solid #000}
.showpageOf{display:none;margin:0}
.showpagePoint{color:#fff;text-decoration:none;background-color:#444;font-size:12px;margin:10px 3px;padding:5px 10px;border:1px solid #000}

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

Read more »

Tạo nút Back to Top với hiệu ứng từ jQuery

Hôm nay xin giới thiệu với các bạn tiện ích Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang.

                        

XEM DEMO

Kéo xuống cuối trang sẽ thấy

CÁCH THỰC HIỆN :
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn code sau trước thẻ </head> (nếu có rồi thì khỏi chèn tránh xung đột)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Bước 3: Chèn code sau trước thẻ </body>

<style type='text/css'>
#bttop{position:fixed;bottom:30px;right:30px;cursor:pointer;display:none;z-index:9999}
#top-arrow{display:block;width:41px;height:40px;background:#111;border:1px solid #000;border-radius:50%;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
#top-arrow::after{content:&quot;&quot;;width:0;height:0;position:absolute;top:0;right:13px;border-color:transparent transparent #f1f1f1;border-style:solid;border-width:13px 8px}
#top-arrow:hover{background:#1295C9;border:1px solid #FFFFFF}
</style>
<div id='bttop'><a href='javascript:void(0);' id='top-arrow' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title='Back-to-Top'/></div>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#39;#bttop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800);});});</script>

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

Read more »

Khung Blockquote với hiệu ứng chuột cho Blog

Xin giới thiệu với các bạn khung trình bày code bằng  Blockquote với hiệu ứng chuột rất đẹp các bạn có thể sử dụng để làm nổi bật khung trình bày code.

Demo các bạn xem ngay dưới khung trình bày code tại blog 

1- Đăng nhập vào blog
2- Vào Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML) 
4- Thêm một trong các mẫu dưới vào trước thẻ: ]]></b:skin> 

blockquote{font:italic 400 14px Verdana;max-height:250px;overflow:auto;background:#D6DDE0;color:#fff;border:2px dotted #D3D3D3;transition:background .777s;-webkit-transition:background .777s;-moz-transition:background .777s;-o-transition:background .777s;-ms-transition:background .777s;margin:0;padding:10px;margin:10px 0}
blockquote:hover{background:#59b9e7;color:#fff}
blockquote:active{background:#C7FDD2;color:#fff}
max-height:250px;min-height:50px;
overflow:auto;

 - Thay đổi màu hiệu ứng ở những ô tô màu xanh.
-  Thuộc tính max-height:250px;min-height:50px;overflow:auto; là để xuất hiện thanh cuộn nếu không muốn bạn có thể xóa nó đi.

• Lưu ý:Nếu blog của bạn đã có thì xóa đoạn code dạng như bên dưới trước khi áp dụng:

.post blockquote{
.....
}
.post blockquote p{
....
}
.post blockquote:hover {
....
}

Các sử dụng khi post bài:
Khi cần chèn một đoạn code hay văn bản vào khung bạn check vào HTML của bài viết và dùng code sau:

<blockquote>Mã code hoặc đoạn văn</blockquote>

Read more »

Cập nhật những cách vào Facebook mới nhất

CẬP NHẬT NHỮNG CÁCH VÀO ĐƯỢC FACEBOOK 

---

Vào facebook dễ dàng nhất

Phần mềm Hotspot Shield phiên bản mới hỗ trợ vượt mọi rào cản cho phép người dùng truy cập dễ dàng vào các trang blog, mạng xã hội (Facebook, My Space, Blogspot, Opera...) cũng như hàng vạn website tin tức, giải trí... khác không dành cho người dùng tại Việt Nam (Hulu, MTV, CBS, ESPN, NBC, Veoh...).

Ưu điểm của Hotspot Shield:

• Hoàn toàn miễn phí.
• Vào Facebook và up ảnh dễ dàng, tốc độ cao.
• Dung lượng rất nhẹ, chỉ mất 2-3 phút tải và cài đặt.
• Dễ dàng truy cập vào các website bị chặn.
• Tăng khả năng bảo mật dữ liệu khi sử dụng mạng công cộng (LAN, Wifi...)

Hướng dẫn cài đặt

• Bước 1: Mở File Cài đặt vừa tải về. Nhấn Install
• Bước 2: Chờ cho quá trình cái đặt hoàn tất.
• Bước 3: Nhấn Finish để kết thúc quá trình cài đặt.
• Bước 4: Giao diện chương trình khi cài đặt hoàn tất.
• Bước 5: Thay đổi giao diện tiếng việt. Click vào nút hình bánh răng ở bước 4.)

    

Sau khi cài đặt xong. Bạn có thể vào trình duyệt và lướt Facebook.

Khi lướt Web sẽ có 1 biểu tượng của Hotspot Shield phía trên trình duyệt. Để tắt nó hãy Click vào dấu X phía trên góc phải.

Mặc định Hotspot Shield được chọn tự động chạy khi khởi động, bạn có thể tắt bỏ check tại ôHiển thị khi khởi động lại.

Nếu như bạn không upload được ảnh khi sử dụng HSS, bạn cần tài lại File host mặc định tại đây. về chạy nó và chọn Yes All. 
Nguyên nhân: Do bạn đã sử dụng cách dùng File host facebook để vào Facebook và thường thì cách này không upload được hình ảnh. Vì vậy để upload được hình ảnh, bạn cần bỏ những dòng code đã thêm trong file hosts hoặc sử dụng File host mình đã làm sẵn.

---

Cách 1: Sử dụng File Hosts 

---

Các bước

1. Bước 1: Mở thư mục này: C:\WINDOWS\system32\drivers\etc, cách mở nhanh nhất là nhấn phím Windows+R sau đó copy paste dòng C:\WINDOWS\system32\drivers\etc vào >> Enter
    
2. Bước 2: Mở file hosts trong thư mục đó ra >> Click phải chọn Openwith >>Chọn Notepad (hoặc double-click vào nó rồi cũng chọn Notepad)
    
3. Bước 3: Thêm vào cuối các dòng trong file hosts các dòng bên phải. Done

Hoặc các bạn có thể tải file host mình dùng Winrar nén lại dưới dạng .exe về chạy nó và chọn Yes All. Mặc định nó sẽ bung File host theo đường dẫn C:\WINDOWS\system32\drivers\etc, nếu bạn cài Win trên ổ đĩa khác hãy làm các bước thủ công trên.

(Lưu ý: Bạn hoàn toàn có thể Extract File Hosts.exe này bằng Winrar và copy nó vào đường dẫnC:\WINDOWS\system32\drivers\etc dể truy cập Facebook.)

Tải file host facebook đã làm sẵn tại đây.
Tải file host mặc định tại đây.

Ưu điểm: Dễ trang truy cập Facebook với tốc độ lướt rất nhanh.
Nhược điểm: Thường bị lỗi không upload được hình ảnh.

Đoạn Code (Đã test thành công 12/1/2013)

31.13.79.7 facebook.com
31.13.79.7 www.login.facebook.com
31.13.79.7 login.facebook.com
31.13.79.7 apps.facebook.com
31.13.79.7 graph.facebook.com
31.13.79.7 register.facebook.com
31.13.79.7 vi-vn.connect.facebook.com
31.13.79.7 vi-vn.facebook.com
31.13.79.7 static.ak.connect.facebook.com
31.13.79.7 developers.facebook.com
31.13.79.7 error.facebook.com
31.13.79.7 channel.facebook.com
31.13.79.7 register.facebook.com
31.13.79.7 bigzipfiles.facebook.com
31.13.79.7 pixel.facebook.com
69.171.224.33 upload.facebook.com
31.13.79.7 register.facebook.com
31.13.79.7 bigzipfiles.facebook.com
69.171.229.72 pixel.facebook.com
31.13.79.7 logins.facebook.com
31.13.79.7 facebook.com
31.13.79.7 www.facebook.com
31.13.79.7 graph.facebook.com
31.13.79.7 developers.facebook.com
31.13.79.7 error.facebook.com
31.13.79.7 register.facebook.com
31.13.79.7 blog.facebook.com
31.13.79.7 channel.facebook.com
31.13.79.7 connect.facebook.com
31.13.79.7 bigzipfiles.facebook.com
        

Hướng dẫn download tại Adf.ly

Kết hợp đổi DNS với cách sử dụng File host.

---

Sau khi đã thực hiện đổi file host vào facebook, nếu vẫn không vào được facebook, bạn cần thay đổi DNS theo các bước hướng dẫn sau và khơi động lại máy.

Đổi DNS trong Windows 7

Các bước thực hiện

1. Click vào biểu tượng mạng ở góc cuối màn hình.
2. Chọn Open Network and Sharing Center.
3. Chọn Change adapter setting.
4. Nhấn chuột phải chọn Properties. Sau đó chọn Internet Protocol Version 4 (TCP/IPv4)
5. Chọn Use the following DNS sever addresses. Và nhập dãy số theo hình bên.

 Preferreed DNS server:     4.2.2.3
 Alternate DNS server:       4.2.2.4

    

Đổi DNS trong Window XP:

Các bước thực hiện:

• Bước 1: Click chuột phải vào My Network => Properties
• Bước 2: Tiếp tục click chuột phải vào Local Area Connection => Properties.
• Bước 3: Tìm vào chọn TCP/IP => Properties
• Bước 4: Thêm vào day IP sau:

Điền day IP sau:

Preferreed DNS server: 4.2.2.3 Alternate DNS server: 4.2.2.4

   

---

Cách 2: Sử dụng Ultrasuft 

---

Hình minh họa

Giới thiệu

UltraSurf là một phần mềm dùng để fake IP và vượt tường lửa rất hiệu quả hiện nay đối với các website không cho các IP từ VN vào hoặc các trang web bị các nhà cung cấp dịch vụ (ISP) từ VN cấm truy cập ...
Tuy nhiên, sử dụng Ultrasuft mới nhất có thể làm giảm tốc độ truy cập mạng vì vậy hãy tắt nó khi không sử dụng Facebook.

Tải Ultrasuft mới nhất tại đây.

Nếu như bạn không upload được ảnh khi sử dụng phần mềm Ultrasurf, bạn cần tài lại File host mặc định tại đây. về chạy nó và chọn Yes All. Nguyên nhân: Do bạn đã sử dụng cách dùng File host facebook để vào Facebook và thường thì cách này không upload được hình ảnh. Vì vậy để uploadđược hình ảnh, bạn cần bỏ những dòng code đã thêm trong file hosts hoặc sử dụng File host mặc định mình đã làm sẵn.

Cập nhật mới để vào được facebook 6/2013 rất đơn giản là các bạn vào ổ đĩa  C:\WINDOWS\system32\drivers\etc xóa tập tin tên HOSTS là vào facebook được

Read more »