Trước đây, tôi có chia sẻ với các bạn tiện ích xem báo ngay tại blog (kiểu 1) xem TẠI ĐÂY, hôm nay tôi sẽ tiếp tục chia sẻ với các bạn cách gắn tiện ích xem báo hoặc xem trang Web ưa thích trực tiếp ngay tại Blog (kiểu 2).
Với kiểu này, các trang Web, trang báo sẽ có các Tab riêng biệt, được sắp xếp khá gọn gàng ở hàng phía trên cùng, khi muốn xem trang nào các bạn chỉ cần bấm về tab đó để xem mà không cần rời khỏi trang Blog hiện tại. Nếu muốn xem trang Web đó ở một tab mới, các bạn chỉ cần đánh dấu chọn vào hàng chữ cuối cùng của khung Open tab links in browser window instead, ngay lập tức sẽ mở trang Web đó ở một trang riêng biệt hoàn toàn.
Bạn bấm vào XEM THỬ phía dưới để trải nghiệm nha.
Rất đơn giản, chỉ cần bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML rồi dán tất cả các code phía dưới vào
<style type="text/css">
/*Eric Meyer's based CSS tab*/
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}
#tablist li a.current{
background: lightyellow;
}
</style>
<script type="text/javascript">
/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var selectedtablink=""
var tcischecked=false
function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}
function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}
</script>
<ul id="tablist">
<li><a class="current" href="địa chỉ trang Web, bạn dán tại đây" onClick="return handlelink(this)">Tên tờ báo</a></li>
<li><a href="địa chỉ trang Web bạn dán tại đây" onClick="return handlelink(this)">Tên tờ báo</a></li>
<li><a href="Địa chỉ trang Web, blog bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>
<li><a href="Địa chỉ trang Web, bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>
<li><a href="Địa chỉ trang Web, bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>
</ul>
<iframe id="tabiframe" src="http://www.dunghennessy.blogspot.com" width="98%" height="350px"></iframe>
<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>
Bây giờ, bạn thay địa chỉ trang Web hoặc trang tờ báo ở dòng lệnh
<li><a href="Địa chỉ trang Web, bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>
Nếu muốn thêm một trang Web nào nữa thì bạn chỉ cần dán thêm dòng lệnh phía trên vào phía dưới tiếp theo là được, cuối cùng bấm Lưu lại rồi trở lại vào Blog xem kết quả
