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 »
Hiển thị các bài đăng có nhãn Thủ Thuật. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật. Hiển thị tất cả bài đăng
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ạo hộp bookmarks ở cuối bài viết
SexyBookmarks là một plugin như một menu gồm nhiều icon đại diện cho các trang mạng xã hội được đặt ở cuối mỗi bài viết giúp cho phép người ...
More »
Tạo tab nhều nội dung cho blog
Thông thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar, footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện ...
More »
Khung Author box có nút like cho blogger
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ả...
More »
Bài viết liên quan cùng chủ đề cho blogger
Bài viết liên quan giúp độc giả khi truy cập blog của bạn tiện theo dõi các chủ đè của ban hơn thông qua danh sách các bài viết cũ và mới có...
More »
Hiện nội dung khi like mạng xã hội cho blogspot
Bạn có biết rất nhiều blogger đang sử dụng các trang mạng xã hội để làm tăng lượng truy cập vào Website của họ không? Có rất nhiều cách mà c...
More »
Các code ở footer chân trang blogspot
Đây là một số code trong các mẫu mặc định của blogger mà có thể nhiều người chưa biết. Các code này được blogger sử dụng để trang trí phần c...
More »
Những Code hay thông dụng cho Blogspot
Nhằm phục vụ cho một loạt các bài viết sắp tới trên blog và cũng để blogger nhà ta hiểu thêm về code nên hôm nay mình chia sẻ lại một số c...
More »
Mẫu form liên hệ chính thức của Blogger
Blogger vừa bổ sung mẫu form liên hệ chính thức của riêng mình cho người dùng thông qua một tiện ích mới có tên gọi Biểu mẫu liên hệ (Contac...
More »
Chèn link tự động vào các từ khóa trong bài viết cho Blogspot
Bạn lướt web nhiều đôi khi bạn thấy một số site hay sử dụng 1 số từ khóa và chèn link vào đến 1 bài viết hay 1 chủ đề nào đó có liên quan t...
More »
Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot
Traidatmui.com – Với các bài viết trước mình cũng có chia sẻ với các bạn cách tạo Slideshow cho hình ảnh. tuy nhiên slide mỗi bài mỗi kiểu t...
More »
Thống kê bài đăng, nhận xét, người theo dõi và đang xem blogspot.
Bạn muốn biết blog mình hiện tại có bao nhiêu người theo dõi, bạn đã đăng được bao nhiêu bài, có tất cả bao nhiêu nhận xét. Việc này khôn...
More »
Hiển thị số bài viết và comment trên blogspot
Với thủ thuật này, trên blog của bạn sẽ có một tiện ích thống kê tổng số các bài đã đăng và tổng số các bình luận (comments) trên blog. T...
More »
Hiển thị các bài đăng có nhãn Thủ Thuật. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật. 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...". Đâ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ông
Tạo khung đăng Nhập cho Blogger
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.
Tạo hộp bookmarks ở cuối bài viết
SexyBookmarks là một plugin như một menu gồm nhiều icon đại diện cho các trang mạng xã hội được đặt ở cuối mỗi bài viết giúp cho phép người đọc dễ dàng đưa bài viết của bạn lên các trang mạng xã hội phổ biến nhất một cách tự động.
Bài viết này giới thiệu cách cài đặt một vài kiểu Bookmarks ở cuối bài viết Blogger.
Kiểu 1 như hình minh họa bên dưới.
Bài viết này giới thiệu cách cài đặt một vài kiểu Bookmarks ở cuối bài viết Blogger.
Kiểu 1 như hình minh họa bên dưới.
Tạo tab nhều nội dung cho blog
Thông thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar, footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện ích đặt nối tiếp nhau thì sẽ làm cho trang blog của bạn trở nên dài và load khá chậm. Cách để bạn có thể khắc phục chính là bạn gom các tiện ích là và đặt chúng thành từng tab, điều này sẽ giúp site của bạn ngắn gọn và người dùng dễ dàng xem được các tiện ích trên blog của bạn thông qua các tab đó.
Hình ảnh minh họa
Hình ảnh minh họa
Khung Author box có nút like cho blogger
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.
Bài viết liên quan cùng chủ đề cho blogger
Bài viết liên quan giúp độc giả khi truy cập blog của bạn tiện theo dõi các chủ đè của ban hơn thông qua danh sách các bài viết cũ và mới có cùng chủ đề. Điểm đặc biệt của tiện cihs này là chia thành 2 cột. được mình cải tiên từ tiện ích của blogger anhvo mà mình từng giới thiệu tạibài viết trước đây. Các bạn có thể xem ảnh minh họa để thấy rõ hơn.
Hiện nội dung khi like mạng xã hội cho blogspot
Bạn có biết rất nhiều blogger đang sử dụng các trang mạng xã hội để làm tăng lượng truy cập vào Website của họ không? Có rất nhiều cách mà các blogger áp dụng để liên kết blog của họ với các mạng xã hội. Tuy nhiên, để có thể liên kết và tăng sự liên kết tương tác giữa người dùng và các mạng xã hội là rất khó, vì đa số các cách chỉ là chèn dạng liên kết aherfbình thường, mặc dù có một số tiện ích giúp tăng lượng truy cập theo xã hội như popup, nhưng nó là không đủ. Nếu chúng ta muốn thống trị các trang web xã hội, thì mỗi chúng ta phải sử dụng mọi cơ hội mà chúng ta có. Vì lý do đó, namkna sẽ giới thiệu một tiện ích của mybloggerlab để khóa nội dung dựa trên các like của độc giả.
Các code ở footer chân trang blogspot
Đây là một số code trong các mẫu mặc định của blogger mà có thể nhiều người chưa biết. Các code này được blogger sử dụng để trang trí phần chân blog.
Những Code hay thông dụng cho Blogspot
Nhằm phục vụ cho một loạt các bài viết sắp tới trên blog và cũng để blogger nhà ta hiểu thêm về code nên hôm nay mình chia sẻ lại một số code thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng sẽ giúp ích được cho các bạn.
Bài viết này và bài viết css căn bản của mình có vài thành phần trùng nhau nhưng do mình sưu tầm trên blog khác nên mình xin giữ nguyên văn.
Mẫu form liên hệ chính thức của Blogger
Blogger vừa bổ sung mẫu form liên hệ chính thức của riêng mình cho người dùng thông qua một tiện ích mới có tên gọi Biểu mẫu liên hệ (Contact form). Trước đây chúng ta đều phải sử dụng dịch vụ của một bên thứ ba. Nay thì mọi thứ đơn giản hơn, bạn có thể nhận tin nhắn từ người đọc ngay trong email mà không cần cung cấp địa chỉ email ra bên ngoài.
Để sử dụng form này bạn chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác >Biểu mẫu liên hệ (Xem lần lượt các hình 1, 2, 3)
Để sử dụng form này bạn chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác >Biểu mẫu liên hệ (Xem lần lượt các hình 1, 2, 3)
Hình 1
Chèn link tự động vào các từ khóa trong bài viết cho Blogspot
Bạn lướt web nhiều đôi khi bạn thấy một số site hay sử dụng 1 số từ khóa và chèn link vào đến 1 bài viết hay 1 chủ đề nào đó có liên quan trong bài viết đang xem. Dĩ nhiên điều đó bạn có thể chèn thủ công trong lúc soạn thảo bài viết đó để người xem click tới bài viết liên quan đó. Tuy nhiên nếu bạn muốn đặt link cho 1 từ khóa mà thường xuyên lặp lại trong nội dung bài viết của bạn và liên quan đến nội dung web/blog bạn cung cấp rất nhiều, bạn muốn đánh dấu, đặt link cho từ khóa đó thì việc làm thủ công sẽ mất cho bạn khá nhiều thời gian. Để giải quyết vấn đề đó thì hôm nay mình chia sẻ cho các bạn một thủ thuật sẽ tự động add link cho các từ khóa mà bạn đã thiết lập trước. Khi bạn đã thiết lập từ khóa và link dẫn cho từ khóa đó trước thì nếu bất kỳ bài viết nào trong web/blog của bạn có từ khóa đó thì nó sẽ được tự động được thêm link và đường dẫn bạn thiết lập cho nó.Cách thực hiện
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới ngay trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>
6. Tìm đến đoạn code như bên dưới
<data:post.body/>
7. Thay thế đoạn code vừa tìm được thành đoạn code sau
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 3',true,'Link từ khóa 3','summary<data:post.id/>');
</script>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 3',true,'Link từ khóa 3','summary<data:post.id/>');
</script>
Bạn thay từ khóa và link cho các từ khóa tương ứng. Nếu bạn muốn thêm hay bớt từ khóa thì chỉ cần copy hay xóa bỏ đoạn code highlightSearchTerms('Từ khóa 1',true,'Link cho từ khóa 1','summary<data:post.id/>'); và chỉnh sửa lại cho hợp lý là được.
8. Cuối cùng save template lại
Bây giờ bạn hãy truy cập vào bất kỳ 1 bài viết mà có chứa từ khóa bạn đã thiết lập ở trên để thấy kết quả nhé. Đây là một cách khá hay giúp bạn đặt link cho từ khóa quan trọng khá nhanh và góp phần nào vào việc SEO cho từ khóa blog bạn.
Chúc bạn thành công!
Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot
Traidatmui.com – Với các bài viết trước mình cũng có chia sẻ với các bạn cách tạo Slideshow cho hình ảnh. tuy nhiên slide mỗi bài mỗi kiểu trình diễn. Nhằm thêm đa dạng kiểu trình diễn ảnh thì hôm nay mình chia sẻ cho các bạn một thủ thuật nữa để tạo slideshow cho hình ảnh của bạn. Với thủ thuật này thì hình ảnh của bạn sẽ tự động trình diễn với 1 khoảng thời gian định trước cùng với nội dung mô tả cho hình ảnh tương ứng. Với 2 nút điều khiển tới lùi thì bạn có thể lần lượt xem tất cả hình ảnh trong slide đó và phần mô tả sẽ trượt lần lượt theo hình ảnh tương ứng trông đẹp mắt.
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
5. Chèn code bên dưới vào trước thẻ </head>
6. Save template lại và vào Bố cục (Layout)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
Bạn hãy thay link ảnh (Link màu xanh) thành link hình ảnh của bạn và nội dung mô tả tương ứng cho hình ảnh của bạn.
8. Cuối cùng save tiện ích lại
Chúc bạn thành công!
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
#slider{ width:660px;height:275px;position:relative;overflow:hidden;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}
5. Chèn code bên dưới vào trước thẻ </head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://traidatmuidata.googlecode.com/files/jquery.scrollTo.js"></script>
<script>/* <![CDATA[ */
$(document).ready(function() {
var speed = 5000; // Tốc độ trình diễn
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
/* ]]> */</script>
<script type="text/javascript" src="http://traidatmuidata.googlecode.com/files/jquery.scrollTo.js"></script>
<script>/* <![CDATA[ */
$(document).ready(function() {
var speed = 5000; // Tốc độ trình diễn
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
/* ]]> */</script>
6. Save template lại và vào Bố cục (Layout)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2cw1RUGsGR7bE5IrO6B_0z-aaJ8MbebK2INoTr8vgXyC8YehCQ_mXcoWd2DNG8tzOMKPbB-8ZQ4YZ5LTstjdwuVSZM8gXUl9w1pCWzxguwpxgL7NfGi56qTvAlyS2gnGBP08y_2O71i1/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaha75ciKQXljgSpr48DCLgbtSz3ZtHM45fXMbb0O1w9vviumixYCLd8EbqfDu9OKVFpr1xqkgnq2IGtAT8M5TYr9TiabdmzjcpYp9J7zHMBKf7_ygWcP6R7wlKIvVjnRk3dC_Kf5Hr9tj/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTGFGCoIhlMAp9T6wkkeTcGbaeG3XeU3nWLpiuCQduVGbkNdmPWGeIbJGbnBEICOSjsP4ZEAQpnIGZx44Rzq1vQNFvnsOqtulMsKjqVd1k_3HKGaNNeNpMLx2ZthiGaCvWrUKrqk1hIGc/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSK-LYfO_SdfZcHEn-head9zA3QA2eSmwvQ-nSzxRoItsnDKb5_2TblS9g39KTdyIwTzhdS1U7zBo1eC2PeBac0XhBruxUVPluyCzZwBNjAj7EQCAfRyyC106Iv71J_QtH7jkzaUTeuJp/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdbR3vo9SN_hZb3pgWfh3qUVxGr7IWXphZbaGgQlyp-mbbF4qx1KjpZHFssGm7e5DpswWEPVeTPhIFgb2eJBui_dIMZ9_t6SIlnhsBGmEQIKD7dqtbGWhbPoYmfxEWc1_rt5LQIB3vJKs/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2cw1RUGsGR7bE5IrO6B_0z-aaJ8MbebK2INoTr8vgXyC8YehCQ_mXcoWd2DNG8tzOMKPbB-8ZQ4YZ5LTstjdwuVSZM8gXUl9w1pCWzxguwpxgL7NfGi56qTvAlyS2gnGBP08y_2O71i1/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaha75ciKQXljgSpr48DCLgbtSz3ZtHM45fXMbb0O1w9vviumixYCLd8EbqfDu9OKVFpr1xqkgnq2IGtAT8M5TYr9TiabdmzjcpYp9J7zHMBKf7_ygWcP6R7wlKIvVjnRk3dC_Kf5Hr9tj/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTGFGCoIhlMAp9T6wkkeTcGbaeG3XeU3nWLpiuCQduVGbkNdmPWGeIbJGbnBEICOSjsP4ZEAQpnIGZx44Rzq1vQNFvnsOqtulMsKjqVd1k_3HKGaNNeNpMLx2ZthiGaCvWrUKrqk1hIGc/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSK-LYfO_SdfZcHEn-head9zA3QA2eSmwvQ-nSzxRoItsnDKb5_2TblS9g39KTdyIwTzhdS1U7zBo1eC2PeBac0XhBruxUVPluyCzZwBNjAj7EQCAfRyyC106Iv71J_QtH7jkzaUTeuJp/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdbR3vo9SN_hZb3pgWfh3qUVxGr7IWXphZbaGgQlyp-mbbF4qx1KjpZHFssGm7e5DpswWEPVeTPhIFgb2eJBui_dIMZ9_t6SIlnhsBGmEQIKD7dqtbGWhbPoYmfxEWc1_rt5LQIB3vJKs/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>
Bạn hãy thay link ảnh (Link màu xanh) thành link hình ảnh của bạn và nội dung mô tả tương ứng cho hình ảnh của bạn.
8. Cuối cùng save tiện ích lại
Chúc bạn thành công!
Nguồn: Traidatmui.com
Thống kê bài đăng, nhận xét, người theo dõi và đang xem blogspot.
Bạn muốn biết blog mình hiện tại có bao nhiêu người theo dõi, bạn đã đăng được bao nhiêu bài, có tất cả bao nhiêu nhận xét. Việc này không hề khó hôm nay namkna xẽ giới thiệu cho các bạn tiện ích làm được tất cả điều đó ngoài ra còn thêm chưc năng đếm số người theo dõi trên Twitter, liên kết đăng ký đọc tin feed.Cách thực hiện:
Hiển thị số bài viết và comment trên blogspot
Với thủ thuật này, trên blog của bạn sẽ có một tiện ích thống kê tổng số các bài đã đăng và tổng số các bình luận (comments) trên blog. Tiện ích này sẽ tự động cập nhật khi bạn đăng bài mới hoặc có comments mới. Tiện ích này có hình dáng như hình cạnh bên.
Đăng ký:
Bài đăng (Atom)