February 2015
Phan Nhật Chánh - Official website
Trang chủ Lưu trữ cho February 2015

Chèn icon vào blog sử dụng Font Awesome

   Feb 28, 2015 Feb 28, 2015    February 28, 2015
Font Awesome là một kiểu font giúp bạn chèn các icon vào trong trang web của bạn một cách dể dàng, nhanh, gọn lẹ mà không cần phải mất thời gian để thiết kế icon, nó là một thành phần mở rộng trong Bootstrap Framework.
su dung font awesome cho blogspot, font awesome blogger, bootstrap font awesome
- Để sử dụng Font Awesome cho blogspot, chỉ cần chèn đoạn mã phía dưới trước thẻ </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
- Chọn icon cần thiển thị (danh sách icon có rất nhiều icon cho bạn lựa chọn)
- Ví dụ để hiển thị icon: Icon camera-retro chỉ cần thêm <i class="fa fa-camera-retro"></i>
- Thay đổi kích thước icon thêm fa-lg, fa-2x, fa-3x, fa-4x, fa-5x Ví dụ:
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
Icon: http://fortawesome.github.io/Font-Awesome/icons/
Cách sử dụng: http://fortawesome.github.io/Font-Awesome/examples/

Ví dụ tạo box thông báo với CSS3 và Font Awesome

CSS 3 Info Box với biểu tượng icon Font Awesome


- Vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Tìm ]]></b:skin> hoặc </style> và đặt đoạn css dưới đây vào trước nó 
.ghi-chu, .thong-tin, .canh-bao, .huong-dan, .cap-nhat {
    display: block;
    font-style: normal;
    color: #333;
    padding: 15px 18px 15px 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius:3px;
    margin:0 0 10px;
    color:#FFF
}
.ghi-chu:before, .thong-tin:before, .canh-bao:before, .huong-dan:before, .cap-nhat:before {
    font-family:"FontAwesome";
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    color: rgba(0, 0, 0, 0.15);
    font-size: 22px;
    line-height: 1;
}
.ghi-chu:before {
    content:'\f11d'
}
.thong-tin:before {
    content:'\f05a'
}
.canh-bao:before {
    content:'\f071'
}
.huong-dan:before {
    content:'\f028'
}
.cap-nhat:before {
    content:'\f085'
}
.ghi-chu {
    background-color:#49A5D7
}
.thong-tin {
    background-color:#FF9531
}
.canh-bao {
    background-color:#B25A5A
}
.huong-dan {
    background-color:#FAD163;
    color: #000;
}
.cap-nhat {
    background-color:#69A24A
}
- Sử dụng bằng cách:
<div class='ghi-chu'>. . Nội dung . .</div>
, | No comments

jQuery tree menu css slide up - down

   Feb 24, 2015 Feb 24, 2015    February 24, 2015
tree_menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tree menu css slide up down</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
 $('#tree-menu > li > a').click(function(){
  var next = $(this).next();
  if(next.is(':visible')){
   next.slideUp(300);
   $(this).find('span').html('+');
  }else{
   next.slideDown(300);
   $(this).find('span').html('-');
  }
 });
});
</script>

<style type="text/css">
body { font:12px Tahoma, Geneva, sans-serif; }
#div-head-tree-menu { width:230px; padding:10px 10px 10px 10px; text-align:center; background-color:#ddd; border:1px solid #ccc; border-bottom:5px solid #a8bfd7; }
#div-tree-menu { padding-left:20px; padding-bottom:10px; width:230px; background-color:#eee; overflow:hidden; border:1px solid #aaa; border-top:1px solid #FFF;   }

#tree-menu {  width:200px; float:left; margin:0; padding:0; margin-top:-1px;}
#tree-menu ul { margin:0; padding:8px;  }
#tree-menu li { list-style:none;  padding:8px; margin:0; }

#menu-lv1 { display:none; }
#menu-lv2 { display:none; }
#menu-lv3 { display:none; }
#menu-lv4 { display:none; }

a:link { text-decoration: none; color: #00F; }
a:visited { text-decoration: none; color: #0CF; }
a:hover { text-decoration: none; color: #F60; }
a:active { text-decoration: none; color: #F00; }
.txt-red { color:#F00 }
</style>
</head>
 
<body>
<div id="div-head-tree-menu">: <a href="http://www.nhatchanh.info/2015/02/jquery-tree-menu-css-slide-up-down.html">Tree Menu</a> :</div>
<div id="div-tree-menu">
<ul id="tree-menu">
 <li><a href="#"><span>+</span> menu-1</a>
        <ul id="menu-lv1">
            <li>&#8250; <a href="#">sub-menu-1-1</a></li>
            <li>&#8250; <a href="#">sub-menu-1-2</a></li>
            <li>&#8250; <a href="#">sub-menu-1-3</a></li>
            <li>&#8250; <a href="#">sub-menu-1-4</a></li>
        </ul>
 </li>
 <li><a href="#"><span>+</span> menu-2</a>
        <ul id="menu-lv2">
            <li>&#8250; <a href="#">sub-menu-2-1</a></li>
            <li>&#8250; <a href="#">sub-menu-2-2</a></li>
            <li>&#8250; <a href="#">sub-menu-2-3</a></li>
            <li>&#8250; <a href="#">sub-menu-2-4</a></li>
        </ul>
 </li>
    <li><a href="#"><span>+</span> menu-3</a>
        <ul id="menu-lv3">
            <li>&#8250; <a href="#">sub-menu-3-1</a></li>
            <li>&#8250; <a href="#">sub-menu-3-2</a></li>
            <li>&#8250; <a href="#">sub-menu-3-3</a></li>
            <li>&#8250; <a href="#">sub-menu-3-4</a></li>
        </ul>
    </li>
 <li><a href="#"><span>+</span> menu-4</a>
     <ul id="menu-lv4">
            <li>&#8250; <a href="#">sub-menu-4-1</a></li>
            <li>&#8250; <a href="#">sub-menu-4-2</a></li>
            <li>&#8250; <a href="#">sub-menu-4-3</a></li>
            <li>&#8250; <a href="#">sub-menu-4-4</a></li>
        </ul>
 </li>
</ul>
</div>
</body>
</html>
Tạo Menu Treeview đa cấp bằng HTML và CSS
, , | No comments

Hiển thị Tooltip bằng jQuery và CSS

   Feb 5, 2015 Feb 5, 2015    February 05, 2015
Thông thường, Tooltip được sử dụng để trình bày một lượng nhỏ nội dung được ẩn đi (chủ yếu là để giải thích một cái gì đó), mà khi người dùng di chuyển con trỏ chuột qua (hoặc nhấp chuột) thì sẻ được hiển thị.
Huong dan hien thi tooltip bang jquery va css3
Hôm nay, xin chia sẽ một plugin hiển thị tooltip khá hay được tìm thấy trên google, với các tính năng chính như responsive hiển thị tốt trên thiết bị di động, bạn cũng có thể định dạng tooltip bằng các thẻ html như in đậm, in nghiêng,... Việc cài đặt  và sử dụng rất đơn giản, chỉ cần copy mã css, javascript vào template và gán thuộc tính title="nhập tooltip của bạn" và rel="tooltip" vào bất kỳ thẻ nào trong mã html của bạn

CSS Tooltip

Bạn có thể xây dựng kiểu hiển thị cho riêng mình hoặc sử dụng đoạn mã css dưới đây:
/******* TOOLTIP*******/
#tooltip {
 font:.9em/1.6 Tahoma,Sans-serif;
 text-shadow: 0 1px rgba( 0, 0, 0, .5 );
 color: #fff;
 background: #000;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 border-top: 1px solid #fff;
 -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
 -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
 box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
 position: absolute;
 z-index: 100;
 padding: 2px 5px 2px;
}
 #tooltip:after {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #333;
  border-top-color: rgba( 0, 0, 0, .9 );
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin-left: -10px;
 }
  #tooltip.top:after {
   border-top-color: transparent;
   border-bottom: 10px solid #333;
   border-bottom-color: rgba( 0, 0, 0, .9 );
   top: -17px;
   bottom: auto;
  }
  #tooltip.left:after {
   left: 10px;
   margin: 0;
  }
  #tooltip.right:after {
   right: 10px;
   left: auto;
   margin: 0;
  }

JavaScript Tooltip

<script>
/******* TOOLTIP*******/
$( function()
{
    var targets = $( '[rel~=tooltip]' ),
        target    = false,
        tooltip = false,
        title    = false;

    targets.bind( 'mouseenter', function()
    {
        target    = $( this );
        tip        = target.attr( 'title' );
        tooltip    = $( '<div id="tooltip"></div>' );

        if( !tip || tip == '' )
            return false;

        target.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 )
               .html( tip )
               .appendTo( 'body' );

        var init_tooltip = function()
        {
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).width() / 2 );
            else
                tooltip.css( 'max-width', 340 );

            var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                pos_top     = target.offset().top - tooltip.outerHeight() - 17;

            if( pos_left < 0 )
            {
                pos_left = target.offset().left + target.outerWidth() / 2 - 17;
                tooltip.addClass( 'left' );
            }
            else
                tooltip.removeClass( 'left' );

            if( pos_left + tooltip.outerWidth() > $( window ).width() )
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 17;
                tooltip.addClass( 'right' );
            }
            else
                tooltip.removeClass( 'right' );

            if( pos_top < 0 )
            {
                var pos_top     = target.offset().top + target.outerHeight();
                tooltip.addClass( 'top' );
            }
            else
                tooltip.removeClass( 'top' );

            tooltip.css( { left: pos_left, top: pos_top } )
               .animate( { top: '+=10', opacity: 1 }, 50 );
        };

        init_tooltip();
        $( window ).resize( init_tooltip );

        var remove_tooltip = function()
        {
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
            {
                $( this ).remove();
            });

            target.attr( 'title', tip );
        };

        target.bind( 'mouseleave', remove_tooltip );
        tooltip.bind( 'click', remove_tooltip );
    });
});
</script>

Cách sử dụng: 

Chỉ cần thêm thuộc tính title="nội dung tooltip" và rel="tooltip" vào bất kỳ thẻ html mà bạn muốn hiển thị tooltip
Ví dụ:
<abbr title="User Experience" rel="tooltip">UX</abbr>
Cách sử dụng cho blogspot
Chèn mã CSS vào trước thẻ đóng </b:skin> và đoạn Javascript vào trước thẻ </body> trong template của bạn

Lưu ý: Trong template phải khai báo thư viện jQuery
Nếu chưa có chèn đoạn mã dưới đây trước thẻ </head> 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

, , , , , | 2 comments
Like
© 2014 Phan Nhật Chánh • Privacy Policy
Trở lên trên