Code mã màu trong HTML
FLAT UI COLOR
Vui lòng click vào nút màu trên,
Sau đó copy mã màu mà bạn đã chọn.
Tạo nút Back to top dạng Rocket cho Blog/Web
Để thêm vào Site của bạn hãy làm như sau.
Đăng nhập
Mở Blogger> Nhấn vào Template> Chỉnh sửa HTML> Tìm đoạn code ]]> </ b: skin> Sau đó coppy và dán vào trước thẻ ấy đoạn code như sau:
/* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}Sau đó bạn tìm đến thẻ </body> và coppy 2 code phía dưới dán trước thẻ Body:
<a class="showrocket" href="javascript:void(0);" id="rocketmeluncur"><i></i></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>Thế là hoàn tất bạn Lưu lại và xem kết quả.
Tạo Popup đồng hồ đếm ngược cho Blog/Web
Sau đây là cách thực hiện:
Lưu ý: Do tiện ích này can thiệp Code trong Mẫu để an toàn cho Blog bạn hãy sao lưu mẫu trước khi tiến hành theo các bước nhé.
1- Đăng nhập vào Blog2- Vào thẻ Mẫu (Template)
3- Bấm vào nút Chỉnh sửa HTML (Edit HTML)
4- Tìm và thêm đoạn code bên dưới vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type="text/javascript" src="http://tools.mybloggertricks.com/mbt-popup.js"></script>
<script type='text/javascript'>
//<![CDATA[
//Setting Time
TargetDate = "1/1/2016 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Ngày: %%H%% Giờ: %%M%% Phút: %%S%% Giây";
FinishMessage = "It is finally here!";
//Hiding snowfall
$(document).ready(function()
{
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
//Setting cookie
if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
$(document).snowfall('clear');
$(document).snowfall.hide();
$("#myModal").hide();
}
sessionStorage.setItem("Hide-MBT-Popup", 1);
});
$(function() {
// Setting Animation
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: false, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
//Revealing Snowfall
$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250});
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Arial' rel='stylesheet' type='text/css'/>
- Hàng 6: Bạn chỉnh sửa các giá trị "1/1/2016 12:00 AM"
- Hàng 11: "It is finally here!" Khi hết thời gian sẽ hiện bản thông báo bạn có thể tùy chỉnh.
- Hàng 1: Nếu Blog/Web bạn có file Jquery thì xóa bỏ
- Hàng 44: Nếu Blog/Web bạn có CSS Font thì xóa bỏ
5- Thêm đoạn css bên dưới vào trước thẻ đóng ]]></b:skin>
Tùy chỉnh
6- Thêm đoạn mã bên dưới vào trước thẻ mở <body>
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 49%;
top: 10%;
font-size: 15px;
}
.reveal-modal h2 {
position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:170px;
margin-left: -300px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(http://i.vimeocdn.com/video/497620299_640.jpg) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
Tùy chỉnh
- Bạn có thể thay thế Link ảnh: http://i.vimeocdn.com/video/497620299_640.jpg để phù hợp hơn với từng sự kiện.
6- Thêm đoạn mã bên dưới vào trước thẻ mở <body>
<div id="myModal" class="reveal-modal" >
<h2>Thời gian còn lại!</h2>
<script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
Nguồn: mybloggertricks.com
Tạo chữ Drop Cap cho bài đăng Blog/Web
Thực hiện như sau:
Bước 1: Bạn đăng nhập vào phần quản lý trang -> Mẫu -> Chỉnh sửa HTML (Các này áp dụng cho Blogspot)Bước 2: Bạn nhấn Ctrl + F để tìm thẻ ]]></b:skin> Sau đó bạn dán Code như sau:
dc {
float:left;
color:#11b7b5;
font-size:50px;
line-height:40px;
padding-top:1px;
padding-right:5px;
display:block;
font-family:Times, serif, Georgia
}
Để hiển thị kiểu trong bài viết bạn dùng Code HTML như sau
<dc>Chữ cái đầu bài viết</dc>Nội dung tiếp theo của bài viết.............
Đối với Blog/Web bạn nào chỉ cần dùng 1 hay 2 lần có thể không cần thêm vào cấu trúc Mẫu Blog. Bạn dán Code thẳng vào Bài viết đó với chế độ HTML điều được.
Dùng thẻ <style>Code CSS</style> để đóng Code CSS
Dùng thẻ <style>Code CSS</style> để đóng Code CSS
Theo:NVPN BLOG
Tạo trang tổng hợp các bài đăng cho Blog
Nhằm giúp khách tham quan biết được Blog của bạn có bao nhiêu bài đăng và cũng như tiện việc theo dõi bài viết trên Blog của bạn. Đối với Blog khi trang chủ chỉ hiện thị bài viết theo Nhãn như site TYNISOFT thì việt tạo 1 trang tổng hợp rất cần thiết. Hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật đơn giản vừa gọn nhẹ không ảnh hưởng đến Blog của bạn.
- Đầu tiên bạn đăng nhập vào Blogger -> Trang -> Tạo Trang Mới -> Chỉnh chế độ HTML và dán code bên dưới vào.
<link rel="stylesheet" media="screen" href="https://tynisoft.googlecode.com/svn/CSS/baitonghop.css" type="text/css" />Giá trị màu xanh cho phép bạn chỉnh sửa.
<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Đang tải...",
totalPostLabel = "Tổng số bài đăng:",
jumpPageLabel = "Bài Đăng",
commentsLabel = "Bình Luận",
rmoreText = "Xem Thêm ►",
prevText = "Prev",
nextText = "Next",
siteUrl = "http://www.tynisoft.com",
postsperpage = 14,
numchars = 370,
imgBlank = "https://css3-tutsplus.googlecode.com/svn/trunk/daftar-isi/images/no-image.png";
</script>
<script type="text/javascript" src="https://tynisoft.googlecode.com/svn/Java/Baitophop.js"></script>
siteUrl = Thay địa chỉ Blog bạn
postsperpage = Số bài viết hiển thị.
Style facebook DEMO
https://tynisoft.googlecode.com/svn/CSS/baitonghop.cssStyle dark DEMO
https://tynisoft.googlecode.com/svn/CSS/baitonghopdark.css
Nguồn: under-88.blogspot.com
Tạo hộp thông báo với JQuery
Một thủ thuật Blog giúp bạn tạo ra 1 hợp thoại hiện ra ngay khi vào trang với. Nó phù hợp cho bạn để tạo ra 1 bản thông báo hay gắng 1 tiện ích kèm theo. Với 3 bước đơn giản.
1. Bạn đăng nhập vào giao diện chỉnh sữa Blog.
Mẫu -> Chỉnh sửa HTML.
CSS
Sau đó bạn tìm đến thẻ ]]></b:skin>. Dán toàn bộ code ngay phía trên thẻ ]]></b:skin>.#kotak-pesan {
position:fixed !important;
position:absolute; /* IE6 */
top:-1000px;
left:50%;
width:300px;
margin:0 0 0 -182px;
height:auto;
padding:16px;
background-color:#E9CF5F;
border:2px solid white;
font:normal normal 1em/normal Georgia,Serif;
color:#111;
-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);
}
#kotak-pesan a.close {
position:absolute;
top:-10px;
right:-10px;
background-color:#333;
font:normal bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:white;
border:2px solid white;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
JQuery
Tiếp theo bạn dán đoạn code sau vào ngay phía trên thẻ </head><script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-pesan').animate({top:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
HTML
Bạn vào phần Bố Cục tạo một tiện ích HTML dán code này vào. (Bạn có thể đặt cố định trong Mẫu Blog bằng cách đặt nó ngay trên thẻ </body> )<div id='kotak-pesan'>
Bạn có thể đặt Code/HTML các tiện ích hay những dòng thông báo tại đây
<a class='close' href='#'>×</a>
</div>
Nguồn: www.dte.web.id
Tự động cập nhật năm Copyright
- Bạn đăng nhập vào Blogger -> Mẫu -> Chỉnh sửa HTML
- Bạn tìm đến dòng Copyright nếu Blog/Web bạn đã có. Nếu không bạn đặt nó ngay trên thẻ </body>
- Copy code sau
Copyright © 2012 - <span id='current-year'></span>
<script type='text/javascript'>
function getCurrentYear() {
var d = new Date();
return d.getFullYear();
}
el = document.getElementById('current-year');
el.innerHTML = getCurrentYear();
</script>
Tạo menu phân cấp cho Blog/Web
Hôm nay mình xin giới thiệu đến các bạn một dạng Menu phân cấp bằng code CSS đơn giản dành cho Blog
hay Web. Rất tiện lợi cho Blog/web có nhiều Mục nhằm tiện cho bạn quản lý hơn rất thích hợp với những Blog/web chuyên về tin tức hay trang tổng hợp.
Cách làm như sau:
2- Vào phần Mẫu
3- Chọn Chỉnh Sửa HTML
4- Tìm đến thẻ ]]></b:skin> (Bạn dùng tổ hợp phím Ctrl +F tìm cho nhanh )
5- Copy và dán đoạn code phía dưới vào phía trên thẻ ]]></b:skin>
CSS
1- Đăng nhập vào Blog2- Vào phần Mẫu
3- Chọn Chỉnh Sửa HTML
4- Tìm đến thẻ ]]></b:skin> (Bạn dùng tổ hợp phím Ctrl +F tìm cho nhanh )
5- Copy và dán đoạn code phía dưới vào phía trên thẻ ]]></b:skin>
nav {
font:bold 11px Arial,Sans-Serif;
text-transform:uppercase;
}
nav ul {
background-color:black;
color:white;
margin:0px 0px;
padding:0px 0px;
height:30px;
}
nav li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
position:relative;
}
nav li a {
display:block;
text-decoration:none;
color:#999;
line-height:30px;
padding:0px 15px;
}
nav li a:hover,
nav li:hover > a {
background-color:#009;
color:white;
}
nav li ul {
position:absolute;
top:100%;
left:0px;
z-index:99;
width:200px;
height:auto;
display:none;
}
nav li ul li {
float:none;
display:block;
}
nav li ul ul {
top:0px;
left:100%;
}
nav li:hover > ul {
display:block;
}
HTML
Để hiển thị Thanh MENU ở bất kỳ đâu trên Blog/web của bạn. Bạn dùng đoạn code như sau:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a>
<ul>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a>
<ul>
<li><a href="#">Januari</a></li>
<li><a href="#">Februari</a></li>
<li><a href="#">Maret</a></li>
</ul>
</li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2012</a></li>
</ul>
</li>
<li><a href="#">Giới Thiệu</a></li>
</ul>
</nav>
DEMO
Chèn Emoticons vào bình luận Blog
Do Blogspot không hỗ trợ các biêt tượng mặt cười ở phần comment như của Yahoo do vậy nhiều khi các bạn muốn chèn các biểu tượng cảm xúc nhưng lại không biết cách do vậy mình xin giới thiệu cho các bạn cách chèn biểu tượng mặt cười giúp khung bình luận của bạn thêm phần sống động hơn.
Tiện ích Emoticons này là bản nâng cấp từ Blog Duypham đã được mình bổ xung thêm một số biểu tượng thêm phong phú.
Đặc biệt Tiện ích này hổ trợ chèn trực tiếp link Video trực tiếp từ Youtube, link hình có các đuôi như png, jpg, gif và bmp.
Bạn thực hiện như sau:
2- Vào phần Mẫu (Template)
3- Chọn Chỉnh sửa HTML
4- Chèn đoạn mã dưới đây trước thẻ </body>:
// Emoticons Update by TyniSoft
//<![CDATA[
var copyright='Emoticons & Multimedia for Thread Comment by http://duypham.info';
var smileys=[
{'text':':))','img':'http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'},
{'text':':)','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'},
{'text':':((','img':'http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'},
{'text':':(','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'},
{'text':':D','img':'http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'},
{'text':'=))','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'},
{'text':'=D>','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'},
{'text':':-O','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'},
{'text':':-?','img':'http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'},
{'text':':-SS','img':'http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'},
{'text':':-t','img':'http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'},
{'text':'[-(','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'},
{'text':'@-)','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'},
{'text':'b-(','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'},
{'text':'=.=','img':'https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK4vY1n3I/AAAAAAAAAIg/uyq9XnzO7iU/52.gif'},
{'text':'T_T','img':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFwqjK9_pYhVuyNbcd3aTwRO7nyDq5-n21ukAYjDQnFHKZVeIbo8w1eWL-2_kf_mF68k0tK-56i6zGy4t3IVPZ_QrgX9pZxcTGKuIXhu-H0VVz16HgWP0-iuoV71pZ4wiTI6KzQrGNtXm/'},
{'text':':ok','img':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78hm0rjGLYZnMfah1wGdciOdk-FJtLBDzc-9CVQVNdVI6UYCLB3M50XY1UTz_HrrdVg2KNI3MO0DWa-6EVW1t5EFX6HtDMyxp3FsfUfK7edvharJ-Ga1cTL4nmyDZ6wkJmiRLQ8NxAYHK/'},
{'text':':iou','img':'https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXxptF1kJSI/AAAAAAAAAIY/oEhVU5Ne49U/yeulam.gif'},
{'text':':cdv','img':'https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK41uQ_ZI/AAAAAAAAAIo/WFnc77M2sww/38.gif'},
{'text':':woa','img':'https://lh6.googleusercontent.com/-HUHxT4EOSOU/UlBKz_8GDNI/AAAAAAAABy4/vj7_fRq2jIs/s36/85.gif'},
{'text':':la','img':'https://lh5.googleusercontent.com/-BBV7mrokau8/UlBKzwVVDcI/AAAAAAAABy8/1hnpUgbLo3g/s36/67.gif'},
{'text':':x','img':'https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXxpsb1FvKI/AAAAAAAAAIQ/mGikiSKPedg/soldierbaby.gif'},
{'text':':-d','img':'https://lh5.googleusercontent.com/-R7piU_aiQSs/UlDqCRvbfHI/AAAAAAAAB0Y/vPxnb9YxKRs/s36/5.gif'},
{'text':':bye','img':'https://lh3.googleusercontent.com/-XyiFQYIxQ9E/UlDt06AXbxI/AAAAAAAAB04/KbYXdbGROR0/s36/48.gif'},
{'text':';-(','img':'https://lh5.googleusercontent.com/-sZO0cHc2ekY/UlDovg4qJdI/AAAAAAAAB0I/3G7hdBieQpY/s36/1.gif'},
{'text':':mz','img':'https://lh5.googleusercontent.com/-uZaj4hR-308/UnziGjbufLI/AAAAAAAACNo/NcWMvxGxI38/s36/110.gif'},
{'text':'<3','img':'https://lh6.googleusercontent.com/-TO5fOOB_jF4/Uv-GHvtoz4I/AAAAAAAACaM/TkhK5NWg9mM/s36/102.gif'},
{'text':':P','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'}];
var type_img=['png','PNG','jpg','JPG','jpeg','JPEG','gif','GIF','bmp','BMP'];
var dp=['Q a=["\\1b\\m\\w\\b\\q\\t\\w\\z\\u\\r\\1r\\r\\1c\\F\\s\\b\\q\\m\\h\\C\\q\\k\\r\\O\\w\\l\\r\\1e\\o\\l\\h\\k\\C\\r\\1H\\w\\m\\m\\h\\z\\b\\r\\E\\N\\r\\o\\b\\b\\B\\R\\n\\n","\\N\\B","\\q\\z\\O\\w","\\t\\w\\m\\m\\h\\z\\b\\W\\o\\w\\s\\C\\h\\l","\\J\\h\\b\\1b\\s\\h\\m\\h\\z\\b\\1v\\N\\1z\\C","\\B","\\J\\h\\b\\1b\\s\\h\\m\\h\\z\\b\\u\\1v\\N\\1e\\k\\J\\1W\\k\\m\\h","\\s\\h\\z\\J\\b\\o","","\\q\\z\\z\\h\\l\\1X\\1e\\1c\\1T","\\q\\b\\h\\m","\\o\\b\\b\\B","\\u\\B\\s\\q\\b","\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\N\\w\\F\\b\\F\\E\\h\\M\\t\\w\\m\\n\\v\\k\\b\\t\\o\\1d\\1g\\A","\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\z\\o\\k\\t\\t\\F\\k\\b\\F\\q\\M\\t\\w\\m\\n\\z\\J\\o\\h\\1d","\\M","\\q\\z\\C\\h\\T\\1Z\\O","\\u\\F\\E\\u\\b\\l\\q\\z\\J","\\r","\\H","\\H\\E\\l\\n\\L\\H\\E\\l\\n\\L\\H\\q\\m\\J\\r\\u\\b\\N\\s\\h\\A\\p\\m\\k\\T\\W\\v\\q\\C\\b\\o\\R\\1S\\G\\G\\1R\\p\\r\\u\\l\\t\\A\\p","\\p\\n\\L","\\1r","\\H\\E\\l\\n\\L\\H\\E\\l\\n\\L\\H\\q\\O\\l\\k\\m\\h\\r\\v\\q\\C\\b\\o\\A\\p\\1p\\G\\G\\p\\r\\o\\h\\q\\J\\o\\b\\A\\p\\1f\\1Q\\G\\p\\r\\u\\l\\t\\A\\p\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\N\\w\\F\\b\\F\\E\\h\\M\\t\\w\\m\\n\\h\\m\\E\\h\\C\\n","\\1d\\l\\h\\s\\A\\G\\p\\r\\O\\l\\k\\m\\h\\E\\w\\l\\C\\h\\l\\A\\p\\G\\p\\r\\k\\s\\s\\w\\v\\O\\F\\s\\s\\u\\t\\l\\h\\h\\z\\L\\H\\n\\q\\O\\l\\k\\m\\h\\L","\\H\\E\\l\\n\\L\\H\\E\\l\\n\\L\\H\\h\\m\\E\\h\\C\\r\\u\\b\\N\\s\\h\\A\\p\\v\\q\\C\\b\\o\\R\\1f\\G\\G\\B\\T\\1P\\o\\h\\q\\J\\o\\b\\R","\\1c\\A","\\1f\\G\\G","\\1p\\G\\G","\\B\\T\\p\\r\\u\\l\\t\\A\\p\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\z\\o\\k\\t\\t\\F\\k\\b\\F\\q\\M\\t\\w\\m\\n","\\m\\n","\\s\\n","\\p\\r\\O\\s\\k\\u\\o\\1g\\k\\l\\u\\A\\p\\k\\F\\b\\w\\u\\b\\k\\l\\b\\A\\O\\k\\s\\u\\h\\p\\r\\1N\\F\\k\\s\\q\\b\\N\\A\\p\\o\\q\\J\\o\\p\\r\\v\\m\\w\\C\\h\\A\\p\\b\\l\\k\\z\\u\\B\\k\\l\\h\\z\\b\\p\\r\\b\\N\\B\\h\\A\\p\\k\\B\\B\\s\\q\\t\\k\\b\\q\\w\\z\\n\\T\\W\\u\\o\\w\\t\\1D\\v\\k\\1g\\h\\W\\O\\s\\k\\u\\o\\p\\L\\H\\n\\h\\m\\E\\h\\C\\L","\\b\\h\\T\\b","\\H\\q\\m\\J\\r\\u\\l\\t\\A\\p","\\q\\m\\J","\\l\\h\\B\\s\\k\\t\\h","\\C\\F","\\o\\k\\m\\M"];Q V=[];K=[];I=[];1q=a[0];1w=a[1];1u=a[2];1s=1Y[a[4]](a[3]);c=1s[a[6]](a[5]);D(c){U(x=0;x<c[a[7]];x++){Q 1i=a[8];1o=a[8];P=a[8];d=c[a[10]](x)[a[9]];e=d[a[12]](a[11]);f=d[a[12]](a[13]);g=d[a[12]](a[14]);U(Q i=1;i<e[a[7]];i++){U(Q j=0;j<Z[a[7]];j++){1h=e[i][a[16]](a[15]+Z[j]);D(1h!=-1){V[i]=a[11]+e[i][a[17]](0,1h)+a[15]+Z[j];D((V[i][a[16]](a[18])==-1)&&(V[i][a[16]](a[19])==-1)){1i+=a[20]+V[i]+a[21]}}}};U(Q i=1;i<f[a[7]];i++){1a=f[i][a[16]](a[18]);X=f[i][a[16]](a[19]);D(1a!=-1){K[i]=f[i][a[17]](0,1a);Y=K[i][a[16]](a[19]);D(Y!=-1){K[i]=K[i][a[17]](0,Y)}}S{D(X!=-1){K[i]=f[i][a[17]](0,X)}S{D(i==f[a[7]]-1){K[i]=f[i][a[17]](0,d[a[7]])}}};K[i]=K[i][a[12]](a[22]);K[i]=K[i][0];1o+=a[1x]+K[i]+a[1U]};U(Q i=1;i<g[a[7]];i++){1m=g[i][a[16]](a[18]);1n=g[i][a[16]](a[19]);D(1m!=-1){I[i]=g[i][a[17]](0,1m);1j=I[i][a[16]](a[19]);D(1j!=-1){I[i]=I[i][a[17]](0,1j)}}S{D(1n!=-1){I[i]=g[i][a[17]](0,1n)}S{D(i==g[a[7]]-1){I[i]=g[i][a[17]](0,d[a[7]])}}};1k=I[i][a[17]](0,2);I[i]=I[i][a[17]](2,I[i][a[7]]);P+=a[1V];D(1k==a[1t]){P+=a[1O]}S{P+=a[1J]};P+=a[1A];D(1k==a[1t]){P+=a[1y]}S{P+=a[1B]};P+=I[i]+a[1M]};U(Q y=0;y<1l[a[7]];y++){d=d[a[1K]](1l[y][a[1L]],a[1I]+1l[y][a[1E]]+a[21])};D(1G==1q+a[1F]+1w+a[1C]+1u){c[a[10]](x)[a[9]]=d+1i+1o+P}}};',"|","split","||||||||||_0xf28e|x74||||||x65|||x61|x72|x6D|x2F|x68|x22|x69|x20|x6C|x63|x73|x77|x6F|||x6E|x3D|x70|x64|if|x62|x75|x30|x3C|nct|x67|youtube|x3E|x2E|x79|x66|a3|var|x3A|else|x78|for|img|x2D|aft_y2|aft_y3|type_img|||||||||||aft_y1|x45|x4D|x3F|x54|x33|x76|dot_png|a1|aft_nct3|m_l|smileys|aft_nct1|aft_nct2|a2|x34|cbef|x26|cL|26|cbef3|x42|cbef2|23|30|x49|29|31|38|x6B|35|37|copyright|x43|34|28|36|33|32|x71|27|x3B|x32|x25|x31|x4C|24|25|x4E|x48|document|x4F|||","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,127,dp[3][dp[2]](dp[1]),0,{}));
//]]>
5- Tìm đến thẻ
<b:loop values='data:post.comments' var='comment'>Và thêm trước nó thẻ
<div id='emocomments'>6- Tìm thẻ đóng tương ứng với thẻ trên
</b:loop>- Và thêm sau nó thẻ
</div>7- Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.
 |
| Hình DEMO |
(Lưu ý: Tùy thuộc vào tác giả thiết kế mà Blog bạn gồm nhiều đoạn tương tự. Bạn đặc sao cho phù hợp với Blog của mình)
Và chèn đoạn mã dưới đây vào sau nó:
<script type='text/javascript'>8- Thêm một class emoticons. Chèn đoạn mã dưới vào trước thẻ ]]></b:skin>
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">←</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">→</a>';
}
//]]>
</script>
<div class='emocomments'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:(
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:))
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:((
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>=))
<span id='smiley-more' style='display: none;'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>=D>
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>:D
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O
<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-?
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-(
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
<img src='https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK4vY1n3I/AAAAAAAAAIg/uyq9XnzO7iU/52.gif'/>=.=
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFwqjK9_pYhVuyNbcd3aTwRO7nyDq5-n21ukAYjDQnFHKZVeIbo8w1eWL-2_kf_mF68k0tK-56i6zGy4t3IVPZ_QrgX9pZxcTGKuIXhu-H0VVz16HgWP0-iuoV71pZ4wiTI6KzQrGNtXm/'/>T_T
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78hm0rjGLYZnMfah1wGdciOdk-FJtLBDzc-9CVQVNdVI6UYCLB3M50XY1UTz_HrrdVg2KNI3MO0DWa-6EVW1t5EFX6HtDMyxp3FsfUfK7edvharJ-Ga1cTL4nmyDZ6wkJmiRLQ8NxAYHK/'/>:ok
<img src='https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXxptF1kJSI/AAAAAAAAAIY/oEhVU5Ne49U/yeulam.gif'/>:iou
<img src='https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK41uQ_ZI/AAAAAAAAAIo/WFnc77M2sww/38.gif'/>:cdv
<img src='https://lh6.googleusercontent.com/-HUHxT4EOSOU/UlBKz_8GDNI/AAAAAAAABy4/vj7_fRq2jIs/s36/85.gif'/>:woa
<img src='https://lh5.googleusercontent.com/-BBV7mrokau8/UlBKzwVVDcI/AAAAAAAABy8/1hnpUgbLo3g/s36/67.gif'/>:la
<img src='https://lh5.googleusercontent.com/-R7piU_aiQSs/UlDqCRvbfHI/AAAAAAAAB0Y/vPxnb9YxKRs/s36/5.gif'/>:-d
<img src='https://lh5.googleusercontent.com/-sZO0cHc2ekY/UlDovg4qJdI/AAAAAAAAB0I/3G7hdBieQpY/s36/1.gif'/>;-(
<img src='https://lh3.googleusercontent.com/-XyiFQYIxQ9E/UlDt06AXbxI/AAAAAAAAB04/KbYXdbGROR0/s36/48.gif'/>:bye
<img src='https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXxpsb1FvKI/AAAAAAAAAIQ/mGikiSKPedg/soldierbaby.gif'/>:x
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>→</a></span>
</div>
.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;} .emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}
Tạo Contact Form trượt cho Blog
Bạn muốn tạo ra một Contact Form (Biểu mẫu liên hệ) cho Blog của mình nhưng với Blog nhiều tiện ích thì rất bất tiện vì Biểu mẫu chiếm nhiều không gian trong bố cục và có khi làm mất đi thẫm mĩ cho giao diện Blog bạn nữa.
Vì vậy hôm nay mình xin giới thiệu đến các bạn một tiện ích sau đây sẽ giúp bạn ẩn khung biểu mẫu vừa mang lại hiểu quả vừa dễ thực hiện. Các bạn làm như sau:
Thêm Tiện Ích
- Đầu tiên bạn đăng nhập Blogspot
- Bạn vào phần Bố Cục -> Thêm Tiện Ích -> Biểu Mẫu Liên Hệ Mới
 |
| Ảnh minh họa |
CSS
Hãy dán mã dưới đây trước thẻ ]]></b:skin> trong template của bạn..ContactForm, .ContactForm .title {
display: none;
}
.floating-ct {
position: fixed;
width: 250px;
right: 0;
bottom: 0;
z-index: 999;
}
.floating-ct-head a {
padding: 5px 10px;
background: #09f;
color: white;
font-weight: bold;
display: inline-block;
*display: block;
zoom: 1;
}
.floating-ct-body {
height: 285px;
background: white;
border: 1px solid #09f;
padding: 10px;
display: none;
}
.floating-ct-head {
text-align: right;
}
.floating-ct-body .ContactForm {
margin: 0;
display: block!important;
}
Javascript
Sau đó dán mã dưới đây trước thẻ </body> trong mẫu của bạn.<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
if (!slide_up_ct) {
slide_up_ct = true;
$('.floating-ct-body').slideDown();
} else {
slide_up_ct = false;
$('.floating-ct-body').slideUp();
}
});
//]]>
</script>
