Thứ Bảy

Khung thông báo cho blog

Notification Box for Blogger
Đôi khi bạn muốn thông báo cho các độc giả của blog mình về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) thì việc tạo một Notification Box là cần thiết. Có nhiều cách để làm điều này, ở đây mình giới thiệu một ứng dụng nhỏ của Jquery trong việc tạo khung thông báo. Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Chèn đoạn code sau phía trên </body> trong template:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZKJtb4tcEcpQXxjyaU2m5Z-egM0z8tj5SVwpYiJ5DvpDhwW0IHRnW0JRIHqtR5js0IyCVWvoNVPb7OSBUxrvn-tdXqrht-06d7Di8-u93EKqKsM82Y4wKXCgONC1L662AT1pIWMC0WE4/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3UE2tGXl3TPsNdJxX6SIo7RlpXEzdKPZnQ3I9ciC5-bhPxtB8GMuXbnE_Biwmx7M7nw4UYmWY-3QQpR7II2iu0XLbrP-sRHdvqOAQetTM7gEKH1v0i9tgJyhfiCfevS8m468gpwrl78/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>

Những đoạn được đánh dấu màu đỏ bạn có thể chỉnh sửa cho phù hợp. Khung này theo mặc định chỉ hiển thị ở trang chủ.

- Nếu đang sử dụng một thủ thuật Jquery khác, hãy xóa dòng màu xanh để tránh xung đột.

Form đăng nhập cho Blogspot

30.3.11 / Được đăng bởi Noct
blogger login form
Bài viết này sẽ hướng dẫn bạn làm một form đăng nhập (Login Form) trên blog với phong cách của Wordpress. Như vậy sẽ tiết kiệm thời gian cho độc giả khi họ muốn để lại nhận xét kèm avatar trên blog của bạn mà quên chưa đăng nhập, thay vì phải gõ địa chỉ trang chủ của Blogger.

Xem demo



Chèn đoạn CSS sau phía trên thẻ </b:skin> trong template:
#slide-panel{background-color:#000;border-bottom:2px solid #838383;display:none;height:80px;margin:auto;padding-top:20px}
.slide{width:950px;margin:auto}
.btn-slide:link,.btn-slide:visited{color:#fff;float:right;display:block;font-size:14px;text-transform:uppercase;font-weight:bold;height:28px;padding:3px 0 3px 0;line-height:28px;text-align:center;text-decoration:none;width:80px;font-family:Arial;background:#000;margin-top:-2px}
.loginform{width:950px;margin:0 auto;color:#999;font-family:Arial,Helvetica,sans-serif}
.formdetails{color:#FFF;font-size:12px;padding:5px}
.formdetails input{border:none;padding:2px 5px;background-color:#EFEFEF}
.loginregister{color:#999;padding:5px}
.loginregister a:link,.loginregister a:visited{color:#90fff6;font-size:12px}
.loginregister a:hover{color:#fff}
.loginform h2{padding:10px 10px 10px 0;font-size:18px;font-weight:normal;text-transform:uppercase}
.loginform ul li{display:inline}
.loginform ul li a:link,.loginform ul li a:visited{color:#FFF;font-size:12px;text-decoration:underline}
input#signIn{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj77sgUL577bgWOdLe5-JcpSzlXjUAT5pBGKby1MupFdUwv2YBlrGr01trElC6hS6zbD7Ij2zCHh_KHe9I-lCUcZa5tQ73opGRYygI6BGsljxvuhYSsn8J_PiI0m6w0X3o_itIHWWyHXas/) no-repeat;width:94px;height:25px;cursor:pointer;padding-bottom:5px}
input#Email,input#Passwd{background:#414141;color:#fff}
input:focus#Email,input:focus#Passwd{background:#545454}
Tiếp theo, chèn đoạn code sau ngay bên dưới :











Save template và xem thành quả.

Làm sao để phần ghi chú comment của blogspot đẹp hơn?

Ghi chú hoặc có bạn còn gọi là nhắc nhở cho phần comment của blogspot là một dạng qui định ngắn gọn, dùng thông báo cho bạn đọc những điều cần lưu ý khi họ comment trên blog của bạn.
Vì khá nhiều bạn đọc của Vnblogspot muốn mình có thể điều chỉnh cho phần này đẹp thêm nên, nên hôm nay, Vnblogspot xin giới thiệu đến các bạn thủ thuật khá đơn giản và dễ làm này.
Ví dụ về phần ghi chú cho comment
Phần ghi chú sẽ hiển thị tương tự thế này

1. Tạo nội dung cho phần ghi chú

Sau khi bạn đăng nhập vào blogspot, hãy click vào phần "Cài đặt" cho blog mà bạn muốn thêm ghi chú comment.
Chọn tab cài đặt
Chọn cài đặt sau khi đăng nhập
Giao diện quản lý hiện lên, bạn nhấp vào tab "Nhận xét".
Chọn tab nhận xét
Chọn cài đặt cho phần nhận xét
Bạn kéo xuống dưới một chút, rồi nhập nội dung phần ghi chú vào mục "Thư thông báo Mẫu Nhận xét". Xong xuống cuối trang và bấm LƯU CÀI ĐẶT là OK.
Nhập nội dung cho ghi chú
Nhập nội dung cho phần ghi chú

2. Thêm CSS

Bạn click vào tab "Thiết kế" / "Chỉnh sửa HTML".
Chọn tab thiết kế và hmtl
Chỉnh sửa thiết kế ở dạng HTML
Bấm Ctrl+F tìm đoạn code sau:
]]></b:skin>
Rồi copy đoạn code sau dán vào vị trí phía trên đoạn code vừa tìm được:
.comment-form p {
background-image: url(http://1.bp.blogspot.com/-uLCDIRtd9xo/TZNE8jE9usI/AAAAAAAAAx8/bTUNldK-qQI/s1600/alert_icon.gif);
background-position: 1em 1em;
background-repeat: no-repeat;
background-color: #FDD;
width: 105%;
border: #C72B2C dashed thin;
padding: 1em;
padding-left: 70px;
color: #D24E50;
}
Cuối cùng, bấm LƯU MẪU và ra xem thành quả của bạn nào.

3. Tùy biến

Nếu bạn có chút kiến thức về CSS thì bạn có thể thay đổi nội dung các mục chính sau để phù hợp hơn với blog của bạn:
  • background-image: cái hình cảnh báo. Kích cỡ khoảng nhỏ hơn 40x40 là vừa.
  • background-color: Màu nền, có thể chọn lại cho phù hợp với cái hình.
  • width: chọn lại chiều rộng cho phù hợp với giao diện của bạn.
  • border: các tùy chọn trang trí đường viền.
  • Color: chọn màu cho chữ trong phần nội dung.
Vnblospot chúc blog các bạn ngày càng đẹp nhé!

Chèn section blogspot vào vị trí mong muốn cho blog của bạn

Đôi khi bạn muốn thêm widget vào một vị trí nào đó ví dụ như footer, nhưng trong tab “phần tử trang” lại không có dòng “thêm tiện tích” (add a widget). Giải quyết việc này khá đơn giản, hôm nay Vnblogspot sẽ cùng các bạn tìm hiểu vấn đề ngày.
Đầu tiên, bạn cần hiểu rằng, muốn thêm widget vào chỗ nào thì chỗ đó phải có section trước đã. Blog của bạn chứa nhiều section, và mỗi section chứa nhiều widget.
Việc không hiển thị dòng “thêm tiện ích” đa phần gồm 2 nguyên nhân, chúng ta sẽ cùng giải quyết từng nguyên nhân một.

Thuộc tính showaddelement của section bị tắt

Nghĩa là tại vị trí bạn muốn thêm widget đã có sẵn section nhưng lại khóa mất chức năng “thêm tiện ích” do thuộc tính showaddelement đã bị set là no.
Chọn tab thiết kế
Hiện tượng thông thường để nhận biết trường hợp này
Để khắc phục việc này, bạn hãy search đoạn code:
showaddelement='no'
Sau khi tìm, bạn sẽ có trong tay các dòng trong template mà đoạn code trên xuất hiện. Lúc này, hãy để ý tới id của các section chứa đoạn code đó xem có cái nào phù hợp với vị trí mà mình muốn thêm widget không.
Chẳng hạn, nếu Vnblogspot tìm được đoạn code như sau:
<b:section id='footer-section-line1' showaddelement='no'>
Hãy để ý, tại đoạn code này, section id là “footer-section-line1”, trong khi vị trí mà Vnblogspot muốn thêm widget cũng là chân blog (footer) nên khả năng việc không cho thêm widget là do dòng này mà ra.
Lúc này hãy thử thay đổi thuộc tính showaddelement từ no sang yes rồi chuyển sang tab “phần tử trang” để xem có hiệu quả gì không nhé?

Thêm mới hoàn toàn một section

Nếu bạn làm cách này thì không cần quan tâm xem vị trí nào đó đã có section hay chưa. Tuy nhiên, lúc này bạn cần hiểu rõ về template của mình và xác định chính xác vị trí muốn thêm section vào.
Cũng có thể có cách tương đối để xác định vị trí muốn thêm đó là nhìn xung quanh xem có widget nào đứng gần không, rồi vào template search tiêu đề của widget đó.
Ví dụ, Vnblogspot muốn thêm một section vào chân blog (footer), trong khi gần và ở trên vị trí đó là một widget có tên “Recent posts” như hình dưới đây

Chọn tab thiết kế

Vị trí cần thêm section
Như vậy, Vnblogspot sẽ vào template và search:
title='Recent posts'
Sau khi tìm thấy đoạn này rồi thì từ vị trí này, Vnblogspot sẽ search tiếp đoạn code:
</b:section></div>
Đây là đoạn code đánh dấu kết thúc của một section. Thẻ </div> có thể có hoặc không tùy vào template. Lúc này, bạn chỉ việc chèn dưới đoạn code này một đoạn code nhỏ như sau:
<div id='vbs-footer-wrapper'>
<b:section id='vbs_footer01' showaddelement='yes'>
</b:section>
</div>
Bạn cần chú ý tới thuộc tính ID (đoạn code màu đỏ) phải là duy nhất, không trùng với id của bất kỳ tag nào trong template.
Bây giờ hãy SAVE template lại và chuyển qua tab “phần tử trang” để xem kết quả. Lúc này thì dòng “Thêm tiện ích” đã hiện ra, và bạn chỉ việc thêm vào đó những widget mà mình ưa thích.

Chọn tab thiết kế

Kết quả sau khi Vnblogspot thêm section
Vnblogspot chúc bạn “vọc” thành công mỹ mãn!

Social media link dạng trôi nổi cho blogspot

Ai ai cũng muốn mình có một gì đó bắt mắt cho blog mình vậy tại sao chúng ta không thử "SOCIAL MEDIA LINKS" dạng trôi nổi được Yolks lấy từ WP chuyển sang blogger cho anh em mình tha hồ tận dụng.

1. Copy css

Trong template, các bạn tìm đoạn code sau:
]]></b:skin>
Rồi thêm đoạn CSS sau vào trên đoạn code vừa tìm được:
/*** SOCIAL MEDIA LINKS ***/

.social-media{
  position: fixed;
  top:220px;
  right:0;
  z-index:4;
  overflow: hidden;
  width: 180px;
}

.social-media li{margin: 5px 0 5px 148px;}

.social-media a{
  display:block;
  width: 200px;
  background: #fff;
  -moz-box-shadow:0px 0px 4px #f7d654;
  -webkit-box-shadow:0px 0px 4px #f7d654;
  box-shadow:0px 0px 4px #f7d654;
  border: 1px solid #fff;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 110%;
  background: #f2b428;
  background:#f2b428 url(http://www.traselcristal.es/wp-content/themes/atom/i/t-tl.png) no-repeat left top;
  color: #fff;
}

.social-media a:first-letter{
  font-size: 150%;
  font-weight: bold;
  margin-right: 5px;
}

.social-media .twitter a{
  background-color:#9AE4E8;
  -moz-box-shadow:0px 0px 4px #9AE4E8;
  -webkit-box-shadow:0px 0px 4px #9AE4E8;
  box-shadow:0px 0px 4px #9AE4E8;
}

.social-media .facebook a{
  background-color:#3b5998;
  -moz-box-shadow:0px 0px 4px #3b5998;
  -webkit-box-shadow:0px 0px 4px #3b5998;
  box-shadow:0px 0px 4px #3b5998;
}

.social-media .flickr a{
  background-color:#fe0093;
  -moz-box-shadow:0px 0px 4px #fe0093;
  -webkit-box-shadow:0px 0px 4px #fe0093;
  box-shadow:0px 0px 4px #fe0093;
}

.social-media .myspace a{
  background-color:#0d366d;
  -moz-box-shadow:0px 0px 4px #0d366d;
  -webkit-box-shadow:0px 0px 4px #0d366d;
  box-shadow:0px 0px 4px #0d366d;
}

2. Thêm code

Bạn tiếp tục tìm đoạn code sau:
</body>
Và thay thế bằng đoạn code sau:
<ul class="social-media slide-left amount-140">
<li class="rss"><a class="fadeThis" href="http://vnsharingall.blogspot.com/feeds/posts/default?alt=rss" title="RSS Feeds">RSS</a></li>
<li class="twitter"><a class="fadeThis" href="link của bạn" title="Twitter updates">Twitter</a></li>
<li class="facebook"><a class="fadeThis" href="link của bạn" title="Facebook page">Facebook</a></li>
</ul> 
</body>

3. Thêm js

<script src='http://www.traselcristal.es/wp-content/themes/atom/c.php?file=js%2Fjquery.atom.js&amp;ver=1.1.5' type='text/javascript'/>
<script src='http://www.rorpieth.es/?atom_jquery=1&amp;ver=1.1.5' type='text/javascript'/>
Kết quả sẽ tương tự như trong hình demo dưới đây.
Kết quả sau khi thêm code

Bộ gõ tiếng việt độc đáo dạng trôi nổi cho blogspot


Demo



Có nhiều người do cài máy chúng ta lại quên không cài unikey,vietkey.Mỗi lần tìm kiếm từ khóa tiếng việt nào người đó sẽ phải vất vã download về rồi cài.Sao chúng ta không làm 1 cái thêm vào float bên trái của chúng ta thuộc dạng trôi nổi Yolks thấy hay nên chia sẽ cùng anh em blogspot chúng ta

Chúng ta làm các bước như sau:

1.Thêm css

Tìm code:
]]></b:skin>

Thêm css vào trước code vừa tìm:
#mudimPanel:hover{-moz-opacity:1;-moz-transition:all 1s ease;-webkit-transition:all 1s ease;filter:alpha(opacity=100);left:0!important;opacity:1}#mudimPanel{-moz-box-shadow:5px 5px 5px #000;-moz-opacity:.9;-moz-transition:all 2s ease;-webkit-box-shadow:5px 5px 5px #000;-webkit-transition:all 2s ease;background:#fff url(http://c3zone.net/users/2611/10/63/87/album/go10.jpg) no-repeat right center!important;bottom:9px!important;box-shadow:5px 5px 5px #000;filter:alpha(opacity=90);font-size:9px!important;font-weight:700;height:47px!important;left:-333px!important;opacity:.9;padding:4px 26px 4px 4px !important;vertical-align:middle;width:330px!important}

2.Thêm js

Tìm:
</body>
Thay thế bằng đoạn code:

<script src='http://mudim.googlecode.com/files/mudim-0.8-r142.js' type='text/javascript'/><script src='http://www.skin4fm.com/h53-' type='text/javascript'/>
</body>

3.Hoàn thành:

Kết quả sẽ tương tự như trong hình demo dưới đây.

Kết quả sau khi thêm code

Tiện ích đám mây nhãn dạng flash cho blogspot tiếng Việt

"Blogumus" là một tiện ích đám mây nhãn kiểu flash sử dụng script được chuyển đổi từ plugin WP Culumus của Roy Tanck cho Wordpress. Blogumus do Amanda tại blog Bloggerbuster điều chỉnh để sử dụng cho Blogger. Amanda đã có bài viết hướng dẫn khá phức tạp cho tiện ích này.


Cách cài đặt tiện ích như thế nhìn chung khó sử dụng cho Blogger Việt Nam, hơn nữa phải đụng đến việc chỉnh sửa Template. Và một điều bất cập là nếu blogspot tiếng Việt đặt tên nhãn tiếng Việt thì tiện ích không hiển thị được tiếng Việt. Qua nghiên cứu, tôi có một số điều chỉnh để cho code đơn giản hơn và không cần phải can thiệp vào Template, hơn nữa có thể áp dụng được cho các nhãn tiếng Việt. Bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là được.

<embed allowscriptaccess="always" bgcolor="#000000" flashvars="tcolor=0x990000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 1' style='12'&gt;Label 1&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 2' style='12'&gt;Label 2&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 3' style='12'&gt;Label 3&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 4' style='12'&gt;Label 4&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 5' style='12'&gt;Label 5&lt;/a&gt;
&lt;/tags&gt;" height="200" id="tagcloud" name="tagcloud" quality="high" src="http://sites.google.com/site/ngonngulaptrinhvn/files/tagcloud.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"></embed>

Ở trong đoạn code trên, bạn chú ý thay các chữ Nhãn 1, Nhãn 2, Nhãn 3, … được đánh dấu màu đỏ thành tên nhãn tương ứng bằng tiếng Việt có dấu (ví dụ: Thủ thuật Blogger, Thủ thuật CSS, Thủ thuật HTML, …); sau đó thay các chữ Label 1, Label 2, Label 3, … được đánh dấu màu xanh thành các tag tương ứng bằng tiếng Anh hoặc tiếng Việt không dấu (ví dụ: Blogger, CSS, HTML, …). Cách này khắc phục được tình trạng tag tiếng Việt có dấu không hiển thị được trong tiện ích. Chú ý thay huynh-nhat-ha thành tên blogspot của bạn.

Dòng width="300" thể hiện chiều rộng tiện ích, cần điều chỉnh cho tương thích với chiều rộng của phần sidebar, dòng height="200" thể hiện chiều cao tiện ích, dòng bgcolor="#000000" biểu thị màu nền tiện ích, tcolor=0x990000 biểu thị màu font chữ và tspeed=100 biểu thị tốc độ flash.

Bạn có thể thêm vào nhiều nhãn cho code ở trên.

Chèn icon cho nhãn trước tiêu đề bài viết Blogger

Đặt icon cho từng nhãn trước tiêu đề bài viết là một cách giúp nhận diện nhanh chủ đề của bài viết. Trước đây blogger Fan Dung đã có bài giới thiệu về cách thực hiện điều này.

Hôm nay tôi có nghĩ ra một cách có thể nói là có hiệu quả tương đương, sử dụng javascript để gán tự động hình icon đại diện cho từng nhãn và ít can thiệp đến cấu trúc HTML trong Template. Mỗi khi blogspot của bạn có thêm nhãn thì chỉ cần gán thêm hình icon đại diện cho nhãn trong đoạn code javascript một cách đơn giản, tránh đụng đến HTML trong Template và điều này đặc biệt hữu dụng đối với các bạn chưa rành về XML của Blogger Template.

Xem Demo.

Để thực hiện điều này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code sau đây vào trước thẻ </head>.

<!--ICON FOR LABEL AUTO BEFORE POST TITLE BY HUYNH NHAT HA-->
<style type='text/css'>
.post-icon{
filter: alpha(opacity=80);
opacity: .8;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
float:left;margin-right:5px;width:20px;height:20px;display:block;border:solid 0px;
}
.post-icon:hover{
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
-khtml-opacity: 1.0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function imagelabel(label) {
type=0;
image = new Array()
image[0] = ""
image[1] = "<img class='post-icon' src='URL_icon_Nhãn 1' title='Chuyên mục: Nhãn 1'/>"
image[2] = "<img class='post-icon' src='URL_icon_Nhãn 2' title='Chuyên mục: Nhãn 2'/>"
image[3] = "<img class='post-icon' src='URL_icon_Nhãn 3' title='Chuyên mục: Nhãn 3'/>"
image[4] = "<img class='post-icon' src='URL_icon_Nhãn 4' title='Chuyên mục: Nhãn 4'/>"
image[5] = "<img class='post-icon' src='URL_icon_Nhãn 5' title='Chuyên mục: Nhãn 5'/>"

if (label == "Nhãn 1"){type=1;}
if (label == "Nhãn 2"){type=2;}
if (label == "Nhãn 3"){type=3;}
if (label == "Nhãn 4"){type=4;}
if (label == "Nhãn 5"){type=5;}
document.write(image[type]);
}
//]]>
</script>

Bạn cần thay những dòng được đánh dấu màu xanh bằng địa chỉ URL icon đại diện cho từng nhãn và những dòng được đánh dấu màu đỏ bằng tên nhãn tương ứng với icon. Mỗi khi blog của bạn có thêm nhãn thì chỉ cần gán thêm vào đoạn code javascript ở trên theo đúng cách thức:

image[n] = "<img style='width:15px;' class='post-icon' src='URL_icon_Nhãn n' title='Chuyên mục: Nhãn n'/>"

if (label == "Nhãn n"){type=n;}

Bước 2. Tìm dòng <div class='post-title'> rồi đặt sau nó với đoạn code bên dưới.

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagelabel(&quot;<data:label.name/>&quot;);</script></a>
</b:loop>
</b:if>
</div>

Lưu Template là OK.

Chúc bạn thành công nhé!

Tạo trang mục lục bài viết theo nhãn với hiệu ứng đàn xếp

Đối với các blogspot chứa rất nhiều bài viết thì mục lục bài viết sẽ rất dài và như thế sẽ gây khó khăn cho người đọc khi tìm bài viết. Hiệu ứng đàn xếp giúp cho mục lục bài viết trở nên gọn gàng hơn. Abu Farhan đã áp dụng hiệu ứng đàn xếp cho mục lục bài viết (Table of Content with Accordion) tuy nhiên có một điểm khiến nhiều blogger không thích trong tiện ích này lại là liên kết quảng cáo cho Abu Farhan (liên kết Widget by Abu Farhan).

Tôi nhận thấy thủ thuật này khá hay song vẫn trăn trở làm thế nào để áp dụng cho Blogger Việt Nam một cách hoàn hảo. Chỉ có một cách là tìm cách ẩn đi liên kết quảng cáo cho Abu Farhan. Người ta thường nói, hữu xạ tự nhiên hương, cho nên việc xóa đi liên kết quảng cáo này là điều có thể chấp nhận được.

Đây là Demo của Abu Farhan. Và đây là Demo của tôi.

Nếu bạn thích tạo trang mục lục với hiệu ứng đàn xếp do tôi điều chỉnh thì hãy thực hiện như sau.

Đặt toàn bộ đoạn code dưới đây vào một trang item hay trang tĩnh (static page) ở chế độ chỉnh sửa HTML.







Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn.

CAC BAI DA VIET





 

Blogger news

Blogroll

About