-->
Hiển thị các bài đăng có nhãn ThuthuatBlog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn ThuthuatBlog. Hiển thị tất cả bài đăng

Hiển thị bài viết có ảnh thumb và phân trang

Hình minh Họa
Hiển thị bài viết có ảnh thumb và phân trang

1. Đầu tiên đăng nhập tài khoản Blogger==>>Vào phần thiết kế (Design) chọn chỉnh sửa HTML==>>Thêm ccode bên dưới vào trước thẻ ]]></b:skin>

.clear {clear: both;}
.home-navi {padding-left:8px;width:580px;}
.home-navi h2 {font-family:Times;border-bottom:1px solid #fff;padding-bottom:2px;margin-bottom:0px;}
.home-navi h2 a {color:#0000ff;padding-left:20px;margin-left:10px;background:url(http://haimiennam.googlecode.com/files/4B3.gif) no-repeat; font-size:15px;text-decoration:none;}
.home-navi h2 a:hover {color:#ff0000;}
.authorpost {background:url(‘http://haimiennam.googlecode.com/files/003.gif’) no-repeat; margin-left:30px;margin-top:3px;padding:0px 0px 0px 18px; font-size:12px;}
.continue{float:right;padding-right:10px;width:90px;text-align:center;}
.continue a {margin-bottom:-10px;}

#page-rc-tooltip {
color:#000099; text-align:center; font-weight:bold; padding-top:5px;padding-bottom:0px;}
#page-rc-tooltip a {color:#000033;text-decoration:none; border:1px solid #fff; padding:2px 5px;background: url(' http://haimiennam.googlecode.com/files/sd.png ') repeat-x scroll 0px 0px;}
#page-rc-tooltip a:hover {color:#0000ff; background: url(' http://haimiennam.googlecode.com/files/comm.png ') repeat}
#page-rc-tooltip span {border:1px solid #ccc; padding:2px 5px;background:#fff;}
#page-rc-tooltip span.currentpage {background: url(' http://haimiennam.googlecode.com/files/comm.png ');}

2. Save template lại và trở về phần tử trang
3. Thêm 1 HTML/Javascript và thêm code bên dưới vào tiện ích đó
Xem Code


<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;

}

function showrecentposts(json) {
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm ;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
var plabel = new Array();
var cate = entry.category;
if(cate) {
for (var k = 0; k < entry.category.length; k++) {
plabel[k] = ' <a class="label-link" href="http://baongocso1.blogspot.com/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
}
}
else {plabel = "No label";}

var authpost = entry.author[0].name.$t;

var postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
postDay = day+ "/" + m + "/" + y ;

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else postcontent = "";

s = postcontent; 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!="")) {img[i] = d;} else {img[i]="http://haimiennam.googlecode.com/files/no.png";}

if (pcm==0) {var comment = " No Comment ";}
else {var comment = " "+ pcm + " Comments ";}

var td1 = '<div class="home-navi"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><div class="authorpost">&#272;&#432;&#7907;c &#273;&#259;ng b&#7903;i <b>'+authpost+'</b> on '+postDay+' '+comment+'</div><p><img style="width:100px;height:90px; padding:3px;border:1px solid #fff;margin-right:5px;margin-bottom:5px;float:left;" src="'+img[i]+'" />'+removeHtmlTag(postcontent,500)+' ... </p><div class="continue"><a href="'+posturl+'"><img src="http://haimiennam.googlecode.com/files/XTiep.gif " alt="Xem tiếp"/></a></div><div class="clear"></div></div>';

document.write(td1);
}
}

//page value

String.prototype.GetValue= function(para) {
var reg = new RegExp("(^&)"+ para +"=([^&]*)(&$)");
var r = this.substr(this.indexOf("?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var str = location.href;
var page = str.GetValue("page");
if (page==undefined) { page = "1"; }

// get total number of posts
function numberOfPosts(json) {
document.write('<script style="text/javascript">var totalPosts= '+json.feed.openSearch$totalResults.$t+' ;</script>');
}
document.write('<script src="http://baongocso1.blogspot.com/feeds/posts/default/-/SoftWare?alt=json-in-script&callback=numberOfPosts"></script>');

//]]>
</script>

<script type='text/javascript'>
var rcpage = new Array();
var numposts = 8; // số bài viết hiển thị trong tiện ích này
var numpage=totalPosts/numposts;
var lastnum = totalPosts%numposts;
if (lastnum==0) {numpage=numpage+1;}

for (var m=1;m<numpage;m++) {
var start=numposts*(m-1)+1;
rcpage[m] ="<script src="http://baongocso1.blogspot.com/feeds/posts/default/-/SoftWare?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>";
}
if ((page>numpage)&&(page<numpage+1)) {
var numposts=lastnum;
start = totalPosts-lastnum+1;
document.write("<script src="http://baongocso1.blogspot.com/feeds/posts/default/-/SoftWare?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
}
else if (page>numpage){document.write("<div style="width:450px;color:#f00;font-weight:bold;padding:10px; border:1px #ccc solid;">This page does not exist. Please check link again</div>"); }
else {document.write(rcpage[page]); }

// Create page navigation

if (lastnum==0) {var pagelist=totalPosts/numposts;} else {var pagelist=numpage+1;}
var pagelist1 = parseInt(pagelist);

var npage = parseFloat(page);

if (page<=parseInt(pagelist)) {

if ((pagelist>2)&&(pagelist1<6)) {

document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<pagelist1+1;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
document.write(" "+totalPosts+" posts</div>");
}

if ((pagelist>=6)&&(page<4)) {
document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<6;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
if (parseInt(pagelist)>5) { document.write("... <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+parseInt(pagelist)+"">Last</a> "+totalPosts+" posts</div>"); } else {document.write(" "+totalPosts+" posts</div>");}
}

else if ((pagelist>=6)&&(page>3)&&(page<parseInt(pagelist)-2)) {
var first = page-2;
var last = first+5;
document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page=1">First</a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
document.write("... <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+parseInt(pagelist)+"">Last</a> "+totalPosts+" posts</div>");
}

else if ((pagelist>=6)&&(page>3)&&(page>parseInt(pagelist)-3)) {
var first = parseInt(pagelist)-4;
var last = parseInt(pagelist)+1;
document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page=1">First</a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
document.write(" "+totalPosts+" posts</div>");
}
}
</script>

*Chỉnh sửa code:- Bạn hãy thay địa chỉ http://baongocso1.blogspot.com trong code trên (màu xanh đậm) thành địa chỉ site của bạn.
- Dòng màu tím đậm trong code chính là nhãn bài viết SoftWare, bạn thay thành tên nhãn bài viết mà bạn muốn hiển thị.
- Các dòng màu cam là nơi bạn đặt tiện ích này http://baongocso1.blogspot.com/search/label/SoftWare, bạn hãy thay thành địa chỉ nơi mà bạn đặt tiện ích này trên trang của bạn. Bạn nhớ thay toàn bộ dòng màu cam ở trên nếu không phần phân trang của bạn sẽ bị lỗi, không sử dụng được.

4. Cuối cùng là save tiện ích lại

Ở trên là phần mình đã hướng dẫn các bạn hiển thị bài viết theo tùng nhãn cho tiện ích, tuy nhiên nếu bạn muốn hiển thị cho toàn bộ bài viết trên trang của bạn thì bạn thực hiện thêm bước sau

*Tìm đến tên nhãn trong code ở bước 3 SoftWare và bạn tiến hành xóa tên nhãn đi, lưu ý bạn phải xóa tên nhãn cùng với dấu "/-/" trước nó đi, nếu không nó sẽ không hiển thị được.

Ví dụ ban đầu ta có : http://baongocso1.blogspot.com/feeds/posts/default/-/Software

Sau khi xóa sẽ còn lại như bên dưới

http://baongocso1.blogspot.com/feeds/posts/default

Bạn cần thực hiện việc xóa này ở 3 vị trí có chứa tên nhãn (xóa tương tự như trên. Bạn cần phải cẩn thận xóa cho đúng, nếu không code sẽ bị lỗi.

*Một số lưu ý: với thủ thuật này tiện ích phân trang sẽ hiển thị ở phía trên đối với trinh duyệt Internet Exploer,và hiển thị phía dưới tiện ích đối với trình duyệt Mozilla Firefox

Chúc bạn thành công
Nguồn Traidatmui

Hiển thị bài viết giống trang dantri.com.vn

Hình ảnh minh họa
Hi&#7875;n th&#7883; b&agrave;i vi&#7871;tdantri.com.vn


1. Đăng nhập vào tài khoản blogger==>>Vào thiết kế, chọn chỉnh sửa HTML==>>Chèn code bên dưới vào sau thẻ

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.min.js"></script>

<script type="text/javascript">function Hovercat(q){$("#neocat-"+q+" ul.dpost").find("li").show()}
function Outcat(q){$("#neocat-"+q+" ul.dpost").find("li").hide();$("#neocat-"+q+" ul.dpost").find("li:eq(0)").show()}
</script>

2. Tiếp theo bạn chèn code css bên dưới vào trước thẻ ]]></b:skin>
Xem Code


.summerypost a {
color:#000099;
font-weight:bold;
}
.summerypost a:hover {
color:#403c3d;}

.summerypost {
font-size:12px;
color:#000;
font-family:arial;}

.readm a{
color:#1f2f56;
font-size:12px;
margin-right:10px;
margin-top:8px;}
.readm a:hover{
color:#766162;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#000066;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKa1Q7nyfwkkQ3x7wWUGudMO-skhEETEQSX0UNV7-ZY0BcRLWSo92LRAS4-qyMN3-Bl1rKiAYudwTdZDIXHf5mGdhz1aDXdiP7UQZCbUSoo4nzE1pt8qXM3MnTfYEIY8wDuayvKsieOQgJ/) no-repeat left;
padding-left:10px;}
.repost a:hover{
color:#bf9798;}

.tab {
font-size:13px;
padding:0px 5px 5px 5px;
width:550px; /*độ rộng của bài viết*/
}
.dpost a{
padding:0 2px;
font: 11px/22px Arial;
color:#000;
float:left;
height:20px;}

.dpost li{
float:left;
height:20px;
overflow:hidden;}

.dpost li.active{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2LFsLDuH6HQjtZN_-lOfSfc8hVFVHLqR4def878E4BKansSVaa3nR59Cl2DTls_R5J-bkQI3eOXiCA9xq3Ej5_dvMAko5VYHR2YmK12fVFEGWT1Kj8bzPBgh-rEMxodNDMqhBoT5Vd7b/) right no-repeat; /*màu nền của chủ đề chính */
position:relative;
top:1px;
}
.dpost li.active a{
font-size:10px;
font-weight:bold;
color:#fff;
text-transform:uppercase;
padding-right:25px;}

.iframpost{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GOBQal-AbNJNlZs8iT3JLt2ibE3xycWf0aY-ztGEuwDAs4aSA1oZ5T4sCpSAmSRJ9C8aKsF7wUwt0j3UbAGRIH-azb9-wBPBYAG1OcSa8-dUlqKIZ0EfbTw9nsWUrCb1VUKZApnZz3jS/) no-repeat; /*màu nền của tiện ích*/
height:25px;
}

*{margin:0;padding:0px 0px 0px 0px;}

3. Bây giờ bạn hãy save template lại.
4. Trở về phần tử trang, thêm 1 HTML/Javascript
5. Thêm code bên dưới vào HTML/Javascript vừa thêm ở trên.
Xem Code


<div class="tab" id="neocat-1" onmouseover="Hovercat('1')" onmouseout="Outcat('1')">

<div class="iframpost">
<ul class="dpost">
<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>
</div>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "";
bgTD = "";
imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 12 // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "no";

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE
poston = "Ngày đăng :";

summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 3; //số bài viết hiển thị trong phần bài viết liên quanlabel = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
</script>
<script src="http://traidatmui-tips.googlecode.com/files/dpost.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/related_dpost.js" type="text/javascript"></script>
</div>

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu Tím Đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu xanh).

6. Cuối cùng là save tiện ích lại
Nguồn Traidatmui

Hiển thị bài viết giống trang tin247.com

Hình ảnh minh họa thủ thuật(hiển thị giống trang tin247.com)
trangtin247

☼ Cách thực hiện thủ thuật:

1. Đầu tiên hãy đăng nhập vào tài khoản Blogger==>>Vào bố cục và thêm phần tử HTML/Javascript==>>Chèn đoạn mã bên dưới vào phần tử tiện ích trên
Xem Code


</table>
<style>
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota a {
color:#ff0000;
}
.mota:hover{
color:#ff0000;
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background: #33ccff;
padding: 5px;
left: -1000px;
border: 1px solid #ff9933;
visibility: hidden;
color:#000066;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 18px;
left:80px;
width:250px;
background:#ccc;
text-align: justify;
}


.summerypost a {
color:#ff0000;
font-weight:bold;
}
.summerypost a:hover {
color:#000066;}

.summerypost {
color:#000;
font-family:arial;}


.readm a{
color:#ff0000;}
.readm a:hover{
color:#006633;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#0066cc;}
.repost a:hover{
color:#ff0000;}


</style>
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://haimiennam.googlecode.com/files/no.png";

showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#ff0000";
bgTD = "";

imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb
imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 18; // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "#000";
titlecolor = "#f00";
aBold = true;
icon = "";
text = "Nhận Xét";
showPostDate = false; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSEposton = "Ngày đăng :";

minisummaryPost= 180; // số kí tự bạn muốn hiển thị cho phần tóm tắt bài viết
summaryPost = 360; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 8; //số bài viết hiển thị trong phần bài viết liên quan
sobaiviet = 10; //Số bài hiển thị "các bài khác từ chuyện mục"
label = "SoftWare";// Thay thành tên nhãn bài bạn muốn hiển thị
nhan= "SoftWare";//Nhãn hiển thị "các bài khác từ chuyện mục"
home_page = "http://baongocso1.blogspot.com/";//Thay thành địa chỉ blog của bạn

☼ Tùy Chỉnh:
+ Code màu xanh dùng để chỉnh sửa phần mô tả cho các bài viết liên quan khi rê chuột vào link
+ Code màu xám dùng để chỉnh sửa màu của text của bài viết tóm tắt
+ Code màu đỏ dùng để chỉnh sửa màu chữ phần bài viết liên quan

Bạn hãy dựa vào những chú thích trong code để chỉnh sữa màu chữ, màu nền, kích cỡ... cho phù hợp rồi save lại.
Chúc bạn thành công !
Nguồn Traidatmui

Tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ trên Blogspot

Hình ảnh minh họa
T&ugrave;y ch&#7881;nh ph&#7847;n b&agrave;i &#273;&#259;ng c&#361; h&#417;n


1. Đăng nhập tài khoản Blogger==>>Vào phần thiết kế (Design)==>>Chọn chỉnh sửa HTML (Edit HTML)==>>Chọn tiếp mở rộng tiện ích (Expand Widget Templates)

☼ Bây giờ bạn có thể chọn 1 trong hai tùy chọn bên dưới

A. Thay bài đăng cũ hơn, bài đăng mới hơn, trang chủ thành hình ảnh

a. Bạn tìm đến code bên dưới hoặc tương tự
Xem Code

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span></b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>

b. Thay code vừa tìm được thành code bên dưới

<!-- Phần "Bài đăng mới hơn"-->
<b:if cond='data:newerPageUrl'>
<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'><img src="Link ảnh bài đăng mới hơn"/></a>
</span></b:if>

<!-- Phần "Bài đăng cũ hơn"-->
<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'><img src="Link ảnh bài đăng cũ hơn"/></a>
</span></b:if>

<!-- Phần "Trang chủ"-->
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="Link ảnh trang chủ"/></a></div>

Bạn thay các link màu đỏ đậm trong code thành link của các ảnh bài đăng mới hơn, bài đăng cũ hơ, trang chủ tương ứng. Bạn có thể sử dụng các chương trình đồ họa để tạo các ảnh đó, nếu không tạo được bạn có thể sử dụng các ảnh bên dưới tạm



B. Xóa/Ẩn đi phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ

Bạn tìm đến code CSS bên dưới và thêm lệnh (display:none;) như bên dưới tùy bạn muốn ẩn phần nào.

/* Nếu muốn ẩn "Bài đăng mới hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-newer-link {
display:none;
float:left;
}
/* Nếu muốn ẩn "Bài đăng cũ hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-older-link {
display:none;
float:right;
}
/* Nếu muốn ẩn cả 3 phần thêm lệnh vào code như bên dưới*/
#blog-pager {
display:none;
text-align:center;
}

Sau khi chọn 1 trong 2 tùy chọn trên và thực hiện xong bạn save template lại

Chúc bạn thành công
Nguồn Traidatmui

Tiện ích bài viết liên quan cũ mới cùng chủ đề

Với tiện ích này thì khi người dùng xem một bài viết nào đó, nó sẽ hiển thị các viết cũ hơn hay bài viết mới hơn trong cùng một nhãn với bài viết đó. Ở đây chúng ta sẽ cho tiện ích này nằm ở cuối mỗi bài đăng trên blog, tiện ích này sẽ giúp người dùng có thể dễ dàng tìm kiếm các bài viết trong chủ đề mà họ đang quan tâm. Bạn có thể xem hình ảnh bên dưới để thấy các hiển thị của tiện ích này.
Hình ảnh minh họa
Ti&#7879;n &iacute;ch b&agrave;i vi&#7871;t li&ecirc;n quan c&#361; m&#7899;i c&ugrave;ng ch&#7911; &#273;&#7873;

1. Đăng nhập Blogger ==>> Vào thiết kế, chọn chỉnh sửa HTML==>>Chọn Mở rộng mẫu tiện ích (Expand Widget Templates). Chèn code css sau vào trước thẻ ]]></b:skin>
Xem Code

#related-posts-block {
margin:10px 5px;
font-size:10px;
color:#333; /*màu text của tiện ích*/
font-family:tahoma; /*font chữ của tiện ích*/
}
#related-posts-loading-text{
font-size:12px;
text-align:center;
color:#000099;}

#related-newest-href {
margin:10px 5px 0px 15px;
}
#related-newest-title {
font-size:12px; /*cỡ text của phần "Các bài viết mới cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066;/*màu chữ của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a:hover{
font-family:Arial, Helvetica, sans-serif;
color:#ff00ff;
}
#related-older-href {
margin:10px 5px 0px 15px;
list-style-type:none;
}
#related-older-title {
font-size:12px;/*cỡ text của phần "Các bài viết cũ cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
}
#related-posts-block #related-older-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
}
#related-posts-block #related-older-href a:hover{
color:#ff00ff;
}

2. Tiếp theo, bạn tìm đến dòng code bên dưới hoặc tương tự

<div class='post-footer-line post-footer-line-3'/>

3. Chèn code bên dưới vào ngay sau code vừa tìm được
Xem Code

<script type='text/javascript'>
//<![CDATA[
var showdate = true;//Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
var max_post = 8;//Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích
//]]>
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNetxM1E17FpI5RPR3fzJ27d4wfEg1xwWKF9hX-IOOkHn4KlVdivz0Dx_sOpicKoHBUXvkNWUSNff4Qd6Y4z7Y75tHpiscKfX-h3GI42NLiSP8SkX8kip3-z5BCwbb3sjCpzbDneqXVwpm/'/></div><div id='related-newest-href'><div id='related-newest-title'/></div><div id='related-older-href'><div id='related-older-title'/></div></div></b:if>
<script src='http://traidatmui-tips.googlecode.com/files/related_npost.js' type='text/javascript'/>

4. Cuối cùng save template lại.

Lưu ý: tên các "Nhãn" bài viết nên được đặt bằng tiếng Anh hoặc tiếng Việt không dấu để tránh bị lỗi.

Chúc bạn thành công
Nguồn: Traidatmui

Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery

1.Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code dưới đây vào trước thẻ ]]></b:skin>
Xem Code


<!--Bai viet hieu ung autoscroll Start-->
div.autoscroll {
background:#eee; //màu nền của tiện ích
color:#0000ff; //màu text của tiện ích
width: 300px; //độ rộng của tiện ích
position: relative;
overflow: hidden;
height: 425px; //chiều cao của tiện ích
border:3px solid #000000; //đường viền của tiện ích
}
.autoscroll a{
color:#0000ff; //màu tiêu đề bài viết
}
.autoscroll a:hover{
color:#ff0033; //màu tiêu đề bài viết khi rê chuột
}

div.autoscroll ul {
position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.autoscroll ul li {
margin-top: 3px;
padding-bottom: 2px;
border-bottom:1px solid #0000ff;
}
.autoimg{
float:left;
margin:3px 5px 0px 5px;
padding:2px;
border:1px solid #000000;}
<!--Bai viet hieu ung autoscroll End-->

2.Bạn chèn tiếp code bên dưới vào trước thẻ </head>

<script src="http://haimiennam.googlecode.com/files/jquery.min.js" type="text/javascript"></script><script src="http://haimiennam.googlecode.com/files/autoscroll.js" type="text/javascript"></script>

3.Save template lại và trở về phần tử trang
4.Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
Xem Code


<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://haimiennam.googlecode.com/files/no.png";

showRandomImg = true;
borderColor = "no";

imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //cở chữ của tiêu đề bài viết
dcmcolor = "#000033"; //màu text của phần ngày và nhận xét
dcmsize = "1"; //cở chử của phần ngày và nhận xét
acolor = "";
aBold = true;
icon = " » ";

text = "nhận xét"; //nếu không muốn hiển thị phần nhận xét bạn thay "Nhận xét" thành "no"
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thành FALSE


summaryPost = 100; // số kí tự phần tóm tắt nội dung bài viết
summaryFontsize = 12; //cỡ chữ phần tóm tắt
summaryColor = "#000"; //màu text phần tóm tắt
icon2 = " » ";

numposts = 15; //số bài viết hiển thị
label = "Marketing"; //tên nhãn bài viết
home_page = "http://baongocso1.blogspot.com/"; //thay thành địa chỉ blog của bạn

</script>
<div class="autoscroll">
<script src="http://haimiennam.googlecode.com/files/recent_post_autosroll.js" type="text/javascript"></script>
</div>

Bạn chỉ việc dựa vào các dòng hướng dẫn và thay đổi cho phù hợp với blog cuả bạn.

6. Save tiện ích lại

Nếu muốn hiển thị bài viết theo từng nhãn, bạn hãy thay file script (recent_post_autosroll.js) thành link bên dưới
http://haimiennam.googlecode.com/files/recent_label_autosroll.js

Chúc Các Bạn Thành Công !
Nguồn: http://www.traidatmui.com

Tiện ích Bài viết liên quan có ảnh đại diện

Ngoài tiện ích Bài viết liên quan có ảnh đại diện của Linkwithin, còn có tiện ích tương tự hiển thị các liên kết đến các bài viết liên quan kèm ảnh đại diện cho một bài viết thuộc một nhãn nào đó. Tiện ích này giúp cho người đọc dễ dàng tìm đến bài viết theo chủ đề và cũng giúp cho blog của bạn đẹp hơn.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau

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

Đặt đoạn code dưới đây vào trước thẻ .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.5em;
font-weight: bold;
color: blue;
font-family: Arial, Times New Roman, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://haimiennam.googlecode.com/files/no.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Xem Thêm&quot;;
</script>
<script src='http://haimiennam.googlecode.com/files/relaposts-thumbnails.js' type='text/javascript'/>
</b:if>


Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-3'> và đặt đoạn trước nó với đoạn code dưới đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>

Bạn có thể điều chỉnh số bài viết tối đa được hiển thị bằng cách thay con số trong dòng code
var maxresults=6;

Chúc Bạn Thành Công !
Nguồn:http://huynh-nhat-ha.blogspot.com

Tạo menu nhiều tab cho blogspot

Có nhiều kiểu menu trong thiết kế web và menu nhiều tab là một kiểu rất được ưa chuộng bởi vì nó giúp tiết kiệm không gian bố trí cho trang web. Bạn có thể dễ dàng thêm tab mới cho menu kiểu này.

Menu nhiều tab có thể được dùng cho blogspot.

Để tạo kiểu menu 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.

Đặt đoạn code dưới đây vào trước thẻ </head>.
Click để Ẩn/Hiện nội dung



<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}</style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\b' + this.classMain + '\b', 'gi');
this.REclassMainLive = new RegExp('\b' + this.classMainLive + '\b', 'gi');
this.REclassTab = new RegExp('\b' + this.classTab + '\b', 'gi');
this.REclassTabDefault = new RegExp('\b' + this.classTabDefault + '\b', 'gi');
this.REclassTabHide = new RegExp('\b' + this.classTabHide + '\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;


if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];


t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {


for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}


DOM_li = document.createElement("li");


t.li = DOM_li;


DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;


DOM_a.tabber = this;
DOM_a.tabberIndex = i;


if (this.addLinkId && this.linkIdFormat) {


aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9-]/gi, ''));

DOM_a.id = aId;
}


DOM_li.appendChild(DOM_a);


DOM_ul.appendChild(DOM_li);
}


e.insertBefore(DOM_ul, e.firstChild);


e.className = e.className.replace(this.REclassMain, this.classMainLive);


this.tabShow(defaultTab);


if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{


var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;


a.blur();


if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};


tabberObj.prototype.tabHideAll = function()
{
var i;


for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }


div = this.tabs[tabberIndex].div;


if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{


var div;

if (!this.tabs[tabberIndex]) { return false; }


this.tabHideAll();


div = this.tabs[tabberIndex].div;


div.className = div.className.replace(this.REclassTabHide, '');


this.navSetActive(tabberIndex);


if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = '';

return this;
};


function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }


tempObj = new tabberObj(tabberArgs);




divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {


if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {


tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}


/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>
<style type='text/css'>
.tabberlive{
margin:0;
padding:2px;
clear:both;
background:#EEEEEE;

}
.tabbernav {
margin:0;
padding: 0px 0;
border-bottom: 1px solid #ddd;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:4px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#14C6FC;
text-decoration:none;
color:#000000;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #DDD;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#ff0000;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>



Lưu Template.

Bước 2. Chọn Page Elements và Nhấp chọn Add a Gadget bên phần sidebar. Chọn HTML/JavaScript rồi đặt đoạn code dưới đây vào phần Content của tiện ích.

Click để Ẩn/Hiện nội dung


</div>
<div class='tabber'>

<div class='tabbertab section' id='tab1'>
<h2>Tiêu đề 1</h2>

Nội dung 1 / Code 1

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab2'>
<h2 class='title'>Tiêu đề 2</h2>

Nội dung 2 / Code 2

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab3'>
<h2 class='title'>Tiêu đề 3</h2>

Nội dung 3 / Code 3

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab4'>
<h2 class='title'>Tiêu đề 4</h2>

Nội dung 4 / Code 4

</div>
<div class='clear'></div>

</div>

Hiển thị widget chỉ ở trang chủ hoặc trang riêng biệt

Một khi bạn tạo một widget trên blog thì nó sẽ được hiển thị ở tất cả các trang theo mặc định, bao gồm cả trang chủ. Đôi khi bạn chỉ cần hiển thị một vài widget ở trang chủ hoặc chỉ ở một số trang hoặc thậm chí ở một trang riêng biệt nào đó. Thủ thuật này cũng khá đơn giản. Điều quan trọng là bạn phải nắm được id của widget mà bạn tạo ra.

Trường hợp 1: Hiển thị widget chỉ ở trang chủ: Tìm và thêm đoạn code được đánh dấu màu đỏmàu xanh như bên dưới.

<b:widget id='HTML10' locked='false' title='BLOGGER TIPS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Trường hợp 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "item"'>

Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "URL của trang riêng biệt"'>

Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "index"'>

Trường hợp 5: Chỉ hiển thị widget ở các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "archive"'>

Trường hợp 6: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType ! == "archive"'>

Trường hợp 7: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang bài viết: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType ! == "item"'>

Trường hợp 8: Chỉ hiển thị widget ở tất cả các trường hợp trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == data:blog.homepageUrl'>

Trường hợp 9: Chỉ hiển thị widget ở tất cả các trang trừ một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt"'>

Trường hợp 10: Chỉ hiển thị widget ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt 1"'>
<b:if cond='data:blog.url ! == "Url của trang đặc biệt 2"'>

Trường hợp 11: Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang: Bạn sử dụng lệnh điều kiện như thế này:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đây là điều cần hiển thị ở trang chủ
<b:else/>
Đây là điều không hiển thị ở trang chủ
</b:if>

*Các bạn xem thêm thủ thuật Ẩn các widget ở một trang nhất định tại đây

Những thủ thuật nhỏ này rất có ích trong việc xây dựng trang chủ cho blog của bạn.
Chúc Bạn Thành Công !

Nguồn http://huynh-nhat-ha.blogspot.com

Xóa/Ẩn đi phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ

Bạn tìm đến code CSS bên dưới và thêm lệnh (display:none;) như bên dưới tùy bạn muốn ẩn phần nào

* Nếu muốn ẩn "Bài đăng mới hơn" thêm lệnh vào code như bên dưới
#blog-pager-newer-link {
display:none;
float:left;
}
* Nếu muốn ẩn "Bài đăng cũ hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-older-link {
display:none;
float:right;
}
* Nếu muốn ẩn cả 3 phần thêm lệnh vào code như bên dưới*/
#blog-pager {
display:none;
text-align:center;
}
Chúc bạn thành công!
nguồn: TRAIDATMUI.com

Tùy biến với tiện ích Bài viết liên quan của Linkwithin

Bài viết liên quan có ảnh đại diện của LinkWithin thì cũng có rất nhiều người không thích tiện ích này ở chỗ nó luôn hiển thị liên kết LinkWithin (quảng cáo về tiện ích này) và không thể điều chỉnh dòng chữ “You might also like:”.

Dù sao đi nữa tiện ích này cũng có những điểm mạnh về một phương diện nào đó và tất nhiên cũng có nhiều blogger thích nó. Phải chăng không có cách nào làm cho nó hoàn thiện hơn? Làm thế nào để nó được yêu thích hơn? Chỉ có một cách là làm biến mất những thứ “râu ria” khó chịu trên nó.

Vào Design >> Edit HTML chọn Expand Widget Templates.
Dùng tổ hợp phím Ctrl +F tìm từ khóa title='LinkWithin' rồi thêm vào đoạn code liên quan đến nó như sau (phần được đánh dấu màu đỏ là phần thêm vào, id của HTML sẽ khác đối với blog của bạn).

<b:widget id='HTML3' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>

*Ẩn dòng “You might also like:” và liên kết LinkWithin:

Đây là một minh họa hình ảnh tiện ích chưa được ẩn những phần nói trên.
Linkwithin
Để ẩn đi những phần nói trên thì đặt đoạn code dưới đây vào sau dòng ]]></b:skin>
<style type='text/css'>
#linkwithin_logolink_0, #linkwithin_text_0 {display:none!important; visibility: hidden!important;}
</style>

*Thêm tiêu đề cho tiện ích“Bạn có thể xêm thêm”:
Tìm đến những dòng code như bên dưới và thêm vào những phần được đánh dấu màu đỏ.
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div style='padding-top:5px;color:blue;font-family:Arial;font-size:14px;'>
<h2>Bạn có thể xêm thêm</h2></div>

</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Sau đó Lưu Template là OK.

*Chú ý: Bạn có thể không cần ẩn dòng “You might also like:” mà chỉ cần đổi tên nó thành “Bạn có thể xêm thêm” bằng cách và bổ sung thêm đoạn code dưới đây :

<script>linkwithin_text='Bạn cũng có thể xem thêm'</script>

linkwithin
Trong trường hợp có sử dụng Read more nếu không muốn các bài viết liên quan này xuất hiện ở trang chủ, có thể làm như sau:
Nhấn Chỉnh sửa tiện ích LinkWithin,thêm 2 đoạn code màu đỏ vào widget như dưới đây:

<b:if cond='data:blog.pageType == "item"'>
<script>linkwithin_text='B&#7841;n c&#361;ng có th&#7875; xem:'</script>
<script>
var linkwithin_site_id = 202810;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
</b:if>

Chúng ta copy toàn bộ code trên và chọn Design -> Edit HTML, đánh dấu chọn Expand Widget Templates và dán đoạn code đó ngay phía trên <div class='post-footer'>
Sau đó Lưu Template là OK.
Chúc bạn thành công!
Cám ơn http://www.thuthuatblog.comhttp://huynh-nhat-ha.blogspot.com đã cung cấp thủ thuật này

Tạo nút lên đầu trang và xuống cuối trang bằng Javascript

Hôm nay mình sẽ giơi thiệu đến các bạn thủ thuật để có thể giúp người dùng trên blog của bạn có thể linh hoạt và thao tác nhanh chóng khi muốn lên đầu trang hoặc xuống cuối trang. Vâng với thủ thuật này người dùng chỉ việc click vào nút lên đầu trang hoặc xuống cuối trang thì nó sẽ tự động nhảy đến đầu hoặc cuối trang một cách nhanh chóng. Thủ thuật này sử dụng Javascript và cách thực hiện cũng khá là đơn giản.
1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
#top-buttom_image {
position:fixed;
bottom:35px;
right:15px;
clip:inherit;
line-height:0em;
}

4. Tiếp đến bạn hãy tìm và thêm code bên dưới trước thẻ </body>
<div id='top-buttom_image'>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='0' src='http://farm4.static.flickr.com/3496/3463533286_ee8ffe62cd_o.gif'/></a><br/>
<a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='0' src='http://farm4.static.flickr.com/3583/3437500265_69cea7f1f2_o.gif'/></a></div>

Bạn có thể thay link ảnh (link màu đỏ) trên hoặc có thể giữ nguyên.

5. Cuối cùng là save template lại.

Chúc Bạn Thành Công
Nguồn: TRAIDATMUI.com

Ẩn hoặc xóa thanh Navbar

Thanh Navbar là 1 dạng thanh menu cho phép ta truy cập nhanh vào blogger, để thực và cho phép thực hiện nhanh những thao tác như : đăng bài, vào bảng điều khiển…
Navbar

I:Ẩn thanh Navbar:
☼ Để thực hiện thủ thuật này, các bạn thực hiện các bước sau:

1. Truy cập vào trang chủ của blogger.
2. Đăng nhập blog
3. Vào bố cục
4. Vào chỉnh sửa code HTML
5. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin> trong code của template:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

6. Save template.

II:Xóa hoàn toàn thanh Navbar:
☼ Để thực hiện thủ thuật này, các bạn thực hiện các bước sau:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Tìm đến dòng code và chèn vào trước nó đọan code bên dưới :

<!--
/*<body>*/
-->

4. Sau khi chọn save template, ngay lập tức 1 bảng thông báo sẽ hiển lên như bên dưới
Navbar
và các bạn chọn Delete Wigets để xóa nó đi.

Chúc Các Bạn Thành Công

Liệt kê tiêu đề bài viết mới nhất cho 1 nhãn

Nếu bạn chịu khó tìm kiếm trên Google thì sẽ tìm thấy một số bài viết hướng dẫn cách tạo widget bài viết mới nhất có ảnh thumbnail cho cả Blog và cho riêng 1 nhãn nào đó. Đôi khi bài viết mới nhất cho riêng 1 nhãn mà chỉ cần liệt kê tiêu đề bài viết cũng rất cần thiết. Thủ thuật sau đây sử dụng feed chuyên biệt theo 1 nhãn với định dạng JSON kết hợp Javascript. Nó giúp liệt kê tiêu đề những bài viết mới nhất cho 1 nhãn nào đó trên Blogger. Dưới đây là những bước cài đặt widget.
Li&#7879;t k&ecirc; ti&ecirc;u &#273;&#7873; b&agrave;i vi&#7871;t m&#7899;i nh&#7845;t cho 1 nh&atilde;n

1. Đăng nhập vào Blogger.

2. Vào Bảng điều khiển (Dashboard) >> Thêm tiện ích (Add A Gadget) >> Chọn HTML/Javascript .

3. Đặt tiêu đề cho widget của bạn. Dán đoạn code bên dưới vào phần nội dung của widget.
<!-- Recent Posts by Label Start -->
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;

}

}

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

document.write(item);
}

document.write('</ul>');
}
</script>
<script src="http://yourname.blogspot.com/feeds/posts/summary/-/Label name?max-results=postnumber&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End -->

4. Thay thế yourname bằng tên địa chỉ Blogger của bạn.

Thay Label name bằng tên nhãn cần hiển thị những bài viết mới nhất.

Thay Postnumber bằng số bài viết cần hiển thị, ví dụ: 5, 7, 10, … Nếu muốn hiển thị tất cả bài viết thì để là 500 (số tối đa cho widget này).

*Chú ý: Tiêu đề các bài viết được liệt kê có dấu chấm đầu dòng (dùng thẻ <ul>).
Nếu bạn muốn được liệt kê theo số thứ tự thì thay đoạn document.write('</ul>');bằng document.write('</ol>');
Chúc bạn thành công
Nguồn:http://huynh-nhat-ha.blogspot.com

Ẩn hoặc xóa liên kết Đăng ký: Đăng Nhận xét (Atom)

Truy cập vào Blogger Dashboard > Layout > edit HTML > Click vào ô check 'Expand Widgets Templates'.

Cách 1: Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm (dùng Ctrl + F) và xóa dòng <b:include name='feedLinks'/>.

Lưu Template và kiểm kết quả thử xem.

Cách 2: Đặt đoạn code bên dưới vào trước dòng ]]></b:skin>.
.posts-feeds, .feed-links {display:none !important;visibility:hidden !important}

Lưu Template. Kiểm tra kết quả đi nào.

Chỉnh sửa Footer của bài viết

Footer của bài viết có chứa tiện ích như : Người đăng, thờ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)
Customize the Post Footer
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&#8242;>
<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&#8242;>
<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.
Nguồn http://mothuthuat.com/

Loại bỏ khoảng trống khi ẩn phần date-header

- Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, nếu ẩn nó đi sẽ để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.
date-header

để làm ẩn nó bạn hãy thực hiện theo các bước sau đây:
Cách 1: Đăng nhập Blog >> Design(Thiết kế) >> phần tử trang,chọn "Chỉnh sửa" bài đăng trên blog rồi bạn bỏ check phần đó đi thế la ok

Cách 2:Đăng nhập Blog >> Design(Thiết kế) >> Edit HTML(Chỉnh Sửa HTML) và thêm dòng lệnh display:none; như bên dưới

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:
date-header

Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.
date-header

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất.vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra,bạn chỉ việc thêm đoạn code màu xanh vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

Chúc các bạn thành công.
Nguồn http://www.fandung.com

Tiện ích Bài viết liên quan có phân trang

Ti&#7879;n &iacute;ch B&agrave;i vi&#7871;t li&ecirc;n quan c&oacute; ph&acirc;n trang
Xem Demo.( ở cuối mỗi bài viết )

Để cài đặt tiện ích 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 dưới đây vào trước thẻ </head>
Xem Code


<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:blue;font-size:16px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0 4px 0;margin-top:4px;padding:0 0 5px}
#related-posts a{color:blue;text-decoration:none}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0 0;padding:0;text-decoration:bold;font-size:13px;text-color:#000000}
#related-posts ul li{display:block;background:url(&quot;http://haimiennam.googlecode.com/files/icon.gif&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
.related-posts-navi a{border:1px solid #3366CC;background:#fff;color:#3366CC;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none}
.related-posts-navi a:hover{background:#3366cc;color:#ffffff;text-decoration:none}
.related-posts-navi .related-posts-navi-selected{background:#3366cc;color:#ffffff}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->

Chú ý trong phần code ở trên, tôi thêm vào đoạn javascript được đánh dấu màu đỏ nhằm giúp cho thư viện jQuery không xung đột với các thư viện khác (nếu blog của bạn chứa các thư viện khác như Scriptaculous chẳng hạn), bởi vì nếu xảy ra sự xung đột thì chức năng phân trang sẽ không hoạt động được.

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='related-posts'/>
</b:if>

Bước 3. Tìm dòng <b:includable id='feedLinksBody' var='links'>
rồi đặt trước nó với đoạn code sau đây.
Xem Code


<b:includable id='related-posts' var='post'>

<div id='related-posts'>
<h2>Bài viết liên quan</h2>
<ul id='related-posts-list'/>
</div>
<script type='text/javascript'>
var relatedPostsConfig = {
maxPosts: 500,
perLabel: 100,
perPage: 5,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]
};

function getRelatedPosts(json) {
var posts = [],
num = 0,
max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count &gt; json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded

if (max &lt;= 0) {
return;
}

for (var i = 0; i &lt; max; i++) {
entry = json.feed.entry[i];

posts[num] = {};
posts[num].title = entry.title.$t;
for (var j = 0; j &lt; entry.link.length; j++) {
if (entry.link[j].rel == &quot;alternate&quot;) {
posts[num].url = entry.link[j].href;
break
}
}
num++;
}

relatedPostsConfig.count += max;

for (i = 0; i &lt; num; i++) {
var li = document.createElement(&quot;li&quot;),
a = document.createElement(&quot;a&quot;);
a.href = posts[i].url;
a.title = posts[i].title;
a.appendChild(document.createTextNode(posts[i].title));
if (a.href != location.href) {
li.appendChild(a);
relatedPostsConfig.container.appendChild(li);
}
}
}

(function() {
var obj = {};
for(var i = 0; i &lt; relatedPostsConfig.hiddenLabel.length; i++) {
obj[relatedPostsConfig.hiddenLabel[i]] = &#39;&#39;;
}

relatedPostsConfig.count = 0;
relatedPostsConfig.container = document.getElementById(&quot;related-posts-list&quot;);
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
if (!(&#39;<data:label.name/>&#39; in obj)) {
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;/feeds/posts/summary/-/&#39;+&#39;<data:label.name/>&#39;+&#39;?alt=json-in-script&amp;callback=getRelatedPosts&amp;max-results=&#39;+relatedPostsConfig.perLabel+&#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
}
</b:loop>
</b:loop>
})();

$(function(){
var pages = 1;
while ($(&#39;#related-posts-list &gt; li&#39;).length) {
var $ul = $(&#39;&lt;ul/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
$(&#39;#related-posts-list &gt; li:lt(&#39;+relatedPostsConfig.perPage+&#39;)&#39;).appendTo($ul);
pages++;
}
$(&#39;#related-posts &gt; ul:gt(1)&#39;).hide();
var $div = $(&#39;&lt;div class=&quot;related-posts-navi&quot;/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
for (var i = 1; i &lt; pages; i++) {
var $a = $(&#39;&lt;a id=&quot;related-posts-page-&#39; + i + &#39;&quot; href=&quot;#&quot;/&gt;&#39;).click(function(){
var id = $(this).attr(&#39;id&#39;).substr(19);
$(&#39;#related-posts &gt; ul&#39;).hide();
$(&#39;#related-posts &gt; ul:eq(&#39; + id + &#39;)&#39;).show();

// change class
$(&#39;.related-posts-navi &gt; a&#39;).removeClass(&#39;related-posts-navi-selected&#39;);
$(this).addClass(&#39;related-posts-navi-selected&#39;);
return false;
}).append(i).appendTo($div);
}
$(&#39;.related-posts-navi &gt; a:first&#39;).addClass(&#39;related-posts-navi-selected&#39;);
$(&#39;&lt;div style=&quot;clear:both&quot; /&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
});
</script>
</b:includable>

Lưu Template là OK.

*Chú ý: Trong đoạn code trên, bạn có thể thay đổi những tham số trong những dòng sau đây:

maxPosts: 500,
perLabel: 100,
perPage: 5,
hiddenLabel:
[&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]

Trong đó:
- maxPosts: chỉ số lượng bài viết liên quan (tối đa) được hiển thị
- perLabel: chỉ số lượng bài viết liên quan (tối đa) tính theo mỗi label
- perPage: chỉ số lượng bài viết liên quan được liệt kê trong 1 trang
- hiddenLabel: danh sách các label không hiển thị, phân cách bằng dấu phẩy. hiddenLabel được dùng khi bài viết của bạn có nhiều label, trong đó có 1 số label đặc biệt mà bạn không muốn liệt kê các bài viết liên quan nằm trong đó (VD 'Thông báo', 'Tổng hợp', ...). Khi đó bạn chỉ cần liệt kê các label dạng này vào biến hiddenLabel là xong. Nếu muốn hiển thị tất cả các label (không ẩn label) nào thì khai báo: hiddenLabel: []

Chúc bạn thành công!
Nguồn http://huynh-nhat-ha.blogspot.com

Ẩn các widget ở một trang nhất định

Việc thao tác trên các widget của blogspot cũng rất quan trọng, đặc biệt khi bạn có nhiều tiện ích trên blog. Hôm nay mình hướng dẫn bạn cách để ẩn một số widget cho một bài viết, một nhãn hay một trang nhất định nào đó. Trước đây thì mình đã giới thiệu bạn cách hiển thị bài viết ở một trang nhất định, tuy nhiên để ẩn các widget khác ở trên cùng trang này thì bạn cần đến thủ thuật này, bạn có thể kết hợp 2 thủ thuật này để tạo một trang riêng trên blog của mình.

1. Đăng nhập và vào phần thiết kế
Để ẩn được widget bạn cần xác định được ID của widget đó, ID của widget sẽ hiển thị trên thanh địa chỉ khi bạn click Chỉnh sửa (Edit) widget đó.

Sau khi xác định được ID của widget đó, bạn muốn ẩn widget này (ở đây mình ví dụ là ẩn widget có ID là HTML12) bạn làm như sau:

2. Bây giờ bạn nhấn chỉnh sửa HTML (Edit HTML)
3. Tìm đến thẻ đóng </head> và thêm vào trước nó một trong các code tùy chọn bên dưới.

A. Ẩn widget ở các trang bài viết
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#HTML12 {display:none;}
</b:if>
</style>

B. Ẩn widget ở trang chủ
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#HTML12 {display:none;}
</b:if>
</style>

C. Ẩn widget ở trang nhãn
<style type='text/css'>
<b:if cond='data:blog.url == "http://baongocso1.blogspot.com/search/label/Advanced blogger"'>
#HTML12 {display:none;}
</b:if>
</style>

Bạn hãy thay dòng màu xanh thành địa chỉ bài viết của bạn.

D. Ẩn widget ở trang nhất định
<style type='text/css'>
<b:if cond='data:blog.url == "http://baongocso1.blogspot.com/2010/03/hien-thi-widget-o-nhung-trang-nhat-inh.html"'>
#HTML12 {display:none;}
</b:if>
</style>

Bạn thay link màu đỏ thành link mà bạn muốn ẩn widget.

Ở trên mình chỉ ví dụ là ẩn 1 widget, nếu bạn muốn ẩn nhiều widget ở một trang nào đó bạn thêm ID của widget đó sau dòng #HTML12, ví dụ mình muốn ẩn 3 widget (HTML13, HTML18, HTML20) ở các trang bài viết, mình thêm như bên dưới.


<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#HTML12 {display:none;}
#HTML13 {display:none;}
#HTML18 {display:none;}
#HTML20 {display:none;}
</b:if>
</style>

4. Cuối cùng save template lại.

Ở đây bạn có thể ẩn bất kì wiget nào nếu bạn xác định đúng ID của nó.

☼ Mở rộng thêm thủ thuật

Ở trên là chúng ta thực hiện việc ẩn các Widget, đôi khi bạn thực hiện một số thủ thuật ở trang nhãn hay một trang nhất định nào đó và muốn cho bài viết ở trang đó ẩn đi (chỉ còn lại phần widget) thì bạn chỉ việc thay ID HTML trên thành Blog1 như bên dưới và làm tương tự như trên.

<style type='text/css'>
<b:if cond='data:blog.url == "http://baongocso1.blogspot.com/2010/03/hien-thi-widget-o-nhung-trang-nhat-inh.html"'>
#Blog1 {display:none;}
</b:if>
</style>

*Các bạn xem thêm Thủ thuật Hiển thị widget chỉ ở trang chủ hoặc trang riêng biệt tại đây
Chúc bạn thành công
Nguồn: TRAIDATMUI.com

Ẩn bài viết ở trang chủ

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1". (xem trong code template (mở rộng mẫu tiện ích))
Xem hình họa :
an bai trang chu

Sau khi xác định đc id này, ta thực hiện các bước sau:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

#Blog1 {
display:none;
visibility:hidden;
}

</b:if>
</style>


4. save template.

Các bạn xem thêm ẩn các Wigth ở trang nhất định tại đây
 
© 1999 – 2009 Google - Xem Blog tốt nhất với trình duyệt FireFoxOpera
Based on Arthemia at Blogger Templates Designs and 3 Column Minima at Free Blogger Templates | Designer : ĐinhThiênHoàn
Y!M : haimiennam | Mail : admin@dinhthienhoan.com