Tạo Menu Ngang Cho Blogspot của Google

Làm cách Này Đơn Giản Nhất nhe mọi người:

Như đã nói mình cũng là siêu tầm của mấy Bạn trên mạng rồi áp dụng xài được thấy hay nên chia sẽ lại trên Blog cá nhân của mình để ai có theo dõi Blog mình thì cũng sẽ làm được như mình nhe. 

Đây là toàn bộ nội dung mình copy lại của người ta và chia sẽ lên đây để mọi người áp dụng:

Ngoài Cách tạo menu ngang đơn giản, còn một số kiến thức cơ bản mà mình muốn chia sẻ bên dưới, mong các bạn xem kỹ tóm tắt bên dưới, nội dung cụ thể thì nằm dưới tóm tắt:

1. Cách tạo menu ngang đơn giản cho blogspot, mỗi chuyên mục tự động hiển thị các bài viết cùng chủ đề (bằng cách gắn nhãn label cho các bài viết đó), Kim Phong nghĩ label chỉ dùng để gắn cho các bài viết ko quan trọng có chung chủ đề (ở bố cục, bạn có thể chèn widget hiện các tag)2. Sau khi làm xong menu ngang, Kim Phong không gắn label, đổi luôn tên link label trong menu, sau đó viết một bài viết mới, đặt link của bài đó vào thanh menu, sau đó, tại bài viết đó, đánh lại tên các tiêu đề của các bài viết cùng chủ đề rồi link riêng ra, như vậy người xem dễ nhìn thấy hết các bài viết đó3. Tạo màu đỏ cho các chuyên mục nổi bật (xem trên menu của mình nha). Bên dưới có hướng dẫn.4. Cách tạo cột thống kê các bài viết mới nhất (hãy xóa đi cái tiện ích mà thống kê bài post theo ngày tháng năm, nhìn rất là rối mắt). Nằm sát nó là tiện ích email cho tôi, dùng để nhận email từ người xem.5. Cách điều chỉnh lại độ rộng của trang blog và độ rộng của cột bên phải blogspot, font chữ.6. Cách chèn thêm code để tránh bị các nhà mạng VNPT, Viettel, Net Nam chặn blog và chặn luôn hình ảnh (người xem không truy cập được)7. Cách liên kết đặt tên miền domain cho blog blogspot (có hình ghi mã số cụ thể ở dưới cùng bài này)8. Cách chèn widget hiện bình luận comment mới nhất của khách xem, để biết có người bình luận. Bởi vì Kim Phong đã bỏ chọn ô Báo email khi có comment bởi vì khi mình reply cho khác nó cũng mail báo lại, thật phiền.9. Cách chèn quảng cáo dưới tiêu đề bài viết ở blogspot.Sau đây mời các bạn xem nội dung chi tiết:Phần 1: Tạo menu ngang cho blog và chèn nhãn label. - Bản thân mình có xem nhiều bài hướng dẫn nhưng rất khó hiểu, cuối cùng kết hợp chúng lại thì chỉ làm được menu ngang đơn giản thế thôi, tuy là xấu xí nhưng xài tạm được, vì bản thân mình có biết gì về code đâu, mặt khác cũng ngại copy code của người khác sợ bị trúng code spy độc phá hoại blog hoặc đọc được password.Đầu tiên là copy đoạn code ở bên dưới, sau đó các bạn xem video thứ 2 để được hướng dẫn (nhớ xem đến bước tạo xong menu thì dừng lại, đừng xem hướng dẫn làm label nếu bạn không thích kiểu này):<ul>   <li><a href="/">Home</a></li>   <li><a href="http://dochoitruyenthong.blogspot.com/search/label/Do%20choi">Toy</a></li>   <li><a href="http://dochoitruyenthong.blogspot.com/search/label/Tin%20hoc">Computer</a></li>   <li><a href="http://dochoitruyenthong.blogspot.com/search/label/Du%20lich">Travel</a></li>   <li><a href="LINK 4">topic 4</a></li>   <li><a href="LINK 5">topic  5</a></li>   <li><a href="LINK 6">topic 6</a></li>   <li><a href="LINK 7">topic 7</a></li>   <li><a href="LINK 8">topic 8</a></li>   </ul>Xem video 1 hướng dẫn tạo và viết bài trên blog (bỏ chức năng nhắc nhở share lên google+, thì trong phần quản lý bài đăng, ở cột trái, bạn chọn dòng Google, tắt bỏ ô vuông Nhắc nhở)https://www.youtube.com/watch?v=a12giNXBxiQXem video 2 hướng dẫn tạo menu ngang cho blog:https://www.youtube.com/watch?v=6moMDdg8-hsPhần 2: Tạo menu kiểu mục lục, nhấn vào tự nhảy ra bài viết cụ thể- Cá nhân mình không thích làm menu gắn nhãn label, các bạn hãy vào mục Đồ chơi truyền thống, mình không làm kiểu label, nguyên nhân như sau:- Khi khách xem bấm vào menu, nó sẽ hiện ra tất cả bài cùng chủ đề (y như trang Home), rất dài và khó nhìn thấy toàn bộ các bài viết chủ đề đó.- Và mình đã làm như sau: Tạo ra một bài viết riêng, đặt tên là Tổng hợp đồ chơi, vào quản lý bài viết copy tên của bài viết rồi paste vào đây- Mình sẽ tạo video hướng dẫn để các bạn dễ hiểu: https://www.youtube.com/watch?v=4CKC0JFI52kPhần 3: Tô màu đỏ cho chủ đề nổi bật ở menu ngang- Đầu tiên các bạn xem dòng code của menu ngang này:<li><a href="http://www.dochoikimphong.com/2015/11/dollhouse-catalog.html">Đồ chơi 4Girl</a></li>- Sau đó bạn dán khúc này sát phía trước chữ Đồ chơi 4Girl: <span =""  style="color:red;"><b>- Tức là tô màu đỏ (red) và in đậm (b)- Sau đó dán phía sau chữ Đồ chơi: </b></span>- Tóm lại nó sẽ là thế này: <li><a href="http://www.dochoikimphong.com/2016/01/huong-dan-mua-hang-qua-mang.html"><span =""  style="color:red;"><b>Cách mua hàng AN TOÀN</b></span></a></li>Phần 4. Cách tạo cột thống kê các bài viết mới nhất. Bạn nên xóa widget thống kê bài viết theo năm tháng trước đã (vì theo mình nhìn không đẹp chút nào), sau đó chèn widget này vào, rất đơn giản, khỏi cần quan tâm đến chèn code giống ở các bài viết trên blog khác, nó có sẵn ở blogspot, việc gì chúng ta phải mất thời gian tự tạo ra nó chứ, sau khi chèn, kéo chuột để thả nó lên phía trên cùng (nếu bạn đã chèn thêm tiện ích khác - chẳng hạn tiện ích Liên hệ contact), hãy xem hướng dẫn tại video này:https://www.youtube.com/watch?v=HDookq9jtuQPhần 5. Cách điều chỉnh độ rộng của cột bên phảiTrong blog, bạn chỉ nên tạo ra 1 cột bên phải thôi, đừng tạo hai cột vì làm vậy nội dung bài viết ở giữa sẽ bị thu hẹp, cột bên phải dùng chứa tiện ích Liên hệ, Các bài mới đăng, hoặc chứa banner quảng cáo hoặc hình ảnh chứa thông điệp mà bạn cần người khác chú ý. Để điều chỉnh độ rộng của cột, bạn kéo thanh trượt y như con số trong video, đồng thời trượt để mở rộng khoảng dài của blog để bài viết của bạn dễ đọc hơn.- Vào Mẫu, Tùy chỉnh- Xem video hướng dẫn tại đây: https://www.youtube.com/watch?v=BwKAOYC3zSs- Lưu ý: thực tế mình thấy nếu rộng quá thì màn hình ko hiện hết nội dung, vì vậy độ rộng chỉnh lại là 1030px, cột phải 330px- Ngoài ra, tại nơi chỉnh độ rộng, các bạn nhấn vào phần Nâng cao,vào mục Tab sẽ chỉnh được màu nền cho nút menu ngang, mục Liên kết để đổi màu cho liên kết..., bạn cứ tự tìm hiểu, nhấn vào đâu thì bên dưới nó tự nhảy để minh họa vị trí trong blog. Các bạn cứ tìm hiểu thêmTuy nhiên, ở đây không có mục chỉnh size mặc định cho bài viết, nên các bạn tìm dòng .post-body {, sau đó chèn bên dưới nó dòng font size khoảng 16px là được, thêm dòng màu đen nữa..post-body {font-size: 25px;color: black; line-height: 1.4;}Phần 6. Cách khắc phục bị nhà mạng chặn blog và chặn ảnh- Bản thân mình thấy blogspot cho phép đăng nội dung "tươi tắn", hơn nữa còn dùng để nói xấu lãnh đạo, giống như facebook, bị chặn là đúng.1. Blogspot nội dung "tươi tắn" không thể chạy quảng cáo adsense, mà họ chạy quảng cáo popup (như cá độ bóng đá, thuốc "tăng lực"), họ kiếm được rất nhiều từ loại này, cho nên bạn cần hiểu không ai rảnh mà tạo trang "tươi" cho bạn xem giải trí đâu, họ làm vì tiền thôi.2. Blogspot nói xấu - xuyên tạc chính trị: họ không treo quảng cáo vì mục đích là để nói xấu, có thể tự bản thân họ, hoặc họ được tài trợ, tiền xài không hết cần gì treo quảng cáo adsense3. Chính 2 lý do trên khiến blogspot bị chặn, bản thân mình thì mù tịt về tạo trang web nên blogspot là giải pháp duy nhất để mình có được một trang web cá nhân (thay vì bỏ ra 2,5 triệu thuê viết web)
- Phía trên là hình chụp blog của Kim Phong đã đăng ký domain chấm com rồi, đã vào được, nhưng vẫn bị chặn hình ảnh (là mấy cái ô nhỏ màu trắng - ảnh đã bị chặn), sau khi dùng cách 1, đã hiện hình ảnh bình thường.Còn đây là cách khắc phục bị chặn hình ảnh, còn khắc phục bị chặn blog thì bắt buộc các bạn cần phải mua 1 domain (tên miền chấm com - y như dochoikimphong.com của mình). Mình thấy Viettel - VNPT - Net Nam đều đã chặn blog. Viettel chặn blog, muốn vào được phải đổi DNS thành 8888-8844, còn Net Nam thì không chặn được domain nhưng chặn hình luôn, mà khách truy cập một là không biết đổi DNS hoặc người ta lười, sẽ tắt blog của bạn không xem khi không có hình ảnh, thế là mất khách, đồng nghĩa không ai clik quảng cáo cho blog của bạn. Và đây là cách không bị chặn hình.Cách 1: cách này mình đang dùngĐăng nhập Blogger, rồi vào Mẫu, vào Chỉnh sửa HTML (nút này màu trắng đen - nằm dưới cái hình Trực tiếp trên blog)Chèn đoạn code này vào trước thẻ </body> rồi Lưu mẫu lại<script type='text/javascript'>//<![CDATA[var images = document.getElementsByTagName("img");for(var i=0;i<images.length;i++) {  images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");}//]]></script>Cách 2: cách này mình chưa dùng, làm tương tự cách 1, cả hai cách này mình lấy bài từ nguồn của blog DXOAN.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type='text/javascript'>//<![CDATA[$("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(/\/[0-9]+(\.bp\.blogspot)?/, "/lh4.googleusercontent")) });//]]></script>Nếu blog của bạn đã có thư viện JQuery thì hãy xóa dòng <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


Phần 7. Cách liên kết blog với domain1. Vào video này để xem hướng dẫn: https://www.youtube.com/watch?v=99Iy7NbYrBUHướng dẫn này dành cho ai mua domain của công ty PA, còn lại thì mình pó tay không chỉ được đâu nha.2. Sau đó điền đúng các con số y như hình dưới đây (đó là số 216.239.38.21)


Phần 8. Cách chèn widget hiện các comment gần nhất:<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript>   var a_rc = 10;   var m_rc = false;   var n_rc = false;   var o_rc = 40;</script><script src=http://kimphongtoys.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html" rel="nofollow" >Recent Comments Widget</a></div><style type="text/css">.rcw-comments a {   text-transform: capitalize;}.rcw-comments {   border-bottom: 1px dotted;   padding-top: 7px!important;   padding-bottom: 7px!important;}</style>
Chú thích:đổi kimphongtoys thành tên blog của bạnvar a_rc = 10: chỉ hiện 10 bình luận (mình thì chọn 5)var m_rc = false: không hiện ngày, true có hiệnvar n_rc = true;  hiện bình luận thuộc bài viết nào (mình chọn false để gọn gàng - bởi vì khi rê chuột vào nickname người bình luận, nó hiện link bài viết ở taskbar)var o_rc = 50; số kí tự của bình luận chỉ là 50, bạn có thể chỉnh thành 100, còn 50 kí tự nó ngắn gọn hơn, chú ý kí tự có tính luôn dấu sắc dấu nặng.---------------------------------------Phần 9. Cách chèn mã code quảng cáo adsense vào blogspot:xem video hướng dẫn cụ thể tại đây: https://www.youtube.com/watch?v=UCSaGuJS4cE<data:post.body/>  http://www.eblogtemplates.com/blogger-ad-code-converter/<b:if cond='data:blog.pageType == &quot;item&quot;'>PLACE_YOUR_PARSE_ADSENSE_CODE_HERE</b:if>