P
hucNguyenIT xin chào các bạn. có rất nhiều blogger với những kiểu zoom ảnh cực kỳ lạ mắt, một số bạn có hỏi là:

 làm thế nào để tạo ra hiệu ứng zoom ảnh trong blogger?

Phóng hình ảnh với hiệu ứng jquery trong blogger
Phóng hình ảnh với hiệu ứng jquery trong blogger

 

 Vậy hôm nay mình sẽ hướng dẫn cho mọi người một hiệu ứng phóng ảnh cực đẹp trong blogger
Làm theo những bước bên dưới đây để có 1 hiệu ứng zoom ảnh cực đẹp cho blogger nhé :
  1. Đăng nhập vào blogger bạn
  2. Sau đó nhấp vào Thiết kế (template)
  3. Sau đó nhấp vào Chỉnh sửa HTML (edit html)
  4. Sau đó, bạn tìm thấy đoạn mã sau ]]> </ b: skin>
  5. Sau khi gặp nhập mã CSS sau đây trước khi mã ở trên
    div.jquery-image-zoom {
    line-height: 0;
    font-size: 0;
    z-index: 10;
    border: 5px solid #fff;
    margin: -5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    div.jquery-image-zoom a {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;
    text-decoration: none;
    text-indent: -100000px;
    outline: 0;
    z-index: 11;
    }
    div.jquery-image-zoom a:hover {
    background-position: left -25px;
    }
    div.jquery-image-zoom img,
    div.jquery-image-zoom embed,
    div.jquery-image-zoom object,
    div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
    }
  6.  sau đó tìm  mã sau </ head> . coppy và dán đoạn mã  bên dưới vào sau thẻ </ head>
    1. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
    2. <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>  
    3. <script type="text/javascript">  
    4. jQuery(document.body).imageZoom();  
    5. </script>  
  7. Sau đó Save Template bạn.
Lưu ý:
Chỉ cần một lưu ý, bạn nên lưu 1 bản template dự phòng để phòng khi lỗi các bạn có thể unrun nhé..

Phóng hình ảnh với hiệu ứng jquery trong blogger,làm thế nào để tạo ra hiệu ứng zoom ảnh trong blogger?
Bài viết được viết bởi  PhucNguyenIT - Chúc các bạn thành công !

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công