Ngọc Anh Tower

Gần đây trào lưu thiết kế web Flat - Giao diện phẳng trở nên phổ biến. Song song quá trình thiết kế các nhà thiết kế web cũng đang cố gắng làm sao cho website của mình trở nên thân thiện với đọc giả - Visiter bằng cách tối ưu SEO , Tối ưu tốc độ load trang và thiết kế đơn giản nhưng tiện dụng. Với sự phát triển của ngành di động, tablet ngày nay thì xu thế thiết kế web chuẩn Full Reponsive - Tự động co giản để phù hợp với các kích cõ màn hình khác nhau ngày càng trở nên phổ biến và thường có ở hầu hết các website hiện nay và Tôi Là Quản Trị BLOG cũng đang áp dụng. Cho phép người dùng lướt web trên trang bằng di động smartphone một các mượt mà trơn tru để load trang nhanh nhất. Tôi Là Quản Trị BLOG tương thích mọi trình duyệt Dưới đây là một số chỉ số mà Tôi Là Quản Trị BLOG đạt được 1. TÔI LÀ QUẢN TRỊ BLOG Chuẩn HTML5 Check >> HTML5 là một công nghệ mới cho phép các nhà phát triển xây dựng rất nhiều ứng dụng dựa trên tài nguyên phong phú của nền tảng web. Bên cạnh đó, HTML...

Tạo trang thử mã HTML, Thử Mã HTML/Javacript cho blogspot, thử mã HTML hướng dẫn bạn tạo 1 trang thử mã HTML ngay trên trang của mình. Demo trang  trang Thử Mã HTML/Javacript http://www.toilaquantri.com/p/tra-ma-html-javacript.html Hướng dẫn tạo trang Thử Mã HTML/Javacript cho Blogspot Hiện nay một số bạn blogger có chia sẻ code để tạo trang thử mã HTM L xong thường không có nút xem toàn màn hình. Nay mình sẽ chia sẻ cho các bạn đoạn mã này. Sau khi sử dụng mã chỉ yêu cầu các bạn đừng xóa đoạn link  http://toilaquantri.com   bên dưới thôi! Cách thực hiện  trang Thử Mã HTML/Javacript Đầu tiên bạn cần vào Blogger và tạo một trang mới. Chuyển qua phần bài viết bằng HTML copy và dán đoạn code bên dưới vào Tiến hành Lưu tại và xem kết quả Một vài bước khá đơn giản để tạo đúng không? Chúc các bạn thành công! <script> <!-- document.write(unescape("%3C%21DOCTYPE%20html%20PUBLIC%20%22-//W3C//DTD%20XHTML%201.0%20Transitional//EN%22%20%22http%3A//www.w3.org/TR/xhtml1...

Nút Share trượt dọc chuẩn HTML5 Cho Blogspot chia sẻ thuật thuật cho blogspot làm nút share trượt dọc đẹp mắt. Thủ nhật này được mình tùy biến CSS lại cho đẹp mắt với nét viền trắng đứt như viền kẻ chỉ tạo thêm cho nút share thêm đẹp mắt Hình ảnh nút share trượt dọc cho blogspot Cách thực hiện Nút Share trượt dọc chuẩn HTML5 Cho Blogspot 1> Vào Mẫu >> Nhấn Ctrl + F và tìm thẻ ]]></b:skin> sau đó dán trên nó đoạn CSS bên dưới #chiase {position: fixed; bottom: 40%; margin-left: -136px; float: left; background-color: #727F10; z-index: 10; box-shadow: #914500 0 0 0 4px,0px 7px 1px 0px #000; -webkit-box-shadow: #727F10 0 0 0 4px,0px 7px 1px 0px #000; -moz-box-shadow: #914500 0 0 0 4px,0px 7px 1px 0px #000; border: 1px dashed #fff;} /*! Social Likes v3.0.12 by Artem Sapegin - http://sapegin.github.com/social-likes - Licensed MIT */ .social-likes,.social-likes__widget{display:inline-block;padding:0;vertical-align:middle!important;word-spacing:0!important;text-indent...

Thủ thuật này giúp bạn tạo trên menu thêm công cụ dịch từ Vietnamese sang English để giúp cho khách truy cập nước ngoài có thể xem bài viết bằng ngôn ngữ phổ biến là tiếng anh Link website bạn đang xem sẽ được dán vào công cụ transplate trực tuyến mà bạn không cần phải dùng widget để chèn vào vì tốc độ load trang web của bạn sẽ giảm đáng kể VD: CÁCH THỰC HIỆN: Đăng nhập vào Blogger > Mẫu và chèn thêm vào đoạn code bên dưới vào code tạo menu của trang web bạn. <li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair= vi_VN %7cen&amp;hl= en &apos;); return false;' rel='nofollow' target='_blank' title='Post Vietnamese translation into english'> Translate</a></li> Rất dễ dàng vào thuận tiện phải không! Bạn có thể xem Demo và click thử vào chữ TRANSLATE ngay trên Tôi Là Quản Trị BLOG. Bạn cũ...

Thủ thuật này giúp tạo ra hiệu ứng xoay tròn ảnh 360 độ khi bạn ghê chuột vào hình ảnh giúp làm cho blog được thú vị hơn ngoài ra còn bo tròn hình ảnh lại 50%. Bạn có thể tùy chỉnh lại. Cách thực hiện: Bước 1: Vào mẫu và tìm thẻ ]]></b:skin> Bước 2: Dán đoạn code bên dưới vào trước nó .post img {     overflow: hidden;      -webkit-transition: all .5s ease;     -moz-transition: all .5s ease;     -o-transition: all .5s ease;     -ms-transition: all .5s ease;     transition: all .5s ease; } .post img:hover {     border-radius: 50%;     -webkit-transform: rotate(360deg);     -moz-transform: rotate(360deg);     -o-transform: rotate(360deg);     -ms-transform: rotate(360deg);     transform: rotate(360deg); }

RÈN LUYỆN TƯ DUY - Hướng dẫn tạo sitemap dạng metro UI theo nhãn cho blogspot. Thủ thuật này được mình chỉnh sửa lại CSS một tí cho giống các live title trong windows 8 là những ô vuông màu tím và màu màu rê chuột vào là màu đỏ. Xem  DEMO Ưu điểm: Hoạt rất tốt trên Di động, mượt và thích hợp cả độ phân giải trên màn hình di động Được chia là 3 ô live title trên 1 hàng ngang, font chữ sử dụng là segoe UI Các thực hiện: Bước 1: tạo 1 trang tĩnh mới cho blogspot Bước 2: chuyển qua tab HTML và dán đoạn code bên dưới vào Bước 3: sửa đoạn code được mình đánh dấu màu đỏ thành địa chỉ website của bạn. <script src="https://googledrive.com/host/0B-0uHUanipfMMWlMUHJjcERkVFU" type="text/javascript"></script><script src=" http://www.renluyentuduy.blogspot.com /feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script><div style="display: none;"><a href="http://www.renluyentuduy...

Bài viết trước mình cũng đã giới thiệu bài viết tương tự là tạo ra nút back to top và back to bottom với hiệu ứng trượt mượt mà , bài viết này là tiếp theo hướng dẫn các bạn tạo nút back to top khác đơn giản. Back to top là một trong những tiện ích của blogspot mà bạn cài thêm để điều hướng người dùng lên trên đầu trang blogspot để người xem có thể thao tác trên menu để đọc Tạo Back to top và back to bottom: Nút Back top top và back to bottom cho blogspot Cách thực hiện tạo nút back to top và back to bottom cho blogspot: Các bạn copy đoạn code bên dưới: Bước 1: Vào mẫu tìm từ ]]></b:skin> và dán đoạn code CSS bên dưới phía trên thẻ ]]></b:skin> .toptop{position: fixed; z-index: 9999; bottom: 100px; right: 25px; padding-bottom: 0px; background: #fff;} .bottombottom{position: fixed; z-index: 9999; bottom: 150px; right: 25px; padding-bottom: 0px; background: #fff;} Bước 2: Có 2 cách chèn: Cách 1: Vào mẫu và dán trước thẻ </body> hoặc </head> đều được Cách ...

Rèn Luyện Tư Duy - Thủ thuật này giúp bạn tạo một thanh cuộn   scrollbar color bên phải với màu sắc, độ rộng tùy chỉnh. Các bạn có thể xem thanh cuộn blog Rèn Luyện Tư Duy . Hướng dẫn: Bước 1: Các bạn vào mẫu và dán đoạn code bên dưới trên thẻ ]]></b:skin> Bước 2: Các bạn hiện chỉnh lại màu sắc bằng mã màu khác với những đoạn code mình đã tô đậm /* Webkit override Scrollbar with CSS3 */ ::-webkit-scrollbar { width: 8px ; height:8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); background: #fff; } ::-webkit-scrollbar-thumb { background: rgba(186,35,35,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(186,35,35,0.4);     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) ;     } Chúc bạn thành công!

Thủ thuật ẩn thanh sidebar. Đầu tiên bạn xem Ví Dụ sơ đồ website của Rèn Luyện Tư Duy  khi đó thanh sidebar phân phải đã bị ẩn làm cho nội dung bài viết được mở rộng chiếm luôn phần sidebar bị ẩn. Do đó, mình sẽ giới thiệu bạn thủ thuật này. HƯỚNG DẪN: Cách thực hiện rất đơn giản bạn chỉ cần copy đoạn code bên dưới chuyển qua phần HTML của bài viết và dán lên trên cùng, đoạn code có tác dụng ẩn một số widget và giúp bạn mở rộng trang bài viết lên 100%. Thực hiện ngay nào! <style> #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:100%!important;} .post { width:100%!important; } #main-atas { width:100%!important; }.topmeta { display:none !important;} #footer-wrapper { display:none !important;} </style> Chúc các bạn thành công. Nếu có thắc mắc về thủ thuật này vui lòng bình luận bên dưới để được hỗ trợ

Đi thang thang trên mạng và tìm được 1 trang web tiện ích cho phép bạn thêm công cụ chat hoặc là tạo khung liên hệ cho trang blogspot cá nhân hay website của bạn khác hay. Các thực hiện đơn giản luôn công cụ được cung cấp từ Subiz Ưu điểm là nó trượt phóng ở góc phải bên dưới khá đẹp mắt, giao diện thân thiện và dể sử dụng. Mời các bạn trãi nghiệm nhé! Demo 1: Demo 2: Ngay trong Rèn luyện tư duy BLOG Các bước thực hiện: Bước 1: Truy cập:  https://dashboard.subiz.com Bước 2: Điền thông tin trong mẫu: sau đó chọn Tạo tài khoản Bước 3: Vào email để kích hoạt link vừa gởi đến Bước 4: Copy và chèn code nhận được vào sau thẻ <body> trong blogspot và Lưu mẫu lại Chúc các bạn thành công!

Bài viết trước mình hướng dẫn các bạn popup hiện lên trên cửa sổ hiện tại khi click chuột lần đầu tiên các bạn có thể xem lại ở đây < TẠO POPUP HIỆN TRÊN TRANG WEB HIỆN TẠI KHI NHẤP CHUỘT LẦN ĐẦU CHO BLOGSPOT >. Nhược điểm của nó là làm phiền visitor khi bài viết muốn xem bị che mất và họ có xu hướng đóng nó ngay. Ưu điểm thì nó "đập" vào mắt visitor nếu nó hữu dụng với người dùng thì nó tỏ ra hiệu quả. Bài viết tiếp theo cũng gần giống như bài viết trên, thủ thuật này giúp bạn không mở cửa sổ mới đè lên cửa sổ hiện tại mà nó sẽ mở 1 tab mới trong trình duyệt mặc định khi click chuột vào lần đầu tiên. Bài viết này giúp bạn tạo 1 popup khi nhấp chuột lần đầu tiên sẽ mở ra 1 cửa sổ mới hiện lên trên trang web đang xem hiện tại. 1. Đầu tiên bạn vào mẫu > Chỉnh sửa HTML > và thay thẻ <body> bằng dòng code bên dưới nhớ là thay nó nhe . 2. Sửa lại dòng code mà mình đã  tô đỏ  thành liên kết mà bạn muốn mở cửa sổ popup và lưu mẫu lại <body onclick='popunder(...

Bài viết này giúp bạn tạo 1 popup khi nhấp chuột lần đầu tiên sẽ mở ra 1 cửa sổ mới hiện lên trên trang web đang xem hiện tại. 1. Đầu tiên bạn vào mẫu > Chỉnh sửa HTML > và dán đoạn code bên dưới trước thẻ </head>. 2. Sửa lại dòng code mà mình đã tô đỏ thành liên kết mà bạn muốn mở cửa sổ popup và lưu mẫu lại <script type='text/javascript'> //<![CDATA[ function addEvent(obj, eventName, func){ if (obj.attachEvent){ obj.attachEvent("on" + eventName, func);} else if(obj.addEventListener){ obj.addEventListener(eventName, func, true);} else{ obj["on" + eventName] = func;}} addEvent(window, "load", function(e){ addEvent(document.body, "click", function(e){ var params = 'scrollbars,width=1500, height=1024,resizable=1'; if(document.cookie.indexOf("xzipvnpop") == -1){ var w = window.open(" http://renluyentuduy.blogspot.com/p/dang-ki-nhan-tin.html ",'Đăng Kí Nhận Tin', params);if (w){ docume...

Bài viết cũng ngắn gọn thôi. Nếu bạn có một bài viết nào trên blog cảm thấy "đắc giá" và không muốn người khác sao chép thì bạn dùng đoạn code dưới đây chèn vào trong bài viết phần HTML . Code này giúp người khác không thể bôi đen nội dung từ đó không thể copy được. Tuy nhiên đối với các pro thì có nhiều các khác để copy ở đây ta chống được "gà" thôi nhé ^^. Code chèn vào bài viết nào thì bài viết đó không thể bôi đen còn các bài khác thì vẫn bình thường. Các bạn có thể tìm hiểu các chèn code không thể copy cho toàn blog nếu bạn có nhu cầu. Bài viết dưới đây mình đã sử dụng code chống copy bạn xem coi copy được không nhé!. Coi chừng bị chê là "gà" đấy ^_^ 0 Chiến Lược Luyện Nói Tiếng Anh Trong 2 Năm Hải Phụng Huỳnh   12:58 Xin chào các bạn hôm nay mình chia sẻ Lịch trình chiến lược cho các bạn luyện nói tiếng anh trong... Code <script language="JavaScript1.2"> function disableselect(e){ return false }function reEnable(){ return true }//if ...

Bài viết này RÈN LUYỆN TƯ DUY hướng dẫn bạn tạo nút like trượt dọc theo bài viết đẹp mắt Ưu điểm: được thiết kế đẹp bắt mắt có hiệu ứng đổ bóng, vì được thiết kế trượt dọc nên visitor có thể thích bài viết bất cứ khi nào, mình đã chỉnh lại màu của nút like để trông nó khác biệt và đẹp mắt. Nhược điểm: Hầu hết tiện ích like nào cũng làm giảm tốc độ load website, một nhược điểm tiếp theo là tóm diện tích, nếu bạn load trên web trên di động thì tiện ích sẽ chạy theo che bài viết mà màn hình di động lại khá nhỏ. DEMO ngay trên bài viết này. Nguyên nhân bạn chỉ thấy +1 của G+ thôi là do bài viết đã có like của facebook nên không thể hiển thị like trượt facebook nữa. Thực hiện bài viết này ngay bạn sẽ thấy ấy mà, lười chụp ảnh Demo quá ^^ Bắt đầu nào! Bước 1 : Các bạn vào lại trang  tổng quan  của blog của bạn  »  Mẫu  »  Chỉnh sửa HTML Bước 2 :  Tìm đến thẻ  </body>  và thêm đoạn mã sau lên trên thẻ đó. <style type="text/css"...

Bài viết này TÔI LÀ QUẢN TRỊ BLOG  sẽ hướng dẫn cho các bạn tạo ra nút Back to top và Back to bottom  được tạo ra  bằng CSS rất đẹp mắt và mượt mà nên rất nhẹ Đầu tiên là tạo BACK TO TOP cho blogspot Bước 1 : Các bạn vào lại trang  tổng quan  của blog của bạn  »  Mẫu  »  Chỉnh sửa HTML Tìm đến thẻ  ]]></b:skin>  và thêm đoạn css sau lên trên . #bttop{border-top-left-radius:99px;background:#F77B09;text-align:center;padding:2% 0.5% 1%;position:fixed;bottom:0;right:0px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;} #bttop:hover{background:#24bde2;border-bottom:4px solid #F77B09} Bước 2 :  Tìm đến thẻ  </body>  và thêm đoạn mã sau lên trên thẻ đó . <div id="bttop">PG UP</div><script type="text/javascript">$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#...

Hôm nay rèn luyện tư duy hướng dẫn bạn tạo trang liên hệ mặc định của blogspot từ đó các bạn có thể tùy biến css theo ý thích của bạn. Đầu tiên show DEMO ra cho bạn xem trước đã. Nếu thấy quá ok thì chúng ta tiến hành thủ thuật "Tạo trang liên hệ từ widget của blogspot" Bước 1 : Đăng nhập vào  Blogger » Bố cục » Thêm tiện ích Tại của số của thêm tiện ích, các bạn ngó qua khu vực menu phía bên trái, chọn vào tab  Tiện ích Khác . Sau khi chọn vào tab đó bạn sẽ thấy tiện ích  Biểu mẫu liên hệ , chọn và thêm nó vào blog của bạn. Bước 2 : Các bạn vào lại trang  tổng quan  của blog của bạn  »  Mẫu  »  Chỉnh sửa HTML Tìm đến thẻ  ]]></b:skin>  và thêm đoạn css sau lên trên. .ContactForm {   display: none; } Nhiệm vụ của code trên là ẩn widget mặc định của blogspot đi. Bước 3 : Ở trang tổng quan bạn vào  Trang » Trang mới . Bạn chuyển sang soạn thảo bằng HTML và dán code bên dưới vào <div class="contact-f...