Thư viện

Trải nghiệm

Hiển thị các bài đăng có nhãn Blogspot JQuery. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogspot JQuery. Hiển thị tất cả bài đăng

Thứ Hai, tháng 3 17, 2014

Blogger comment box widget

by
Bài viết này mình sẽ chia sẻ một thủ thuật với phần comment của Blogger, đó là tạo một widget cho phép ẩn/hiện các comment và khung comment. Các bạn có thể xem hình bên.

Thứ Ba, tháng 2 11, 2014

Phân trang tự động tải thêm bài viết cho blogger với Ajax Jquery

by
Với thủ thuật này khi thay vì sử dụng một tiện ích phân trang có các Button số để bấm thì nó sẽ hiển thị khi bạn bấm vào nút tải thêm bài viết. Điểm đặc biệt của phân trang này là nó sử dụng Ajax Jquery cho nên bài viết của bạn sẽ được tải thêm khi bấm vào nút tải thêm mà không cần phải tải lại trang web. Điểm đặc biệt khi áp dụng tiện ích này không hề phát sinh lỗi HTML 5 nên bạn có thể yên tâm áp dụng nó.

Phân trang tự động tải thêm bài viết cho blogger với Ajax Jquery

Thứ Sáu, tháng 1 03, 2014

Popup Đồng hồ đếm ngược chào đón năm mới cho blogger

by
Tết âm lịch với người việt nam nói riêng và người châu á nói chung là một ngày tết vô cùng ý nghĩa. Nhà nhà đều sắm sửa đón tết, còn những blogger chúng ta cũng dộn dịp trang trí blog bằng những hiệu ứng đẹp như: Thay đổi hình nền ngày tết, trang trí hoa đào tết,... Để góp phần đưa không khí tết đến với mọi nhà Bài viết này namkna sẽ hướng dẫn các bạn cách tạo một cửa sổ Popup đồng hồ đếm ngược khi độc giả truy cập vào trang của bạn đọc nội dung.

Popup Dồng hồ dếm ngược chào năm mới

Thứ Tư, tháng 1 01, 2014

Hiện Next & Previous kèm tiêu dề bài viết cho blogger

by
Thủ thuật này sẽ bổ xung thêm vào nút phân trang Older/Newer post (bài đăng cũ hơn, và bài đăng mới hơn) trong blog kèm theo tiêu đề bài viết. Cách thay thế thành tiêu đề bài viết co thể có nhiều blog đã viết nhưng có thể bạn sẽ thấy tiếc nếu không đọc bài viết này. Tại sao namkna nói vậy? Tại vì tiện ích này có điểm đặc biệt khác với những hướng dẫn của mọi người. Tiện ích này sẽ di chuyển phần Tiêu đề bài đăng cũ hơn và bài đăng mới hơn xuống ngay bên dưới bài đăng (thay vì sau comment như các hướng dẫn khác). Như vậy sẽ tăng được tính tò mò của độc giả về bài viết tiếp theo, Như vậy khả năng thu hút người đọc bấm vào để xem một trong 2 liên kết đó là rất lớn. Thêm nữa tiện ích này cũng hiển thị cả tiêu đề bài viết nên càng nếu thấy có ích người đọc sẽ bấm chuột vào đó để đọc nội dung bài viết (hơn là chỉ hiện nút bấm phải không các bạn?)

Ảnh minh họa:

Hiện Next & Previous kèm tiêu dề bài viết cho blogger

Thứ Năm, tháng 12 12, 2013

Không cho thay đổi tác giả khi chia sẻ template cho blogger

by
Như các bạn đã biêt khi thiết kế một mẫu cho blogger để chia sẻ cho mọi người thì có một phần rất quan trọng đó chính là phần tác giả được người thiết kết thêm vào phần chân blog để mọi người có thể biết được ai là tác giả của mẫu đó.
Không cho thay đổi tác giả khi chia sẻ template cho blogger
Tuy nhiên, không phải ai cũng có thành ý giữ lại nhưng thông tin về tác giả đó, đa số họ sẽ cá nhân hóa nó để không ai biết những mẫu này được tải của người khác. Vậy giải pháp đặt ra ở đây là làm thế nào để ngăn chặn không cho họ chỉnh sửa những thông tin về tác giả (copyright) cuối trang blog.

Thứ Năm, tháng 11 28, 2013

Nút like ẩn hiện khi xem bài viết blogger

by
Thủ thuật này sẽ giúp các bạn thêm nút chia sẻ của các mạng xã hội vào dưới mỗi bài viết trên trang blog của bạn. Khi bạn kéo thanh cuộn để dọc bài viết đến một vị trí nhất định thì Facebook, Twitter, Google+, LinkedIn, Bên cạnh đó có một nút đóng để các bạn có thể đóng nó khi thấy không cần thiết.
Floating Social Share Buttons for Blogger
Ảnh minh họa

Chủ Nhật, tháng 10 13, 2013

Tăng độ phân giải ảnh thumbnail của blogger

by
Như các bạn đã biết thì ảnh thumbnail mặc định của blogger là 72x72 px. Do vậy nếu bạn tăng kích thước của ảnh thì ảnh sẽ sảy ra hiện tượng vỡ hạt nhìn rất mất thẩm mỹ cho trang của bạn. Bài viết này mình sẽ hướng dẫn các bạn cách để có thể tăng chất lượng của ảnh thumbnail cho một số tiện ích của blogger như Silder bloglist, Readmore không dùng Javascripts, Popularposst,....
Tăng độ phân giải ảnh thumbnail của blogger

Thứ Bảy, tháng 10 05, 2013

Popup search với Thumbnail từ JQuery cho blogspot ves2

by
Tiếp tục chủ đề tạo khung tìm kiếm không cần phải load lại trang . trong bài viết này mình sẽ hướng dẫn các bạn các tạo một khung tìm kiếm hiển thị kết quả không cần phải tại lại trang, với hiệu ứng mượt mà từ thư viện Jquery đẻ các bạn có thể tạo sự khác biệt so với các blog khác. Phương thức hoạt động của tiện ích này là nó sẽ xuất hiện một box kết quả nhỏ ngay dưới ô tìm kiếm bao gồm tiêu đề bài viết, một vài dòng mô ta trích xuất từ trong bài viết, và đặc biệt là có thêm hình ảnh thumbnail lấy ngẫu nhiên trong bài viết đó của bạn.

Thứ Bảy, tháng 9 14, 2013

Thêm comment Facebook, Google+ vào blogger ves4

by
Bài viết này mình sẽ hướng dẫn các bạn thêm cùng lúc 3 loại comment phổ biến nhất hiện nay dành cho blogger. Đó là comments mặc định của blogger, comments của trang facebook và cuối cùng là comment của trang google +. Với dạng tab chuyển động nên cho dù các bạn chèn 3 loại comment nhưng không hề chiếm diện tích và làm sấu bố cục, mà ngược lại nó còn làm cho trang của bạn nhìn chuyên nghiệp hơn.

Các bạn có thể xem ảnh minh họa để thấy rõ nguyên tắc hoạt động của thủ thuật này trước khi quyết định có áp dụng nó hay không nha:
Thêm comment Facebook, Google+ vào blogger  ves4

Thứ Sáu, tháng 9 13, 2013

Hiệu ứng loading đẹp trên đầu blogspot

by
Hiệu ứng loading đẹp trên dầu cho blogspot
Nếu mấy hôm nay các bạn truy cập vào trang youtube sẽ thấy trang đó có một hiệu ứng loadding cực lạ đó là thanh loading chạy ngang ngay trên đầu của trang đó. Bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng loadding đó vào blog của các bạn.

Thứ Hai, tháng 9 02, 2013

Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng

by
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!



Live Demo

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

Thứ Ba, tháng 8 27, 2013

Chèn Album ảnh từ Facebook Page vào blogger

by
Hiện nay Facebook một nguồn giúp tăng lưu lượng truy cập cho các web/blog. Đây là lý do tại sao các quản trị web tập trung nhiều hơn tới các liên kết trang web của họ với các Plugins của Facebook. Namkna đã từng giới thiệu làm thế nào để thêm khung bình luận của facebook vào blog, hộp Khuyến nghị FacebookFacebook Fan Box trong Blogger. Gần đây, một trong những độc giả của namkna  yêu cầu làm thế nào để tạo một thư viện ảnh từ Facebook với Jquey cho Blogger? Hôm nay, trong bài viết này namkna sẽ hướng dẫn các bạnl àm thế nào để tạo một thư viện ảnh từ Facebook với Jquey cho Blogger mà không cần phải truy cập vào trang blog của bạn (How to Create a jQuery Facebook Photo Gallery in Blogger).
Chèn Album ảnh từ Facebook Page vào blogger
Ảnh minh họa

Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger

by
Xin chào các độc giả của Namkna! 
Mình mới gia nhập nhóm cộng tác viên của blog này. Vì là thành viên mới nên chắc còn nhiều thiếu sót về cách thức trình bày cũng như nội dung bài viết, vì vậy mong các bạn góp ý nhiệt tình nha! Và bài viết đầu tiên mình chia sẻ đến các bạn đó là làm cách nào để thêm hiệu ứng Loading khi chuyển trang cho blogger

Thứ Năm, tháng 8 08, 2013

Hộp popup search từ JQuery cho blogspot

by
Hộp popup search từ JQuery cho blogspot
Ở các mẫu tạo khùng tìm kiếm trước đây mà mình giới thiệu cho các bạn đều cho kết quả ở trang mới hoặc ngay tại trang đánh tù khóa. Tất cả chúng có một điểm chung là ta phải load lại trang để hiển thị kết quả tìm kiếm. Vậy để không phải load lại trang thay vào đó sẽ xuất hiện một box kết quả nhỏ ngay dưới ô tìm kiếm sẽ giúp độc giả cảm thấy hứng thú hơn và đỡ phiền hà mỗi khi càn tìm kiếm. Trong bài viết này, mình sẽ hướng dẫn cách thêm tiện ích tìm kiếm bài viết dạng popup suer dụng hiệu ứng từ thư viện JQuery.
Bạn có thể xem ảnh minh họa bên cạnh hoặc demo bên dưới:

XEM DEMO

Chủ Nhật, tháng 7 07, 2013

Thêm Slick featured posts Slider từ Jquery cho blogger

by
Trước đây namkna đã giới thiệu đến các Blogger một số slider hình ảnh khác nhau  hoặc bài viết mới với tính năng của một slider trượt. Hôm nay namkna tiếp tục giới thiệu cho các bạn Slick Featured Posts của tác giả spiceupyourblog , Slider khá nhẹ và dễ dàng để chỉnh sửa vì vậy độc giả có thể nhanh chóng thay đổi hình ảnh và liên kết. Đặc biệt có hiệu ứng từ Jquery nên rất mượt mà.
Slider: Slick Featured Posts Image cho blogger

Thứ Bảy, tháng 7 06, 2013

Đếm phần trăm khi cuộn trang cho blogger

by
Đếm phần trăm khi cuộn trang cho blogger 
Bình thường để đọc một bài viết thì bạn thường kéo chuột dọc bài viết để theo dõi được các nội dung tiếp theo của bài viết đó. Trong bài viết này mình sẽ giới thiệu cho các bạn thủ thuật hiện phần trăm còn lại khi kéo thanh cuộn Scrollbar xuống cuối chân bài viết hoặc từ chân bài viết lên đầu blog. Đây có thể sẽ hữu ích với những blog muốn tạo sự khác biệt và cá tính riêng cho blog của mình.

Thứ Năm, tháng 7 04, 2013

Đề xuất từ khóa vào ô search cho blogger

by
Đề xuất từ khóa vào ô search cho blogger 
Thủ thuật giúp bạn có thể sử dụng để cung cấp cho một đề nghị hoặc từ khóa tùy chọn gián tiếp mà không cần phải bận tâm để viết lệnh cụ thể xung quanh các hình thức cho người sử dụng để họ viết ra các từ khóa như thế này vào đó. Chỉ cần đặt một vài từ khóa trong trình đơn thả xuống gợi ý, sau đó người dùng sẽ ngay lập tức hiểu tổng quan về hình thức khi hiển thị menu:

Thứ Bảy, tháng 6 29, 2013

Tạo bài viết dạng Grid hoặc List ở trang chủ cho blogspot

by
Hiện nay có rất nhiều blog để hiển thị 2 chế độ dạng danh sách gồm hình ảnh thu nhỏ, tiêu đề bài viết và phần mô tả của bài viết (list) và dạng ảnh thu nhỏ và tiêu đề của bài viết (grid), bài viết này mình sẽ hướng dẫn các bạn một cách nhanh gọn của under-88 để có thể làm được thủ thuật đó với hiệu ứng từ thư viện Jquery mượt mà khi chuyển đổi mà không hề phải tải lại trang web hay blog của bạn.

Các bạn có thể xem ảnh minh họa bên dưới (do đây là hình ảnh động do vậy nếu không xem được bạn hãy bấm vào đây để tải hình ảnh về máy để xem nha):
Tạo bài viết dạng Grid hoặc List ở trang chủ cho blogspot

Thứ Ba, tháng 5 28, 2013

[ves3] Simple Slider ảnh bài mới trượt cho blogspot

by
Hôm nay mình sẽ giới thiệu cho các bạn thêm một mẫu slider mới. Dạng này thích hợp với các blog phim, ảnh,... Về cơ bản nó tương tự như bài này. Được phát triển bởi maskolis. bạn có thể xem ảnh hoặc Demo.
Simple Slider bài mới trượt cho blogspot ves3

[Ves2] Slider bài mới trượt ngang thumbnail cho blogger

by
Tiện ích Slider ves 2 này  được phát triển trên vesion 1 của maskolis, Với đôi chút cải biến về giao diện như: nó lấy ngẫu nhiên một ảnh thumbnail từ các bài viết mới nhất (recent post)  và  hiển thị dưới dạng một slider trượt ngang. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery
Các bạn có thể xem ảnh minh họa hoặc demo bên dưới:
Slider bài mới trượt ngang thumbnail cho blogger ves2