Tạo Thanh Menu Top Cực Đẹp Cho Blogspot

Share:
Tạo Thanh Menu Top Cực Đẹp Cho Blogspot

Tạo Thanh Menu Top Cực Đẹp Cho Blogspot

Hồng Hải đã đăng Thứ Ba, 10 tháng 4, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • Hôm Nay Mình Xin Chia Sẽ Thanh Menu Top Mình Đang Dùng đã responsive Cực Đẹp
    Bước 1. Bạn Chỉ Cần Chèn Đoạn Code này Vào Chỗ Bạn Muốn Đặt Là Được
    <style>
    .wrap_pluskienthuc_menu {background:linear-gradient(50deg,#55579e 0%,#474988 35%,#55579e 0%,#55579e 30%,#55579e 100%);padding:0;width: 100%; z-index:10;-webkit-user-select: none;-moz-user-select:none;-o-user-select:none;transition:1s}
      .menu_ngang {width:1080px; margin:0 auto}
      .logo_menungang {display:inline-flex;align-items:center;height:50px;padding:5px 0}
      .logo_menungang span {padding: 11px 25px; margin: 0 10px 0 0; background: rgba(0,0,0,.12);transition:.5s}
      .logo_menungang span:hover {background-color:rgba(0,0,0,.25)}
      .logo_menungang a {color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-family: &quot;Roboto Condensed&quot;,sans-serif}
      .search_menungang {display:inline}
      .chuyenmuc_menungang {float:none;clear:both;display:inline}
      .chuyenmucmenungang {display: inline; height: 50px; position: relative; top: -3px; left: 42px}
      .chuyenmucmenungang li {list-style:none;display:inline;text-align:center}
      .chuyenmucmenungang a{color: #fff; text-decoration: none; font-size: 18px; transition: .3s; padding: 5px 15px;border:2px solid transparent;border-radius:0;font-family:&quot;Roboto Condensed&quot;,sans-serif;margin: 0; text-transform: uppercase; font-weight: 700; letter-spacing:0}
      .chuyenmucmenungang a:hover{color:white;border:2px solid;border-radius:50px}
      .chuyenmucmenungang a:focus{color:#55579e;background:#FFF;border:2px solid white;border-radius:50px}
    @media screen and (max-width:1200px){
      .logo_wrap_pluskienthuc_menu{margin-left:0}
      .logo_wrap_pluskienthuc_menu span{visibility:hidden;margin:0!important}
      .wrap_pluskienthuc_menu{background:#7174a2!important}
          #pluskienthuc-popup-vt{display:none!important}
          .logo_menungang a{font-size: 25px;}
          .menu_ngang{width:68%!important}
    .chuyenmuc_menungang{display:none!important}
    .search_menungang{display:none!important}
    }
    </style>
    <div class='wrap_pluskienthuc_menu'>
    <div class='menu_ngang'>
    <div class='logo_menungang'>
    <a href='/' title='Trang chủ'><span>H</span>Hồng Hải Blog</a>
    </div>
    <div class='chuyenmuc_menungang'>
    <div class='chuyenmucmenungang'>
    <li><a href='/search/label/Thủ%20Thuật%20Windows' title='Thủ Thuật Windows'>Windows</a></li>
    <li><a href='/search/label/Thủ%20Thuật%20Facebook' title='Facebook'>Facebook</a></li>
    <li><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Blog'>Blog</a></li>
    <li><a href='/search/label/PSD%20Ảnh%20bìa' title='Ảnh Bìa'>Ảnh Bìa</a></li>
    </div>
    </div>
    <div class='search_menungang'>
    <style>#searchform{float:right;margin:0;padding:0}#searchform fieldset{padding:0;border:none;margin:0}#searchform input[type=&quot;text&quot;]{outline:0;background:rgba(0,0,0,.15) url(http://sv1.upsieutoc.com/2017/09/02/icon8aa3b.png) left no-repeat;border:none;background-size:30px 30px;background-position:97% 50%;float:left;padding:0 25px 0 15px;height:60px;margin:0;width:280px;color:#fff;letter-spacing:-.5px;font:400 16px &quot;Roboto&quot;,sans-serif;transition:.65s;border-radius:0;cursor:pointer}#searchform input:focus{outline:0;background:rgba(0,0,0,.245) url(http://sv1.upsieutoc.com/2017/09/02/icon8aa3b.png) left no-repeat;border:none;background-size:30px 30px;background-position:2% 50%;float:left;padding:0 10px 0 40px;margin:0;width:270px;color:#fff;letter-spacing:-.5px;font:400 16px &quot;Roboto&quot;,sans-serif;border-radius:0;cursor:text}#searchform ::-webkit-input-placeholder{color:#eee}</style>
    <form action='/search' id='searchform' method='get' title='Tìm kiếm'>
    <fieldset>
    <input class='text_input' id='s' name='q' onblur='if(this.value==&apos;&apos;){this.value=&apos;Tìm kiếm thủ thuật, phần mềm,...&apos;;}' onfocus='if(this.value ==&apos;Tìm kiếm thủ thuật, phần mềm,...&apos;) {this.value=&apos;&apos;; }' placeholder='Tìm kiếm thủ thuật, phần mềm,...' type='text' value='Tìm kiếm thủ thuật, phần mềm,...'/>
    </fieldset>
    </form>
    </div>
    </div>
    </div>
    Bước 2. Chỉnh sửa lại sao cho phù hợp và lưu mẫu.
    Chúc Các Bạn Thành Công!!
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    36 nhận xét:

    1. Cảm ơn bác :)) Search box hiệu ứng trượt rất đẹp ạ.

      Trả lờiXóa
    2. Cái này rất hữu ích với 1 số bạn đấy :)

      Trả lờiXóa
    3. Hải baby :*
      Cho tui xin cái liên kết nha <3
      URL: http://gaixinh2018.blogspot.com/
      Tên hiển thị: Ngắm Gái Xinh
      Cám ơn trước nhé!

      Trả lờiXóa
    4. Liên kết bác ơi
      https://leminhut.blogspot.com/

      Trả lờiXóa
    5. Share temp cũ dc không

      Trả lờiXóa
    6. Wow! Theme mới mượt đấy chứ :D.Cho a xin link down temp gốc với nào

      Trả lờiXóa
      Trả lời
      1. đây anh: https://drive.google.com/file/d/17ySQI0Cg45esQzn9kSvqrn2x3gBXsqTq/view?usp=drivesdk

        Xóa
    7. À há, temp 2 ae mình từ 1 bố mẹ này :D

      Trả lờiXóa
    8. Bố cục nhìn cứng và cứng cứng cứng...

      Trả lờiXóa
      Trả lời
      1. em thấy cũng bình thg mà a đâu cứng cứng đâu

        Xóa
    9. Vắng mặt đâu thời gian rồi ?

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!