Cảm nhận tư duy và tổng hợp kiến thức

Hiển thị các bài đăng có nhãn Menu. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Menu. Hiển thị tất cả bài đăng

Thứ Hai, 28 tháng 8, 2017

Menu Navigation xổ xuống màu sắc trang nhã cho các Blogger

  • Trang thực hành ứng dụng:
    Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài: 
    • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
    • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
    Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:
    Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.
    Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </header> và chép dán Source dưới đây  phía dưới trên nó: (Tùy kiểu mà bạn muốn)
    Nếu Đặt dưới thẻ </header>: Menu sẽ xuất hiện dưới Banner.
    Nếu đặt dưới thẻ <Body>: Menu sẽ xuất hiện trên đầu cùng trang Web.

    Nếu đặt trên thẻ </body> đóng như vầy: Nó sẽ xuất hiện phía dưới cùng trang Web.
    Bạn cũng có thể dùng Widget Html để đặt nó vào nơi như ý trên Layout  thử xem nhé.
    <nav class='pi-navigation' id='main-nav'>
    <div class='main-menu'>
    <ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
    <li itemprop='name'><a class='active' expr:href='data:blog.homepageUrl' itemprop='url'>Home</a></li>
    <li><a href='#'>Business</a>
    <ul class='sub-menu'>
    <li itemprop='name'><a href='#' itemprop='url'>Featured Image</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Slider</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>SoundCloud</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Video</a></li>
    </ul>
    </li>
    <li itemprop='name'><a href='#' itemprop='url'>Fashion</a>
    </li>
    <li><a href='#'>Sports</a>
    <ul class='sub-menu'>
    <li itemprop='name'><a href='#' itemprop='url'>Full Width</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Right Sidebar</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Left SIdebar</a></li>
    </ul>
    </li>
    <li itemprop='name'><a href='#' itemprop='url'>Games</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Technology</a></li>
    <li itemprop='name'><a href='http://bit.ly/2ijV1ge' itemprop='url'>Contact Us</a></li>     
    </ul>
    <div id='searchformfix'>
    <form action='/search' id='searchform'>
    <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search for games, music, movies...&quot;;}' onfocus='if (this.value == &quot;Search for games, music, movies...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search for games, music, movies...'/>
    <input type='submit' value=''><i class='fa fa-search'/></input>
    </form>
    </div>
    </div>
    </nav>
    <div class='clear'/>
    Đặt trên thẻ đóng </b:skin>:
    .main-menu {
    width: 1160px;
    margin: 0 auto;
    }
    #main-nav {
    margin: 0 auto;
    width: 100%;
    height: 60px;
    background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 2px solid #5aa628;
    }
    #main-nav .menu-alert{
    float:left;
    padding:18px 0 0 10px ;
    font-style:italic;
    color:#FFF;
    }
    #top-menu-mob , #main-menu-mob{ display:none; }
    #main-nav ul li {
    text-transform: uppercase;
    font-family: 'Droid Sans', sans-serif;
    font-size:16px;
    position: relative;
    display: inline-block;
    float: left;
    height:60px;
    }
    #main-nav ul li:last-child a{border-right:0 none;}
    #main-nav ul li a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding: 0 16px;
    text-decoration: none;
    color: #b6b5b5;
    font-family: Oswald,sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    font-weight: 400;
    line-height: 60px;
    margin: 0;
    padding: 0 .9em;
    }
    #main-nav ul li a.active {
    color:#000;
    }
    #main-nav ul li a .sub-indicator{}
    #main-nav ul li a:hover {}
    #main-nav ul ul{
    display: none;
    padding: 0;
    position: absolute;
    top: 60px;
    width: 180px;
    z-index: 99999;
    float: left;
    background: #2c2c2c;
    }
    #main-nav ul ul li, #main-nav ul ul li:first-child {
    background: none !important;
    z-index: 99999;
    min-width: 180px;
    border: 0 none;
    font-size: 15px;
    height: auto;
    margin: 0;
    }
    #main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
    #main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
    #main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
    #main-nav ul.sub-menu a ,
    #main-nav ul ul li.current-menu-item a,
    #main-nav ul ul li.current-menu-parent a,
    #main-nav ul ul li.current-page-ancestor a{
    border: 0 none;
    background: none !important;
    height: auto !important;
    line-height: 1em;
    padding: 10px 10px;
    width: 160px;
    display: block !important;
    margin-right: 0 !important;
    z-index: 99999;
    color: #fff !important;
    }
    #main-nav ul li.current-menu-item ul a,
    #main-nav ul li.current-menu-parent ul a,
    #main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
    #main-nav ul li:hover > a, #main-nav ul :hover > a { color:#000;}
    #main-nav ul ul li:hover > a,
    #main-nav ul ul :hover > a {background: #20C1DD !important; padding-left:15px !important;padding-right:5px !important;}
    #main-nav ul li:hover > ul {display: block;}
    #main-nav ul li.current-menu-item,
    #main-nav ul li.current-menu-parent,
    #main-nav ul li.current-page-ancestor{
    margin-top:0;
    height:50px;
    border-left:0 none !important;
    }
    #main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
    #main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
    #main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
    #main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
    #main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
    #main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
    text-shadow:0 1px 1px #b43300;
    color:#FFF;
    height:50px;
    line-height:50px;
    border-left:0 none !important;
    }
    #main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
    #main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
    #main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
    #main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
    #main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
    #main-nav ul li.menu-item-home ul li a,
    #main-nav ul ul li.menu-item-home a,
    #main-nav ul li.menu-item-home ul li a:hover{
    background-color:transparent !important;
    text-indent:0;
    background-image:none !important;
    height:auto !important;
    width:auto;
    }
    #main-menu-mob,#top-menu-mob{
    background: #222;
    width: 710px;
    padding: 5px;
    border: 1px solid #000;
    color:#DDD;
    height: 27px;
    margin:13px 0 0 10px;
    }
    #top-menu-mob{
    width: 350px;
    margin:2px 0 0 0;
    }
    #main-nav.fixed-nav{
    position:fixed;
    top:0;
    left:0;
    width:100% !important;
    z-index:999;
    opacity:0.9;
    -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    }}
    Mời các bạn thử qua công việc Hướng dẫn thiết kế Template Blogger nếu chưa biết, để làm cho bằng được một Web site ưng ý. Đây là một công việc kỹ thuật giúp các bạn có thể tự tin để tạo dựng cho mình một Web/Blog vào đời.

    Chúc các bạn thành công.
    Người viết: Nguyễn Đạt Khánh



    Share:

    Thứ Sáu, 11 tháng 8, 2017

    Thiết kế menu Navigation 2 (Drop Down menu) cho Blog/ Web


  • Đặt dưới thẻ </header>

    <nav class='pi-navigation' id='main-nav'> 
    <div class='main-menu'>
    <ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
    <li itemprop='name'><a class='active' expr:href='data:blog.homepageUrl' itemprop='url'>Home</a></li>
    <li><a href='#'>Business</a>
    <ul class='sub-menu'>
     <li itemprop='name'><a href='#' itemprop='url'>Featured Image</a></li>
     <li itemprop='name'><a href='#' itemprop='url'>Slider</a></li>
     <li itemprop='name'><a href='#' itemprop='url'>SoundCloud</a></li>
     <li itemprop='name'><a href='#' itemprop='url'>Video</a></li>
    </ul>
    </li>
     <li itemprop='name'><a href='#' itemprop='url'>Fashion</a>
    </li>
     <li><a href='#'>Sports</a>
    <ul class='sub-menu'>
     <li itemprop='name'><a href='#' itemprop='url'>Full Width</a></li>
     <li itemprop='name'><a href='#' itemprop='url'>Right Sidebar</a></li>
     <li itemprop='name'><a href='#' itemprop='url'>Left SIdebar</a></li>
    </ul>
    </li>
    <li itemprop='name'><a href='#' itemprop='url'>Games</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Technology</a></li>
    <li itemprop='name'><a href='http://www.soratemplates.com/2016/01/mag-zilla-blogger-templates.html' itemprop='url'>Download This Template</a></li>       
    </ul>
            <div id='searchformfix'>
              <form action='/search' id='searchform'>
                <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search for games, music, movies...&quot;;}' onfocus='if (this.value == &quot;Search for games, music, movies...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search for games, music, movies...'/>
                <input type='submit' value=''><i class='fa fa-search'/></input>
              </form>
            </div>
    </div> 
    </nav> 
    <div class='clear'/> 
          <!-- secondary navigation menu end -->
    
    Đặt trong thẻ </b:skin>

    /*----navi-----*/
    #nav {
    font: normal bold 12px Arial, sans-serif;
    text-transform: uppercase;
    height: 59px;
    line-height: 50px;
    padding: 0 28px;
    background: #F4F4F4;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    }
    #main-nav {
    margin: 0 auto;
    width: 100%;
    height: 60px;
    background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 2px solid #5aa628;
    }
    #main-nav .menu-alert{
    float:left;
    padding:18px 0 0 10px ;
    font-style:italic;
    color:#FFF;
    }
    #top-menu-mob , #main-menu-mob{ display:none; }
    #main-nav ul li {
    text-transform: uppercase;
    font-family: 'Droid Sans', sans-serif;
    font-size:16px;
    position: relative;
    display: inline-block;
    float: left;
    height:60px;
    }
    #main-nav ul li:last-child a{border-right:0 none;}
    #main-nav ul li a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding: 0 16px;
    text-decoration: none;
    color: #b6b5b5;
    font-family: Oswald,sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    font-weight: 400;
    line-height: 60px;
    margin: 0;
    padding: 0 .9em;
    }
    #main-nav ul li a.active {
    color:#000;
    }
    #main-nav ul li a .sub-indicator{}
    #main-nav ul li a:hover {}
    #main-nav ul ul{
    display: none;
    padding: 0;
    position: absolute;
    top: 60px;
    width: 180px;
    z-index: 99999;
    float: left;
    background: #2c2c2c;
    }
    #main-nav ul ul li, #main-nav ul ul li:first-child {
    background: none !important;
    z-index: 99999;
    min-width: 180px;
    border: 0 none;
    font-size: 15px;
    height: auto;
    margin: 0;
    }
    #main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
    #main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
    #main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
    #main-nav ul.sub-menu a ,
    #main-nav ul ul li.current-menu-item a,
    #main-nav ul ul li.current-menu-parent a,
    #main-nav ul ul li.current-page-ancestor a{
    border: 0 none;
    background: none !important;
    height: auto !important;
    line-height: 1em;
    padding: 10px 10px;
    width: 160px;
    display: block !important;
    margin-right: 0 !important;
    z-index: 99999;
    color: #fff !important;
    }
    #main-nav ul li.current-menu-item ul a,
    #main-nav ul li.current-menu-parent ul a,
    #main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
    #main-nav ul li:hover > a, #main-nav ul :hover > a { color:#000;}
    #main-nav ul ul li:hover > a,
    #main-nav ul ul :hover > a {background: #20C1DD !important; padding-left:15px !important;padding-right:5px !important;}
    #main-nav ul li:hover > ul {display: block;}
    #main-nav ul li.current-menu-item,
    #main-nav ul li.current-menu-parent,
    #main-nav ul li.current-page-ancestor{
    margin-top:0;
    height:50px;
    border-left:0 none !important;
    }
    #main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
    #main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
    #main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
    #main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
    #main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
    #main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
    
    text-shadow:0 1px 1px #b43300;
    color:#FFF;
    height:50px;
    line-height:50px;
    border-left:0 none !important;
    }
    #main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
    #main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
    #main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
    #main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
    #main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
    #main-nav ul li.menu-item-home ul li a,
    #main-nav ul ul li.menu-item-home a,
    #main-nav ul li.menu-item-home ul li a:hover{
    background-color:transparent !important;
    text-indent:0;
    background-image:none !important;
    height:auto !important;
    width:auto;
    }
    #main-menu-mob,#top-menu-mob{
    background: #222;
    width: 710px;
    padding: 5px;
    border: 1px solid #000;
    color:#DDD;
    height: 27px;
    margin:13px 0 0 10px;
    }
    #top-menu-mob{
    width: 350px;
    margin:2px 0 0 0;
    }
    #main-nav.fixed-nav{
    position:fixed;
    top:0;
    left:0;
    width:100% !important;
    z-index:999;
    opacity:0.9;
    -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    }
    }
    Đặt trên thẻ </head>

    <script type='text/javascript'>
    //<![CDATA[ 
    jQuery(document).ready(function($){
      $(window).load(function(){
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: true,
            directionNav:true,
            slideshowSpeed: 5000,controlNav: true,
            smoothHeight: true,
            slideDirection: 'horizontal'
            });
       jQuery('.slides').addClass('loaded');
      }); 
     var aboveHeight = $('#leader-wrapper').outerHeight();
            $(window).scroll(function(){
                    if ($(window).scrollTop() > 200){
                    $('#main-nav').addClass('fixed-nav').css('top','0').next()
                    .css('padding-top','0px');
                    } else {
                    $('#main-nav').removeClass('fixed-nav').next()
                    .css('padding-top','0');
                    }
            });
    });
    //]]>
    </script>
    <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
    Đặt trên đoạn code: <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <style>
     @media only screen and (max-width:1024px){
            #selectnav1 {
              background: none repeat scroll 0 0 #333;
              border: 1px solid #232323;
              color: #FFF;
              width: 418px;
              margin: 8px 0px;
              float: left;
            }
    .selectnav {
              display:block;
              width:50%;
              margin:0;
              padding:7px;
            }
    }
          @media only screen and (max-width:768px){
            #selectnav1 {
              background: none repeat scroll 0 0 #333;
              border: 1px solid #232323;
              color: #FFF;
              width: 410px;
              margin: 8px 0px;
              float: left;
            }
            .selectnav {
              display:block;
              width:50%;
              margin:0;
              padding:7px;
            }
          }
          /* MEDIA QUERY */
          @media only screen and (max-width:1220px){
            #outer-wrapper {
              margin:0 auto;
    width: 1000px;
            }
            #post-wrapper {
              width: 670px;
              max-width: 670px;
            }
                    div#mywrapper {
              float: left;
              width: 670px;
            } 
    .blog_featured_post.third, .blog_featured_post.fourth {
        width: 33.9%;
        height: 163px;
    }
    #sidebar-wrapper { 
    max-width: 259px;
    } 
    #main-nav {
    margin: 0 auto;
    width: 1000px;
    }
    #sidebar-narrow { 
    display: none;
    }
    
    .main-menu {
    width: 940px;
    margin: 0 auto;
    }
    }
    @media only screen and (max-width:1024px){
    .header {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .header img {
    margin: 0 auto;
    max-width: 100%;       
    }
    .header-right {
    margin: 15px 0 20px 0;
    width: 100%;
    max-width: 100%;        
    }
    
    #menu-main {
        display: none;
    }
    .main-menu {
    width: 680px;
    margin: 0 auto;
    }
    #searchform input[type=text]:hover,#searchform input[type=text]:focus {width:150px;}
    #my-slider {
        margin-left: 15px;
    }
    div#mywrapper {
        width: 100%;
    }
    #post-wrapper {
        width: 100%;
        max-width: 100%;
    }
    #sidebar-wrapper {
    width:100%;
    max-width:100%;
    padding-left: 0;
    border-left: 0;        
    }
    
    div#main {
        width: auto;
    }
    .blog_featured_post.second,.blog_featured_post.first,.blog_featured_post.third,.blog_featured_post.fourth {width: 100%;height:300px;margin-bottom: 9px;}
    .blog_featured_post a .blog_contents{left:15px;right:15px;bottom:10px;}
    .blog_featured_post.first a .blog_contents h3,.blog_featured_post a .blog_contents h3 {font-size: 20px;}
    .blog_contents span{font-size:10px;padding:3px 10px;}
    .blog_contents span:before{border-width: 17px 7px 0px;}
    .blog_contents span:after{border-width: 0px 7px 16px;}
    .main-menu {
    padding: 5px 20px;
    }
    #searchformfix {
    margin-top: 8px;
        width: 215px;
    }
    #searchform input[type=&quot;text&quot;] {
              width: 144px;}
    #main-nav,#outer-wrapper {
    width: 720px;
    }
    #slider {
    overflow: hidden;
    width: 100%;
    }
    #bottombar .center,#bottombar .center1,#bottombar .right, #bottombar .left{width:50%}
    #related-posts a {
        width: 213px;
    }
    .breadcrumbs {
    margin-left: 0;        
    }
    }
    @media only screen and (max-width:767px){
    #beakingnews {
    width: 100%;
    }      
    #main-nav, #outer-wrapper {
    width: 440px;
    }
    div#singlepage {
        width: 100%;
    }
    #menu-main {
        display: none;
    }
    .main-menu {
    padding: 5px 20px;
    width: 100%;
    box-sizing: border-box;
    }
    #main-nav.fixed-nav {
    position: relative;
    opacity: 1;        
    }
    #selectnav1 { 
    width: 100%;        
    }
    #my-slider {
    margin-left: -6px;
    }
    div.conty {
    width: 400px;
    margin: 0 auto;
    }
    #searchformfix {
    display: none;
    }
    .slider-navigator-outer {
    display: none;
    }
            #post-wrapper, #sidebar-wrapper { 
              width:100%;
              max-width:100%
            }
            .active {
              display: block;
            }
            .post-body img {
              max-width:100%;
            }
    .img-thumbnail {
        margin: 0 0 15px 0;
        width: 100%;
        height: 220px;
    }
    .img-thumbnail img {
        width: 100%;
        height: 220px;
    }
            .stylebox .widget {
              padding:0 0 10px 0;
            }
            #stylebox-1 .widget, #stylebox-3 .widget, #stylebox-5 .widget {
              padding:0 0 10px 0;
            }
            #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-6 .widget ;stylebox-7 .widget{
              padding:0 0 10px 0;
            }
            .sidebar-container, .post-container {
              padding:15px 0 0px;
            }
            .widget li, .BlogArchive #ArchiveList ul.flat li {padding:0;}
    ul.xpose_thumbs1 {
    width: 100%;
    }
    .large-thumb {
    width: 100%;
    box-sizing: border-box;        
    }
    ul.xpose_thumbs22 {
    width: 100%;        
    }
    ul.xpose_thumbs22 li, ul.xpose_thumbs2 li {
    overflow: hidden;        
    }
    .stylebox {
    width: 100%;        
    }
    .gallery-posts .def_wgr:first-child {
    width: 100%;
    margin: 0 0 20px 0;        
    }
    .gallery-posts .def_wgr:first-child img {
        width: 100%;
    }
    .gallery-posts .def_wgr {
        min-width: 76px;
        width: 76px;
        margin: 0 0 0px 0px;
    }
    .gallery-posts .def_wgr img {
        width: 76px;
        height: 76px;
    }
    #bottombar .center, #bottombar .center1, #bottombar .right, #bottombar .left {
        width: 100%;
    }
    #bottombar .left .widget, #bottombar .center .widget, #bottombar .center1 .widget {
        margin: 0 0 15px 0;
    }
    .footer-left {
        float: left;
        margin: 20px 0;
        color: #949494;
        width: 100%;
        text-align: center;
    }
    .footer-right {
    display: none;        
    }
    .back-to-top {
    display: none;        
    }
    .breadcrumbs {
    display: none;        
    }
    .item .blog_featured_posts, .static_page .blog_featured_posts {
    display: none;        
    }
    .item .post-container, .static_page .post-container {
    padding: 0;        
    }
    h1.post-title a, h1.post-title {
        font-size: 24px !important;
    }
    #related-posts a {
        width: 183px;
    }
    }
          
    
    @media only screen and (max-width:479px){
    #outer-wrapper, #main-nav {
    width: 300px;
    }
    
    ul.xpose_thumbs .xpose_thumb img {
        height: inherit;
            }
    .top-menu {
    padding: 0 10px 0 0;        
    }
    
    div#singlepage {
        width: 100%;
    }
    div.conty {
    width: 254px;
    margin: 0 auto;
    }
    #header-wrapper {
    min-height: auto;        
    }
    .header {
    margin: 0;        
    }
    .main-menu {
        padding: 5px 10px;
    }
    #searchformfix, .header-right {
    display: none;
    }
    #content-wrapper {
    padding: 0px 10px 0;        
    }
            ul.xpose_thumbs1,ul.xpose_thumbs22{width:100%}
            #menu-main {
              display: none;
            }
            #sidebar-narrow{display:none}
            .header, .header-right, .stylebox,.stylebox1  {
        
              width:100%;
              max-width:100%
            }
            .header img {
              margin: 20px auto 0;
            }
            .largebanner .widget, #bottombar {
              padding:8px;
            }
            .stylebox .widget-content,.stylebox1  .widget-content {
              padding:0px;
            }
            h2.post-title, h1.post-title {
              font-size:16px;
            }
            #stylebox-1 .widget, #stylebox-3 .widget, #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-5 .widget, #stylebox-6 .widget ,#stylebox-7 .widget{
              padding:0 0 8px 0;
            }
            .comments .comment-block, .comments .comments-content .inline-thread {
              padding:10px !important;
            }
            .comment .comment-thread.inline-thread .comment {
              margin: 0 0 0 0 !important;
            }
            .footer-left, .footer-right {
              text-align:center;
            }
    .blog_featured_post.second, .blog_featured_post.first, .blog_featured_post.third, .blog_featured_post.fourth {height: 200px;}
    ul.xpose_thumbs1 .xpose_thumb img {
        height: 200px;
    }
    ul.xpose_thumbs1 .xpose_thumb {
    line-height: 1.5;        
    }
    h1.post-title a, h1.post-title {
        font-size: 20px !important;
    }  
    .item .post-container, .static_page .post-container {
        padding: 10px 0 0;
    } 
    div#author-box, .comment-info {
    display: none;        
    }
    #related-posts a {
        width: 100%;
        margin-right: 0;
    } 
    #sidebar .widget-content {
    overflow: hidden;    
    }
    h2.post-title {
    clear: both;
    }
    .img-thumbnail, .img-thumbnail img {
    height: 180px;        
    } 
    .index .post {
    padding: 0 0 15px;        
    }
    }
          
    @media screen and (max-width:319px){
    #outer-wrapper, #main-nav {
    width:220px;
    }
    #menu-main {
    display: none;
    }
    .blog_featured_post.second, .blog_featured_post.first, .blog_featured_post.third, .blog_featured_post.fourth {
        height: 160px;
    }
    .blog_featured_post.first a .blog_contents h3, .blog_featured_post a .blog_contents h3 {
        font-size: 17px;
    }
    .blog_featured_post.first a .blog_contents h3 {
        font-size: 17px !important;
    }
    .blog_featured_posts {
    margin-bottom: 5px        
    }
    .post-container {
        padding: 0;
    }
    div#mywrapper {
    width: 100%;        
    }
    .img-thumbnail, .img-thumbnail img {
        height: 130px;
    }
    #sidebar-narrow, #sidebar-wrapper, .xpose_meta_comment, .more_meta{display:none !important}   
    ul.xpose_thumbs22 .xpose_thumb2, ul.xpose_thumbs2 .xpose_thumb2 {display: none;}
    ul.xpose_thumbs22 li, ul.xpose_thumbs2 li {min-height: auto;}
    .gallery-posts .def_wgr:first-child {
    min-width: 100%;        
    height: 180px;
    }
    .gallery-posts .def_wgr {
        min-width: 50%;
        width: 50%;
    }
    .gallery-posts .def_wgr img {
        width: 100%;
        height: 90px;
    }
    .gallery-posts .def_wgr a.first_A {
        height: 90px;
    }
    h1.post-title a, h1.post-title {
        font-size: 19px !important;
    }
    }   
    </style>
    Nếu bạn muốn cho menu Navi đặt lên trên Banner, và thu gọn title trên Banner về bên trái, bạn đặt Code dưới đây phía trên mã code vừa đặt vào thẻ </b:skin>

    /* HEADER WRAPPER */
    #header-wrapper {
    margin:0 auto;
    overflow:hidden;
    padding: 0 30px;
    min-height: 154px;
        max-width: 1160px;
    }
    .header {
    float:left;
    width:45.7%;
    max-width:457px;
    margin: 27px 0;
    }
    .header h1.title,.header p.title {
    font:normal bold 40px Fjalla One, Arial, Helvetica, sans-serif;
    margin:0 0 0 0;
    text-transform:uppercase;
    }
    .header .description {
    color:#555555;
    }
    .header a {
    color:#333333;
    }
    .header a:hover {
    color:#ffd966;
    }
    .header img {
    display:block;
    }
    .header-right {
    float: right;
    padding: 0;
    overflow: hidden;
    margin: 32px 0px 32px 0;
    width: 70%;
    max-width: 728px;
    max-height: 90px;
    }
    .header-right img {
    display:block;
    }
    .ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}
    Chúc các bạn thành công.
    Người viết: Nguyễn Đạt Khánh



    Share:

    Thứ Năm, 10 tháng 8, 2017

    Source Code thiết kế menu xổ xuống (Drop down) cho Web/Blogspot

  • Dưới đây là một menu Drop Down Navigation có trình đơn xổ xuống. Các bạn có thể tự thay đổi hay chế tác lại để dùng trong thiết kế Web / Blog. Vỏn vẹn chỉ có 2 thao tác đơn giản: Cho Css vào trong </b:skin> và tạo một Widget. Lưu ý: Trước khi làm, bạn luôn quan tâm Save lại Template đã làm trước đó nhé, Cần nhất là để tạo một bản template backup khi cần thiết. 
    Cách làm như sau:

    - Truy cập vào trang Blogger > vào mục Layout (Bố cục)


    - Chọn Thêm tiện ích dưới tiện ích tiêu đề trang và chọn thêm HTML/JavaScript khi có cửa sổ tiện ích  bật ra như ảnh trên, và paste đoạn code này vào:
    /*----- Drop Down Menu ----*/ #drnavbar { background: #999999; width: 820px; color: #a64d79; margin: 0px; padding: 0; position: relative; border-top:0px solid #d9ead3; height:35px; } #drnav { margin: 0; padding: 0; } #drnav ul { float: left; list-style: none; margin: 0; padding: 0; } #drnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #drnav li a, #drnav li a:link, #drnav li a:visited { color: #a64d79; display: block; font:normal 13px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #drnav li a:hover, #drnav li a:active { background: #6fa8dc; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #drnav li { float: left; padding: 0; } #drnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #drnav li ul a { width: 140px; } #drnav li ul ul { margin: -25px 0 0 161px; } #drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { left: -999em; } #drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { left: auto; } #drnav li:hover, #drnav li.sfhover { position: static; } #drnav li li a, #drnav li li a:link, #drnav li li a:visited { background: #ffd966; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #drnav li li a:hover, #drnavli li a:active { background: #3d85c6; color: #f4cccc; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }

    - Chọn vào Design (Mẫu)> Edit HTML (Chỉnh sửa HTML)
    - Dùng tổ hợp phím Ctrl+F tìm kiếm thẻ ]]></b:skin> và thêm đoạn CSS này lên trên nó:
    <div id='drnavbar'> <ul id='drnav'> <li> <a href='http://tinhockhanhdat10.blogspot.com/'>Trang chủ</a> </li> <li> <a href='http://tinhockhanhdat10.blogspot.com/search/label/B%E1%BA%A7u%20r%C6%B0%E1%BB%A3u%20t%C3%BAi%20th%C6%A1'>Bầu rượu túi thơ</a> </li> <li> <a href='#'>Tin học</a> <ul> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/K%E1%BB%B9%20thu%E1%BA%ADt%20tin%20h%E1%BB%8Dc'>Kỹ thuật tin học</a></li> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/Win%2010'>Win 10</a></li> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/M%E1%BA%A1ng%20IT'>Mạng It</a></li> </ul> </li> <li> <a href='http://tinhockhanhdat10.blogspot.com/p/lien-he-voi-toi-gioi-thieu-blog-cua-toi.html'>Liên hệ</a> </li> </ul> </div>
    Các đoạn CSS trên phần thêm vào trong thẻ <b:skin> bạn có thể lưu ý các thành phần cấu trúc để thay đổi giao diện. 

    Cuối cùng là lưu template lại và tận hưởng thành quả.
    Mời các bạn xem bản Demo nhé. Chúc các bạn thành công.

    Người viết: Nguyễn Đạt Khánh

    Share:

    Thứ Năm, 5 tháng 5, 2016

    Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger

  • Hẳn các bạn đã quyen với các tiện ích Bài viết mới nhất và Nhận xét mới nhất được trình bày theo phương pháp truyền thống trong một tiện ích HTML rồi phải không, Để tạo phong cách riêng và mới lạ cho cả tác giả và độc giả của blog trong cách trình bày của 2 tiện ích này, bài viết này mình sẽ hướng dẫn thêm hai tiện ích này vào trong thanh menu. Bình thường chúng sẽ được ẩn ở dưới tiêu đề của menu và sẽ hiện ra dạng sổ dọc khi người dùng dê chuột hoặc bấm vào tiêu đề đó như trên trang facebook. Khá thú vị phải không? Vậy còn chần chừ gì nữa hãy bắt tay vào làm thôi.

    Để hiểu rõ hơn nguyên tắc hoạt động của menu này các bạn vui lòng xem ảnh động bên dưới:
    Các bạn cũng có thể xem trực tiếp trên blog demo của mình ở bên dưới:

    VIEW DEMO

    Trên thưc tế menu này được viết bởi tác giả dte.web.id một blogger nổi tiếng của malaysia. Mình giới thiệu cho những ai chưa biết. Để có được một menu như thế bạn chỉ cần làm theo các bước ở bên dưới:

    » Cách tạo Menu xổ dọc tích hợp bài đăng mới nhất và nhận xét mới nhất cho blogspot.

    1. Đăng nhập vào blog.
    2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
    3. Dán đoạn code bên dưới vào trước thẻ </head>
    <style type='text/css'>
    #autonav {
      position:absolute;
      top:0px;
      right:0px;
      left:0px;
      z-index:9999;
      margin:0px 0px;
      padding:0px 0px;
      font:normal 11px Arial,Sans-Serif;
      color:white;
      border-bottom:2px solid #333;
      -webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
      -moz-box-shadow:0px 1px 7px rgba(0,0,0,.4);
      box-shadow:0px 1px 7px rgba(0,0,0,.4);
    }
    
    #autonav ul {
      margin:0px 0px;
      padding:0px 0px;
      height:30px;
      background-color:#0F5079;
    }
    
    #autonav ul li {
      list-style:none;
      display:inline;
      float:left;
      margin:0px 0px;
      padding:0px 0px;
      position:relative;
    }
    
    #autonav ul li a {
      display:block;
      line-height:30px;
      height:30px;
      overflow:hidden;
      margin:0px 0px;
      padding:0px 15px;
      border-left:1px solid #155F90;
      border-right:1px solid #082E46;
      text-decoration:none;
      text-shadow:0px -1px 0px rgba(0,0,0,.4);
      color:white;
      font-weight:bold;
    }
    
    #autonav ul li a:hover {
      background-color:#0F486C;
    }
    
    #autonav ul ul {
      position:absolute;
      width:220px;
      height:auto;
      top:100%;
      left:0px;
      z-index:99;
      background-color:#111;
      -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
      -moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
      box-shadow:0px 1px 3px rgba(0,0,0,.7);
      overflow:visible !important;
      display:none;
    }
    
    #autonav ul ul:before {
      content:"";
      width:0px;
      height:0px;
      border:7px solid transparent;
      border-bottom-color:#111;
      position:absolute;
      top:-14px;
      left:24px;
    }
    
    #autonav ul ul li {
      display:block;
      float:none;
    }
    
    #autonav ul ul li a {
      border:none;
      color:#999;
    }
    
    #autonav ul ul ul {
      top:0px;
      left:100%;
    }
    
    #autonav li:hover > ul {
      display:block;
    }
    
    /* Khusus JSON */
    #autonav ul.json-dropdown {
      overflow:hidden;
    }
    
    #autonav ul.json-dropdown li {
      cursor:pointer;
      display:block;
      padding:7px 10px;
      margin:0px 0px;
      overflow:hidden;
    }
    
    #autonav ul.json-dropdown li a {
      line-height:14px;
      height:auto !important;
      padding:0px 0px;
    }
    
    #autonav ul.json-dropdown li a:hover {
      text-decoration:underline;
      background:transparent;
    }
    
    #autonav li ul li a:hover,
    #autonav li ul.json-dropdown li:hover {
      background-color:#222;
    }
    
    #autonav ul.json-dropdown img.rp-thumb {
      padding:0px 0px;
      outline:none;
      border:2px solid #333;
      background-color:#02406C;
      display:block;
      float:left;
      margin:0px 10px 0px 0px;
      width:40px;
      height:40px;
    }
    
    #autonav .subposts span,
    #autonav .subcomments span {
      font-family:Verdana,Arial,Sans-Serif;
      color:#666;
      font-size:9px;
    }
    
    /* Drop down menu untuk ukuran yang cukup lebar */
    #autonav .wide {
      width:400px;
    }
    </style>
    <script type='text/javascript'>
    //<![CDATA[
        var numposts = 7,
        cmtext = "Nhận xét",
        pBlank = "http://lh4.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/s512/no-image.png",
        numcomment = 7,
        cmsumm = 100;
    //]]>
    </script>
    <script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>
    » Tùy chỉnh code:
    • var numposts = 7, Số bài viết mới nhất sẽ hiện thị khi menu xổ dọc xuống phía dưới. 
    • cmtext = "Nhận xét", là ký tự xuất hiện trong phần đếm số comment của mỗi bài viết như hình minh họa bên dưới:
      Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger
    • numcomment = 7, Số nhận xét mới nhất sẽ hiện thị khi menu của bạn xổ dọc xuống.
    • http://....no-image.png link ảnh thay thế cho các bài viết mới nhất không có hình ảnh minh họa. Bạn nên sử dụng hình ảnh có kích thước 72x72 picel để tối ưu được tốc độ load trang web của bạn.
    • cmsumm = 100; là số ký tự mô tả (tóm tắt) của phần nhận xét mới nhất trong menu bạn có thể chỉnh lại theo ý muốn của bạn. Tuy nhiên không nên để quá lớn như vậy bố cục giữa những nhận xét ngắn và nhận xét dài sẽ không đẹp.
    • http://......../json-dropdown.js link của file Js. Bạn hãy tải về tại đây và upload lên host riêng để dùng lâu dài nha. Nếu chưa có host riêng thì bạn có thể xem bài này để tạo cho mình một host riêng nha.

    4-  Tiếp tục dán đoạn code bên dưới vào trước thẻ </body> . (Bạn cúng có thể dán ở các vị trí khác trong mẫu của bạn, nếu không xác định được vị trí cần chèn theo ý của bạn thì hãy comment bên dưới mình sẽ chỉ đoạn đó cho các bạn)
    <nav id='autonav'>
        <ul>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Music</a></li>
            <li><a href='#'>Recent post</a>
                <ul class='json-dropdown subposts wide'>
                    <script src='http://namkna.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
                </ul>
            </li>
            <li><a href='#'>Reccent comments</a>
                <ul class='json-dropdown subcomments'>
                    <script src='http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
                </ul>
            </li>
            <li><a href='#'>Liên hệ</a>
                <ul>
                    <li><a href='#'>Sub menu 1</a></li>
                    <li><a href='#'>Sub menu 2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    » Tùy chỉnh code:
    • Thay thế http://namkna.blogspot.com/ thành link blog của bạn hoặc link blog bạn muốn lấy bài viết cho vào trong menu.
    • Thay các đoạn màu xanh thành các tiêu đề của menu theo ý thích và nội dung của blog bạn nha
    Nguồn terocket.com

    Share:

    Thứ Hai, 2 tháng 5, 2016

    Menu trượt lên xuống từ CSS3 cho blogspot (Style 2)

  • ☼ Style 2: Menu nằm cuối blog và hiện khi dê chuột.

    1- Đăng nhập vào Blog
    2- Vào Phần tử trang 
    3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)
    4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.

    <style>
    ul, li, nav1
    {
         border: 0pt none;
         font: inherit;
         margin: 0pt;
         padding: 0pt;
    }
    
    nav1{
         display: block;
    }
    
    ol, ul {
         list-style: none outside none;
    }
    
    a{
     text-decoration:none;
    }
    
    /*---end reset---*/
    
    .overlay1{
     position:fixed;
     lefT:0;
     bottom:0;
     height:100px;
     width:100%;
     background-color:transparent;
     z-index:1;
    }
    
    .wrap1{
        width:960px;
        margin:auto;
    }
    
    .nav1{
        background-color:#1e1e1e;
        height:60px;
     text-align:center;
     position:fixed;
     width:100%;
     left:0;
     bottom:-60px;
     z-index:999;
     -moz-transition:bottom 0.4s ease;
     -webkit-transition:bottom 0.4s ease;
     -o-transition:bottom 0.4s ease;
     -ms-transition:bottom 0.4s ease;
     transition:top 0.4s ease;
    }
    
    .overlay1:hover ~ .nav1,.nav1:hover{
     bottom:0;
    }
    
    .navigation1{
     display:inline-block;
    }
    
    .navigation1 li{
        display:inline;
    }
    
    .navigation1 a{
        display:block;
        float:left;
        font-family:helvetica,arial,sans-serif;
        color:#fff;
        font-size:12px;
        height:100%;
        line-height:60px;
        text-transform:uppercase;
        padding:0 35px;
     font-weight:bold;
        -moz-transition:all 0.4s ease;
     -webkit-transition:all 0.4s ease;
     -o-transition:all 0.4s ease;
     -ms-transition:all 0.4s ease;
     transition:all 0.4s ease;
    }
    
    .navigation1 li:nth-child(1) a:hover{
     background-color:#ffa32c;
    }
    
    .navigation1 li:nth-child(2) a:hover{
     background-color:#73e900;
    }
    
    .navigation1 li:nth-child(3) a:hover{
     background-color:#992ff3;
    }
    
    .navigation1 li:nth-child(4) a:hover{
     background-color:#38eec5;
    }
    
    .navigation1 li:nth-child(5) a:hover{
     background-color:#fff000;
    }
    
    .navigation1 li:nth-child(6) a:hover{
     background-color:#008aff;
    }
    
    .navigation1 li:nth-child(7) a:hover{
     background-color:#ff0096;
    }
    
    .navigation1 li:nth-child(8) a:hover{
     background-color:#ff3939;
    }
    </style>
    <div class="overlay1"></div>
     <div class="nav1">
      <div class="wrap1">
       <ul class='navigation1'>
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Stars</a></li>
        <li><a href="#">Cine</a></li>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Style</a></li>
       </ul>
      </div>
     </div>
    
    Trong đó:
    • Thay dấu thăng màu đỏ (#) thành liên kết của bạn
    • Phần màu xanh là tên của liên kết trên menu:
    • Bạn có thể Download code về tại đây
    - Lưu tiện ích HTML/Javarscip lại!

    Nguồn sites.google.com

    Share:

    Menu trượt lên xuống từ CSS3 cho blogspot (Style 1)

  • Theo yêu cầu bạn chjpsea namkna sẽ hướng dẫn các bạn cách tạo một menu ngang với hiệu ứng thay đổi khi dê chuột qua mỗi một sub menu Thêm nữa menu này chỉ hiện ra khi dê chuột lên đầu trang.
    Ảnh minh họa:

    Menu trượt lên xuống từ CSS3 cho blogspot
    Mình sẽ giới thiệu cho các bạn 2 style:
    • Style 1: Menu nằm trên đầu log và sẽ hiện ra khi ta dê chuột lên phần đầu của blog.
    • Style 2: Menu nằm ở chân của blog và sẽ hiện ra khi ta dê chuột vào phần chân của blog.
     Các bạn có thể dê chuột lên đầu hoặc xuống chân blog của mình để xem demo:

    ☼ Style 1: Menu nằm trên đầu blog và hiện khi dê chuột.

    1- Đăng nhập vào Blog
    2- Vào Phần tử trang 
    3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)
    4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.

    <style>
    ul, li, nav
    {
         border: 0pt none;
         font: inherit;
         margin: 0pt;
         padding: 0pt;
    }
    
    nav{
         display: block;
    }
    
    ol, ul {
         list-style: none outside none;
    }
    
    a{
     text-decoration:none;
    }
    
    /*---end reset---*/
    
    .overlay{
     position:fixed;
     lefT:0;
     top:0;
     height:100px;
     width:100%;
     background-color:transparent;
     z-index:1;
    }
    
    .wrap{
        width:960px;
        margin:auto;
    }
    
    .nav{
        background-color:#1e1e1e;
        height:60px;
     text-align:center;
     position:fixed;
     width:100%;
     left:0;
     top:-60px;
     z-index:999;
     -moz-transition:top 0.4s ease;
     -webkit-transition:top 0.4s ease;
     -o-transition:top 0.4s ease;
     -ms-transition:top 0.4s ease;
     transition:top 0.4s ease;
    }
    
    .overlay:hover ~ .nav,.nav:hover{
     top:0;
    }
    
    .navigation{
     display:inline-block;
    }
    
    .navigation li{
        display:inline;
    }
    
    .navigation a{
        display:block;
        float:left;
        font-family:helvetica,arial,sans-serif;
        color:#fff;
        font-size:12px;
        height:100%;
        line-height:60px;
        text-transform:uppercase;
        padding:0 35px;
     font-weight:bold;
        -moz-transition:all 0.4s ease;
     -webkit-transition:all 0.4s ease;
     -o-transition:all 0.4s ease;
     -ms-transition:all 0.4s ease;
     transition:all 0.4s ease;
    }
    
    .navigation li:nth-child(1) a:hover{
     background-color:#ffa32c;
    }
    
    .navigation li:nth-child(2) a:hover{
     background-color:#73e900;
    }
    
    .navigation li:nth-child(3) a:hover{
     background-color:#992ff3;
    }
    
    .navigation li:nth-child(4) a:hover{
     background-color:#38eec5;
    }
    
    .navigation li:nth-child(5) a:hover{
     background-color:#fff000;
    }
    
    .navigation li:nth-child(6) a:hover{
     background-color:#008aff;
    }
    
    .navigation li:nth-child(7) a:hover{
     background-color:#ff0096;
    }
    
    .navigation li:nth-child(8) a:hover{
     background-color:#ff3939;
    }
    </style> 
    <div class="overlay"></div>
     <div class="nav">
      <div class="wrap">
       <ul class='navigation'>
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Stars</a></li>
        <li><a href="#">Cine</a></li>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Style</a></li>
       </ul>
      </div>
     </div>
    
    Trong đó:
    • Thay dấu thăng (#)thành liên kết của bạn
    • Phần màu xanh là tên của liên kết trên menu:
    • Bạn có thể Download code về tại đây
    - Lưu tiện ích HTML/Javarscip lại!

    Nguồn sites.google.com
    Bạn có thể xem thê các chủ đề:
    • chèn định dạng CSS
    • nhúng CSS vào trong tài liệu HTML
    • Qui tắc nhúng và các thuộc tính CSS


    Share:

    Thứ Tư, 13 tháng 4, 2016

    Tạo side menu trượt trên blog"


  • (Traidatmui.com) – Làm sao để tạo nên các thư mục mà không làm mất nhiều khong gian trên nền của blog, vâng hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật để tạo nên các thư mục và cho nó trượt ở bên lề của blog. Đó là chúng ta tạo ra một side menu (menu phụ) và cho nó hiện ra chỉ khi nào click chuột vào nó. Ứng dụng menu này sẽ tiết kiệm được không gian cho blog vừa mang tính chuyên nghiệp.

    Các bước tiến hành

    1. Đăng nhập vào blog
    2. Vào chỉnh sử HTML
    3. Dán code bên dưới lên trước thẻ </head> và save lại
    <script language='JavaScript1.2' src='http://data-traidatmui.appspot.com/scripts/side_menu.js'>
    </script>

    4. Vào phần tử trang tạo 1 HTML/Javascript
    5. Chèn toàn bộ code bên dưới vào HTML/Javascript đó
    <style type="text/css">

    A.ssmItems:link {color:#33ffcc;text-decoration:none;}
    A.ssmItems:hover {color:#000033;text-decoration:none;}
    A.ssmItems:active {color:black;text-decoration:none;}
    A.ssmItems:visited {color:#ccffff;text-decoration:none;}

    </style>

    <script language="JavaScript">

    YOffset=150;
    XOffset=0;
    staticYOffset=30;
    slideSpeed=20
    waitTime=100;
    menuBGColor="#fff"; // màu của các border
    menuIsStatic="yes";
    menuWidth=200; // Độ rộng của menu
    menuCols=2;
    hdrFontFamily="verdana";
    hdrFontSize="2";
    hdrFontColor="#fff"; // Màu text của thư mục chính 
    hdrBGColor="#000099"; // Màu nền thư mục chính
    hdrAlign="center";
    hdrVAlign="center";
    hdrHeight="15";
    linkFontFamily="Verdana";
    linkFontSize="2";
    linkBGColor="#006699"; // Màu nền chính
    linkOverBGColor="#fff"; // Màu nền khi rê chuột
    linkTarget="_top";
    linkAlign="Left";
    barBGColor="#ff0000";
    barFontFamily="Verdana";
    barFontSize="2";
    barFontColor="#fff";
    barVAlign="center";
    barWidth=20;
    barText="SIDE MENU"; // Tên bạn muốn đặt cho sidemenu đó

    ///////////////////////////

    // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

    ssmItems[0]=["Thủ thuật"] // Thư mục chính
    ssmItems[1]=["Thủ thuật nâng cao", "http://nvdinh88.blogspot.com/search/label/Advanced%20blogger?max-results=5", ""]
    ssmItems[2]=["Thủ thuật cơ bản", "http://nvdinh88.blogspot.com/search/label/Basic%20blogger?max-results=5",""]
    ssmItems[3]=["Computer", "http://nvdinh88.blogspot.com/search/label/Computer?max-results=5", ""]

    ssmItems[4]=["Giải trí", "", ""] // Thư mục chính
    ssmItems[5]=["Karaoke", "http://nvdinh88.blogspot.com/search/label/Karaoke", ""]
    ssmItems[6]=["Videos", "http://nvdinh88.blogspot.com/search/label/Video", "", 1,"no"]
    ssmItems[7]=["Chơi game", "http://nvdinh88.blogspot.com/2010/02/play-game.html", "", 1]

    ssmItems[8]=["Liên kết", "", ""] // Thư mục chính
    ssmItems[9]=["Trao đổi logo", "http://nvdinh88.blogspot.com/2010/02/trao-oi-logo-lien-ket.html", ""]
    ssmItems[10]=["Hỏi đáp", "http://nvdinh88.blogspot.com/2010/02/hoi-ap.html", ""]

    buildMenu();
    </script>

    ☼ Chỉnh sủa code: Bạn hãy dựa vào các chú thích ở trên để chỉnh sửa code lại cho phù hợp với blog của bạn.
    - Thay các code màu cam và các code màu đỏ lại thành tên các thư mục và các đường dẫn cho phù hợp.

    Lưu ý: code màu xanh ở trên là dùng để chia cột nếu không muốn chia cột bạn có thể xóa nó đi. Nếu bạn muốn chia cột thì thêm ", 1,"no"" và ", 1" vào sau hai link mà bạn muốn chia cột. Ví dụ ở trên chia cột cho "Videos" và "Chơi game" thì ta thêm 2 lệnh đó như trên.

    Chúc bạn thành công

    Địa chỉ bài viết: http://www.traidatmui.com/2010/04/tao-sidemenu-truot.html#ixzz45kgbXLCk
    Nguồn: TRAIDATMUI.com

    Share:

    Thống kê Blogspot

  • Số khách đang xem:
  • Tìm người - Tìm việc

    Lưu trữ Blog

    Google+ Followers

     
    BACK TO TOP