00:05
Unknown
Để tạo widget, bạn làm theo các bước sau :
- Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
- Thêm đoạn code bên dưới vào ngày trên thẻ ]]></b:skin>
.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
} - Tiếp theo , bạn vào đây, copy toàn bộ đoạn code và dán vào trước thẻ </head>.
- Save lại template, rồi chuyển sang tab Phần tử trang (Page Elements) . Tạo một widget HTML/Javascript với nội dung như sau :
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="http://boyprodx.blogspot.com/2009/05/mot-so-hinh-anime-13.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="http://farm4.static.flickr.com/3645/3475475585_9defa0c71a_o.jpg" height="152"/></a>
<p><h3><a href="http://boyprodx.blogspot.com/2009/05/mot-so-hinh-anime-13.html">Một số hình anime (13)</a></h3></p>
</div>
<div id="tab2" class="tabcontent">
<a href="http://boyprodx.blogspot.com/2009/04/convert-video-truc-tuyen-mien-phi-voi.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiGrd5TKj6oQ3ydI787mfJ4GSSSHhWKIFj6LKYVzXu10V8AKEAXzGFD9iJMf3_1zyAGYoTJoLdub9aomaY1XHRD6VrWeEm9Zp7_v-EL-m5wD_OGjFfnph5dJi62Xa-3dyN2yqMppcvrNY/s320/logo.jpg" height="152"/></a>
<p><h3><a href="http://boyprodx.blogspot.com/2009/04/convert-video-truc-tuyen-mien-phi-voi.html">Convert video trực tuyến miễn phí với CatchVideo</a></h3></p>
Thông thường, các video-clips được đăng tải trên các trang chia sẻ video trực tuyến luôn mang định dạng .flv . Định dạng này không hợp với nhiều phần mềm , thiết bị nên vì thế người dùng hay convert (đổi định dạng) chúng khi download về.[...]
</div>
<div id="tab3" class="tabcontent">
<a href="http://boyprodx.blogspot.com/2009/04/10-thu-thuat-voi-link-youtube-ma-ban.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="http://www.makeuseof.com/wp-content/uploads/2009/04/youtube_logo1.jpg" height="152"/></a>
<p><h3><a href="http://boyprodx.blogspot.com/2009/04/10-thu-thuat-voi-link-youtube-ma-ban.html">10 thủ thuật với link Youtube mà bạn nên biết</a></h3></p>
Youtube là 1 dịch vụ chia sẻ video trực tuyến hàng đầu thế giới với số lượng video và thành viên rất đông. Để việc xem các clips trên Youtube 1 cách tiện lợi hơn, thì bên dưới đây là 10 thủ thuật về Youtube mà bạn nên biết.
[...]
</div>
<div id="tab4" class="tabcontent">
<a href="http://boyprodx.blogspot.com/2009/04/mot-so-hieu-ung-cho-anh-trong-blogger.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGRZD5aZuMfPUYPiFPTZp616d3elRCQZaP4n8iSsgzeG1bKZUIFK5IoXEtsbixsxAZAZ26u-bWENdmkEInYd-Q5sQhD7j-DJxKfpLm8BA2v_P8sK0NfiL6E2LNjLuMHcaDb1tHj99H5oc/s320/blogger.png" height="152"/></a>
<p><h3><a href="http://boyprodx.blogspot.com/2009/04/mot-so-hieu-ung-cho-anh-trong-blogger.html">Một số hiệu ứng cho ảnh trong Blogger (cập nhật)</a></h3></p>
Như các bạn đều biết, để 1 bài đăng thật sự hiệu quả, gây sự chú ý của người đọc thì hình ảnh minh họa là không thể thiếu. Vì thế, hôm nay mình xin hướng dẫn cách tạo 1 số hiệu ứng lạ mắt cho ảnh minh họa, góp phần làm sinh động cho bài viết.[...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script></div>
- Chỉnh sửa lại nội dung của widget trên theo ý thích rồi save lại.
Hiệu chỉnh widget SlideShow Tab View
- Tiếp đến , bạn lưu ý các đoạn <div style ...> , hiệu chỉnh các yếu tố như float ; margin ; padding ; height ; width ; text-align ; padding ; margin-bottom theo ý thích sao cho phù hợp.
- Đồng thời, để thêm tab, bạn chỉ việc copy các đoạn code liên quan đến tab và sửa lại các số thứ tự của tab cho phù hợp (bạn xem kĩ code sẽ hiểu được cơ cấu).
Posted in: Thủ Thuật
