Tabs nhiều tiện ích, widget cho blogspot. Cách tạo :
Tại phần này mình sẽ hướng dẫn bạn cách tạo một tab mouseover (chuyển tab khi rê chuột vào). Cùng với đó là nội dung được trình bày trên từng tab.
Tiện ích này cũng không có gì là mới mẻ. Tuy vậy mình vẫn hướng dẫn chi tiết để mọi người có thể làm được và tự ý tùy chỉnh. Hoặc có thể sử dụng ngay style do erhay làm.
Đây là code html của tiện ích này khi chưa áp dụng cho blogger:
(DOWNLOAD)
Bạn nên down về để tìm hiểu trước khi áp dụng vào blogger.
Mở file html lên bạn sẽ thấy phần :
Nội dung mới nằm trong tab Mới
Nội dung xem nhiều nhất nằm trong tab Xem nhiều nhất
Nội dung hot nằm trong tab Hot
OK. Như vậy bạn chỉ việc trình bày nội dung bạn muốn và 3 tab kia là được.
Cách thêm Chi tiết vào Blogger để được như style demo:
1. Thêm CSS (bạn search ]]></b:skin> ) và đặt CSS đằng trước.
3. Đặt vị trí bạn muốn thêm tab này.
Chỉnh lại nhãn và địa chỉ web cho phù hợp với web của bạn.
(Ghi rõ nguồn erhay khi bạn phát hành lại thông tin từ trang này)
Tại phần này mình sẽ hướng dẫn bạn cách tạo một tab mouseover (chuyển tab khi rê chuột vào). Cùng với đó là nội dung được trình bày trên từng tab.
Tiện ích này cũng không có gì là mới mẻ. Tuy vậy mình vẫn hướng dẫn chi tiết để mọi người có thể làm được và tự ý tùy chỉnh. Hoặc có thể sử dụng ngay style do erhay làm.
Đây là code html của tiện ích này khi chưa áp dụng cho blogger:
(DOWNLOAD)
Bạn nên down về để tìm hiểu trước khi áp dụng vào blogger.
Mở file html lên bạn sẽ thấy phần :
Nội dung mới nằm trong tab Mới
Nội dung xem nhiều nhất nằm trong tab Xem nhiều nhất
Nội dung hot nằm trong tab Hot
OK. Như vậy bạn chỉ việc trình bày nội dung bạn muốn và 3 tab kia là được.
Cách thêm Chi tiết vào Blogger để được như style demo:
1. Thêm CSS (bạn search ]]></b:skin> ) và đặt CSS đằng trước.
/*CSS tabs hover edit by http://www.erhay.com */
.tab
{
display: none;
clear: both;
margin-bottom: 10px;
height: 296px;
height: 300px;
width:260px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitWT6_C089VRMMM2jFmDiuJVOoYHz2XRtew80o4BH8_l0f9xufF_fCdUV5M3QOpFp1I1RWtIa0uPzbYrLOBhnmO5vF6tXEi_2Roqj8X_naGgoPkUmCs5NhGOzUFsds9lDeceEcY3WgOd4/s327/back-tab-erhay.png);
overflow:hidden;
}
.tab_current
{
display: block;
clear: both;
margin-bottom: 10px;
overflow: hidden;
height: 296px;
width:260px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitWT6_C089VRMMM2jFmDiuJVOoYHz2XRtew80o4BH8_l0f9xufF_fCdUV5M3QOpFp1I1RWtIa0uPzbYrLOBhnmO5vF6tXEi_2Roqj8X_naGgoPkUmCs5NhGOzUFsds9lDeceEcY3WgOd4/s327/back-tab-erhay.png)
}
.tab *, .tab_current *
{
margin: 0%; overflow: visible;
}
.tabs
{
padding: 0%;
margin: 0%;
list-style-type: none; overflow: visible;
}
.tabs li
{ margin: 0px 5px 0px 0px; float: left;
margin-bottom:0px !important;
font-size: 11px;
font-weight: bold;
overflow: visible !important;
}
.tabs li a.current
{
background:#df5a13 url(active.gif) 10px 10px no-repeat !important;
color: #ffffff !important;
text-decoration: none;
position: relative;
overflow: visible;
z-index:-2;
background-attachment: fixed;
border:1px solid #DF5A13 !important;
}
.tabs li a
{
padding: 3px 15px;
color: #005399 !important;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border-top: 1px solid #d5dae0;
border-left: 1px solid #d5dae0;
border-right: 1px solid #d5dae0;
border-bottom: 1px solid #d5dae0;
overflow: visible !important;
}
.tabs li a:hover
{
text-decoration: none; overflow: visible !important;
}
.tabs_top
{
margin-bottom: 0px;
padding-bottom: 15px; overflow: visible !important;
}
ul.ulTopList li
{
padding:5px 0px;
border-bottom: 1px solid #d5dae0;
}
li.clearfix h2 a
{
background: url(http://vietbao.vn/images/v2011/sprice_bg.gif) no-repeat 0px -342px;
padding: 3px 0px 2px 20px;
display: block;
}
#PopularPosts2 h2
{
display:none;
}
.PopularPosts .widget-content ul li
{
border-bottom: 1px solid #d5dae0;
}
.PopularPosts .widget-content ul li a{background: url(http://vietbao.vn/images/v2011/sprice_bg.gif) no-repeat 0px -342px;
padding: 3px 0px 2px 20px;
display: block;}
2. Thêm Javascript (Thêm code sau trước </head>)
//<![CDATA[ var LINK = "_link";
var CLASS_NAME = "current";
var displayed_tab = null;
(function()
{
if (window.addEventListener)
{
window.addEventListener("load", setup_tabs, false);
}
else
{
window.attachEvent("onload", setup_tabs);
}
})();
function setup_tabs()
{
var tab_links = document.getElementById("tabs").getElementsByTagName("a");
for (var i = 0; i < tab_links.length; i++)
{
setup_tab_link(tab_links[i]);
}
}
function setup_tab_link(link)
{
var num = link.id.indexOf("_");
var link_id = link.id.substring(0, num);
link.onmouseover = function(){display_tab(link_id);};
}
function hide_all_tabs()
{
var tab_divs = document.getElementsByTagName("div");
//Only need those div elements that have an id value starting with 'tab'
for (var i = 0; i < tab_divs.length; i++)
{
if (tab_divs[i].id.indexOf("tab") === 0)
{
change_tab_display(tab_divs[i], "none", tab_divs[i].id, "");
}
}
}
function display_tab(id)
{
if (!displayed_tab)
{
hide_all_tabs();
}
else
{
change_tab_display(displayed_tab, "none", displayed_tab.id, "");
}
//Make the selected tab visible
displayed_tab = document.getElementById(id);
change_tab_display(displayed_tab, "block", id, CLASS_NAME);
}
function change_tab_display(tab_content_element, display, tab_link_id, class_name)
{
//Make the selected tab visible or not visible
tab_content_element.style.display = display;
//Change the class name of the tab link
document.getElementById(tab_link_id + LINK).className = class_name;
}
function newest(json) {
document.write('<ul class="ulTopList">'); for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { var commenttext = entry.link[k].title; var commenturl = entry.link[k].href; }
if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }
} var thumburl; try { thumburl = entry.media$thumbnail.url; } catch (error)
{ s = entry.content.$t; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { thumburl = d; } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonRdtunHa0dUg9MDFQIM-pRVjav8u0B4pJoSCl2Hr4WE59Z_z0mHiUJR4izBL3RWxMuiizkXVIpUUTP7J_TnvAQQXpl_2FIOhXZzLZvYiPR9pd7Gv0TOQRlxbFwQAl64EP8Ke04cGCWQa/'; }
var postdate = entry.published.$t; var cdyear = postdate.substring(0, 4); var cdmonth = postdate.substring(5, 7); var cdday = postdate.substring(8, 10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec";
if (showpostthumbnails == true) {
document.write('<div style="height:8px; width:100px"></div>');
document.write('<li1 class="clearfix">');
document.write('<a style="font-size:13px" href="' + posturl + '" target ="_top"><img class="label_thumb2" src="' + thumburl + '"/></a>'); document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
document.write('<div style="width:200px;height:20px; background:white"></div>');
}
else {
document.write('<li class="clearfix">');
document.write('<h2><a style="font-size:13px" href="' + posturl + '" target ="_top"></a>'); document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a></h2>');
}
if ("content" in entry) { var postcontent = entry.content.$t; }
else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) {
if (postcontent.length < numchars) { document.write(''); document.write(postcontent); document.write(''); }
else { document.write(''); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0, quoteEnd); document.write(postcontent + '...'); document.write(''); }
}
var towrite = ''; var flag = 0; document.write(''); if (showpostdate == true) { towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear; flag = 1; }
if (showcommentnum == true) {
if (flag == 1) { towrite = towrite + ' | '; }
if (commenttext == '1 Comments') commenttext = '1 nhận xét'; if (commenttext == '0 Comments') commenttext = '0 nhận xét'; commenttext = '<a style="color:#DB552D" href="' + commenturl + '" target ="_top">' + commenttext + '</a>'; towrite = towrite + commenttext; flag = 1; ;
}
if (displaymore == true)
{ if (flag == 1) towrite = towrite + ' | '; towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">More »</a>'; flag = 1; ; }
document.write(towrite); document.write('</li>'); if (displayseparator == true)
if (i != (numposts - 1))
document.write('');
} document.write('</ul>');
}
function photogalaries(json) {
document.write('<ul class="label_with_thumbs3">'); for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { var commenttext = entry.link[k].title; var commenturl = entry.link[k].href; }
if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }
} var thumburl; try { thumburl = entry.media$thumbnail.url; } catch (error)
{ s = entry.content.$t; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { thumburl = d; } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonRdtunHa0dUg9MDFQIM-pRVjav8u0B4pJoSCl2Hr4WE59Z_z0mHiUJR4izBL3RWxMuiizkXVIpUUTP7J_TnvAQQXpl_2FIOhXZzLZvYiPR9pd7Gv0TOQRlxbFwQAl64EP8Ke04cGCWQa/'; }
var postdate = entry.published.$t; var cdyear = postdate.substring(0, 4); var cdmonth = postdate.substring(5, 7); var cdday = postdate.substring(8, 10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; document.write('<li class="clearfix">'); if (showpostthumbnails == true)
document.write('<a href="' + posturl + '" target ="_top"><img class="label_thumb2" src="' + thumburl + '"/></a>'); document.write('<a style="display:none !important" href="' + posturl + '" target ="_top">' + posttitle + '</a><br>'); if ("content" in entry) { var postcontent = entry.content.$t; }
else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) {
if (postcontent.length < numchars) { document.write(''); document.write(postcontent); document.write(''); }
else { document.write(''); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0, quoteEnd); document.write(postcontent + '...'); document.write(''); }
}
var towrite = ''; var flag = 0; document.write('<br>'); if (showpostdate == true) { towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear; flag = 1; }
if (showcommentnum == true) {
if (flag == 1) { towrite = towrite + ' | '; }
if (commenttext == '1 Comments') commenttext = '1 Comment'; if (commenttext == '0 Comments') commenttext = 'No Comments'; commenttext = '<a style="color:#dd8620 !important; font-size:9px !important" href="' + commenturl + '" target ="_top">' + commenttext + '</a>'; towrite = towrite + commenttext; flag = 1; ;
}
if (displaymore == true)
{ if (flag == 1) towrite = towrite + ' | '; towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">More »</a>'; flag = 1; ; }
document.write(towrite); document.write('</li>'); if (displayseparator == true)
if (i != (numposts - 1))
document.write('');
} document.write('</ul>');
} //]]>
3. Đặt vị trí bạn muốn thêm tab này.
<div style='width:270px; height: 366px'><h2 class='tabs_top'>Tabs for blogger by <a href='htt://www.erhay.com'>erhay</a> </h2>
<ul class='tabs' id='tabs'>
<!-- The id of the tab links must be tabX_link, where X is the number of the tab. -->
<li><a class='current' href='#' id='tab1_link'>Mới</a></li>
<li><a href='#' id='tab2_link'>Xem nhiều nhất</a></li>
<li><a href='#' id='tab3_link'>Hot</a></li> </ul>
<!-- The id of the tab contents must be tabX, where X is the number of the tab. The ids here must correspond to those of the tab links. -->
<div class='tab_current' id='tab1'>
<p>
<script type='text/javascript'> var numposts = 9; var showpostthumbnails = false; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
<script src='http://www.erhay.com/feeds/posts/default/-/Nhãn của bạn?orderby=updated&alt=json-in-script&callback=newest' type='text/javascript'/>
</p>
</div>
<div class='tab' id='tab2'>
<p>
<b:section class='sidebar123' id='sidebartab121' preferred='yes'>
<b:widget id='PopularPosts2' locked='false' title='Xem nhiều trong tuần' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div id='floatDiv'>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</p>
</div>
<div class='tab' id='tab3'>
<p>
<script type='text/javascript'> var numposts = 9; var showpostthumbnails = false; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
<script src='http://www.erhay.com/feeds/posts/default/-/Nhãn của bạn?orderby=updated&alt=json-in-script&callback=newest' type='text/javascript'/>
</p>
</div></div>
Nếu bạn thắc mắc hãy comment để được trợ giúp
(Ghi rõ nguồn erhay khi bạn phát hành lại thông tin từ trang này)
hay quá!
ReplyDeleteThanks
Kiếm tiền online: http://kiem-tien-online-tai-nha.blogspot.com/