Add CSS Auto Zoom Effect To Post Images On Blogger

  0  0  0 Stumble0  11

OK over the next week or so I want to focus on some cool image effects for the images you use in your blog posts.Previously we have shown you some basic effects you can add to images on your blog.But with the advancement of CSS we can now use better effects with less code and all in a way even an absolute beginner can do it.Also I will be presenting this in a way that once the code is added the effect will be on only images within your posts.We will be adding some more fancy effects in the next few posts but we will start with a neat zoom.

The first effect we will cover is a nice zoom were upon the image will be displayed as normal then when you place the cursor over it the image grows to a zoom.This is a good effect in two ways, if you actually want visitors to be able to zoom into your images or if you just want something that looks cool.

Check out the demo below (On the demo page hover over any of the images in the post) :



Add Css Zoom Effect To Blogger

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
(Note : Some people have found the "Apply To Blog" button can not be clicked if so after the code click space)

/* CSS image zoom effect http://www.spiceupyourblog.com */
.post img {
height: 100%;
width: 100%;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;

}

.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect http://www.spiceupyourblog.com */

That's the effect added, easy.Drop your comments and questions below.

Author - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

Link nay: http://www.spiceupyourblog.com/2014/01/add-css-auto-zoom-effect-to-post-images.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+SpiceUpYourBlog+%28Spice+Up+Your+Blog%29

Top 7 trang lưu trữ và chia sẻ hình ảnh trực tuyến tốt nhất

Hôm nay, TTCN xin gửi đến các bạn top 7 trang chia sẻ và lưu trữ hình ảnh trực tuyến tốt nhất, thực sự hữu ích cho bạn trong việc tải lên những hình ảnh của mình. Dù bạn là một nhà thiết kế, nhà phát triển, nhân viên văn phòng, nhà quản lý hay sinh viên thì những hệ thống sẽ được liệt kê dưới đây là không thể thiếu cho công việc của bạn.



Có thể có những trang đã trở nên quen thuộc song có những trang mà thực tế bạn chưa từng biết đến. Hãy cùng xem và lựa chọn cho riêng mình một công cụ phù hợp nhất.
Flickr







Có lẽ không cần nói nhiều về Flickr vì đây gần như chắc chắn là ứng dụng chia sẻ và quản lý hình ảnh trực tuyến tốt nhất trong tổng sổ các gương mặt thuộc lĩnh vực chúng ta đang nói tới.

Flickr cho phép bạn dễ dàng trưng bày các hình ảnh ưa thích và video của mình tới thế giới, hay cũng vô cùng an toàn và riêng tư với tùy chọn tính năng chỉ cho phép bạn bè hay người thân hiển thị nội dung, và cùng với đó là khả năng thiết tạo blog ảnh với rất nhiều tính năng hữu ích khác.
Pictiger






Pictiger là một dịch vụ lưu trữ hình ảnh hoàn toàn miễn phí, là nơi mà mọi người có thể tải lên những hình ảnh thuộc quyền sở hữu của mình, tạo ảnh thumbnail (xem trước) cho những hình ảnh đó. định dạng lại kích thước của ảnh gốc hoặc ảnh thumbnail, thiết tạo các album sinh động mang phong cách của riêng mình, chia sẻ hình ảnh dễ dàng bằng việc dán chúng lên trang, diễn đàn, blog hay bất kì đâu bạn muốn thông qua các code được cung cấp tương ứng.
Photobucket






Đây là hệ thống khá quen thuộc với người dùng, ngắn gọn Photobucket cung cấp không gian lưu trữ hình ảnh miễn phí cùng các tính năng thú vị dành cho hình ảnh. Đơn giản chúng ta chỉ cần tải hình ảnh lên và từ đó, dễ dàng chia sẻ chúng với bạn bè và người thân theo các cách khác nhau.
Pict






Theo dõi TTCN, chắc hẳn các bạn đã biết đến Pict. Đây là dịch vụ mang phong cách đặc biệt cho phép bạn tải lên và chia sẻ hình ảnh của mình với chỉ một click. Bạn có thể tải lên những bức ảnh với kích thước tập tin không quá 3,5 MB; hỗ trợ các định dạng JPG/PNG/GIF; Pict sẽ tự động điều chỉnh lại kích thước, tính năng cùng một lúc tải lên nhiều hỉnh ảnh và nhiều hơn nữa các tính năng.
Free Image Hosting






Free Image Hosting là một dịch vụ lưu trữ trực tuyến chạy trên một số các máy chủ web dành riêng cho Linux. Băng thông máy chủ phục vụ cho dịch vụ này là hoàn toàn miễn phí cho tất cả người dùng.

Không yêu cầu đăng ký, song nếu dành chút thời gian để tạo một tài khoản cho mình thì bạn sẽ có khả năng quản lý các hình ảnh đã tải lên của mình cũng như sử dụng các đặc điểm mở rộng khác.
iimmgg






Tương tự như những trang đã liệt kê trên, iimmgg cũng là một trang chia sẻ và lưu trữ hình ảnh miễn phí. Với iimmgg, bạn có thể biết được có bao nhiêu người đang hiển thị thư viện hình ảnh hay những bức riêng rẽ của bạn, đồng thời cho phép bạn tổ chức hình ảnh một cách hiệu quả và khoa học. Điều tất nhiên, bạn hoàn toàn dễ dàng chia sẻ những gì mình có qua blog, diễn đàn ...
TinyPic






TinyPic là dịch vụ chia sẻ video và ảnh mà cho phép bạn đơn giản tải lên, liên kết và chia sẻ trên MySpace, eBay, blog hay các bảng tin nhắn (dạng Twitter). Không yêu cầu tài khoản, chỉ cần upload và tiến hành những gì bạn muốn.
imgur






Thành viên cuối cùng thuộc top 7 mang tên imgur - chưa bao giờ bạn thấy việc chia sẻ hình ảnh lại dễ dàng như thế. Hãy cùng thử nghiệm.

Mạnh Tùng (Theo SmashingApps)

Create A Background Slideshow For Blogger

DETAIL

In the previous post we saw how to make the blog's background fill the screen regardless of the resolution of the monitor. The method that we'll use now with jQuery is a plugin called BackStretch which also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen.


What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition.
You can see an example in this demo blog.

To put this slideshow in the blog's background, just go to Template - Edit HTML and before </head> add the following code:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

 <script>
//<![CDATA[
var images = [
 "Image URL",
 "Image URL",
 "Image URL",
 "Image URL",
 "Image URL",
  ];

  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

Here add the URLs of the images that will be the background of your blog.
If you would like to add more pictures, just add after the var images = [ another line like this:

  "Image URL",

The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:

 <script>
//<![CDATA[
var images=new Array();
images[ 1 ]="Image URL";
images[ 2 ]="Image URL";
images[ 3 ]="Image URL";
images[ 4 ]="Image URL";
images[ 5 ]="Image URL";

  Array.prototype.shuffle = function() {
  var len = this.length;
  var i = len;
  while (i--) {
  var p = parseInt(Math.random()*len);
  var t = this[i];
  this[i] = this[p];
  this[p] = t;
  }
};

  images.shuffle();
  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

You can also add more pictures by adding a line like this:

 images[ 6 ]="Image URL";

But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..

In both cases you can change the duration of each image which is in the 5000 value that is at the end of the script.
The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.

It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave only one version.

Spacegallery: Image Gallery/Slideshow Made With JQuery

DETAIL

There are many types of galleries for images that we find on the net, but we rarely see one showing images so differently like this one.

Those using Mac OS X will surely find a lot of similarity with TimeMachine and those who don't, I'm sure will enjoy this type of effect for viewing images.

I'm talking about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when you click on them. You can see in the example below.

To use this gallery follow the steps below:

Step 1. Log in to your Blogger Dashboard, click on your blog and then go to Template and click on the Edit HTML button.




Step 2. Search using CTRL + F keys for the </head> tag and before it paste the following:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Screenshot

Note: if you have already added jQuery in your template, then delete the line in red.

Step 3. Search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it:

Paste just above ]]></b:skin> the following CSS style:

 #myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E; 
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcMzgNrQKgChyphenhyphenFYMSR4tnt1WoVLsVcv1pVt5xjScl4USo6oB_m-NO-zG57Hjnstj7WQU8XdmnV0EJVIHAOpN-RiktMYiLgZ_9iqs2aa9Y6DLbXV_Yy5wbM_XNTbYQSeNtMVK21hrl_dfz4/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Step 4. Click on the Save template button

Step 5. Finally go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below:

 <div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Note: In case you want to add this slideshow inside a post, then create a new post and paste the code in the HTML section

Replace the Image URL text with the URLs of the images of your gallery, keeping in mind that the last image is the first to be displayed.

And so you can enjoy this simple image gallery on your blog, and although it has no display options or settings, is without a doubt a gallery that will draw the attention of your readers.

Source: http://helplogger.blogspot.com.au/2013/10/jquery-image-gallery.html

Tạo cửa sổ popup khi di chuột qua ảnh

DETAIL

Bài viết này hướng dẫn cho các bạn thủ thuật cho phép hiển thị cửa sổ popup của ảnh gốc khi ta rê chuột vào. Với vài đoạn code CSS đơn giản chúng ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới Javascript. Xem demo trực...

Bài viết này hướng dẫn cho các bạn thủ thuật cho phép hiển thị cửa sổ popup của ảnh gốc khi ta rê chuột vào. Với vài đoạn code CSS đơn giản chúng ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới Javascript.



Xem demo trực tiếp ở đây.






Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code:

<style type='text/css'> 

.img-thumbnail{ 
position: relative; 
z-index: 0; 
} 

.img-thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.img-thumbnail span{ 
position: absolute; 
background-color: #ffffff; 
padding: 5px; 
left: -1000px; 
border: 1px solid #000; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 

.img-thumbnail span img{ 
border-width: 0; 
padding: 2px; 
} 

.img-thumbnail:hover span{ 
visibility: visible; 
top: -100px; 
left:100px; 
} 

</style>  

- Dòng code

top: -100px; 
eft:100px; 

Chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất.

Và sau cùng là code HTML:

<afont-weight: bold;">img-thumbnail" href="#"> 
<img src="link ảnh1" border="0" height="98" width="130"/> 
<span> 
<img src="link ảnh1"/> 
</span> 
</a>  

Nguồn: http://m21love.blogspot.com.au/2012/10/tao-cua-so-popup-khi-di-chuot-qua-anh.html

Test hình (không đuọc xóa)

ImageLens – Plugin Jquery có chức năng zoom ảnh

DETAIL

Nếu bạn đang tìm mã javascript để làm hiệu ứng “zoom ảnh” thì imageLens là plugin bạn cần. Plugin cho phép bạn tùy biến kích thước của lens, màu sắc viền lens, chọn một ảnh khác để zoom (không cần load ảnh gốc ngay từ đầu).

Cách sử dụng

Thêm jQuery và jquery.imageLens.js vào website
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>


Để gọi imageLens làm việc, bạn chỉ cần sử dụng:


$("#img_01").imageLens();


Với cách gọi này, imageLens sẽ tự động tính toán kích thước lens dựa trên kích thước của ảnh trên website và ảnh gốc. Bạn có thể xem thêm các tùy biên khác tại trang chủ plugin

Với trình duyệt IE8 về trước, bạn sẽ thấy lens có hình vuông thay vì hình tròn. Bạn có thể làm theo link: Round lens support in IE8 or below để chuyển đổi lens về hình tròn.

Demo: http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html

Download: http://www.dailycoding.com/Uploads/2011/03/imageLens.zip

Nguồn: http://ntuts.com/jquery/plugin/imagelens-zoom-anh-voi-lens

Tạo hiệu ứng glass cho hình ảnh với Reflection.js

Tối ưu dung lượng hàng loạt ảnh với Photoczip

DETAIL

(e-CHÍP Online) - Photoczip là dịch vụ nén ảnh tuyệt vời, thời gian thực hiện vô cùng ấn tượng mà vẫn đảm bảo chất lượng ở mức tối ưu nhất.

Cách sử dụng rất đơn giản, bạn kéo thả các hình ảnh (hỗ trợ định dạng gif, jpg, jpeg, png) muốn tối ưu dung lượng vào vùng không gian dưới mục Drop images to this window tại trang chủ http://photoczip.appspot.com. Sau đó, nhấn nút Pick it Up để tiến hành nén.

Thời gian thực hiện rất nhanh, bạn sẽ nhận ngay file ảnh kết quả được đóng gói trong tập tin nén .zip. Tất cả file có dung lượng lớn hơn 1MB đều được tối ưu dưới mức dung lượng nầy, bạn sẽ cảm thấy ấn tượng chất lượng nén mà dịch vụ thực hiện.
Để nén các ảnh khác, bạn nhấn nút Reset hay tải lại trang web.
PHẠM NGUYỄN HÙNG ANH

Perfect Resize 7.07: Phóng to ảnh đến 800% không giảm chất lượng

Ngoài PhotoZoom Pro công cụ phóng lớn ảnh quen thuộc, giờ đây bạn sẽ có thêm chọn lựa mới là Perfect Resize 7.07 (PR), phần mềm được quảng cáo có thể phóng lớn ảnh đến 800% mà không giảm chất lượng.




Chương trình có thể chạy như một ứng dụng độc lập hoặc plug-in trong Photoshop. Bạn có thể tải tại đây (dung lượng 60MB, tương thích XP/Vista/7). Hỗ trợ các phiên bản Adobe Photoshop CS3/4/5, Adobe Element 7/8/9 và Adobe Lightroom 2/3.

Trong quá trình cài đặt sẽ có tùy chọn tích hợp plug-in vào Photoshop, bạn có thể nhấn nút Browse và duyệt đến thư mục Photoshop\Plug-ins để cài đặt. Bài viết minh họa trên phiên bản chạy độc lập, với plug-in dành cho Photoshop bạn cũng thực hiện tương tự.

Để sử dụng, bạn khởi động ứng dụng từ desktop, sau đó vào menu File > Open chọn file ảnh cần chỉnh sửa (hỗ trợ các định dạng ảnh: .jpg, .bmp, .png, .psd… và định dạng ảnh .raw).


Bạn chờ một lát để quá trình nạp ảnh hoàn tất (nhấn Close để bỏ qua các bước giới thiệu của chương trình). Giao diện PR gồm một khung lớn bên trái hiển thị hình ảnh xem trước (khi bạn áp dụng hiệu ứng), và góc trên bên phải là nơi chứa hình ảnh thu nhỏ của ảnh mà bạn đang thao tác.

Bạn có thể phóng to một vùng ảnh bất kỳ để tiện quan sát theo các thông số mà chương trình thiết đặt sẵn như: Fit (đầy màn hình), 1:1 (phóng to tỉ lệ 100%), 2:1(phóng to tỉ lệ 200%)… Tương tự như vậy, để theo dõi chi tiết tại một vùng bất kỳ, bạn chuyển qua thẻ Loupe bên cạnh và kéo thanh trượt ở mục Zoom, sau đó dùng chuột để rê lên các vùng ảnh cần xem.



1. Tăng kích thước ảnh với PR

Tại mục Document Size, bạn sẽ thấy kích thước mặc định của hình ảnh (kèm theo đó là chiều rộng – Width và cao – Height, độ phân giải – Resolution). Bạn hãy thay đổi kích thước chiều rộng sang một giá trị bất kỳ mong muốn (nếu thấy ảnh bị nhòe thì bạn giảm giá trị lại), khi đó chiều cao ảnh cũng sẽ thay đổi theo. Ngoài ra, bạn có thể sử dụng các cài đặt trước (Presets) để chọn kích thước cung cấp sẵn.


Mục Texture Control sẽ chứa các tùy chọn cho phép bạn điều chỉnh các chi tiết trong ảnh được mượt mà hơn, bớt hiện tượng vỡ hạt khi phóng to. Bạn có thể kéo thanh trượt để thay đổi tại hai trường Amount và Smoothness. Nếu mục Image Type bạn chọn là Custom, chương trình sẽ cho hiệu chỉnh theo cách thủ công, và ngược lại sẽ sử dụng theo các thông số cài đặt sẵn.


Phiên bản này bổ sung phương thức mới Sharpening, giúp bạn tạo nét cho ảnh sau khi phóng lớn. Bạn có thể chọn lại phương thức sử dụng ở mụcMethod là Unsharp Mask, Highpass (rất hữu ích khi hình ảnh ban đầu của bạn không sắc nét) và Progresssive. Để sử dụng các bộ lọc này, bạn phải chuyển đổi trạng thái của từ Off sang On, và thay đổi lại các thông số ở các thanh trượt.



2. Một số tính năng khác

Ngoài tính năng kể trên, phần mềm còn các tính năng hấp dẫn như Gallery Warp cho phép tạo ảnh phản chiếu của đối tượng dưới dạng hộp khối, tự động phản chiếu hoặc kéo dài các khu vực gần rìa của bức ảnh, giúp bạn tạo ra các cạnh hông mà không làm mất đi các chi tiết của hình ảnh ban đầu. Tính năng Tiling có thể chia một bức tranh lớn thành nhiều ảnh ghép nhỏ (giống như một bức tranh khảm) để có thể in được trên các máy in nhỏ. Sau khi hoàn tất các bước tùy chỉnh, nhấn Apply và chọn nơi lưu hình ảnh là xong.

HOA HOA (TP.HCM)
echip

Kho fonts thư pháp

Fonts (Dafont)

Fonts (Urbanfonts)

Tạo ảnh thu pháp

Screenshots

Hướng dẫn chỉnh sửa kích thước hình ảnh

Những bức ảnh quá lớn khi đưa vào diễn đàn sẽ làm Topic load chậm , và người xem khó quan sát hết tổng thể bức ảnh . Ngoài ra khi chỉnh sửa kích thước hình ảnh đều nhau theo mong muốn của mình sẽ giúp bài viết gọn gàng khoa học hơn .

Hôm nay em sẽ trình bày 2 phương pháp chỉnh sửa ảnh hay dùng nhất .

Cách 1 : Chỉnh sửa kích thước bằng công cụ paint có sẵn trong máy tính

Đầu tiên mở file hình ảnh bằng công cụ paint
Chọn Image ==>> Stretch/Sknew


Ở ô Stretch điền tỉ lệ chiều rộng và chiều cao mong muốn và nhấn OK


Vậy là ta đã thu nhỏ kích thước 50% , bước cuối cùng là Save ( nếu muốn thay đổi hình ban đầu ) hoặc Save As... nếu muốn lưu một hình ảnh mới


Và đây là kết quả



Cách 2 : Bằng phần mềm chỉnh sửa ảnh hàng loạt

Chèn Nivo slider đẹp theo cách đơn giản nhất

Dường như đây là tiện ích không thể thiếu với mỗi trang web/Blog. Nghe đến Nivo Slider hay jQuery thì những người mới làm quen với Blog thường dễ nản bởi cách áp dụng và không mấy tiện dụng. Tuy vậy, bài viết này giới thiệu với bạn một tiện ích đơn giản song rất hiệu quả để bạn ứng dụng. 

XEM DEMO

HƯỚNG DẪN CHI TIẾT

Bước 1: Vào Phần tử trang -> Thêm tiện ích /HTML 

Bước 2: Copy và Dán đoạn code sau vào phần nội dung:

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/labstrike-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="Link hình ảnh của bạn"
    alt="Slider Image 1" title="Viết lời giới thiệu của bạn ở đây 1">
    <img src="Link hình ảnh 2 của bạn"
    alt="Slider Image 2" title="Viết lời giới thiệu của bạn ở đây 2">
    <img src="Link hình ảnh 3 của bạn"
    alt="Slider Image 3" title="Viết lời giới thiệu của bạn ở đây 3">
    <img src="Link hình ảnh 4 của bạn"
    alt="Slider Image 4" title="Viết lời giới thiệu của bạn ở đây 4">
    <img src="Link hình ảnh 5 của bạn"
    alt="Slider Image 5" title="Viết lời giới thiệu của bạn ở đây 5">
</div>

Bước 3: Chỉnh sửa và thay thế Link
- Thay các link màu nâu bằng các link của bạn
Bước 4: Lưu lại

Nguon: http://m21love.blogspot.com.au/2012/12/chen-nivo-slider-ep-theo-cach-on-gian.html