<button class="btn">button</button>
<button class="btn">button2</button>
<button class="btn">button3</button>
<style>
body {
text-align: center;
background: lightblue;
}

.btn {
display: inline-block;
margin: 1em;
text-transform: uppercase;
padding: 1em 1.5em;
background: none;
color:darkblue;
font-weight: bold;
position: relative;
transition:color 0.25s ease;
border:3px solid RED;
}

.btn:hover {
color:white;
}

.btn::after {
position: absolute;
content: '';
top:0;
left: 0;
width: 0;
height: 100%;
background-color: Blue;
transform-origin:left;
transition:width 0.25s ease;
z-index:-1;
}

.btn:hover::after {
width: 100%;
}

</style>

<button class="draw">draw</button>
<button class="draw meet">draw meet</button>
<button class="center">center</button>
<button class="spin">spin</button>
<button class="spin circle">spin circle</button>
<button class="spin thick">spin thick</button>


<style>


button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}


button::before,

button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}

.draw {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
color: #fbca67;
}
.meet::after {
top: 0;
left: 0;
}
.meet:hover::before {
border-top-color: #fbca67;
border-right-color: #fbca67;
}
.meet:hover::after {
border-bottom-color: #fbca67;
border-left-color: #fbca67;
-webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

.center:hover {
color: #6477b9;
}
.center::before, .center::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.center::before {
border-top: 2px solid #6477b9;
border-bottom: 2px solid #6477b9;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.center::after {
border-left: 2px solid #6477b9;
border-right: 2px solid #6477b9;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.spin {
width: 6em;
height: 6em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}

.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}

.thick {
color: #f45e61;
}
.thick:hover {
color: #fff;
font-weight: 700;
}
.thick::before {
border: 3em solid transparent;
z-index: -1;
}
.thick::after {
mix-blend-mode: color-dodge;
z-index: -1;
}
.thick:hover::before {
background: #f45e61;
border-top-color: #f45e61;
border-right-color: #f45e61;
border-bottom-color: #f45e61;
-webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
}
.thick:hover::after {
border-top: 3em solid #f45e61;
border-left-width: 3em;
border-right-width: 3em;
}
</style>

Copy nội dung bài viết là một trong những vấn đề nhức nhối nhất với tất cả các anh em làm web hiện nay, trong đó các Blogger cũng không ngoại lệ, các bài viết dễ dàng bị copy nội dung, người copy không phải chỉ copy ý tưởng mà copy cả nguyên văn bài viết để mang về làm của họ. Chính vì thế rất nhiều người tìm cách chống copy trên trang web của mình, và đây là hướng dẫn dành cho ae Blogger chúng ta, chỉ dùng CSS!

Làm thế nào để chống copy nội dung bài viết cho Blogspot?

Thường thì người ta sẽ dùng CSS hoặc Javascript để chống copy nội dung, nhưng mình sẽ chỉ dùng CSS để làm điều này, vì JavaScript rất nặng, sẽ làm thời gian tải trang của web tăng lên rất nhiều, gây khó chịu cho người xem!

1. Đầu tiên truy cập vào trang quản trị của Blogger tại: https://www.blogger.com

2. Vào Template (Mẫu), click vào Edit HTML (Chỉnh sửa HTML)

3. Click vào vùng code, và bấm Ctrl+F để mở hộp tìm kiếm, tìm kiếm đến thẻ ]]</b:-skin> và chèn đoạn code này lên phía trên nó:

body {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}

Với class body thì có nghĩa là sẽ chống copy trên toàn trang web chúng ta, không vị trí nào có thể tạo khối khi dùng chuột trái được. Nếu các bạn chỉ muốn chống copy ở phần bài viết, thì có thể đổi body thành .post nhé, hoặc cụ thể hơn nữa thì tùy các bạn!

4. Giờ thì lưu template lại và tận hưởng thành quả đi nào ^_^

Tuy nhiên, nếu bạn là một trang chia sẻ thủ thuật, code như mình thì sao, khi đó thì chẳng ai copy được những đoạn code của bạn cả :)) Gây ức chế cho người xem, một đi không trở lại luôn nhé @@

Thường thì các đoạn code hoặc nội dung để người xem copy sẽ được đưa vào blockquote hoặc các table của Blogger để dễ nhìn, vì thế chúng ta vẫn sẽ chống copy trên phần bài viết, nhưng cho phép copy ở phần blockquote và table!

Làm thế nào để cho phép copy ở Blockquote và Table?

Các bạn hãy thêm đoạn CSS này vào phía trên thẻ ]]</b:-skin> nhé, nó chính là đoạn CSS cho phép copy:

.post blockquote,table{-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

Chú ý: .post blockquote không phải ở bất kỳ template nào cũng giống nhau, có những template sẽ là .post blockquote, và cũng rất nhiều template khác nó là blockquote. Vì thế bạn cần thay đổi cho phù hợp với template của bạn nhé :)

<!--
[Thủ Thuật Blog] Chia sẻ code Sitemap cực đẹp cho Blogspot
https://choiblogs.blogspot.com/2018/11/chia-se-code-sitemap-cuc-ep-cho-blogspot.html
-->

<style type="text/css">
#table-outer td{min-width:150px;color:#fff;}
#table-outer select,
#table-outer select,
#table-outer input{width:250px;border:1px solid #766469;color:#000;font-size:11px;padding:4px;}
#feedContainer li{border-top:#fff;border-bottom:1px solid #DADADA;margin-bottom:10px;float:left;width:100%;padding:5px 0;}
#feedContainer,
#feedContainer li{list-style:none;overflow:hidden;margin:0;}
#feedNav{text-align:center;line-height:30px;background-color:#fff;border-radius:3px;border:1px solid #fff;margin:10px 0 0;}
</style>
<div class="archiver"><div id="box_left" style="padding: 10px;"><div id="table-outer"><table border="0"><tbody>
<tr><td><label><span class="text">Sắp xếp:</span></label></td><td><select class="input" id="orderFeedBy"><option selected="" value="published">Phim Mới</option><option value="updated">Phim Cũ</option></select></td></tr>
<tr><td><label><span class="text">Danh sách nhãn:</span></label></td><td><span id="labelSorter"><select class="input" disabled=""><option selected="">Đợi Xíu...</option></select></span></td></tr>
<tr><td><label><span class="text">Từ khóa tìm kiếm (gõ có dấu):</span></label></td><td><form id="postSearcher"><input class="input" type="text" /></form></td></tr>
</tbody></table></div><header id="resultDesc"></header><br />
<ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
url: 'http://choiblogs.blogspot.com',
feedNum: 30,
labelName: (window['location']['hash'] && window['location']['hash'] != '#0' && window['location']['hash'] != '#search') ? encodeURIComponent(window['location']['hash']['substr'](1)) : false,
numChars: 300,
thumbWidth: 80,
navText: 'Xem thêm',
frontText: 'Bay lên đầu',
noImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
loading: '<span>Loading...</span>',
searching: '<span>Đang Tìm Kiếm...</span>',
MonthNames: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
noResult: 'No Result'
};

function getID(_0x444ex3) {
return document['getElementById'](_0x444ex3);
};
var head = document['getElementsByTagName']('head')[0],
tocContainer = getID('feedContainer'),
feedNav = getID('feedNav'),
orderByer = getID('orderFeedBy'),
labelSorter = getID('labelSorter'),
input = getID('postSearcher')['getElementsByTagName']('input')[0],
resultDesc = getID('resultDesc'),
nextPage, feedArchive, startPage = 0;

function cropFeed(_0x444exf, _0x444ex10) {
var _0x444ex11 = _0x444exf['split']('<');
for (var _0x444ex12 = 0; _0x444ex12 < _0x444ex11['length']; _0x444ex12++) {
if (_0x444ex11[_0x444ex12]['indexOf']('>') != -1) {
_0x444ex11[_0x444ex12] = _0x444ex11[_0x444ex12]['substring'](_0x444ex11[_0x444ex12]['indexOf']('>') + 1, _0x444ex11[_0x444ex12]['length']);
};
};
_0x444ex11 = _0x444ex11['join'](' ');
_0x444ex11 = _0x444ex11['substring'](0, _0x444ex10 - 1);
return _0x444ex11;
};

function showLabels(_0x444ex10) {
var _0x444ex14 = _0x444ex10['feed']['category'],
_0x444exf = '';
_0x444exf = '<select id=\'labelSorter\' onchange=\'changeSort(this.value);\'>';
_0x444exf += '<option value=\'\' selected>Thể Loại</option>';
for (var _0x444ex3 = 0; _0x444ex3 < _0x444ex14['length']; _0x444ex3++) {
_0x444exf += '<option value=\'' + decodeURIComponent(_0x444ex14[_0x444ex3]['term']) + '\'>' + _0x444ex14[_0x444ex3]['term']['toUpperCase']() + '</option>';
};
_0x444exf += '</select>';
labelSorter['innerHTML'] = _0x444exf;
};

function showFeedList(_0x444ex16) {
var _0x444ex17 = _0x444ex16['feed']['entry'],
_0x444ex18, _0x444ex19, _0x444ex1a, _0x444ex1b, _0x444ex12, _0x444ex1c, _0x444ex1d, _0x444ex1e, _0x444ex1f, _0x444ex20, _0x444ex10 = '';
if (typeof (_0x444ex16['feed']['entry']) !== 'undefined') {
for (var _0x444ex11 = 0; _0x444ex11 < tocConfig['feedNum']; _0x444ex11++) {
_0x444ex18 = (_0x444ex17) ? _0x444ex17[_0x444ex11] : '';
nextPage = '';
if (_0x444ex11 == _0x444ex16['feed']['entry']['length']) {
break;
};
_0x444ex19 = _0x444ex18['title']['$t'];
for (var _0x444exf = 0; _0x444exf < _0x444ex18['link']['length']; _0x444exf++) {
if (_0x444ex18['link'][_0x444exf]['rel'] == 'alternate') {
_0x444ex1a = _0x444ex18['link'][_0x444exf]['href'];
break;
};
};
for (var _0x444ex3 = 0; _0x444ex3 < _0x444ex16['feed']['link']['length']; _0x444ex3++) {
if (_0x444ex16['feed']['link'][_0x444ex3]['rel'] == 'next') {
nextPage = _0x444ex16['feed']['link'][_0x444ex3]['href'];
};
};
for (var _0x444ex14 = 0; _0x444ex14 < _0x444ex18['link']['length']; _0x444ex14++) {
if (_0x444ex18['link'][_0x444ex14]['rel'] == 'replies' && _0x444ex18['link'][_0x444ex14]['type'] == 'text/html') {
_0x444ex20 = _0x444ex18['link'][_0x444ex14]['title'];
break;
};
};
if ('content' in _0x444ex18) {
_0x444ex12 = _0x444ex18['content']['$t'];
} else {
if ('summary' in _0x444ex18) {
_0x444ex12 = _0x444ex18['summary']['$t'];
} else {
_0x444ex12 = '';
};
}; if ('media$thumbnail' in _0x444ex18) {
_0x444ex1b = _0x444ex18['media$thumbnail']['url']['replace'](/\/s[0-9]+\-c/, '/s' + tocConfig['thumbWidth'] + '-c');
} else {
_0x444ex1b = tocConfig['noImage']['replace'](/\/s[0-9]+\-c/, '/s' + tocConfig['thumbWidth'] + '-c');
};
postdate = _0x444ex18['published']['$t']['substring'](0, 10);
_0x444ex1c = postdate['substring'](0, 4);
_0x444ex1d = postdate['substring'](5, 7);
_0x444ex1e = postdate['substring'](8, 10);
_0x444ex1f = tocConfig['MonthNames'][parseInt(_0x444ex1d, 10) - 1];
_0x444ex10 += '<li><div>';
_0x444ex10 += '<a href=\'' + _0x444ex1a + '\' target=\'_blank\'><img style=\'float:left;width:' + tocConfig['thumbWidth'] + 'px;height:' + tocConfig['thumbWidth'] + 'px;margin-right:10px;\' src=\'' + _0x444ex1b + '\' alt=\'' + _0x444ex19 + '\' /></a>';
_0x444ex10 += '<h2 style=\'font-size:14px;\'><a href=\'' + _0x444ex1a + '\' target=\'_blank\'>' + _0x444ex19 + '</a></div>';
_0x444ex10 += '<div style=\'margin-top:5px;\'>' + cropFeed(_0x444ex12, tocConfig['numChars']) + '&hellip;<br style=\'clear:both;\'/></h2>';
_0x444ex10 += 'on: <span>' + _0x444ex1e + '</span>/<span>' + _0x444ex1f + '</span>/<span>' + _0x444ex1c + '</span></div></div></li>';
};
if (input['value'] !== '' && window['location']['hash'] == '#search') {
resultDesc['innerHTML'] = '<span>Search Result for Keyword <strong>&quot;' + input['value'] + '&quot;</strong></span>';
} else {
resultDesc['innerHTML'] = '';
};
feedContainer['innerHTML'] += _0x444ex10;
if (nextPage) {
if (window['location']['hash'] && window['location']['hash'] !== '#0') {
_0x444ex10 = '<a href=\'javascript:initResult(2);\' class=\'next\'>' + tocConfig['navText'] + '</a>';
} else {
_0x444ex10 = '<a href=\'javascript:initResult(1);\' class=\'next\'>' + tocConfig['navText'] + '</a>';
};
} else {
_0x444ex10 = '<a href=\'#table-outer\' onclick=\'jQuery(&apos;html, body&apos;).animate({scrollTop: jQuery(&apos;#table-outer&apos;).offset().top}, 1500); return false\' class=\'front\'>' + tocConfig['frontText'] + '</a>';
};
feedNav['innerHTML'] = _0x444ex10;
input['value'] = '';
labelSorter['getElementsByTagName']('select')[0]['removeAttribute']('disabled');
orderByer['removeAttribute']('disabled');
} else {
feedContainer['innerHTML'] = '';
alert(tocConfig['noResult']);
feedNav['innerHTML'] = '<a href=\'?reload=true\'>' + tocConfig['frontText'] + '</a>';
searchDesc['innerHTML'] = '';
};
};

function initResult(_0x444ex14) {
var _0x444ex3, _0x444ex10;
if (_0x444ex14 == 1) {
_0x444ex3 = nextPage['indexOf']('?');
_0x444ex10 = nextPage['substring'](_0x444ex3);
} else {
if (_0x444ex14 == 2) {
_0x444ex3 = nextPage['indexOf']('?');
_0x444ex10 = nextPage['substring'](_0x444ex3)['replace'](/\?/, '/-/' + window['location']['hash']['substr'](1) + '?');
} else {
_0x444ex10 = '?start-index=1&max-results=' + tocConfig['feedNum'] + '&orderby=' + orderByer['value'] + '&alt=json-in-script';
};
};
_0x444ex10 += '&callback=showFeedList';
updateScript(_0x444ex10);
};

function removeScript() {
var _0x444ex14 = getID('temporer-script');
_0x444ex14['parentNode']['removeChild'](_0x444ex14);
};

function buildLabels() {
var _0x444ex14 = document['createElement']('script');
_0x444ex14['type'] = 'text/javascript';
_0x444ex14['src'] = (tocConfig['url'] === '' ? window['location']['protocol'] + '//' + window['location']['host'] : tocConfig['url']) + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels';
head['appendChild'](_0x444ex14);
};

function updateScript(_0x444ex3) {
if (startPage == 1) {
removeScript();
};
feedNav['innerHTML'] = tocConfig['loading'];
if (tocConfig['labelName'] !== false) {
feedArchive = (tocConfig['url'] === '' ? window['location']['protocol'] + '//' + window['location']['host'] : tocConfig['url']) + '/feeds/posts/summary/-/' + tocConfig['labelName'] + _0x444ex3;
} else {
feedArchive = (tocConfig['url'] === '' ? window['location']['protocol'] + '//' + window['location']['host'] : tocConfig['url']) + '/feeds/posts/summary' + _0x444ex3;
};
var _0x444ex14 = document['createElement']('script');
_0x444ex14['type'] = 'text/javascript';
_0x444ex14['src'] = feedArchive;
_0x444ex14['id'] = 'temporer-script';
head['appendChild'](_0x444ex14);
startPage = 1;
};

function changeSort(_0x444ex10) {
removeScript();
tocContainer['innerHTML'] = '';
feedNav['innerHTML'] = tocConfig['loading'];
var _0x444ex3 = document['createElement']('script'),
_0x444exf = labelSorter['getElementsByTagName']('select')[0],
_0x444ex14 = (_0x444ex10 !== 0) ? '/-/' + _0x444ex10 : '';
_0x444ex3['type'] = 'text/javascript';
_0x444ex3['id'] = 'temporer-script';
_0x444ex3['src'] = (tocConfig['url'] === '' ? window['location']['protocol'] + '//' + window['location']['host'] : tocConfig['url']) + '/feeds/posts/summary' + _0x444ex14 + '?alt=json-in-script&max-results=' + tocConfig['feedNum'] + '&orderby=' + orderByer['value'] + '&callback=showFeedList';
head['appendChild'](_0x444ex3);
_0x444exf['disabled'] = true;
orderByer['disabled'] = true;
window['location']['hash'] = _0x444ex10;
};

function searchPost() {
removeScript();
tocContainer['innerHTML'] = '';
resultDesc['innerHTML'] = '';
feedNav['innerHTML'] = tocConfig['searching'];
var _0x444ex14 = document['createElement']('script');
_0x444ex14['type'] = 'text/javascript';
_0x444ex14['id'] = 'temporer-script';
_0x444ex14['src'] = (tocConfig['url'] === '' ? window['location']['protocol'] + '//' + window['location']['host'] : tocConfig['url']) + '/feeds/posts/summary?alt=json-in-script&orderby=published&q=' + input['value'] + '&max-results=9999&callback=showFeedList';
head['appendChild'](_0x444ex14);
window['location']['hash'] = '#search';
return false;
};
getID('postSearcher')['onsubmit'] = function () {
return searchPost();
};
orderByer['onchange'] = function () {
changeSort(0);
};
labelSorter['getElementsByTagName']('select')[0]['onchange'] = function () {
changeSort(this['value']);
};
window['onload'] = function () {
initResult(0);
buildLabels();
window['location']['hash'] = '#0';
};
//]]>
</script>
<div class="clear"></div></div></div>

feedNum: 30, : Số ký tự tối đa tiêu đề sẽ hiển thị.
numChars: 300, : Số ký tự mô tả bài viết sẽ hiển thị ( 0 là không hiển thị mô tả thay vào đó sẽ là dấu '...')
thumbWidth: 80, : Độ rộng của ảnh thumbnails bài viết, hãy thay đổi cho phù hợp với Blogspot của bạn.

Mình đã xuất bản 2 bài viết nói về các chằn Video từ Youtube vào Blogspot. Theo mình nghĩ, hai bài viết trước đó của mình lại không hoàn hảo: Bài thứ nhất: Đơn thuần là tạo chức năng Responsive cho Video _ Nhưng lại không trang trí (tạo hiệu ứng). Bài thứ hai: Đơn thuần là trang trí (Tạo hiệu ứng) cho Video _ Nhưng lại không có chức năng Responsive.

Đến với bài viết hôm nay, mình sẽ gộp cả hai chức năng trên lại với nhau để đưa ra thủ thuật hoàn hảo nhất về cách chằn Video từ Youtube vào Blogspot mà mình đã phát hành.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu lại.

<!-- [Thủ Thuật Blog] Chèn Video từ Youtube vào Blogspot trong khung Laptop có chức năng Responsive.
https://choiblogs.blogspot.com/2018/11/thu-thuat-blog-chen-video-tu-youtube.html
-->
<style>
.tb_outer_wrap {
width: 100%;
max-width: 650px;
margin: 15px auto;
}
.tb_video_wrap_macbook {
position: relative;
padding-bottom: 43%;
padding-top: 0;
height: 0;
overflow: hidden;
-webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-color: rgba(0, 0, 0, 0);
border-width: 27px 76px 55px 76px;
border-style: inset;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
border: none !important;
}
}
</style>

Bước 2: Nhúng Video từ Youtube vào trong bài viết bằng cú pháp dưới đây:

<div class="tb_outer_wrap">
<div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6bnUdWKrfd4?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

ùy chỉnh:

· Thay phần tô màu vàng thành ID Video của bạn.

· Các Bạn có thể thay đổi khung khác nhưng phải tùy chỉnh lại kích thước chiều cao và chiều rộng (Giống như khung hình Mình đã đưa ra ở trên).

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều.

DOWNLOAD:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUDXCVdgAK78Felo__2g0wO2WPvcjvGxXAEg1_uL3w8iKLawbAdtfzvbzSJUMj_N4RzfCdexbBrRSIDigEjXrfiy2cgeHKDeruyzuYj_MQ9k615ORJ5cQTicj6ZcTylmRiHMwU-RIUAE/s1600/macbook+laptop+frame.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzXplxsTdOeIHJJwuBdN8RTuOpQHCgy_1EFgND8QWM_gdJbFBJnRzuTtD0QbfoXOSz990sHHzUs0AJ279ilaqxtO9FFNujJSeQFV8_ntsEjttlo-fEVaVnpf5WTObqkIGQq54hd_xKiA/s1600/macbook+laptop+frame.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzXplxsTdOeIHJJwuBdN8RTuOpQHCgy_1EFgND8QWM_gdJbFBJnRzuTtD0QbfoXOSz990sHHzUs0AJ279ilaqxtO9FFNujJSeQFV8_ntsEjttlo-fEVaVnpf5WTObqkIGQq54hd_xKiA/s1600/macbook+laptop+frame.png

Lỗi thứ nhất: Thường mấy bạn bắt đầu làm Blog trên nền tảng Blogger cứ nghỉ rằng ảnh upload lên Blogspot có liên quan gì ảnh trên picasaweb.google.com hay Google+ đâu mà nó cứ xuất hiện ở trên đây nhỉ? Vậy là xóa hết ảnh trên picasaweb.google.com hay Google+ rồi vô lại Blog. Ôi! ảnh trên Blog của mình đâu hết rùi L => ''Lỗi ảnh do xóa một cách vô tội vạ khi chưa biết gì''. Vì ảnh upload lên Blogspot hay upload lên Google+ nó đều lưu trữ ở picasaweb.google.com, tới đây chắc mấy bạn cũng biết tại sao xóa ảnh trên picasaweb.google.com hay Google+ thì ảnh trên Blog bị lỗi rùi đúng không nào. Cách khắc phục duy nhất là các bạn phải upload lại tất cả các ảnh đã bị xóa và đi thay link từng ảnh một. Hãy cẩn thận trước khi làm thứ gì mà mình chưa biết!


Lỗi thứ hai: Lỗi do nhà mạng chặn lý do thì chắc Bạn nào cũng biết hết rồi, nhà mạng chỉ chặn các domain chứa link .blogspot.com thôi nhé! Vậy đâu là lối thoát cho người dùng Blogger? Vâng, với một thủ thuật đơn giản sau đây, hình ảnh sẽ được hiển thị dù bị nhà mạng chặn.

Cách 1: Chỉnh sửa một cách thủ công: Khi upload ảnh lên bài viết, link ảnh sẽ có dạng *.bp.blogspot.com, bạn chỉ cần chuyển bài viết qua chế độ HTML rồi sửa link đó thành lh4.googleusercontent.com hoặc lh4.ggpht.com là được.

Cách 2: Sử dụng một đoạn Javascript, với cách này link ảnh sẽ tự động chuyển về dạng lh4.googleusercontent.com bạn sẽ không cần ngồi sửa thủ công từng ảnh một. Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ . Sau đó dán đoạn mã Code sau ở phía trên thẻ và lưu mẫu.

<!-- Khắc phục lỗi không hiển thị ảnh trên Blogspot
https://choiblogs.blogspot.com/2018/11/khac-phuc-loi-khong-hien-thi-anh-tren.html
-->
<script type='text/javascript'>
//<![CDATA[
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++) {
images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");
}
//]]>
</script>

Đơn giản, nhẹ nhàng vậy là tránh được cái nạn bị nhà mạng chặn. Ngoài ra Bạn cũng có thể sử một đoạn Jquery thay đoạn Javascript nhưng ở đây mình không nói tới, thiết nghĩ vì nó không cần thiết.

Hầu như các template mà bạn đang sử dụng sẽ không tích hợp tiện Recent Posts. Sự thất Blogger cũng đã ích hợp sẵn tiễn ích này nhưng nó lại quá đơn điệu, lại không thể được sự chuyên nghiệp Blog của bạn. Do vậy đến với bài này mình hướng dẫn các bạn một cách đơn giản để thêm tiện ích bài viết gần đây (Recent Posts) khá sinh động và bắt mắt với 3 phong cách cho các bạn lựa chọn.


Bắt đầu thủ thuật _ Chỉ cần chèn đoạn Code sau đây một Widget HTML/Javascript

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Code theo phong cách 1:

<!--
[Thu Thuat Blog] Thêm tiện ích bài viết gần đây (Recent Posts) cho blogspot
https://choiblogs.blogspot.com/2018/11/them-tien-ich-bai-viet-gan-ay-recent.html
-->
<script style="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.windows2it.com/2015/08/them-tien-ich-bai-viet-gan-day-recent-posts-cho-blogspot.html" rel="dofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Code theo phong cách 2:

<!--
[Thu Thuat Blog] Thêm tiện ích bài viết gần đây (Recent Posts) cho blogspot
https://choiblogs.blogspot.com/2018/11/them-tien-ich-bai-viet-gan-ay-recent.html
-->
<script src="https://dl.dropboxusercontent.com/u/66256041/JQuery/namkna-blogspot-com/jquery-latest.js" type="text/javascript"></script>
<style>
#recent-posts ul li {
list-style-image:none;
}#recent-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
#recent-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
#recent-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 89%;
}
#recent-posts ul li:first-child:after {
content: "1";
}
#recent-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
#recent-posts ul li:first-child + li:after {
content: "2";
}
#recent-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
#recent-posts ul li:first-child + li + li:after {
content: "3";
}
#recent-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
#recent-posts ul li:first-child + li + li + li:after {
content: "4";
}
#recent-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
#recent-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
#recent-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
#recent-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
#recent-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
#recent-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
#recent-posts ul li:first-child:after, #recent-posts ul li:first-child + li:after, #recent-posts ul li:first-child + li + li:after, #recent-posts ul li:first-child + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
#recent-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div id="recent-posts">
<script language="JavaScript">
home_page = "www.windows2it.com";
numposts = 5;
imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script>
<script>
var _0x8189=["\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x73\x74\x61\x72\x74","\x74\x72\x69\x67\x67\x65\x72","\x62\x69\x6E\x64","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x73\x74\x6F\x70","\x73\x69\x6D\x70\x6C\x65\x53\x70\x79","\x75\x6C\x2E\x73\x70\x79","\x66\x6E","\x68\x65\x69\x67\x68\x74","\x3E\x20\x6C\x69\x3A\x66\x69\x72\x73\x74","\x66\x69\x6E\x64","\x3C\x6C\x69\x3E","\x68\x74\x6D\x6C","\x3C\x2F\x6C\x69\x3E","\x70\x75\x73\x68","\x65\x61\x63\x68","\x3E\x20\x6C\x69","\x6C\x65\x6E\x67\x74\x68","\x63\x73\x73","\x70\x61\x72\x65\x6E\x74","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x57\x72\x61\x70\x70\x65\x72\x22\x20\x2F\x3E","\x77\x72\x61\x70","\x72\x65\x6D\x6F\x76\x65","\x3A\x67\x74\x28","\x29","\x66\x69\x6C\x74\x65\x72","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6E\x6F\x6E\x65","\x61\x6E\x69\x6D\x61\x74\x65","\x3E\x20\x6C\x69\x3A\x6C\x61\x73\x74","\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x22\x3E","\x77\x72\x69\x74\x65","\x72\x61\x6E\x64\x6F\x6D","\x66\x6C\x6F\x6F\x72","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x72\x65\x70\x6C\x69\x65\x73","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x20","\x73\x70\x6C\x69\x74","\x63\x6F\x6E\x74\x65\x6E\x74","\x73\x75\x6D\x6D\x61\x72\x79","","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x3C\x69\x3E\x3C\x66\x6F\x6E\x74\x20\x63\x6F\x6C\x6F\x72\x3D\x22","\x22\x3E\x28","\x29\x3C\x2F\x66\x6F\x6E\x74\x3E\x3C\x2F\x69\x3E","\x4A\x61\x6E","\x46\x65\x62","\x4D\x61\x72","\x41\x70\x72","\x4D\x61\x79","\x4A\x75\x6E","\x4A\x75\x6C","\x41\x75\x67","\x53\x65\x70","\x4F\x63\x74","\x4E\x6F\x76","\x44\x65\x63","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x2D","\x22\x3E\x20\x28","\x3C\x62\x3E","\x3C\x2F\x62\x3E","\x3C\x6C\x69\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x65\x63\x65\x6E\x74\x2D\x6C\x69\x6E\x6B\x22\x3E","\x3C\x2F\x61\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x64\x61\x74\x65\x22\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x63\x6F\x6D\x6D\x65\x6E\x74\x22\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x2F\x75\x6C\x3E","\x3C\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3D\x22","\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x3F\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x26\x6F\x72\x64\x65\x72\x62\x79\x3D\x70\x75\x62\x6C\x69\x73\x68\x65\x64\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x73\x68\x6F\x77\x72\x65\x63\x65\x6E\x74\x70\x6F\x73\x74\x73\x22\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x4D\x79\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x4D\x79\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x30\x25\x3B\x20\x74\x6F\x70\x3A\x20\x30\x70\x78\x3B\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x41\x6C\x6C\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x41\x6C\x6C\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x30\x25\x3B\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x4C\x61\x74\x65\x73\x74\x20\x54\x69\x70\x73\x20\x41\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x4C\x61\x74\x65\x73\x74\x20\x54\x69\x70\x73\x20\x41\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x6C\x65\x66\x74\x3A\x20\x30\x25\x3B\x22\x20\x2F\x3E\x3C\x2F\x61\x3E"];jQuery(function (){jQuery(_0x8189[7])[_0x8189[6]](limitspy,intervalspy)[_0x8189[3]](_0x8189[4],function (){jQuery(this)[_0x8189[2]](_0x8189[5]);} )[_0x8189[3]](_0x8189[0],function (){jQuery(this)[_0x8189[2]](_0x8189[1]);} );} );(function (_0x91b2x1){_0x91b2x1[_0x8189[8]][_0x8189[6]]=function (_0x91b2x2,_0x91b2x3){_0x91b2x2=_0x91b2x2||4;_0x91b2x3=_0x91b2x3||5000;return this[_0x8189[16]](function (){var _0x91b2x4=_0x91b2x1(this),_0x91b2x5=true,_0x91b2x6=[],_0x91b2x7=_0x91b2x2,_0x91b2x8=0,_0x91b2x9=_0x91b2x4[_0x8189[11]](_0x8189[10])[_0x8189[9]]();_0x91b2x4[_0x8189[11]](_0x8189[17])[_0x8189[16]](function (){_0x91b2x6[_0x8189[15]](_0x8189[12]+_0x91b2x1(this)[_0x8189[13]]()+_0x8189[14]);} );_0x91b2x8=_0x91b2x6[_0x8189[18]];_0x91b2x4[_0x8189[22]](_0x8189[21])[_0x8189[20]]()[_0x8189[19]]({height:_0x91b2x9*_0x91b2x2});_0x91b2x4[_0x8189[11]](_0x8189[17])[_0x8189[26]](_0x8189[24]+(_0x91b2x2-1)+_0x8189[25])[_0x8189[23]]();_0x91b2x4[_0x8189[3]](_0x8189[5],function (){_0x91b2x5=false;} )[_0x8189[3]](_0x8189[1],function (){_0x91b2x5=true;} );function _0x91b2xa(){if(_0x91b2x5){var _0x91b2xb=_0x91b2x1(_0x91b2x6[_0x91b2x7])[_0x8189[19]]({height:0,opacity:0,display:_0x8189[28]})[_0x8189[27]](_0x91b2x4);_0x91b2x4[_0x8189[11]](_0x8189[30])[_0x8189[29]]({opacity:0},1000,function (){_0x91b2xb[_0x8189[29]]({height:_0x91b2x9},1000)[_0x8189[29]]({opacity:1},1000);_0x91b2x1(this)[_0x8189[23]]();} );_0x91b2x7++;if(_0x91b2x7>=_0x91b2x8){_0x91b2x7=0;} ;} ;setTimeout(_0x91b2xa,_0x91b2x3);} ;_0x91b2xa();} );} ;} )(jQuery);function showrecentposts(_0x91b2xd){document[_0x8189[32]](_0x8189[31]);j=(showRandomImg)?Math[_0x8189[34]]((imgr[_0x8189[18]]+1)*Math[_0x8189[33]]()):0;img= new Array();for(var _0x91b2x8=0;_0x91b2x8<numposts;_0x91b2x8++){var _0x91b2xe=_0x91b2xd[_0x8189[36]][_0x8189[35]][_0x91b2x8];var _0x91b2x3=_0x91b2xe[_0x8189[38]][_0x8189[37]];var _0x91b2x2;var _0x91b2xb;if(_0x91b2x8==_0x91b2xd[_0x8189[36]][_0x8189[35]][_0x8189[18]]){break ;} ;for(var _0x91b2x4=0;_0x91b2x4<_0x91b2xe[_0x8189[39]][_0x8189[18]];_0x91b2x4++){if(_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[40]]==_0x8189[41]){_0x91b2xb=_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[42]];break ;} ;} ;for(var _0x91b2x4=0;_0x91b2x4<_0x91b2xe[_0x8189[39]][_0x8189[18]];_0x91b2x4++){if(_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[40]]==_0x8189[43]&&_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[44]]==_0x8189[45]){_0x91b2x2=_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[38]][_0x8189[47]](_0x8189[46])[0];break ;} ;} ;if(_0x8189[48] in _0x91b2xe){var _0x91b2xf=_0x91b2xe[_0x8189[48]][_0x8189[37]];} else {if(_0x8189[49] in _0x91b2xe){var _0x91b2xf=_0x91b2xe[_0x8189[49]][_0x8189[37]];} else {var _0x91b2xf=_0x8189[50];} ;} ;postdate=_0x91b2xe[_0x8189[51]][_0x8189[37]];if(j>imgr[_0x8189[18]]-1){j=0;} ;cmtext=(text!=_0x8189[50])?_0x8189[52]+acolor+_0x8189[53]+_0x91b2x2+_0x8189[46]+text+_0x8189[54]:_0x8189[50];var _0x91b2x10=[1,2,3,4,5,6,7,8,9,10,11,12];var _0x91b2x11=[_0x8189[55],_0x8189[56],_0x8189[57],_0x8189[58],_0x8189[59],_0x8189[60],_0x8189[61],_0x8189[62],_0x8189[63],_0x8189[64],_0x8189[65],_0x8189[66]];var _0x91b2x12=postdate[_0x8189[47]](_0x8189[68])[2][_0x8189[67]](0,2);var _0x91b2x9=postdate[_0x8189[47]](_0x8189[68])[1];var _0x91b2x13=postdate[_0x8189[47]](_0x8189[68])[0];for(var _0x91b2x1=0;_0x91b2x1<_0x91b2x10[_0x8189[18]];_0x91b2x1++){if(parseInt(_0x91b2x9)==_0x91b2x10[_0x91b2x1]){_0x91b2x9=_0x91b2x11[_0x91b2x1];break ;} ;} ;var _0x91b2xa=(showPostDate)?_0x8189[52]+acolor+_0x8189[69]+_0x91b2x12+_0x8189[46]+_0x91b2x9+_0x8189[46]+_0x91b2x13+_0x8189[54]:_0x8189[50];_0x91b2x3=(aBold)?_0x8189[70]+_0x91b2x3+_0x8189[71]:_0x91b2x3;var _0x91b2x14=_0x8189[72]+_0x91b2xb+_0x8189[73]+_0x91b2xb+_0x8189[74]+_0x91b2x3+_0x8189[75]+_0x91b2xa+_0x8189[76]+cmtext+_0x8189[77];document[_0x8189[32]](_0x91b2x14);j++;} ;document[_0x8189[32]](_0x8189[78]);} ;document[_0x8189[32]](_0x8189[79]+home_page+_0x8189[80]+numposts+_0x8189[81]);document[_0x8189[32]](_0x8189[82]);
</script></div>

Code theo phong cách 3:

<!--
[Thu Thuat Blog] Thêm tiện ích bài viết gần đây (Recent Posts) cho blogspot
https://choiblogs.blogspot.com/2018/11/them-tien-ich-bai-viet-gan-ay-recent.html
-->
<center><script style="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.windows2it.com/2015/08/them-tien-ich-bai-viet-gan-day-recent-posts-cho-blogspot.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 900px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; width: 286px; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style></center>

Tùy chỉnh

· var posts_no = Số bài bạn muốn xuất hiện

· var showpoststhumbs = Ảnh đại diện < flase: Ẩn và true: Hiện >

· var readmorelink = Hiện chữ “Read more” < flase: Ẩn và true: Hiện >

· var showcommentslink = Hiện số lượng nhận xét < flase: Ẩn và true: Hiện >

· var posts_date = Thời gian đăng bài < flase: Ẩn và true: Hiện >

☼ Kết luận

· Khả năng tùy biến cao thông qua CSS và đoạn scipts mở (chưa mã hóa - endcode)

· Đẹp (=_=) và khá bắt mắt

Chú ý: Bạn nên tải các file JS về cho lên host riêng để dùng lâu dài nha

DOWNLOAD:

http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js
or
https://drive.google.com/open?id=1vOKHQ3UTSsVbNwOqEVTzLJ6t1IasjWDu
or

<!--
[css] Submenu, thu thuat blog,
https://choiblogs.blogspot.com/2018/11/css-submenu.html
-->
<style>
.nav{background:#eee;height:40px;padding:0 0}
.nav{font-size:16px;z-index:99;float:left;padding:0;list-style:none;line-height:40px;height:38px}
.nav a{position:relative;display:block;z-index:100;text-decoration:none;color:#111}
.nav li{float:left;margin:0 5px 0 0}.nav li a{font-family:tahoma,Oswald;padding:0;text-decoration:none;font-weight:bold;line-height:40px}
.nav li a span{padding:5px 18px 4px;color:#444;font-weight:bold}
.nav li.current-cat a,.nav li.current-cat a,.nav li:hover a,.nav li a:hover{margin-bottom:0;text-decoration:none;color:#FFF}
.nav li:hover span,.nav li a:hover span{color:#eee;font-weight:bold}
.nav li.home a{margin:0 0 0 0;background:#e93302;text-align:center}
.nav li.home a span{color:#eee}nav li.news:hover,
.nav li.news:hover ul{background-color:black}
.nav li.news:hover,.nav li.news:hover ul{background-color:#444}
.nav li.news:hover ul li.first{border-top:0}
.nav li.news:hover ul li.last{border-bottom:none}
.nav li ul{list-style:none;background:#fff;position:absolute;left:-999em;width:228px;margin:0 1px 0 0;z-index:999999;padding:0}
.nav .last ul{background:#fff;position:absolute;width:228px;margin:0 1px;z-index:999}
.nav li ul li{width:208px;clear:both;padding:8px 10px;background:none;border:none;margin-left:0}
.nav li ul li a{line-height:1.3;padding:0;color:#eee !important;font-size:14px;text-transform:none;background:none}
.nav li:hover ul li a{background:none;font-weight:bold}
.nav li ul li:hover{background:#e93302}
.nav li:hover,.nav li.hover{position:static}
.nav li:hover ul ul,.nav li:hover ul ul ul,.nav li:hover ul ul ul ul{left:-999999}
.nav li:hover ul,.nav li li:hover ul,.nav li li li:hover ul,.nav li li li li:hover ul{left:auto}
</style>
<!-- PHAN CSS O TREN -->


<ul class='nav'>
<li class='home iconhome'><a href='/'><span>Home</span></a></li>
<li class='news'><a href='#'><span>Submenu 1</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 1.1</a></li>
<li><a href='#'>Submenu 1.2</a></li>
<li><a href='#'>Submenu 1.3</a></li>
<li><a href='#'>Submenu 1.4</a></li>
<li><a href='#'>Submenu 1.5</a></li>
<li class='last'><a href='#'>Submenu 1.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 2</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 2.1</a></li>
<li><a href='#'>Submenu 2.2</a></li>
<li><a href='#'>Submenu 2.3</a></li>
<li><a href='#'>Submenu 2.4</a></li>
<li><a href='#'>Submenu 2.5</a></li>
<li class='last'><a href='#'>Submenu 2.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 3</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 3.1</a></li>
<li><a href='#'>Submenu 3.2</a></li>
<li><a href='#'>Submenu 3.3</a></li>
<li><a href='#'>Submenu 3.4</a></li>
<li><a href='#'>Submenu 3.5</a></li>
<li class='last'><a href='#'>Submenu 3.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 4</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 4.1</a></li>
<li><a href='#'>Submenu 4.2</a></li>
<li><a href='#'>Submenu 4.3</a></li>
<li><a href='#'>Submenu 4.4</a></li>
<li><a href='#'>Submenu 4.5</a></li>
<li class='last'><a href='#'>Submenu 4.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 5</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 5.1</a></li>
<li><a href='#'>Submenu 5.2</a></li>
<li><a href='#'>Submenu 5.3</a></li>
<li><a href='#'>Submenu 5.4</a></li>
<li><a href='#'>Submenu 5.5</a></li>
<li class='last'><a href='#'>Submenu 5.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 6</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 6.1</a></li>
<li><a href='#'>Submenu 6.2</a></li>
<li><a href='#'>Submenu 6.3</a></li>
<li><a href='#'>Submenu 6.4</a></li>
<li><a href='#'>Submenu 6.5</a></li>
<li class='last'><a href='#'>Submenu 6.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 7</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 7.1</a></li>
<li><a href='#'>Submenu 7.2</a></li>
<li><a href='#'>Submenu 7.3</a></li>
<li><a href='#'>Submenu 7.4</a></li>
<li><a href='#'>Submenu 7.5</a></li>
<li class='last'><a href='#'>Submenu 7.6</a></li>
</ul>
</li>
<li class='news'><a href='#'><span>Submenu 8</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 8.1</a></li>
<li><a href='#'>Submenu 8.2</a></li>
<li><a href='#'>Submenu 8.3</a></li>
<li><a href='#'>Submenu 8.4</a></li>
<li><a href='#'>Submenu 8.5</a></li>
<li class='last'><a href='#'>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class='clear'></div>

DOWNLOAD:

https://drive.google.com/open?id=1R2_hC3m-YBxo3HtMqe9-LpqeopZo2fzd
or
2 dang cap nhat
or

UltraCompare là một trong những phần mềm cho người dùng phân tích nội dung văn bản, chương trình sẽ thực hiện so sách nội dung tập tin của các tài liệu đưa ra tỷ lệ trùng nội dung, đánh dấu các nội dung trùng một cách chính xác, hiệu quả và nhanh chóng, ngoài ra chương trình còn cho phép người dùng tìm kiếm, đồng bộ các dữ liệu tìm kiếm và thư mục để thuận việc tìm kiếm, so sánh trở lên nhanh chóng hơn.


UltraCompare Professional là công cụ so sánh để nêu ra sự khác biệt giữa các văn bản, các file nhị phân, tìm kiếm những file trùng lặp có trong hệ thống máy tính. Không những thế, đây còn là ứng dụng rất tốt để hợp nhất các file văn bản có định dạng khác nhau.

Nếu bạn đang phải vất vả kiểm tra những tập tin sẵn có hoặc thay đổi các văn bản định dạng HTML bằng tay mất khá nhiều thời gian mà độ chính xác và năng suất mà nó đem lại thì chưa chắc đã tốt. Việc so sánh mã code của mã nguồn mới với các mã cũ hơn được UltraCompare Professional sửa đổi dễ dàng, hợp nhập các thông tin thay đổi từ những tập tin cũ sang các phiên bản mới hợn.


Thực hiện sao lưu, so sánh các bản copy với các file hiện tại của bạn không phải là điều đơn giản, sẽ rất mất thời gian nếu như phải so sánh một tập tin SQL với các tập cơ sở dữ liệu khác. UltraCompare Professional cung cấp chức năng so sánh, hợp nhất, đồng bộ công cụ sẽ giúp bạn làm được điều đó trong thời gian nhanh nhất.

Tính năng chính của UltraCompare Professional

- So sánh văn bản , tài liệu MS Word.

Sử dụng UltraCompare Professional để sao chép khung vào clipboard với khả năng nhận biết sự khác biệt giữa các khoảng trắng ( tab và dấu cách); hỗ trợ Bookmark : khả năng xóa dòng tự đông, so sánh từng dòng với nhau; thanh trạng thái hiển thị số dòng/ độ chênh lệch.

- Phát hiện sự khác biệt các kí tự trên cùng một dòng văn bản.

Kể cả 2 văn bản có nội dung tương tự nhau, nhưng những lỗi nhỏ nhất như các kí tự khác nhau trên cùng một dòng văn bản cũng được chương trình phát hiện ra.

- Hỗ trợ Command Line.

Chương trình có khả năng so sánh văn bản ngay cả khi đang làm việc với MS DOS thông qua các dòng lệnh được cung cấp, so sánh các văn bản mà không cần phải thoát ra màn hình Windows để làm việc.

- Bỏ qua tùy chọn.

Chương trình cho phép bỏ qua các tùy chọn như các trường hợp cụ thể, bỏ qua dấu cách, dòng trống, các dòng bắt đầu bằng “…”, các dòng có chứa “…”. Ngoài ra, nó còn hỗ trợ so sánh EBCDIC.

- So sánh các tập tin khác nhau.

Ngoài các văn bản, bạn có thể so sánh các dữ liệu trong các file nén ZIP, RAR, so sánh các tập tin nhị phân hoặc ASCII, so sánh tập tin RTF, so sánh hai cấu trúc thư mục và chỉ ra các tập tin có quyền truy cập khác nhau. Khả năng lựa chọn, so sánh các tập tin với tên gọi khác nhau.

- Hợp nhất các dòng trong văn bản.

Các văn bản có định dạng khác nhau vẫn có thể được hợp nhất dễ dàng bằng cách kết hợp số dòng, số khối có trong mỗi tập tin, chọn các dòng tương tự nhất để kết hợp, hoặc kết hợp nội dung của các file trong cùng một thư mục để so sánh.

- Khả năng thiết lập toán tử NOT cho bộ lọc.

- Truy cập nhanh đến các file, thư mục yêu thích.
.
Tùy chọn các thư mục cũng như các file yêu thích, chương trình sẽ truy cập ngay lập tức đến các file mà bạn yêu cầu.

- Hỗ trợ FTP, quản lý các tập tin từ xa.

UltraCompare sử dụng tích hợp với FTP / SFTP giúp cho việc tải về các tập tin văn bản từ máy chủ từ xa, thực hiện so sánh / hợp nhất, sau đó lưu các tập tin của bạn trở lại máy chủ.

- Kéo / thả từ Explorer.

Bạn chỉ việc kéo các văn bản cần so sánh và thả chúng vào cửa số chính của giao diện. Chương trình sẽ thực hiện công việc so sánh ngay lập tức.

DOWNLOAD:

http://f30.x8top.net/2107tmp/cf/soft/2013/8/ba/4/ultracompare_850.exe
or
http://f51.x8top.net/2107tmp/cf/soft/2013/8/ba/4/ultracompare_850.exe
or
https://drive.google.com/open?id=1Ix9_I9s-7uosQuGdt3PfPFogUaJokQjT

Các Widget Popular Post (hay tiện ích bài đăng phổ) mặc định của Blogger thì vô cùng đơn điệu, giờ bạn muốn xây dựng Widget Popular Post độc đáo và bắt mắt với người dùng theo một phong khác mới. Hôm nay windows2it sẽ giúp các bạn làm đều đó với 3 phong cách mà các blogger thường hay dùng nhất.


Đầu tiên bạn cần tạo một Widget Popular Posts/Bài viết phổ biến cho blog của mình (Nếu Blog bạn có rồi thì thôi)

Cách đơn giản, đầu tiên các bạn vào Blog => Bố cục => Thêm tiện ích => Bài đăng phổ biến

Tiếp tục chèn CSS sau vào HTML của Blog/Website bạn

Đầu tiên các bạn vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó dán đoạn mã Code sau lên trên ]]></b:skin> và Lưu mẫu lại.

Code theo phong cách 1:

<!--//
Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot
https://choiblogs.blogspot.com/2018/11/tao-hieu-ung-bai-ang-pho-bien-popular.html
-->
<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

Code theo phong cách 2:

<!--//
Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot
https://choiblogs.blogspot.com/2018/11/tao-hieu-ung-bai-ang-pho-bien-popular.html
-->
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OAeahVb6VIAyzYRbWQODBxBQyRupVVql6M_L4Ojy-NuG18iM7CzP55VLwWB9Q_P5i6dBenVnKVx9bTAjBJUD2B09CS9rOLU7IAAGuHOxWu96YSTUZM438u9DXk4sWUJWWkelFoGVvMM/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Code theo phong cách 3:

<!--//
Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot
https://choiblogs.blogspot.com/2018/11/tao-hieu-ung-bai-ang-pho-bien-popular.html
-->
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Kết luận: Các Code trên hoàn toàn sử dụng CSS, không sử dụng Javascript nên các bạn cứ yên tâm về tốc độ tải, cũng như độ thân thiện với SEO nhé.

DOWNLOAD:

THU THUAT KHONG CO FILE JS HAY HINH ANH NAO DE SAO LUU VA TAI VE. RAT TIEN LOI CHO LOAD VA SEO

Biểu mẫu liên hệ/ Contact Form được tạo ra mặc định thường nằm ở cột Sitebar hoặc là Footer, đó là đều bất tiện trong việc bố trí giao diện đặc biệt hơn nó không thể hiện tính chuyên nghiệp của một blogger.

Hôm nay windows2it sẽ giới thiệu cho bạn một vài biểu mẫu đẹp để cho bạn lựa chọn. Đây là một tiện ích thủ thuật blog cực kỳ hay, tạo sự chuyên nghiệp cho blog của bạn ngay từ cái nhìn đầu tiên. Bắt đầu thực hiện đi nhé!

Tạo ra một biểu mẫu liên hệ/ Contact Form điều trải qua một bước chung:

Bước 1: Blog => Bố cục => Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ => Lưu lại

Bước 2: Tới Mẫu => Chỉnh sửa HTML => Tìn tới id=‘ContactForm1’, bấm vào dấu … mở rộng hết ra và xóa các phần mình đã bôi đỏ đi. (Bước này thực hiện nhằm xóa bỏ Biểu mẫu liên hệ mặc định của blogger tạo ra)

<!-- //[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
-->
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:if cond='data:blog.pageType == "archive"'>
Đoạn code chung
</b:if>

Bước riêng cho từng biểu mẫu
Biểu mẫu 1:


Bước 3.1: Đầu tiên bạn cần vào Blog => Mẫu = > Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm ]]></b:skin> và chèn đoạn mã CSS sau đây ở trên ]]></b:skin>. Sau đó Lưu lại là xong!

<style>
<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjznv0d8WQVHToR6mGqgBMdCKEnYvim4QeBUtlVlp52A_1WBFUS-APVauRcCeFQopSoBVEdQN_7_mSJELjIWI6jD-kYGaj6r4dYPOVyelZfsJpY7NhS3c1RDoaem4P7S6Pw9uWy3BZ0I6M/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOspEO7fJgb2wtCfKPrcXrdscbK2WECy9Q_RvgntqOHYGqE2YLV7pWIstS8pocSeIhJ669ZbuhIOtdiP0EzvO5a2SujuKpR3BXnfUIRl_alwDF-O0B-gIE71j4idXdY2IkOo_JreGiunQ/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinekLrTpssTSqr1KG2sic9V2zXq42c4Sxn_M9_16jZpc-aGltoUZrHjdZSwUqg8oJ3bx9obymovi_2rcanvzzm6_Mg0gT5pZqKKLGAvKrYuu1DskPk4FfYMgi_3CVkBHzmebN-6xk2fqc/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
</style>

Bước 3.2: Bạn muốn tạo Biểu mẫu liên hệ/ Contact Form tại một trang cố định.
Blog => Trang => Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML => Xuất bản!

<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Biểu mẫu 2:


Bước 4.1: Bạn cũng vào Blog => Mẫu = > Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm ]]> và chèn đoạn mã CSS sau đây ở trên ]]>. Sau đó Lưu lại là xong!

<style>
<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}

.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }

.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%; /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}

.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}

.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}

.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px;
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center;
}

/* END CUSTOM CONTACT FORM BY XOMISSE */
<style>

Bước 4.2: Cũng làm tượng tự Blog => Trang => Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML => Xuất bản!

<!--/*[thu thuat blog] Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger
https://choiblogs.blogspot.com/2018/11/tao-bieu-mau-lien-he-contact-form-cho.html
*/-->
<div id='ContactForm1' class='widget ContactForm'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name:</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail: <span id="required">*</span></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message: <span id="required">*</span></p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>

Kết luận:

- Biểu mẫu trong Blog chỉ chứa 3 mục Tên, Địa chỉ email liên hệ và Nội dung, có một số bạn lại thêm Tiêu đề hay Số điện thoại liên các mục này sẽ không gửi đi được đâu thêm vô cũng bằng thừa trừ khi bạn có Hosting riêng.

- Các Biểu mẫu liên hệ trên đều có đoạn CSS riêng nên bạn có thể sửa đổi theo ý muốn của bạn (sẽ không ảnh hưởng CSS trong template của bạn).

DOWNLOAD:

Phòng khi link của tài khoản tạo ra hướng dẫn die ! hoặc bị hack!
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOg5Vm7cbT38QIZoSnEPnB2ro4bmMpIOiBQth3rPlPf0YD_-koYNiVJrmvwSPHoS7ngLa2iWmJ7XdrRYRSsXt12bu5PBDMmvZ5TClpU3QErZ6nKiSf6J2Kuo9-XTOMnMTOEyNtEGmbBNI/s1600/msg2.png
,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6LxTj_eoTovyyXJ5Lp03aGONJVEzWjGsuY-x4IUDz4HhiOyeZPFu7rpW2CXJqG_wjVMkNkSa6PLHLPBPI7Bwb6r9wmf5vzwebBIFNgyUOwNDYEoNRQpqTc9uu7DiMrAWAWwiMaLYNzU/s1600/pen.png
,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy96m41oz9rL39_tJkWYrneyus-Ed4jdALnXpr5cDKQOuV1OhqXSktqgZLH_-NnpL898R_ZZEb1soAz7cX1wsXLxbG5wxNeDDTt5K89MVgS-qbauaaLv5j8s-62GAX3GRfNzNJch8KLpk/s1600/user.png