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
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ị Facebook và Facebook 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).
 |
| Ảnh minh họa |
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
Đọc thêm»
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í ?
Hiện nay nhu cầu hỗ trợ trực tuyến trên mạng rất phổ biến. Blog của bạn sẽ có thêm một lượng lớn độc giả nếu dịch vụ hỗ trợ và chăm sóc khách hàng thường xuyên hơn.Cách đơn giản nhất mà không mất phí đó là dùng các mạng xã hội như Skype, facebook, yahoo. Bài viết này mình sẽ hướng dẫn các bạn code để giúp độc giả khi truy cập blog có thể biết được bạn đang online bằng tài khoản Skype hay khong để chat trực tuyến và yêu cầu hỗ trợ online mà không cần phải gọi điện thoại hỏi trước.
Đọc thêm»
Đâ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 mỗi bài viết trong blog của bạn.
Đọc thêm»
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»
Bài viết này namkna sẽ hướng đẫn các bạn thiết kế một mẫu menu đơn giản để đặt trên sidebar hoặc header, Menu hoạt động dựa trên các thuộc tính CSS để góp phần làm giảm tới mức thấp nhất thời gian load trang: Về kiểu dáng menu này chỉ có một tiêu đề duy nhất và nó sẽ được mở rộng ra thêm các menu con khi bạn dê chuột lên phần tiêu đề đó.
Đọc thêm»
Ở 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
Đọc thêm»
Feedburner có 1 dịch vụ đó là giúp người đọc của bạn theo dõi các bài viết hằng ngày mà không cần phải lên website kiểm tra đó là Email Subscription (theo dõi bài viết qua email)Nhưng có một lỗi thường gặp, là sau khi tạo xong FeebBurner chèn vào blog để độc giả đăng ký nhận tin qua email, ta hay gặp thông báo lỗi “The feed does not have subscriptions by email enabled” không thể đăng ký nhận tin qua email như hình dưới:
Lỗi này do bạn chưa bật chức năng đó trên trang cài đặt của feedbunner. Bài viết này mình sẽ hướng dẫn các bạn cách khắc phục lỗi này..
Đọc thêm»
Twelve million namkna template 3 cột là template được namkna thiết kế với các tiêu chuẩn gồm 3 cột trong đó có 2 cột sidebar và một cột là bài viết. Về cơ bản phiên bản này có các tính năng và cài đặt tương tự như giao diện 1 cột. điều khác biệt duy nhất là tùy chỉnh thành 3 cột và thu nhỏ phần main cho cân đối với giao diện mới.
Đọc thêm»
Thiết kế Responsive Template giúp cho blog hoạt động tốt trên điện thoại di động đã trở thành một xu hướng trong phát triển web ngày nay. Công nghệ điện thoại di động hiện nay phát triển vô cùng do vậy lượng người dùng sử dụng điện thoại di động lướt web không ngừng tăng nhanh. hiện nay mọi người thích đọc email, lướt web trên điện thoại so với sử dụng máy tính để bàn của họ. Đơn giản vì tính tiện lợi, dễ dàng kết nối wifi không dây và các mạng GPRS là một lý do khuyến khích sử dụng các thiết bị di động như điện thoại thông minh (Apple và Android), máy tính bảng, netbook và điện thoại di động có độ phân giải thấp như NOKIA.
Đọ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»
Trong hướng dẫn này namkna sẽ giải thích làm thế nào để bo góc cho các bài viết phổ biến của blogger. Thủ thuật này chạy tốt với tất cả các trình duyệt web hiện đại. Namkna đã sử dụng CSS3 để bo góc xung quanh tất cả các bài viết. Các bạn có thể làm theo các bước hướng dẫn dưới đây để thêm nó vào blog.
Xem demo ngay tại blog của namkna.
Ảnh minh họa.
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à.
Đọc thêm»
Namkna đã giới thiệu đến các bạn rất nhiều style Auto readmore không sử dụng javascript khác nhau (style 1 và style 2) cho Blogger với khả năng tăng tốc cho blog và thân thiện với các bộ máy tìm kiếm. Tuy nhiên nó có một nhược điểm là hình ảnh thumbnail tương đối nhỏ (chỉ được 72px rộng và cao). Bài viết này mình sẽ hướng dẫn một auto readmore mà mình có thay đổi đôi chút so với phiên bản gốc từ các mẫu cửa sổ hình ảnh của blogger mà hình ảnh được giữ nguyên kích cỡ ban đầu và tuyệt vời hơn nữa là cũng không cần đụng chạm đến javascript.
Đọ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