November 2014
Phan Nhật Chánh - Official website

Hướng dẫn Responsive cho Plugin Comment Facebook

   Nov 26, 2014   
Có nhiều bạn hỏi mình làm thế nào để khung Comment của facebook co giản theo trình duyệt. Rất đơn giản Chỉ cần thêm đoạn CSS dưới đây:
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
Plugin Comment:
<div class="fb-comments" data-colorscheme="light" data-href="http://www.nhatchanh.info" data-numposts="10" data-width="100%">
Xem thêm: Responsive YouTube Embed
Chỉ vậy thôi là nó đả co giản theo trình duyệt rồi đấy :D. Chúc thành công!

Định dạng hiển thị label cloud nhiều màu sắc

   Nov 15, 2014   
Chia sẽ một đoạn css giúp hiển thị nhãn (label cloud) với nhiều màu sắc
- Đăng nhập vào Blogger
- Đi đến Mẫu (template) >> Chỉnh sửa HTML
- Và thêm đoạn mã CSS phía dưới vào trước ]]</b:skin> hoặc </style> và lưu lại là bạn có được kiểu dáng label cloud được hiển thị như hình dưới đây:
Xem thêm: Hiển thị tiện ích Label Cloud dưới dạng Flash
css hien thi label cloud nhan nhieu mau sac trong blogspot blogger
Lưu ý: Trong Định cấu hình nhãn, phần Hiển thị: "Danh sách" bạn chọn "Cloud"
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) { background: #F53477; }
.label-size:nth-child(2) { background: #89C237; }
.label-size:nth-child(3) { background: #44CCF2; }
.label-size:nth-child(4) { background: #01ACE2; }
.label-size:nth-child(5) { background: #94368E; }
.label-size:nth-child(6) { background: #A51A5D; }
.label-size:nth-child(7) { background: #555; }
.label-size:nth-child(8) { background: #f2a261; }
.label-size:nth-child(9) { background: #00ff80; }
.label-size:nth-child(10) { background: #b8870b; }
.label-size:nth-child(11) { background: #99cc33; }
.label-size:nth-child(12) { background: #ffff00; }
.label-size:nth-child(13) { background: #40dece; }
.label-size:nth-child(14) { background: #ff6347; }
.label-size:nth-child(15) { background: #f0e68d; }
.label-size:nth-child(16) { background: #7fffd2; }
.label-size:nth-child(17) { background: #7a68ed; }
.label-size:nth-child(18) { background: #ff1491; }
.label-size:nth-child(19) { background: #698c23; }
.label-size:nth-child(20) { background: #00ff00; }
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {background: #222;}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
- Lưu template lại và xem kết quả

CSS Table, Định dạng thẻ Table trong HTML bằng CSS

   Nov 13, 2014   
Dưới đây là một số kiểu hiển thị dữ liệu dưới dạng bảng (table) được định dạng bằng css, chỉ cần chọn một trong các kiểu ưa thích và copy mã css đặt trước thẻ ]]</b:skin> hoặc </style> Với việc sử dụng các đoạn mã CSS dưới đây sẽ làm cho dữ liệu trong bảng trở nên đẹp, dễ nhìn và thu hút người xem hơn

Kiểu dáng 1

dinh dang the table bang css, css table dep, hien thi du lieu duoi dang bang table dep cho blogspot
table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#6F0A0A;
}

table[border="1"] tr {
background:#FFE5E5;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #fff;
}

table[border="1"] tr:nth-child(even) {
background:#f5f5f5;
}

table[border="1"] th {
background:#A00F0F;
color:#fff;
font-weight:bold;
}

Kiểu dáng 2

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#7D0095;
}

table[border="1"] tr {
background:#D8D8D8;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #fff;
}

table[border="1"] tr:nth-child(even) {
background:#B09CB4;
}

table[border="1"] th {
background:#9302B0;
color:#fff;
font-weight:bold;
}

Kiểu dáng 3

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Trebuchet,"Trebuchet MS",Arial,Sans-Serif;
color:#3366CC;
}

table[border="1"] tr {
background:#E1D4C1;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 15px;
border:1px solid #fff;
}

table[border="1"] td:nth-child(odd) {
background:#F5EDE3;
}

table[border="1"] th {
background:#104386;
color:#F89605;
font-weight:bold;
}

Kiểu dáng 4

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#333;
}

table[border="1"] tr {
background-color:#fff;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #333;
}

table[border="1"] th {
background-color:#333;
color:#fff;
font-weight:bold;
}

Kiểu dáng 5

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#666;
}

table[border="1"] tr {
background:#fafafa;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #fff;
}

table[border="1"] tr:nth-child(even) {
background:#f5f5f5;
}

table[border="1"] th {
background:#418AA4;
color:#fff;
font-weight:bold;
}

Kiểu dáng 6

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#333;
}

table[border="1"] tr {
background-color:#fff;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #333;
}

table[border="1"] th {
background-color:#ccc;
color:black;
font-weight:bold;
}

Kiểu dáng 7

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#666;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);
box-shadow:0 1px 3px rgba(0,0,0,.5);
}

table[border="1"] tr {
background-color:#fafafa;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid white;
}

table[border="1"] tr:nth-child(even) {
background-color:#f5f5f5;
}

table[border="1"] th {
background-color:#ECE9D8;
color:#ACA899;
font-weight:bold;
}

Kiểu dáng 8

table[border="1"] {
border-collapse:collapse;
font:normal normal 11px Arial,Sans-Serif;
color:#ccc;
-webkit-box-shadow:0 1px 3px black;
-moz-box-shadow:0 1px 3px black;
box-shadow:0 1px 3px black;
}

table[border="1"] tr {
background-color:#222;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #3c3c3c;
}

table[border="1"] td:nth-child(even) {
background-color:#1c1c1c;
}

table[border="1"] th {
background-color:#555;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');
background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));
background-image:-webkit-linear-gradient(top,#666,#555);
background-image:-moz-linear-gradient(top,#666,#555);
background-image:-ms-linear-gradient(top,#666,#555);
background-image:-o-linear-gradient(top,#666,#555);
background-image:linear-gradient(top,#666,#555);
color:black;
font-size:12px;
text-shadow:0 1px 0 rgba(255,255,255,.4);
font-weight:bold;
}

Hiển thị tiện ích Lưu trữ của blogspot dưới dạng Calendar

   Nov 10, 2014   
Thủ thuật này sẽ giúp bạn dễ dàng hiển thị tiện ích lưu trữ mặt định của blogspot/blogger dưới dạng một bộ lịch cho blog của bạn. Tiện ích này đả được chia sẽ khá lâu, hôm nay xin chia sẽ lại cho bạn nào chưa biết. Và với nhiều theme được thiết kế sẳn giúp cho bạn dể dàng lựa chọn một theme phù hợp với blog của bạn

tao lich luu tru cho blogspot blogger, hien thi tien ich luu tru blogspot blogger duoi dang lich calendar, Blog Archive calandar, huong dan tao lich cho blogspot blogger

Như thường lệ, trước khi thực hiện thay đổi mã trong template, bạn nên sao lưu Mẫu (template) lại bằng cách nhấp vào nút Sao lưu / Khôi phục >> Tải xuống mẫu hoàn chỉnh để có gặp trục trặc đặng còn đường mà khôi phục

- Bước 1: Đăng nhập vào Blogger, đến Bố cục >> Thêm Tiện ích >> Lưu trữ Blog
- Bước 2: Thiết lập giống như hình dưới đây, sau đó Lưu lại
- Bước 3: Đến Mẫu (template) >> Chỉnh sửa HTML và tìm BlogArchive tương tự như hình dưới đây:

- Bước 4: Thay đoạn code được khoanh vùng vừa tìm được như hình phía trên bằng đoạn code dưới đây:
<b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' 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>
- Bước 5:Tiếp theo, thêm đoạn javascript dưới đây vào trước thẻ </head> trong Mẫu (template) của bạn:
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLapZKC2oV5Zz2wzm0EfKyGd3wS0eu1eHQ2KFKFVkxELb_U8cQKXpKgvayNSyN_Y_oUkO5hoGkfdtoGG4OdmTcAn54u62t5ETW3U8NJKnyOyl7aR8YCfnyvCdhLleUR_eAS7stR0zcKJg/s1600/horizontal-loading.gif";
var bcLoadingMessage = " Đang tải....";
var bcArchiveNavText = "Xem lưu trữ";
var bcArchiveNavPrev = '←';
var bcArchiveNavNext = '→';
var headDays = ["Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7"];
var headInitial = ["CN","T2","T3","T4","T5","T6","T7"];

var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new 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){
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 = 'Tháng trước';
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 = 'Tháng sau';
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){
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&alt=json-in-script&callback=timezoneSet'></script>
- Bước 6: Lưu Mẫu (template) lại, tới đây việc cài đặt tiện ích gần như hoàn tất
- Bước 7: Việc tiếp theo là định dạng kiểu dáng hiển thị bộ lịch bằng CSS, bạn có thể lựa chọn một trong các kiểu dáng dưới đây và thêm mã CSS vào trước thẻ ]]></b:skin> trong Mẫu (template) của bạn và Lưu lại

Kiểu hiển thị 1

#calendarDisplay {display:none;}
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
table#bcalendar thead {}
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;}
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
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;}
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;}
td.firstCell {visibility:visible;}
td.filledCell { background:#fff;}
td.filledCell:hover { background:#dddddd;}
td.emptyCell {visibility:hidden;}
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
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 {}
#calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}

Kiểu hiển thị 2

#calendarDisplay {display:none;}
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;}
table#bcalendar thead {}
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}
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
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;}
td.firstCell {visibility:visible;}
td.filledCell {}
td.emptyCell {visibility:hidden;}
td.highlightCell {background:#000000;border:1px solid #666666}
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 {}
#calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}

Kiểu hiển thị 3

#calendarDisplay{display:none}
#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/AVvXsEhFLFUXmx9vEnMDhdLSd8o_YW6LoO8QmXvKjiFrJWud_Meep7tpcu1SaVWSRsTiz_1sDroLOD9DfFifo9Jb5-aegcx1bimfgChnBNZnr5YFi5_V39qXdiKzBV-Qgpi7PUju1bvrAfitpps/w250/YUIb.png) no-repeat 100% 0}
#bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px}
#bcaption select{background:white;border:1px solid #2B2B2B;padding:1px;width:90%;color:#0D2B47;font-weight:bold;}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
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}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#303030;background:rgba(0,0,0,0.41);border:1px solid #2C2C2C}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#EBEBEB;background:rgba(235,235,235,0.75)}
td.emptyCell{visibility:hidden}
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#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}

Kiểu hiển thị 4

#calendarDisplay{display:none}
#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/AVvXsEhhlY_gMNzucFM6aIrldk25HbctCEL7zrucfXpStO3LRinic9oIpSjQ3l45bNBjQDDGZHRVGIzvZJ9LAGHh7ilhi96jmLVXlaQb97ufOK7NcyPX0PH2iT9sKE1v2-breQBzH6TOcRx5-P8/w250/AtsukoMaeda.png) no-repeat 50% -3px}
#bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px}
#bcaption select{background:white;border:1px solid #0081BE;padding:1px;width:90%;color:#0591C7;font-weight:bold}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
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}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:white;background:rgba(255,255,255,0.45)}
td.filledCell{background:white}
td.filledCell:hover{background:#D8F4FF}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#1BA3CE}
table#bcalendar tbody tr td.highlightCell:hover{background:#00BAF5}
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}

Kiểu hiển thị 5

#calendarDisplay{display:none}
#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/AVvXsEj9hFzsw7OfHO9wY7jTf2fgD8-_QV5zp5cVxcNCufV_Q2s7KXubKCyRZMo8EYMpxWtL0CFCOJa-_tDaQ6SOctMM9zyNJBNgfBxOL-vxF9RPdMjEZ36UfWMMYagFfX1uO7BXT5FoksrmY40/w250/2011215_ohshimayuko.png) no-repeat 50% -10px}
#bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px}
#bcaption select{background:white;border:0 solid #420000;width:90%;color:#8B0101;font-weight:bold;}
table#bcalendar thead{}
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}
table#bcalendar{margin:0;width:100%}
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}
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}
td.firstCell{visibility:visible}
td.filledCell{background:white;background:rgba(255,255,255,0.54)}
td.filledCell:hover{background:#EBEBEB;background:rgba(255,255,255,0.79)}
td.emptyCell{visibility:hidden}
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#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}

Kiểu hiển thị 6

#calendarDisplay{display:none}
#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/AVvXsEizbq_S-Ubh3ZQELMPwxCRTMgS0ATMoXJovdH3GD1wXZdRuGoyYjCBZPFuVPNqsr1jajOGID3MNuYOH_dgsWptSHYsiqOBQPy1K2r7IlNfPloqv1b79-wj2fTLQ8yCLvmTTUEQLcFLCsX0/w320/Minami.png) no-repeat 50% 0}
#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}
#bcaption select{background:white;border:1px solid #BE3E00;padding:1px;width:90%;color:#B13100;font-weight:bold}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
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}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C54204;background:rgba(197,66,4,0.41);border:1px solid #C74E0A}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#FFE5D8;background:rgba(255,229,216,0.75)}
td.emptyCell{visibility:hidden}
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#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}

Kiểu hiển thị 7

#calendarDisplay{display:none}
#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/AVvXsEgMrqkw0z-Aa4gAtzxzbrhpUvTMDjNyPjqSFPh-mW9cVL1osiKy3KdWxrN4wKQtBCeSwaClx3L3a6ASRDmSs3p0zNXD8RSYcO1VrXLdORFDoa_JVwprolM-db-wow1SI2hBQn0Y7kk40uI/w250/Melody.png) no-repeat 50% -3px}
#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}
#bcaption select{background:white;border:1px solid #BE002E;padding:1px;width:90%;color:#C70543;font-weight:bold}
table#bcalendar thead{}
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}
table#bcalendar{margin:0 0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#CE013A;font:bold 100% Tahoma,Arial,Sans-serif}
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}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C50442;background:rgba(197,4,66,0.32)}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#FFD8E0;background:rgba(255,216,224,0.67)}
td.emptyCell{visibility:hidden}
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#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}
- Lưu lại và Xem kết quả
- Chúc bạn thành công!
Nguồn: Internet

Nút chia sẽ Facebook để mở khóa nội dung Ẩn bằng cách sử dụng jQuery và Facebook API

   Nov 2, 2014   
Với tiện ích này, đọc giả buộc phải chia sẻ địa chỉ (url) của bạn lên facebook để có thể thấy được nội dung đả ẩn bên trong nút chia sẻ (share facebook), điều này sẽ góp một phần nhỏ giúp cho bạn có thêm lưu lượng truy cập từ facebook. Và với chỉ với vài dòng code dưới đây bạn sẽ dễ dàng thực hiện được chức năng hiển thị một nội dung nào đó khi người dùng nhấn vào nút chia sẻ lên facebook. Bạn cũng có thể xem thêm cách sử dụng đối với Twitter.

mo khoa noi dung an bang cach chia se link len facebook, an noi dung va cha se de hien thi, an link download, an url download, mo khoa link url khi nguoi dung click vao nut chia se len facebook, share facebook de hien thi noi dung url link bi an, facebook share to unlock content, unlock content face book share

Demo chia sẻ Facebook để mở khóa nội dung


Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa


Mở khóa nội dung ẩn bằng cách chia sẻ lên facebook

- Bước 1: Trước tiên, để thực hiện chức năng này, bạn cần đăng ký và tạo một App tại https://developers.facebook.com/ để lấy App ID
- Bước 2: Sau khi bạn có được AppID, việc tiếp theo là Thêm đoạn mã dưới đây vào Mẫu (template) của bạn, tốt nhất nên đặc nó trước thẻ </body>
<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/en_US/sdk.js#xfbml=1&appId=212550605589620&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Thay đoạn appId màu đỏ thành appId của ứng dụng của bạn

- Bước 3: Tiếp theo, đặt đoạn javascript dưới đây vào bấc cứ nơi nào trong bài viết của bạn
Ở đây, ta sử dụng Facebook's Feed Dialog nó cho phép người dùng xuất bản những thông tin như: liên kết, hinh ảnh, mô tả,.. của một địa chỉ (url). Để biết thêm có thể vào đây để tham khảo thêm.
<script type="text/javascript">
function shareOnFB() {
var e = {
method: "feed",
link: "http://nhatchanh.info",
picture: "https://farm4.staticflickr.com/3914/14601901546_3a8dfd5d32_b.jpg",
name: "NhatChanh's Blog | Chia sẽ Thủ thuật - Blogger - Tutorials",
caption: 'nhatchanh.info',
description: "NhatChanh.Info là một blog chia sẽ các thủ thuật liên quan đến việc sử dụng Blogspot"
};
FB.ui(e, function(t) {
if (t["post_id"]) {
//Sau khi chia sẻ thành công, nội dung cần hiển thị của bạn ở đây
var secret_data = "<h2>Cảm ơn bạn đã quan tâm!<br />Hy vọng bài viết này sẻ làm bạn hài lòng!<br />Chúc bạn thành công ^^</h2>";
jQuery("#results").html(secret_data);
}
})
}
</script>
- Thay đoạn màu đỏ phía trên theo ý đồ của bạn
- Thay đổi các thuộc tính
         link: địa chỉ blog của bạn
         picture: hình ảnh cần hiển thị
         name: tiêu đề cần hiển thị
         caption: địa chỉ blog của bạn
         description: đoạn mô tả ngắn cho blog của bạn

- Bước 3: Sử dụng, để sử dụng chỉ cần thêm thuộc tính onclick="shareOnFB();" vào thẻ bạn cần sử dụng
<div id="results">
<div style="text-align:center; color:#FF0000;">
Nội dung đã bị khóa! Xin vui lòng bấm vào nút chia sẽ để mở khóa
<br /><br />
<img onclick="shareOnFB();" style="cursor:pointer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMayMw9wOwsKc1sCu4Xi8v73vrl2P06Ed2zWkMlnkc1gLcmgTMSn_B2OAF4FodUrmozQIO-kNDczz75wK_lawef3ibH36bCUb5MvxI1_F0AsWXEmdYoJIwjsJ6k3-1eiXX_OzXjwfqMFN/s1600/fbshare.png">
</div>
</div>

Bạn nên chú thích một vài chữ ngắn gọn để đọc giả của bạn biết như: Nội dung đã khóa! Vui lòng bấm vào chia sẽ để mở khóa!

Vậy là xong, hy vọng với tiện ích nhỏ này sẽ làm bạn hài lòng! Chúc vui vẽ ^^