Khi xây dựng một trang web ngoài yếu tố cần thiết như nội dung sinh động, hấp dẫn, bạn còn phải tìm và chọn cho mình một host thật tốt để lư...
More »
Home » Bài đăng Blogspot
Hiển thị các bài đăng có nhãn Blogspot. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogspot. Hiển thị tất cả bài đăng
Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger
Có rất nhiều blog đã chia sẻ thủ thuật này nhưng chủ yếu hiệu ứng họ đưa ra là 1 hình ảnh hoặc đoạn text đơn giản "Loading...". Đâ...
More »
Tạo khung đăng Nhập cho Blogger
1 Đăng nhập vào Blogger > Layout > Page Elements (Phần tử trang). 2.Click vào Add a Gadget (Thêm tiện ích), một hộp thoại sẽ bật ra...
More »
Chèn nút nhúng Linkhay và Tagvn vào Blogger
Một trong những cách để bài viết của bạn được nhiều người biết đến chính là việc sử dụng các dịch vụ bookmark và chia sẻ nội dung. Ở Việt Na...
More »
Bài viết liên quan nhiều label cho Blog
Bài viết này thủ thuật blogspot cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiề...
More »
Firebase - Hiển thị lượt xem bài viết cho blog
Tất cả các blogger bây giờ đều mong muốn sẽ có một tiện ích đếm số lượt đọc bài viết trên blog của mình một cách "miễn phí". Đế...
More »
Thủ thuật tối ưu hóa css làm tăng tốc blogspot
Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những...
More »
Từ Khóa
Tổng số lượt xem trang
Hiển thị các bài đăng có nhãn Blogspot. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogspot. Hiển thị tất cả bài đăng
Tạo Host lưu trữ bằng Google Drive cho blog/website
Khi xây dựng một trang web ngoài yếu tố cần thiết như nội dung sinh động, hấp dẫn, bạn còn phải tìm và chọn cho mình một host thật tốt để lưu trữ các file css, các file javascripts, nội dung web,... Thông thường bạn sẽ phải bỏ tiền túi ra để mua những host đó. Vậy tại sao bạn không tận dụng không gian của Google Drive để làm nơi lưu trữ nội dung web vừa nhiều lại vừa miễn phí ?
Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger
Có rất nhiều blog đã chia sẻ thủ thuật này nhưng chủ yếu hiệu ứng họ đưa ra là 1 hình ảnh hoặc đoạn text đơn giản "Loading...". Đây cũng chính là sự khác biệt hơn so với những thủ thuật mình nói bên trên, hiệu ứng Loading mà mình giới thiệu ở bài viết này hoàn toàn được tạo bởi CSS như ví dụ bên dưới, chắc hẳn sẽ có bạn tưởng rằng đây là một hình ảnh động
Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới
Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới
CSS
Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau vào trước thẻ ]]></b:skin> trong template
Script
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Script
Chèn đoạn code bên dưới trước thẻ đóng </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
Chúc thành côngTạo khung đăng Nhập cho Blogger
1 Đăng nhập vào Blogger > Layout > Page Elements (Phần tử trang).
2.Click vào Add a Gadget (Thêm tiện ích), một hộp thoại sẽ bật ra. Sau đó bạn chọn phần tử HTML/Javascript.
3.Thêm đoạn code bên dưới đây vào
2.Click vào Add a Gadget (Thêm tiện ích), một hộp thoại sẽ bật ra. Sau đó bạn chọn phần tử HTML/Javascript.
3.Thêm đoạn code bên dưới đây vào
Chèn nút nhúng Linkhay và Tagvn vào Blogger
Một trong những cách để bài viết của bạn được nhiều người biết đến chính là việc sử dụng các dịch vụ bookmark và chia sẻ nội dung. Ở Việt Nam, LinkHay và TagVN có lẽ là hai địa chỉ được nhiều người dùng nhất.
Bạn có thể tự chia sẻ bài viết của mình lên các dịch vụ này để tìm kiếm đọc giả.
Đây là code sử dụng cho Blogger. Hãy chọn một trong hai file này để tải về:
File 1: LinkHay và TagVn
File 2: AddThis (*), LinkHay, TagVn và Yahoo! Messenger
Cách chèn vào blog:
Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates), tìm:
Hình dưới là hiển thị File 2 trên blog:

* AddThis là nút nhúng số 1 trên internet giúp người đọc đánh dấu và chia sẻ nội dung đến tất cả các mạng xã hội thông dụng. Chỉ cần sử dụng 1 nút nhúng này thay vì dùng nút nhúng của từng dịch vụ riêng lẻ.
Bạn có thể tự chia sẻ bài viết của mình lên các dịch vụ này để tìm kiếm đọc giả.
Đây là code sử dụng cho Blogger. Hãy chọn một trong hai file này để tải về:
File 1: LinkHay và TagVn
File 2: AddThis (*), LinkHay, TagVn và Yahoo! Messenger
Cách chèn vào blog:
Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates), tìm:
<div class='post-footer'>
<!-- Dán code ở đây -->
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Thay <!-- Dán code ở đây --> bằng nội dung của 1 trong 2 tệp tin .txt đã tải về bên trên.Hình dưới là hiển thị File 2 trên blog:

* AddThis là nút nhúng số 1 trên internet giúp người đọc đánh dấu và chia sẻ nội dung đến tất cả các mạng xã hội thông dụng. Chỉ cần sử dụng 1 nút nhúng này thay vì dùng nút nhúng của từng dịch vụ riêng lẻ.
Bài viết liên quan nhiều label cho Blog
Bài viết này thủ thuật blogspot cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiều label (nhãn) và đã được sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.
Các bạn có thể xem qua ảnh để thấy được kết quả hiển thị của thủ thuật rất hay này.

Các bạn có thể xem qua ảnh để thấy được kết quả hiển thị của thủ thuật rất hay này.

Firebase - Hiển thị lượt xem bài viết cho blog
Tất cả các blogger bây giờ đều mong muốn sẽ có một tiện ích đếm số lượt đọc bài viết trên blog của mình một cách "miễn phí".
Đếm lượt xem bài viết
Tạo tài khoản FirebaseTrước tiên bạn phải tạo một tài khoản firebase bằng cách click vào đây sau đó thực hiện theo hướng dẫn bằng hình ảnh

Đếm lượt xem bài viết
Tạo tài khoản FirebaseTrước tiên bạn phải tạo một tài khoản firebase bằng cách click vào đây sau đó thực hiện theo hướng dẫn bằng hình ảnh

Thủ thuật tối ưu hóa css làm tăng tốc blogspot
Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những cách tối ưu hóa CSS và kỹ thuật giảm kích cỡ file được hầu hết các nhà thiết kế web sử dụng. Tùy thuộc vào độ phức tạp của CSS trên trang của bạn mà những kỹ thuật này có thể được vận dụng linh hoạt, góp phần giảm số kylobyte cho CSS files.

Đăng ký:
Bài đăng (Atom)
