BlogNg's: Responsive

Tạo menu responsive cho blogspot mới nhất

Menu responsive là một menu hiển thị một menu thả xuống lớn và thường có nhiều liên kết mà bạn có thể thêm vào nó. Tính năng Menu responsive thường được sử dụng trên các trang web lớn có nhiều nội dung và loại trang để yêu cầu nhiều điều hướng, chẳng hạn như các trang web của chính phủ hoặc các trang tin tức.

Hôm nay mình sẽ hướng dẫn làm một menu responsive đơn giản tùy chọn nó đáp ứng đủ trên blogspot.

Cách tạo menu responsive cho blogspot

Ở đây mình sẽ cung cấp cho bạn một số lượng lớn menu đã được trang bị các tính năng bao gồm tìm kiếm, sau đó chỉ cần điều chỉnh theo nhu cầu của các bạn.

Cần lưu ý, mã mà mình sẽ chia sẻ yêu cầu biểu tượng Fontwesome. Vì vậy, thêm Fontwesome trong mẫu nếu nó không tồn tại.

Đầu tiên cac bạn mở trang Blogger -> Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML-> thêm mã bên dưới trước thẻ đóng <body>

<div class='megamenu-container'>
   <div class='megamenu'>
      <ul>
         <li><a href='/'>Home</a></li>
         <li>
            <a href='#'>About</a>
            <ul>
               <li>
                  <a href='#'>School</a>
                  <ul>
                     <li><a href='#'>Leadership</a></li>
                     <li><a href='#'>History</a></li>
                     <li><a href='#'>Locations</a></li>
                     <li><a href='#'>Careers</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Research</a>
                  <ul>
                     <li><a href='#'>Undergraduate research</a></li>
                     <li><a href='#'>Masters research</a></li>
                     <li><a href='#'>Funding</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Something</a>
                  <ul>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                  </ul>
               </li>
            </ul>
         </li>
         <li>
            <a href='#'>News</a>
            <ul>
               <li><a href='#'>Today</a></li>
               <li><a href='#'>Calendar</a></li>
               <li><a href='#'>Sport</a></li>
            </ul>
         </li>
         <li>
            <a href='#'>Contact</a>
            <ul>
               <li>
                  <a href='#'>School</a>
                  <ul>
                     <li><a href='#'>Lidership</a></li>
                     <li><a href='#'>History</a></li>
                     <li><a href='#'>Locations</a></li>
                     <li><a href='#'>Careers</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Another sub</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
      <span class='containersearch'>
         <form action='/search' id='search-form' method='get'>
            <input class='inputnui' name='q' placeholder='Search here...' type='search' value=''/>
            <i aria-hidden='true' class='fa fa-search'/>
         </form>
      </span>
   </div>
</div>
<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by ngocgn90
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});
//]]>
</script>

Chọn JQuery nếu sử dụng các phiên bản (2) hoặc (3)

<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by ngocgn90
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});var prev=0,$window=$(window),nav=$(".megamenu-container");$window.on("scroll",function(){var n=$window.scrollTop();nav.toggleClass("hiddenmega",n>prev),prev=n});
//]]>
</script>

Sau đó chọn mã CSS bên dưới trước thẻ đóng </head>

<style type='text/css'>
/* Responsive megamenu by ngocgn90 */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;z-index:99}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:&quot;\f0c9&quot;;font-family:&quot;fontawesome&quot;;font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:&quot;\f107&quot;;font-family:&quot;fontawesome&quot;;display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu &gt; ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu &gt; ul:before,.megamenu &gt; ul:after{content:&quot;&quot;;display:table}
.megamenu &gt; ul:after{clear:both}
.megamenu &gt; ul &gt; li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu &gt; ul &gt; li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu &gt; ul &gt; li:hover{background:#e84118}
.megamenu &gt; ul &gt; li &gt; ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;box-shadow:0 8px 10px -4px rgba(0,0,0,0.2)}
.megamenu &gt; ul &gt; li &gt; ul:before,.megamenu &gt; ul &gt; li &gt; ul:after{content:&quot;&quot;;display:table}
.megamenu &gt; ul &gt; li &gt; ul:after{clear:both}
.megamenu &gt; ul &gt; li &gt; ul &gt; li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu &gt; ul &gt; li &gt; ul &gt; li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu &gt; ul &gt; li &gt; ul &gt; li a:hover{color:#e84118}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul:before,.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul:after{content:&quot;&quot;;display:table}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul:after{clear:both}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li a{border:0}
.megamenu &gt; ul &gt; li &gt; ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu &gt; ul &gt; li &gt; ul.normal-sub &gt; li{width:100%}
.megamenu &gt; ul &gt; li &gt; ul.normal-sub &gt; li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu &gt; ul{display:none}
.megamenu &gt; ul &gt; li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu &gt; ul &gt; li a{padding:15px 20px;display:block}
.megamenu &gt; ul &gt; li &gt; ul{position:relative;overflow-y:scroll;max-height:280px}
.megamenu &gt; ul &gt; li &gt; ul.normal-sub{width:100%;max-width:100%}
.megamenu &gt; ul &gt; li &gt; ul &gt; li{float:none;width:100%;margin-top:20px}
.megamenu &gt; ul &gt; li &gt; ul &gt; li:first-child{margin:0}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul{position:relative}
.megamenu &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu &gt; ul &gt; li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>

Tiếp theo, nhấn vào nút Lưu chủ đề và xem kết quả trên blog của bạn. Đó là cách tạo menu responsive cho blogspot. Cảm ơn bạn đã ghé thăm và hy vọng hữu ích.

Nency

Cách reponsive hình ảnh trong blogger

CSS HTML Responsive

Vấn đề đặt ra là tất cả các độ phân giải màn hình đa dạng đó thì chỉ hiển thị một giao diện web duy nhất là trên desktop làm cho người dùng có cảm giác khó chịu khi phải kéo qua kéo lại, kéo tới lui mới xem hết được các thông tin của một bài viết. Từ sự bất tiện đó mà Responsive Web Design ra đời.

Responsive là gì?

Hiểu một cách đơn giản web responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là web responsive

Ví dụ về web responsive: Bạn mở trang chủ website responsive, rồi thu nhỏ trình duyệt hoặc đổi độ phân giải màn hình, bạn sẽ thấy website của mình không hề xuất hiện Scrollbar ngang, mà nó sẽ tự động co dãn sao cho phù hợp với chiều rộng màn hình máy tính bạn.

Responsive là công nghệ mới mà hiện nay hầu như mọi trang web đang áp dụng, công nghệ responsive tương thích với mọi loại màn hình hiển thị giúp cho website thân thiện hơn với người dùng và bài viết này sẻ hướng dẫn cách để hình ảnh hiển thị responsive cho website và blogspot

Hình ảnh Reponsive trong blogger??

Vậy đối với blogger của bạn như thế nào?.. Thực sự có nhiều mẫu blogspot đẹp nó đã được responsive rồi nhưng các bạn thường thấy khi viết bài các hình ảnh bạn chèn vào nó không được như ý. Nhìn rất không hợp với các màn hình khác nhau. Nó chỉ đẹp ở desktop vậy bạn nên điều chỉnh nó mà không liên quan đến phần nào của trang bạn đang có.

Để áp dụng code vào trong blogger bạn vui lòng làm theo các bước như hình bên dưới: Vào Blogger Dashboard > Template (Chủ đề)> Edit HTML (Chỉnh sửa HTML). Thêm đoạn css dưới đây vào trên thẻ ]]</b:skin>

.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

Tùy vào từng mẫu khác nhau để thẻ img nó sẽ lồng khác nhau. Vì vậy khi thêm đoạn code trên mà vẫn không được các bạn nên tìm hiểu thẻ img nằm trong vùng nào nhé.

Sau đó lưu lại mẫu và xem kết quả trên điện thoại hoặc trên trình duyệt click chuột phải chọn [Kiểm tra].