tdgvsgf

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về. Bởi vậy nhiều Blogger đã e ngại sử dụng tiện ích này. Trong tiện ích mình giới thiệu sau đây được lấy JS từ tiền bối  Duy Phạm thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết. Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần Các bước thực hiện Bước...

Một hiệu ứng mới, một thủ thuật mới đánh lừa thị giác độc giả cũng như góp phần làm blog có cảm giác load mượt hơn... Hôm nay Khanh sẽ giúp các bạn làm điều đấy ! Những bạn hay tương tác cũng như thường qua blog Khanh cũng đã biết blog mình vừa thêm một hiệu ứng load giống Facebook. Ngay sau đó đã có nhiều bạn xin code và mình hứa sẽ viết bài cho mọi người. Tuy nhiên CSS load của blog mình giống Facebook thôi nên nó không phù hợp với một số Blog hiện tại. Vậy nên mình đã khảo sát qua một vòng và đưa ra CSS mới tích hợp cho đa phần giao diện các blog cá nhân hiện tại. Demo các bạn có thể xem ở ảnh phía dưới ! Các bước thực hiện Bước 1: Đăng nhập Blogger > Chủ đề > Chỉnh sửa HTML > Chèn đoạn CSS này vào dưới thẻ <style>: .abls_tkn, .abls_2_tkn, .abls_3_tkn , .abls_4_tkn , .abls_5_tkn , .abls_6_tkn { -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: loadingAnimation; -webkit-animation-timing-function: linear; background: #...

Xin chào mọi người. Hiện nay sau một khoảng thời gian thành lập thì Link Thủ Thuật đã được nhiều người biết đến và sử dụng. Ban đầu trang web này hoạt động theo phương thức hợp tác với các web/blog để quảng bá. Sau một thời gian với một lượng người truy cập ổn định thì hệ thống web đã nâng cấp cho người dùng post/đăng link tự động giúp người dùng chủ động hơn. Khi các bạn post link lên Link Thủ Thuật thì các bạn cần phải nhập 3 bước bắt buộc là Tiêu đề, email của bạn, link muốn chia sẻ và một bước khác là Ảnh (thumbnail) cho link. Sẽ mất tầm 1 phút cho việc này. Nhưng bây giờ khi có liên kết này các bạn chỉ cần viết bài xong và bấm nút chia sẻ trong bài viết thì lập tức liên kết sẽ được đăng ! Thật tuyệt vời phải không nào ! Các bước thực hiện Đây chỉ là liên kết, tức là <a href... trỏ đến phần chia sẻ. Các bạn có thể sử dụng hoặc thêm button có sẵn trong blog. <a expr:href='&quot;http://cdn.linkthuthuat.com/p/post-auto.html?title_post=&quot; + data:post.title + ...

Cũng không biết nó đã có từ bao giờ nhưng mới hôm nay chỉ vài phút trước mình đã viết một bài viết ... nhưng bất ngờ khi viết một ký tự cộng thêm một tên trong danh sách bạn bè Gmail của mình thì nó chợt hiển thị một thứ thú vị. Nói đến đây có vẻ mơ hồ. Vậy thì hãy đọc bài viết này nếu bạn chưa biết thứ thú vị này nhé ! Trên Facebook, khi các bạn đăng bài, viết tên ai đó thì nó sẽ ra một cột gợi ý tên và bạn nhấn vào thì nó sẽ hiển thị tên người đó kèm link trỏ đến facebook. Hay trong chat facebook, khi bạn nhập @Tên thì nó sẽ ra một cột tương tự. Và gần đây trong thời gian nghỉ Tết, mình có vọc vậy các thứ trên Blogger thì phát hiện ra tính năng này không biết xuất xứ từ bao giờ. Bức ảnh dưới đây sẽ cho các bạn hiểu rõ Như các bạn đã thấy, khi mình gõ +Trọng thì nó sẽ hiển thị gợi ý để mình click vào. Khi click như hình nó sẽ ra +Trọng Khanh Nguyễn. Vì bạn bè ở gmail, G+ mình chỉ có một người có tên đầu là Trọng nên nó chỉ ra vậy :v Để hiển thị gợi ý này bạn không nhất t...

Xin chào mọi người. Với nhiều bài viết hay, chất lượng cũng như giao diện chuẩn SEO, ưa nhìn thì hiện nay đã có nhiều blog đã đăng ký được các nhà mạng quảng cáo lớn, doanh thu cao như Google Adsense, Admicro hay Mgid. Và chắc hẳn có rất nhiều blogger đang muốn đặt thật nhiều quảng cáo trên blog mình nhưng việc đặt không đúng nơi, đặt vụng về sẽ làm blog bị giảm chất lượng, người xem lúc đó cũng giảm. Ở trên mạng cũng đã có những bài viết hướng dẫn về cách đặt quảng cáo ở các vị trí: 2 bên web, popup, dưới bài viết đầu tiên. Thế nhưng có nhiều Blogger muốn đặt quảng cáo ở dưới bài viết thứ 2, thứ 3 ngoài trang chủ chứ không đặt dưới bài viết thứ nhất ở một số lý do. Vậy nên hôm nay bài viết này mình sẽ hướng dẫn các bạn cách đặt quảng cáo dưới bài viết thứ hai, thứ ba hay nói nôm na là dưới bài viết bất kỳ ngoài trang chủ cho blogspot, tùy thuộc vào nhu cầu Blogger. Các bước thực hiện Bước 1: Truy cập blog > Chủ đề > Chỉnh sửa HTML > Tìm đoạn code sau: <b:include data=...

Với nhiều nút Demo, download được chia sẻ ở nhiều trang web thì hầu hết đều để nền cũng như hiệu ứng Hover khá quen thuộc. Chính vì thế, để tạo sự mới lạ, sự thu hút và tăng tính chuyên nghiệp cho blogspot thì hôm nay mình sẽ chia sẻ cho các bạn nút Demo - Download với hiệu ứng hover kèm theo màu sắc hài hòa tuyệt đẹp cho Blogspot ! Demo các bạn có thể xem ngay bên dưới. Các bước thực hiện Bước 1: Chèn đoạn CSS sau vào dưới thẻ <style> của Blogspot: .btn_tkn { transition: .4s; position: relative; display: inline-block; width: 160px; font-size: 1em; font-weight: bold; line-height: 45px; text-align: center; text-transform: uppercase; background-color: transparent; cursor: pointer; text-decoration:none!important; font-family: 'Roboto', sans-serif; font-weight:900; font-size:15px; letter-spacing: 0.045em; } .btn_tkn svg { position: absolute; top: 0; left: 0; } .btn_tkn svg rect { //stroke: #EC0033; stroke-width: 2; stroke-dasharray: 353, 0; stroke-dashoffset: 0; -webkit-tran...

Với các blog hiện nay đang ngày càng phát triển và cần những thứ đổi mới, những widget chức năng hữu ích như Top người bình luận, Máy nghe nhạc (music player)... Và hôm nay, KhanhBlogger xin được chia sẻ cho các bạn một MÁY NGHE NHẠC do mình nghiên cứu từ lâu kết hợp với W3Shools (Các bạn nên vào đây để học). Mấy hôm nay mình đang nghiên cứu máy phát nhạc cực cool cho các bạn, trong đó dùng khá nhiều JS mẫu từ W3shools rất hữu ích cho mình. Bắt đầu thôi ! Các bước thực hiện Bước 1: Chèn CSS này vào dưới thẻ <style> của blogspot: div.wrappertt{ width:100%; height:530px; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.12); font-family: Roboto; transform-origin:top center; } .showMP1{ animation: showMusicPlayer 1000ms 300ms ease-in-out forwards; } .lzz{ position:absolute; left:50%; text-align:center; margin-left:-60px; margin-top:200px; font-size:10px; color:rgba(0,0,0,1); animation:pw 900ms ease-in-out infinite; } @keyframes pw{ 0%,100%{ opacity:1; } 70%{ opa...

Xin chào mọi người. Chắc hẳn đây là bài viết rất nhiều người mong đợi. Mặc dù nó đã được chia sẻ rất nhiều trên Google nhưng có lẽ với sự đơn giản, sự nhiệt tình, chu đáo trong cách viết bài đã khiến mọi người thích =))) (ahjhj tự khen :v) Khi độc giả click vào link ngoài blog của bạn thì nó sẽ tự động chuyển hướng đến trang chờ chuyển hướng ! Mình cũng đã nghiên cứu JS của một số bài viết, mặc dù có lỗi nhưng mình đã tổng hợp và share, fix lại cho các bạn dùng ! Bắt đầu thôi. Các bước thực hiện Bước 1: Chèn đoạn JS trong link này  vào trên thẻ </body>. Thay linkblog1, linkblog2, linkblog3 thành các link blog bạn không muốn chuyển hướng. Bước 2: Tạo 1 trang chuyển hướng trong blog của bạn và thay  www.trongkhanhnguyen.com/redirect.php trong JS bước 1 thành link trang blog chuyển hướng vừa tạo Bước 3: Vào trang chuyển hướng vừa tạo, chuyển sang HTML và thêm đoạn code sau vào trang: <script> //<![CDATA[ shortcut = { all_shortcuts: {}, add: function(a, b, c) { var ...

Có lẽ đã có nhiều bạn biết code này bởi 1 sơ hở không đáng có :3 Thôi thì hôm nay mình share luôn Chế độ ban đêm mà nhiều bạn cứ đúng 21h là vô ib xin mình :v Sở dĩ mình không share vì nó quá đơn giản, mình nghĩ các bạn tìm hiểu sẽ ra, ban đầu mình chỉ share cho người mình thân thôi. Nhưng sau do chưa kịp mã hóa thì mấy bạn đã vào chôm luôn ! Còn đăng cả stt "Chôm được js ngon từ ....". Chắc nói đến đây cũng vài bạn nhột. Mình cũng đã xóa bài viết vì sợ bạn ấy share lung tung nhưng thôi, bây giờ mình cũng share cho các bạn rồi. Mấy bạn đổi code rồi còn tùy biến các thứ hay nhỉ :v Đi ăn cắp chất xám của người khác các bạn thấy vui nhỉ :v Thà để nguyên class, id chứ đây thay luôn, không xin xỏ, không ý kiến, âm thầm bên em mà lấy, phục các bạn ! Thôi nói ngang đây thôi, chắc cũng nhiều bạn hóng lắm đây, share nào ! Các bước thực hiện Vì nó quá sức đơn giản nên mình muốn các bạn tự viết, ngay cả mình từ thằng không biết gì về JS sau khi cầm cuốn sách tụng 5 ngày cũng biết được v...

Đã có rất nhiều bạn hỏi về cái này thì hôm nay rảnh rỗi share cho mọi người. Để xem demo các bạn có thể rê chuột vào tên của người bình luận bất kì sẽ biết =)) Hoặc có thể xem ảnh bên dưới. Các bước thực hiện Bước 1: Chèn đoạn CSS sau vào trong HTML của blog <style> #timeline { position: relative; height: 204px; border: 1px solid ddd; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; border-radius: 3px; background: #fff; } .timelinepic { height: 140px; width: 350px; margin-top: -5px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .timeline_menu { height: 50px; background: #fff; position: relative; padding-top: 5px; } .profilepic { background: #fff; border: 1px solid rgba(0, 0, 0, .3); padding: 4px; height: 90px; width: 90px; position: relative; top: -90px; left: 10px; } #timeline h1 a { color: #fff; text-decoration: none; font-size: 17px!important; } #timeline h1 { position: relative;...

TKN đã quay trở lại :v Trong thời gian vừa qua đã có rất nhiều bạn gửi yêu cầu viết thủ thuật đến mình. Đang lẽ cái bài viết hôm nay mà mình đăng sẽ không phải bài này đâu nhưng do thớt nó hối quá nên phải ra kẻo ẻm nó mong mặc dù chưa đầy 1 ngày :3 Như cái tiêu đề thì hôm nay mình sẽ hướng dẫn cho các bạn cách thêm biệt hiệu sau tên người bình luận cho Blogspot siêu đơn giản nhưng không hề dễ dàng thành công :3 Cái này chỉ áp dụng thẻ B:IF thôi nên cũng dễ hiểu lắm =))) Thumbnail by Huỳnh Hoài Bảo đập chai :3 Các bước thực hiện Bước 1:  Các bạn vào chỉnh sửa HTML, tìm đoạn dạng <div class='comment_name'>.  Trong đoạn code đó sẽ có 1 đoạn thường sẽ là: <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> Các bạn thêm đoạn code dưới vào sau đoạn code bên trên là OK :v (nghĩa là sau cái thẻ đóng </a> ý :v) <b:if cond='data:comment.author == &quot; Trọng Khanh Nguyễn ...

Chào cả nhà. Lâu rồi không viết thủ thuật cho mọi người. Hôm nay sẽ là bài viết không phải về thủ thuật mà là vấn đề về thủ thuật Blogspot. Bài viết này chắc các SEOER sẽ quan tâm đấy. Nó sẽ không quan trọng đối với những bạn dùng Blog không quan tâm đến SpeedInsights . Nhác làm thumbnail nên mượn tạm ảnh của BSW vậy :3 Mặc dù title không phù hợp :v Gần đây thì Bác Sĩ Windows có share một widget Top những người bình luận cho Blogspot.  Vì nó được thiết kế bởi 1 bàn tay có kinh nghiệm lâu năm nên rất đẹp và được nhiều người dùng. Tuy nhiên sự đẹp lạ kì ấy lại làm cho những SEOER đang dùng widget này một sự lãng quên đối với SpeedInsights .  Tiện đây mình nói luôn.  SpeedInsights là công cụ test tốc độ tải trang cho Blogspot. Ở đây nhiều bạn cứ hiểu lầm là cái này nó sai, rồi đưa ra vài giả thiết bảo "Blog tôi 14 điểm vẫn load nhanh đấy thôi " ..v...v.. Hiểu theo nghĩa gốc thì là vậy. Đúng là đôi khi vào mấy cái web/blog mặc dù điểm trên  SpeedInsights nó không được ...

 Hello các bạn đã quay trở lại với blog mình. Theo yêu cầu từ nhiều bạn thì hôm nay mình sẽ chia sẻ Widget Top bình luận mà mình đã test nó thành công mấy ngày qua :v Nó đơn giản chỉ là lọc số bình luận của từng ID rồi xếp hạng chúng chứ không dùng Host gì cả như nhiều bạn nói. DEMO Để thực hiện các bạn chỉ cần chèn đoạn code sau và nơi muốn hiển thị <style type="text/css"> .so_cmt {background: #e8e8e8; color: #adabab; padding: 3px; border-radius: 10px; padding-left: 5px; padding-right: 5px} .top-commentators b {border: 1px solid #4267b2; border-radius: 100%; padding: 6px; color: #fff; font-size: 13px; background: #4267b2; padding-left: 9px; padding-right: 9px} .top-commentators a {color: #4267b2} .top-commentators { margin: 3px 0; border-bottom: 1px dotted #ccc; padding: 8px; } .avatar-top-commentators { vertical-align:middle; border-radius: 30px; } .top-commentators .commenter-link-name { padding-left:0; } </style> <script type="text/javascript"...

 Hello các bạn. Hôm nay mình sẽ chia sẻ cho các bạn 1 button Share bài viết với hiệu ứng cực đẹp dạng mở Tab. DEMO Để làm được nó rất đơn giản chỉ cần thêm đoạn code sau vào nơi muốn hiển thị trong theme của bạn: <style> .share-btn { position: absolute; background-color: #f7f7f7; ; border-radius: 100px; width: 200px; height: 72px; box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03); transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3); overflow: hidden; cursor: pointer; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: Roboto; } .share-btn .cta { position: absolute; color: #f5ce67; text-transform: uppercase; font-size: 22px; letter-spacing: 1px; transition: all 0.25s ease-in-out; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .share-btn .close { position: absolute; right: 38px; top: 31px; cursor: pointer; color: #cfd2d9; font-size: 20px; opacity: 0; transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3); transform: rotate(-45deg); transform...

Hello xin chào các bạn đã quay trở lại với Blog TKN :v Sau nhiều ngày edit blog thì mình khi kiểm tra Speed Google thì nó rất chậm, từ 73 điểm khi mới thay theme sau edit xuống còn 50. Nhưng sau đó, mình đã tìm tòi, khám phá tài liệu trên mạng để đúc kết một vài kinh nghiệm giúp tối ưu, tăng tốc độ tải trang cho Blog. Việc này giúp ích rất nhiều trong việc SEO của các bạn. Bắt đầu nhé ! Như các bạn đã thấy, ban đầu blog mình khá nặng, nhưng sau những cách làm dưới đây, tốc độ nó nhanh hẳn. Cùng thực hiện nào ! 1. Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên Ở bước này, Google nó sẽ không cảnh báo đúng 100% mà dường như là sai be bét (đối với blog mình) :v Khi bạn chạy phân tích, nó sẽ báo lỗi Javascript chặn hiển thị ở phần Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên. Để loại bỏ VD đoạn JS là  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> Thì bạn chỉ cần thêm async='asy...