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

 

 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>
view plainprint?
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 !