Hiện nay mình thấy có rất nhiều bài viết hướng dẫn về cách tạo box tác giả cho blogspot, tuy nhiên hầu hết những thủ thuật đó phải làm thủ công bằng cách thêm ID của từng tác giả vào, hơn nữa cũng không thống kê tác giả đó đã viết được bao nhiêu bài trên blog, như vậy thật là bất tiện. Và giải pháp cho chúng ta đó chính là Customizable Author Box with post count của blog yabtb. Thật tuyệt với, bạn chỉ việc cài đặt một lần cho template của mình, tất cả công việc lấy tên và link profile của tác giả, thống kê số lượng bài viết đều hoàn toàn tự động
Đọc thêm»
Bài viết này mình sẽ hướng dẫn bạn làm cách nào để thêm 2 button Lên trên và Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng nhờ sử dụng Javascript. Và các button mình không sử dụng hình ảnh như các thủ thuật trước mà thay vào đó các button sẽ được tạo từ CSS. Nếu bạn có hứng thú với tiện ích thú vị này hãy làm theo các bước hướng dẫn đơn giản bên dưới!
Thêm CSS
Bạn hãy thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>#gotop{cursor:pointer;width:30px;height:30px;position:fixed !important;position:absolute;z-index:999;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;overflow:hidden}
#gotop:hover:after{border-bottom-color:white}
#gotop:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px}
#gobottom{cursor:pointer;width:30px;height:30px;position:fixed!important;position:absolute;top:26px;right:0;z-index:99;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px;border-radius:0 0 0 10px;overflow:hidden}
#gobottom:hover:after{border-top-color:white}
#gobottom:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:#C3D1D7 transparent transparent transparent;position:absolute;top:10px;left:11px}Javascript
Thêm code sau vào trước thẻ đóng </body><script type='text/javascript'>
//<![CDATA[
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#gotop").removeAttr("href");
$("#gotop").stop().animate({
bottom: "0",
right: "0"
}, {
duration: 800,
queue: false
})
} else {
$("#gotop").stop().animate({
bottom: "-50",
right: "-50"
}, {
duration: 1000,
queue: false
})
}
if ($(this).scrollTop() > 100) {
$("#gobottom").removeAttr("href");
$("#gobottom").stop().animate({
top: "-50",
right: "-50"
}, {
duration: 800,
queue: false
})
} else {
$("#gobottom").stop().animate({
top: "0",
right: "0"
}, {
duration: 1000,
queue: false
})
}
});
$(function () {
$("#gotop").click(function () {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false
})
$("#gobottom").click(function () {
$("html, body").animate({
scrollTop: $('#footer').offset().top
}, 970);
return false
})
});
//]]>
</script>
<a id="gotop" style="bottom: -50px; right: -50px;">Lên Trên!</a>
<a id="gobottom" style="top: 0px; right: 0px;">Xuống Dưới!</a>
<div id='footer'/>
Chúc blog bạn ngày càng đẹp và phát triển! Nếu có thời gian mời bạn ghé thăm blog cá nhân của mình tại địa chỉ TrollVL.Com
Nguồn TrollVL.Com
Tiếp theo loạt bài về các slider không dùng javarscripts. Hôm nay namkna sẽ giới thiệu đến cho các bạn một slider trình diễn hảnh cực đẹp của DTE, và điều đặc biệt là nó cấu tạo hoàn toàn từ CSS3, do vậy bạn không phải lo nó làm chậm blog của bạn. Slider này được tích hợp thêm hiệu ứng xoay tròn khi chuyển tiếp giữa 2 bức ảnh giúp blog của ban thêm sinh động hơn.
Bạn có thể xem ảnh minh họa.
Đọc thêm»
Khung thông tin tác giả (Author box) được sử dụng phổ biến ở rất nhiều blog, website hay diễn đàn. Đây là phần giới thiệu vắn tắt về tác giả hoặc cũng có thể để chưa một số liên kết tắt tới các mạng xã hội. Thông qua khung này các độc giả có thể hiểu sơ qua về tác giả của bài viết hoặc blog.
Đọc thêm»
Làm thế nào để thêm slide với hiệu ứng trượt đẹp sử dụng CSS3 và HTML. Tiện ích sẽ giúp cho blog của bạn hấp dẫn, bạn có thể thêm một số hình ảnh có liên quan đến blog để trình chiếu. Bao gồm một số hiệu ứng như di chuyển tiêu đề và ảnh thumbnail. Tiện ích này giúp tăng tốc blog vì nó sử dụng hoàn toàn CSS3 như ves 1 và ves 2.
Bạn có thể xem ảnh minh họa.
Đọc thêm»
Với mẫu dropdown fly menu sử hiệu ứng bay từ CSS3 blog của bạn sẽ đặc biệt hơn, và sẽ không lo tốc độ vì tất cả đều là CSS3. Các menu con sẽ bay khi dê chuột vào menu chính. Menu hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi, opera,.... Các bạn có thể xem ảnh minh họa hoặc demo.
Đọc thêm»
Với menu này các menu con và các hiệu ứng hoàn toàn từ CSS3 giúp tốc độ blog của bạn tối ưu hơn so với các menu từ javarscrip và Jquery. Điểm đặc biệt là menu chạy tốt trên nhiều trình duyệt khác nhau như: Moliza Firefox, Google Chroome, Opera (10 và 11), Internet explorer (6,7,8,9,10), Safari,...
Đọc thêm»
Hôm nay mình sẽ giới thiệu thêm cho các bạn một cách tùy biến mới dành cho widget label được phát triển bởi tác giả premium-stuff-guru. VỚi thủ thuật này các label sẽ được đặt trong một khung và số bài đăng của mỗi label sẽ ản đi chỉ hiện thị khi di chuột vào. Điều đặc biệt của tiện ích này là chỉ sử dụng các hiệu ứng từ CSS3 nên không ảnh hưởng đến tốc độ load như các hiệu ứng Jquery.
Đọc thêm»
Trong hướng dẫn này, namkna sẽ chỉ cho bạn Làm thế nào để thêm các nút trên Bàn phím bằng mã CSS cho Blogger/blogspot của bạn. CSS này không có hình ảnh nên nó không ảnh hưởng đến tốc độ blog của bạn. Bạn có thể dễ dàng thêm hiệu ứng button này trên Mỗi bài viết trong Blog. Để thêm nó bạn chỉ cần thực hiện theo các bước đơn giản dưới đây.
Đọc thêm»
Khung thông tin tác giả (Author box) được sử dụng phổ biến hiện nay ở tất cả các blog, web site hay diễn đàn. Đây là phần giới thiệu vắn tắt về tác giả hoặc cũng có thể để chưa một số liên kết tắt tới các mạng xã hội. Thông qua khung này các độc giả có thể hiểu sơ qua về tác giả của bài viết hoặc blog.
Hiện nay có rất nhiều các tùy biến khung Author box. Cách hôm nay namkna giới thiệu hoàn toàn sử dụng CSS sseer tạo các hiệu ứng bo góc riboxom nhắm tối ưu tốc độ tải trang. Đây có thể sẽ là lựa chọn tuyệt vời cho các bạn không thích sử dụng hình ảnh trong template. Nếu để ý kỹ bạn cũng có thể thấy namkna cũng có một khung Author box từ CSS.
Hiện nay có rất nhiều các tùy biến khung Author box. Cách hôm nay namkna giới thiệu hoàn toàn sử dụng CSS sseer tạo các hiệu ứng bo góc riboxom nhắm tối ưu tốc độ tải trang. Đây có thể sẽ là lựa chọn tuyệt vời cho các bạn không thích sử dụng hình ảnh trong template. Nếu để ý kỹ bạn cũng có thể thấy namkna cũng có một khung Author box từ CSS.
Đọc thêm»
Các thuộc tính CSS3 có khả năng xoay các thành phần html theo phong cách 3D. CSS3 3D này sẽ giúp bạn biết cách làm thế nào để xoay hoặc lật hai mặt của hình ảnh hoặc thành phần html để tiết lộ nội dung ở phía sau của hình ảnh ban đầu. Khi người sử dụng di chuột lên các hình ảnh hoặc thành phần html ban đầu họ sẽ thấy hình ảnh lật và xoay với hiệu ứng 3D.
Đọc thêm»
CSS3 là có một ưu điểm chỉ mình nó có đó là không ảnh hưởng đến tốc độ tải trang của bạn (trong khi nếu dùng javascript blog của bạn sẽ mất thời gian tải lâu hơn do phải gửi repuest). Hôm nay namkna sẽ hướng dẫn các bạn một slider với hiệu ứng trượt ngang mượt mà từ các thuộc tính CSS3 tức là không có jQuery hoặc không có bất kỳ mã JavaScript nào khác. Đây là một slider từ css3 đúng nghĩa do vậy đừng ngạc nhiên nếu thấy tốc độ của nó nhanh hơn bất kỳ một slider từ jQuery. Slider này chỉ có một hiệu ứng trượt ngang duy nhất (khác với slider CSS3 vesion 1 trước đây trượt dọc từ trên xuống).
Demo của thủ thuật:VIEW DEMO
Ảnh minh họa:
Tool này được tác giả MKR viết ra nhằm phục vụ cho những người yêu thích thiết kế website/blog tạo những button CSS3 theo ý muốn nhanh và tiện lợi nhất. Nay mình xin được chia sẻ đến độc giả của Namkna. Với tool này mình chúc bạn sẽ tạo những nhiều button như mong muốn tôn thêm vẻ đẹp của blog/website
Đọc thêm»
Bài viết xem nhiều nhất
Đặt làm trang chủ
Giới thiệu
E-mail: admin@tenmiencuaban.com
Liên hệ Quảng cáo
Tuyển cộng tác viên
Đường dây nóng 0123.45.67.89
Bản quyền thuộc về http://componentstvonline.blogspot.com/
Chạy trên nền tảng Blogger
vui lòng liên hệ email: phamvinhkxtb@gmail.com
Mobile: 01666.567.803 Hoặc xem thêm những mẫu dành cho Blogger Tại đây
Chạy trên nền tảng Blogger
vui lòng liên hệ email: phamvinhkxtb@gmail.com
Mobile: 01666.567.803 Hoặc xem thêm những mẫu dành cho Blogger Tại đây
Top