Có một số tình huống bạn cần đưa link vào các bức ảnh trong Blog của bạn. Ví dụ như: thay thế các chữ "previous posts" hay "next posts" trong khu vực Navigation link bằng các hình ảnh hoặc những liên kết tới những trang web khác thông qua logo...
Đây là 1 Code đơn giản nhất:
<a href=" URL web">Tiêu đề Web</a>
Tạo Logo/Banner:
Bạn có thể tạo logo hay banner của mình thông qua các trang web : cooltext.com, abcbanners.com, bannercreator.nu,... Hầu hết các trang web này đều cho phép bạn tạo banner miễn phí. Bạn có thể tìm những trang web kiểu này bằng hộp Google search của bạn với từ: "make banner". Sau khi đã tạo xong một banner, bạn click chuột phải vài banner đó và save về máy tính của mình.
Ngoài cách trên, bạn có thể tạo banner bằng một số phần mềm như :Photoshop, painshop,..
Upload hình ảnh:
Sau khi đã tạo và save những banner đó, bạn cần upload chúng lên các freehost trên mạng như: photobucket.com, Imageshack,...và Googlepages. Bạn có thể tự tạo cho mình một trang web đơn giản với Googlepages và upload các banner lên đó. Bạn có thể đưa tối đa là 100 Mb trên trang web của mình.
Blogger cũng có là một freehost. Đầu tiên bạn cần upload 1 bức ảnh lên bài viết của mình, click vào Edit HTML bạn sẽ thấy đoạn code tương tự như sau:<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://2.bp.blogspot.com/_i9a6gjGatUY/R4GB0nFEw0I/
AAAAAAAAAao/6f5EuoQDLsI/s1600-h/Untitled-2.jpg">
<img style="margin: 0px auto 10px; display: block;
text-align: center; cursor: pointer;"
src="http://2.bp.blogspot.com/_i9a6gjGatUY/R4GB0nFEw0I/
AAAAAAAAAao/6f5EuoQDLsI/s320/Untitled-2.jpg" alt="" id="BLOGGER_PHOTO_ID_5152542189532005186"border="0" /></a>
Chúng ta có thể thấy URL cảu bức ảnh sau khi đã upload lên:
http://2.bp.blogspot.com/_i9a6gjGatUY/R4GB0nFEw0I/
AAAAAAAAAao/6f5EuoQDLsI/s320/Untitled-2.jpg
Nếu như bạn đã upload bức ảnh lên một freehost bạn sẽ thấy url của bức ảnh cũng có dạng tương tự như trên.
Tạo Link:
Bạn đã upload bức ảnh lên 1 freehost và bạn đã có url cảu nó việc cần làm bây giờ là tạo code để đặt link vào bức ảnh.
<a href="url web"><img alt="tiêu đề bức ảnh" src="url bức ảnh"/></a>
Code Alt dùng để thay thế bức ảnh bằng dòng tiêu đề nếu như url của bức ảnh không sử dụng được nữa.
Thêm Title
Khi bạn thêm code Title vào, những dòng tiêu đề sẽ hiện lên nếu bạn di chuột vào bức ảnh. Bạn có thể xem code dưới đây:
<a href="url web" title="World of crazy"><img alt="tiêu đề bức ảnh" src="url bức ảnh"/></a>
Thay thế các chữ chỉ dẫn trong Navigation Link bằng các hình ảnh:
Có lẽ bạn đã chán những đường link Older Posts và Newer Posts ở cuối Blog Post. Nếu vậy hãy theo dõi hướng dẫn dưới đây để có thể thay thế chúng bằng các hình ảnh bạn muốn.
Bạn hãy tới Edit HTML và nhớ phải Lưu mẫu của mình lại nhé. Click vào Expand Widget Template và tìm đến đoạn code sau:
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
thay thế những đoạn code mầu đỏ bằng đoạn code sau:<img alt='Older Posts( hoặc Newer Posts, Home )' src='url hình ảnh' />
Cám ơn các bạn đã theo dõi bài viết. Mong sẽ nhận được nhiều ý kiến đóng góp từ các bạn để giúp hoàn thiện nội dung bài viết hơn..
Chúc các bạn có 1 ngày vui vẻ!
1 comment:
Mình muốn trao đổi link với bạn! Mình đã add link của bạn rồi. Bạn để lại logo mình add vào luôn! Cám ơn!
Post a Comment