CODE HAY PHẦN 03.



Thay liên kết Bài đăng mới hơn, cũ hơn bằng hình ảnh

Comments (0) 

[ BlogspotVn ] - Đối với mỗi template của blogspot, mặc định cuối mỗi trang sẽ có 3 link liên kết là "Bài viết mới hơn", "Trang chủ", "Bài viết cũ hơn". Để làm cho blog trông đẹp hơn, hôm nay mình giới thiệu cho các bạn 1 thủ thuật nhỏ để đổi các liên kết đó thành hình ảnh.
Các bạn coi hình minh họa bên dưới.


Trước khi chỉnh sửa


Sau khi chỉnh sửa :


Thực hiện các bước sau:
1. Đầu tiên bạn phải có hình tượng trưng cho 3 liên kết link đó
Có thể tham khảo 3 hình dưới đây
                         
2. Đăng nhập blog
3. Vào Chỉnh sửa Code HTML
4. Nhấn vào Mở Rộng Tiện Ích
5. Tìm đọan code sau:
<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>

6. Thay những đọan code màu đỏ bằng những đọan code sau:

<data:newerPageTitle/>
thay bằng
<img alt='Next' border='0' src='{link hình 1}' title='Next'/>
<data:olderPageTitle/>
thay bằng
<img alt='previous' border='0' src='{link hình 2}' title='previous'/>
<data:homeMsg/>
thay bằng
<img alt='home' border='0' src='{link hình 3}' title='home'/>


7. Save template



Làm đẹp phần bài đăng blogspot

Comments (2) 
[ BlogspotVn ] - Footer của bài viết có chứa tiện ích như : Người đăngthời gian post bài, nhãn comment... Các bạn có thể chỉnh sửa theo ý mình cho blog của bạn.

Việc chỉnh sửa có thể làm như cách sau : vào layout (Bố cục)-> Tìm đến tiện ích "Bài đăng trên blog" và click vào Edit(chỉnh sửa) -> và một hộp thọai hiện ra, và bạn có thể chỉnh sửa theo ý mình (xem hình bên dưới)



Bây giờ bắt đầu chỉnh sửa chi tiết
1. Tên tác giả (người đăng bài viết)
- Để thay đổi tên người đăng bài viết bạn làm như sau : Vào Bảng điều khiển -> Chỉnh sửa Hồ sơ -> Tên Hiển thị -> Thay Đổi Tên và lưu lại.
- Tuy nhiên bạn muốn hiển thị với tên khác, bạn có thể chỉnh sửa trong template. Để làm điều này, bạn vào Bố cục (layout) -> Chỉnh sửa code HTML -> Chọn mở rộng tiện ích -> tìm đến dòng code sau :
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Xóa dòng code màu đỏ và thay bằng tên bạn muốn hiển thị, ví dụ nickname của bạn.

Và bạn cũng có thể thay tên tác giả bằng hình ảnh :
- để làm điều này, bạn làm tương tự như trên, và cũng xóa dòng code màu đỏ và thay bằng đọan code bên dưới :
<a href="{URL OF YOURBLOG}"><img src="{link hình ảnh}" /></a>


2. Thay đổi Chữ "Nhãn" dưới bài đăng theo ý mình:
- Các nhãn được chỉ định dưới bài viết thường được bắt đầu bằng thuật ngữ"Nhãn (Labels)". Nếu bạn muốn thay đổi nó theo ý mình, ví dụ như thay bằng"Thể Loại"...
- Để làm được thủ thuật này, bạn làm các bước sau:
+ Vào Bố cục
+ Vào chỉnh sửa code HTML
+ Nhấn chọn Mở Rộng tiện ích
+ Tìm đến đọan code sau:

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

- Xóa dòng code màu đỏ và thay thế bằng 1 chứ khác theo ý bạn, ví dụ : Thể Loại

Hoặc cũng có thể thay thế nó bằng hình ảnh : 
- Tương tự như trên, xóa đọan code màu đỏ và thay bằng đọan code bên dưới:
<img src="URL OF IMAGE " alt="BLOG TITLE" />


3. Đưa dòng Footer ở phía dưới bài viết lên trên, nằm ngày dưới tiêu đề bài viết

- Đôi khi người đọc sẽ thấy hứng thú hơn với việc đưa dòng footer của bài viết lên trên. Để làm điều này, bạn vào Chỉnh sửa code HTML -> Chọn mở rộng tiện ích -> tìm đến dòng code sau:

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


và cut tất cả đọan code trên và dán vào ngay sau dòng code bên dưới :
<div class='post-body'>


Chúc các bạn thành công.






Photo gallery sử dụng jQuery và hiệu ứng zoom hình ảnh cho blogspot



Hôm này mình sẽ hướng dẫn các bạn một gallery ảnh với hiệu ứng zoom sử dụng jQuery.
Các bạn xem demo tại đây
Để thực hiện điều này, chúng ta cần làm 3 bước đơn giản như sau:
Tutorial How To Creat Photo Gallery With Zoom Effect

1. Đăng nhập Bảng điều khiển --> Thiết kế --> Chỉnh sửa HTML
Tìm đoạn "]]></b:skin>" ( Crl+F) và dán đoạn code sau vào trước nó:

/* Blogger Zoom Gallery by vlpm4st3r http://blogtructuyenvn.blogspot.com  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fPZyCX3lnW6zsKJgSBz0ms6WAHMlsy_DuoHpzTT3etVAgyOkE7QjfT1RyQTx1_7wbFm-Y0yhniF84N3su6TXqNWZUeihnFEaum6Px_DSc_EgoN5PxbckgwY2WQd1CvX22ncr_MBiim1B//) no-repeat center center;  /* Hình ảnh sử dụng để làm background cho ảnh trong hiệu ứng zoom
border: none; /* Get rid of border on hover */
}


Các bạn có thể chỉnh sửa code màu đỏ là độ rộng của gallery ảnh cho phù hợp với blog của bạn

3. Tìm thẻ </head> và dán trước nó đoạn code sau:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

Xóa đoạn code màu xanh nếu blog bạn đã sử dụng jQuery

4. Lưu mẫu.
5. Sử dụng đoạn code sau để hiển thị gallery , nếu sử dụng trong bài post, các bạn nhớ chọn Chỉnh sửa HTML nhé:

<ul class="thumb">
<li><a href="#"><img src="link anh 1" alt="" /></a></li>
<li><a href="#"><img src=" link anh  2" alt="" /></a></li>
<li><a href="#"><img src=" link anh 3" alt="" /></a></li>
<li><a href="#"><img src=" link anh 4" alt="" /></a></li>
</ul>






Không có nhận xét nào:

Đăng nhận xét



CÁC BẠN GỬI ẢNH CHO TÔI BẰNG CÁCH COPY URL CỦA ẢNH RỒI DÁN VÀO KHUNG NHẬN XÉT BÊN DƯỚI.

Blogger Gadgets
Copyright 2010 QUANGHIEN968.

TRANG CHỦ. | ĐỌC BÁO | L.B.V MÁY TÍNH. | NGHE NHẠC. | XEM PHIM. |