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>
