Siêu Cọp Blogs

Thứ Tư, 3 tháng 7, 2013 | 04:34

Với
việc hỗ trợ HTML và JavaScript đầy đủ, Blogger cho phép người dùng
thoải mái sử dụng một trình chơi nhạc tùy thích trên blog của mình mà
không bị giới hạn như Yahoo! 360plus hay một số nền blog miễn phí khác.

Còn nhớ cách đây khá lâu TTB đã giới thiệu công cụ chơi mp3 của del.ico.us
(Dịch vụ ghi nhớ trang ưa thích trước đây đã được Yahoo mua lại, tuy
nhiên giờ đã bán cho đồng sáng lập Youtube Chad Hurley và Steve Chen)
nhưng dịch vụ này chỉ cho phép sử dụng các bài hát có định dạng mp3.

Yahoo! cũng có một công cụ chơi nhạc khác hỗ trợ định dạng âm thanh mp3 và video từ Yahoo! Movie lẫn YouTube.

Bạn có thể làm các bước sau đây để sử dụng trên blog mình:

Bước 1. Chèn đoạn JavaScript sau đây trước thẻ </body> (Đăng nhập Blogger, chọn Thiết kế | Chỉnh sửa HTML, nhấn Ctrl + F để tìm):

Code:: <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

Bước 2. Lấy link bài hát và tạo các liên kết như dưới đây:

Code:: <a href="http://mediaplayer.yahoo.com/example3.mp3">Yodel (mp3 link)</a> <a href="http://movies.yahoo.com/movie/1810096458/info">Tron (Yahoo! Movie link)</a> <a href="http://www.youtube.com/watch?v=i56XeM0-b8Y">Zoetrope (YouTube link)</a>

Từ giao diện kéo thả của Blogger, tạo một tiện ích HTML/JavaScript mới, dán các liên kết như trên vào và lưu lại.

Cách khác, bạn có thể gom 2 đoạn code ở bước 1 và 2 cùng dán vào HTML/JavaScript hoặc dán vào một bài viết cụ thể.

Bước 3. Thưởng thức!

Đọc tiếp...

Xem bài viết trên phiên bản di động

Thứ Hai, 1 tháng 7, 2013 | 07:22

Thủ thuật: Chèn Emoticons vào comment
Nguồn: duypham

Giới thiệu: Khung Đăng Nhận xét của blogspot là một trang riêng được chèn vào blog thông qua thẻ iframe, và Google không cho ta quyền can thiệp vào khung “Đăng nhận xét” này. Đó là lý do mà không đưa được bộ gõ riêng cũng như emoticons vào khung “Đăng nhận xét”.

Với bộ gõ thì dường như không thể, cho đến khi nào Google tích hợp thêm vào. Còn với Emoticons thì thật may là có hàm replace, sử dụng hàm này để thay đổi ký tự thành hình ảnh. Và như thế Blogspot đã có Emoticons, cho dù việc nhập Emoticons vẫn không thể theo kiểu click.

Đặc biệt: Hiển thị tốt trên cả IE (Internet Explorer).

CÁCH THỰC HIỆN 1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
4. Chèn script

Bước 1: Tìm thẻ đóng </body>

- Thêm vào trước nó đoạn code sau:

<!-- Emotion comment (1) -->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;

theText = theText.replace(/KÍTỰ.1/gi, "<img src='LINK_HÌNH'/>");
theText = theText.replace(/KÍTỰ.2/gi, "<img src='LINK_HÌNH'/>");
...
theText = theText.replace(/KÍTỰ.N/gi, "<img src='LINK_HÌNH'/>");

bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

KÍTỰ // Đặt kí tự tắt cho Emoticon. Ví dụ như: :cuoi, :) , :D ,…
LINK_HÌNH // Thay Link hình Emoticon của bạn vào đây.

Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + ^ $ : thì phải thêm kí tự \ trước nó.
Với ký tự < : Phải đổi thành <
Với ký tự > : Phải đổi thành >
Với ký tự & : Phải đổi thành &

Ví dụ:

:)) thành :\)\)
:-/ thành :-\/
>:D< thành >:D<

Với những ký tự tắt bao gồm như nhau như :)) và :)
Thì bạn phải đặt :)) lên trước dòng :)

Nếu không làm vậy thì chỉ ký tự ít hơn được hiện lên. Và không hiện được kí tự kia.

Bước 2: Tìm dòng <b:loop values='data:post.comments' var='comment'>

- Thêm vào trước nó thẻ <div id='emocomments'>

- Tìm tiếp ở đoạn code này thẻ đóng </b:loop>

- Thêm vào sau nó thẻ đóng </div>

Bước 3: Bước này là để hiển thị khung hình Emoticon ở khung nhận xét.

- Tìm đến thẻ <data:blogTeamBlogMessage/>

- Đôi khi có tên là <data:blogCommentMessage/>

- Thêm vào sau nó đoạn code sau:

<!-- Emotion comment (2)-->
<script type="text/javascript"> 
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">                    Thu gọn </a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">                    Xem thêm </a>';
}
//]]>
</script>


<!-- Dòng hiện vài Emoticon mẫu khi chưa bấm “Xem thêm” -->
<div class='emoticons'>
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 


<!-- Khung hiện đầy đủ các Emoticons khi bấm “Xem thêm” -->
<span id='smiley-more' style='display: none;'>
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.1
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.2
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.N  

</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()"> Xem thêm </a></span>
</div>

- Thay LINK_HÌNH thành link hình Emoticon của bạn vào đây.

- CHÚ-THÍCH_KÍTỰ // Hiện chú thích kí tự khi bạn rê chuột lên ảnh.

- KÍTỰ // Chữ kế bên Emoticons. Kí tự nào là tùy bạn đặt cho Emoticons.

* Ngoài ra, thay vì dùng đoạn code ở bước 3, bạn cũng có thể dùng đoạn code sau:

(Cách thức cũng giống nhau, nhưng có hơi chút khác biệt về giao diện.)

<!-- Emotion comment (2)-->
<script type='text/javascript'> 
//<![CDATA[ 
if(typeof(rnd) == 'undefined') var rnd = ''; 
rnd = Math.floor(Math.random()*1000); 
rnd = 'id-' + rnd; 
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="text-decoration : none;float:left;margin-right:2px;">'); 
//]]> 
</script> 


<!-- Dòng hiện vài Emoticon mẫu khi chưa bấm [▼/▲] -->
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>  <b>[▼/▲]</b> 


<script type='text/javascript'>
//<![CDATA[ 
document.write('</a>'); 
//]]> 
</script>
<br/>
<br/>

<!-- Khung hướng dẫn chèn Emoticons Comment
**Có thể bỏ đi nếu không cần**-->
<div style='border:#4F4F4F 1px dashed; padding: 4px; background:#FFFF96;'>
<b>Chèn thêm Emoticons vào nhận xét: </b>
<br/>
<span style='color: #3366ff; font-family: Verdana; font-size: 10pt;'>Rê chuột lên Emoticons để thấy các kí hiệu tương ứng!</span>
<br/></div>


<script type='text/javascript'> 
//<![CDATA[ 
document.write('<div id="' + rnd + '" style="display:none;">'); 
//]]>
</script>


<div style='text-align: left; border: 1px solid #cccccc; padding:4px; background:#affdd3;'>

<!-- Khung hiện đầy đủ các Emoticons khi bấm [▼/▲] -->
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.1
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.2
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.N  

</div>
<script type='text/javascript'>
//<![CDATA[ 
document.write('</div>'); 
//]]> 
</script>

Bước 4: Save template. (Lưu mẫu)

Đọc tiếp...

Xem bài viết trên phiên bản di động

07:16

Bình luận về Google+

Google+ nhận xét là một thay thế cho các hệ thống bình luận mặc định trên Blogger, có sẵn với blog của tác giả, những người đã nâng cấp hồ sơ Blogger của họ với Google+. Bình luận Google+ cho phép bạn đưa các cuộc đàm thoại sau đây cùng nhau trong một nơi, ngay dưới bài đăng blog của bạn:

Những lời bình luận trên bài viết trên blog Blogger của bạn
Nhận xét về các bài đăng blog mà bạn đã chia sẻ lên Google+
Nội dung được chia sẻ trên Google+ mà liên kết đến bài viết trên blog của bạn

Người đọc sẽ cần một trang Google+ hoặc hồ sơ nhận xét trên blog của bạn.

Bắt đầu: Click vào Google+ tab trên blog của bạn và đánh dấu vào ô để cho phép nhận xét Google+.Lưu ý rằng bạn phải kết nối blog của bạn với Google+ cho tùy chọn này sẽ được hiển thị.

Các tính năng của Bình luận Google+

Google+ nhận xét trông giống như ý kiến Blogger truyền thống, nhưng có một số khác biệt quan trọng. Ví dụ:

Khi bạn để lại một bình luận trên một blog, bạn sẽ thấy các tùy chọn, kiểm tra theo mặc định, cũng chia sẻ rằng bình luận cho Google+.
Bài viết Google+ liên kết với blog của bài viết sẽ hiển thị như một bình luận bên dưới các bài đăng trên blog
Nếu nhận xét ban đầu được chia sẻ với Google+, trả lời cho những nhận xét trên blog sẽ hiển thị trong Google+ và ngược lại, nhưng chỉ với những người mà nhận xét ban đầu đã được chia sẻ với
Nếu một lời nhận xét không được chia sẻ với tác giả blog, tác giả blog sẽ không thể nhìn thấy những nhận xét trong hai vị trí
Là tác giả của một bài viết, bạn sẽ nhận được thông báo Google+ khi người đọc nhận xét về hoặc chia sẻ bài viết trên blog của bạn.

Một Comment Google+ theo một bài đăng blog

Những nhận xét tương tự trong Google+

Thay đổi URL blog của bạn sẽ gây ra hiện Google+ Bình luận biến mất. Nếu bạn đang xem xét chuyển tới / từ một tên miền tùy chỉnh hoặc thay đổi URL blog của bạn, bạn nên làm trước khi bạn bật Google+ Bình luận.

Ví dụ về Google+ ý kiến trong hành động

Hãy nói rằng Jeral có một blog du lịch, và đã liên kết tiểu sử trên Google+ của mình vào blog của mình.Ông luôn luôn chia sẻ bài viết của mình để Google+ sau khi xuất bản chúng lên blog của mình, và phản ứng với ý kiến độc giả cả trên blog của mình, và trên Google+. Jeral cũng đôi khi đi qua bài đăng công khai trên Google+ mà độc giả đã liên kết đến và nhận xét về một bài viết trên blog của mình. Trong ví dụ này, phản ứng với bài viết của mình nằm rải rác khắp nơi trên internet.

Nếu Jeral cho phép Google+ Bình luận trên blog của mình, tất cả các ý kiến trên Google+ liên kết đến bài viết trên blog của mình cũng sẽ xuất hiện bên dưới bài. Jeral có thể trả lời ý kiến từ một trong hai blog của mình hoặc từ Google+, cứu anh ấy thời gian quý báu.

Vòng tròn vẫn áp dụng cho một bài Google+ hoặc bình luận khi nó xuất hiện trên Blogger - vì vậy nếu Sue nhận xét về Google+ bài Jeral và chỉ chia sẻ những nhận xét với vòng tròn gia đình của mình, nhận xét rằng hiện trên blog Jeral cũng sẽ chỉ được hiển thị cho gia đình của Sue vòng tròn. Jeral sẽ không thể xem bình luận tin của Sue, nhưng các thành viên gia đình của cô sẽ nhìn thấy nó khi họ truy cập vào blog của Jeral.

Đọc tiếp...

Xem bài viết trên phiên bản di động

07:13

Mình mới sưu tầm trên mạng được Code popup nhảy ra của sổ nhỏ ở góc màn hình khá hay, ngắn gọn dễ hiểu , share với mọi người để phát triển web, vì nhảy ra nhỏ ở góc màn hình nên đỡ gây phản cảm cho khách

function addEvent(obj, eventName, func){
if (obj.attachEvent)
{
obj.attachEvent("on" + eventName, func);
}
else if(obj.addEventListener)
{
obj.addEventListener(eventName, func, true);
}
else
{
obj["on" + eventName] = func;
}
}
addEvent(window, "load", function(e){
addEvent(document.body, "click", function(e)
{
// -------------- Cấu hình chung cho popup --------------------
var params = 'height='+1+',width=' +1+ ',left=9999,top=9999,location=0,toolbar=0,status=0,menubar=0,scrollbars=0,resizable=0';
// -------------- popup 1 --------------------
if(document.cookie.indexOf("popup") == -1)
{
document.cookie = "popunder=popup";
var w = window.open("http://www.vietblogger.net/2012/11/truyen-tien-hiep-hay-nhat-prc.html",'popup', params);
if (w)
{
document.cookie = "popunder=popup";
w.blur();
}
window.focus();
}
/*
// -------------- popup 2 --------------------
if(document.cookie.indexOf("adf") == -1)
{
var w = window.open("http://wap-gamevn.blogspot.com/2013/01/sms-kute-chuc-tet-nam-moi-2013.html",'adf', params);
if (w)
{
document.cookie = "popunder1=adf";
w.blur();
}
window.focus();
}

});
});

Giờ các bạn chỉ cần lưu lại với file .js và up lên host sau đó vào Template thêm trước thẻ </body>

<script src='Link file .js của bạn' type='text/javascript'/>

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

Đọc tiếp...

Xem bài viết trên phiên bản di động

07:05

Một vài bạn có pm hỏi mình code hiện quảng cáo 2 bên của blog mà không trượt theo khi mình di chuyển xuống phía dưới. Demo thì giống cái background của blog http://www.vietblogger.net

Các bạn chỉ cần copy và paste code vào 1 Gadget - HTML/JavaScript

Share code quảng cáo 2 bên không trượt

<style>
#left_ads_float
{
bottom:24px;
left:0px;
position:fixed; }
#right_ads_float
{
bottom:24px;
right:0px;
position:fixed;
}
</style>
<script>
var vtlai_remove_fads=false;
function vtlai_check_adswidth()
{
if(vtlai_remove_fads)
{
document.getElementById('left_ads_float').style.display='none';
document.getElementById('right_ads_float').style.display='none';
return;
}else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)
{
vtlai_remove_fads=true;
vtlai_check_adswidth();
return;
}
else
{
var lwidth=parseInt(document.body.clientWidth);
if(lwidth<1110)
{
document.getElementById('left_ads_float').style.display='none';
document.getElementById('right_ads_float').style.display='none';
}
else
{
document.getElementById('left_ads_float').style.display='block';
document.getElementById('right_ads_float').style.display='block';
}
setTimeout('vtlai_check_adswidth()',10);
}
}
</script>
<div id="left_ads_float">

<a href="Link đường dẫn" target="_blank"><img border="0" src="Link hình ảnh bên trái" width="120"></a>
</div>
<div id="right_ads_float">
<a href="Link đường dẫn" target="_blank"><img border="0" src="Link hình ảnh bên phải" width="120"></a>
</div>

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

Đọc tiếp...

Xem bài viết trên phiên bản di động

07:03

Trên mạng có khá nhiều trang web giúp chúng ta tạo một chatbox đơn giản và quan trọng là Free nữa chứ, nhân tiện mới làm cái chatbox cho Blog Chia Sẻ & Giải Trí, mình sẽ chia sẻ cùng các bạn cách tạo chatbox trên http://cbox.ws

Truy cập http://cbox.ws và tạo một tài khoản Free, tại mục Account chọn Publish để lây code.
Your website : Địa chỉ trang mà bạn định tạo chatbox

Allow access only at this address : đánh dấu tích ở đây thì Chatbox chỉ có tác dụng trên địa chỉ bạn đăng ký

Enable Quick Link : link nhanh truy cập log chat

Sau đó các bạn thực hiện theo 3 bước của Cbox sau đó lấy code và post vào 1 Widget của blogspot là OK

Nào cùng tham gia chém gió cùng mình nhé !

Đọc tiếp...

Xem bài viết trên phiên bản di động

06:56

Form comment facebook đã có từ lâu nhưng thường hay bị chặn bởi các nhà mạng lên thường làm chậm tốc độ load của blog , website của bạn.

Nhưng giờ việc chặn Facebook đã được khắc phục lên việc thêm Form Comment Facebook sẽ làm tăng tính tương tác cho website, blog của bạn.

Vì ai cũng có thể biết được là Facebook là một cộng đồng vô cùng lớn, là mảnh đất màu mỡ để các bạn có thể chia sẻ những bài viết hay .

Sau bài này các bạn có thể xem DEMO ngay tại Blog

Dưới đây là cách chèn song song cả 2 form comment của Blogspot và Facebook :

Bước 1: Template---> Edit HTML---> Expand Widget Templates .

thêm code sau trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="620"></div>';
//]]>
</script>

data-num-post=5 : số comment hiển thị
data-width=620 chiều rộng khung comment

Bước 2 : thêm code sau vào sau thẻ <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bước 3 : tìm đoạn code sau <b:include data='post' name='post'/>
Chèn vào sau nó đoạn code

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

Save Template và xem kết quả
Nguồn Sưu Tầm

Đọc tiếp...

Xem bài viết trên phiên bản di động

Thứ Bảy, 22 tháng 6, 2013 | 21:05

Chúng ta bắt gặp đâu đó những blog mà ở trang chủ bài đăng mới nhất có mầu nền khác biệt so với những bài đăng còn lại. Việc làm này phần nào gây sự chú ý cho độc giả đối với bài đăng đó.

Hôm nay mình sẽ hướng dẫn các bạn tạo mầu nền riêng cho bài đăng mới nhất trong Blogger.

Bước 1: Tạo id first-post quy định mầu nền cho bài đăng mới nhất. Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#first-post{background:#DDD}

Bước 2: Tìm thẻ <b:include data='post' name='post'/> và thay thế nó bằng đoạn mã dưới đây.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <div id='first-post'>
   <b:include data='post' name='post'/>
  </div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

Thủ thuật trên thêm thuộc tính background là mầu nền với giá trị #DDD, tùy vào từng template mà bạn thay đổi cho phù hợp.

Bạn có thể thêm những thuộc tính khác cho id first-post để bài đăng mới nhất có nhiều sự khác biệt hơn.

Đọc tiếp...

Xem bài viết trên phiên bản di động

21:03

Chắc hẳn bạn nào đam mê thiết kế blog dưới nền tảng của blogspot đều biết đến blog VNBlogspot.Com của bác Tiến Nguyễn. Không biết mọi người thế nào chứ mình rất "mê" cái style của blog này, kể cả một trong số những thứ đơn giản như nút Lên Trên của VNBlogspot. Tuy nút Lên Trên này rất đơn giản nhưng hiệu ứng của nó thật mềm mại và bắt mắt. Và mình xin phép chia sẻ đến bạn đọc cách thêm nút Lên Trên của bác Tiến Nguyễn

Cách Thêm Nút Lên Trên Vào Blog

Đơn giản bạn chỉ việc tạo một widget HTML và dán code sau vào phần nội dung sau đó lưu lại là hoàn thành thủ thuật

<style type="text/css">
#toTop {display: none;text-decoration: none;position: fixed;bottom: 10px;right: 10px;overflow: hidden;width: 30px;height: 30px;border: none;text-indent: -999px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkyrMYkLw4sUODMqwFy-YPStAqhd955H4i-1JWALbb5FIECD6CBPNdt4NjTBEVXqebRreZuEJj8KMN3PvAVmJEXi4PClgD7tIifibnfDEUpI8_ZJklpiNNe7_qcPm7HQ0vXuH1btYZ2KU/s1600/go_top.gif) no-repeat left top;
}
#toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkyrMYkLw4sUODMqwFy-YPStAqhd955H4i-1JWALbb5FIECD6CBPNdt4NjTBEVXqebRreZuEJj8KMN3PvAVmJEXi4PClgD7tIifibnfDEUpI8_ZJklpiNNe7_qcPm7HQ0vXuH1btYZ2KU/s1600/go_top.gif) no-repeat left -30px;width:30px;height:30px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {outline:none;}
</style>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3($){$.A.t=3(p){5 o={l:\'J D\',q:P,g:n,B:C,c:\'F\',9:\'M\',k:w,8:\'d\'};5 2=$.E(o,p);5 4=\'#\'+2.c;5 e=\'#\'+2.9;$(\'f\').O(\'<a R="#" m="\'+2.c+\'">\'+2.l+\'</a>\');$(4).x().y(3(){$(\'z, f\').7({h:0},2.k,2.8);$(\'#\'+2.9,i).b().7({\'j\':0},2.g,2.8);G H}).I(\'<s m="\'+2.9+\'"></s>\').K(3(){$(e,i).b().7({\'j\':1},n,\'d\')},3(){$(e,i).b().7({\'j\':0},L,\'d\')});$(6).N(3(){5 u=$(6).h();v(Q r.f.S.T==="U"){$(4).V({\'W\':\'X\',\'Y\':$(6).h()+$(6).Z()-10})}v(u>2.q)$(4).11(2.g);12 $(4).13(2.14)})}})(15);$(\'r\').16(3(){$().t({8:\'17\'})});',62,70,'||settings|function|containerIDhash|var|window|animate|easingType|containerHoverID||stop|containerID|linear|containerHoverIDHash|body|inDelay|scrollTop|this|opacity|scrollSpeed|text|id|600|defaults|options|min|document|span|UItoTop|sd|if|1200|hide|click|html|fn|outDelay|400|Top|extend|toTop|return|false|prepend|To|hover|700|toTopHover|scroll|append|200|typeof|href|style|maxHeight|undefined|css|position|absolute|top|height|50|fadeIn|else|fadeOut|Outdelay|jQuery|ready|easeOutQuart'.split('|'),0,{}))
//]]>
</script>
<a href="#" id="toTop" style="display: inline;"><span id="toTopHover" style="opacity: 0;"></span>To Top</a>

Chúc bạn thành công! Xin cảm ơn bác Tiến Nguyễn!

Đọc tiếp...

Xem bài viết trên phiên bản di động

21:00

Có nhiều cách để tạo sự khác biệt cho bài đăng mới nhất. Trước đây mình đã hướng dẫn Tạo mầu nền riêng cho bài đăng mới nhất nhưng có vẻ nó khó thực hiện với những bạn chưa biết nhiều về Blogger template. Hôm nay mình sẽ hướng dẫn một cách khác để tạo sự khác biệt cho bài đăng mới nhất bằng cách sử dụng một hình ảnh hiển thị bên cạnh bài đăng này. Cách thực hiện khá đơn giản cũng gồm 2 bước.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#Blog1{position:relative}

Bước 2: Tìm thẻ <a expr:name='data:post.id'/> và thêm vào sau nó 1 trong những đoạn mã sau, mỗi đoạn mã ứng với 1 hình ảnh hiển thị bên cạnh bài đăng mới nhất.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfxW8jAvHqskaXJBEjAOSDu3yPSH0WZwxq1b1mEQ5XSTBXVBZ8CrlNd4KlirgULYLQ9Pcv-c0YAfTfo9tyRmdSCQR52uPi-JDgUhDykrwbUxFMVfKX7O2pUUqdl-tTAmkmH6kZXJnHSzF/s1600/new-red.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH4K9Qvcz7cgi6vO-k0Ntpcnp_wsTyfeobZpK72PhiE4NNylNKeRtOwHNigbErfrRTLImFYzeWzJMFOx9lS0yO-StUMlCUjl5m-Zr5Sv9CgURwfEfyUohGgixrZJCAny4BUqPv5KrNExk1/s1600/new-yellow.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwYoarDT5vVcsnPtwJ04OaoMkvbdoQ6ayYeACDNLJ3mJr-etY8Hi2XtEvcjTMuIUBJSICEmdHnLpA6SW_VlhY4KVOl2nQoVHyCNRI4IOmJsG7LEyazLCUldhZJnm2aYM_eO72lvd5msTA4/s1600/new-green.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zf3N0faRSiKy_1jpAPrinMJiBlOfksDE3UD-cHdbCy4akR1a1WV9LB_qP8AGJQR8aRM5LWy1YepMS1e_MT0oPaz5FEQtBgsOcYhhlMsmP0FpjsBzMvEhnidrUsU_ZNaD6s43qaJL94eQ/s1600/new-blue.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdzPome_HGRrKTYRu0eC0zQyDFp-l8qrtleR4fVtQTl8ERDYGN5Qk2SZge56AlvBECPuk4-7F8GlSQtp84TWyYEMr1wW0O5SQ3yJpC4hyphenhyphenUmYFaza_AvgFjwUv5kVH5c_4mzHxWdib0Igj/s1600/new-blue-light.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe7xfY7Eb124DTqF68b4jl8gBouBI3D5kNte1oktHizRFaJWc7LUSnaOLHeh9xUt5abeXdvP6epUktiGCpdv2I2cumtJIONYfwHlxTFYWSuQubrAc4D9M1tGHhkVh_txxDojBw8xTpr0g/s1600/new-black.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5J4-SNgtLbFjgBrxNbXBupXG2OFkA9F5mSKHfqVxlqw446fE4nMYdf-QIQ25cZsvIYM5zE_HKcG3c4W-UJmveS5DBMjQiNUpG5mTUicQGUsV27APtwhzRrmwl5Or4e-udfEwK2mmdEgL/s1600/new-gray.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

Ảnh được hiển thị góc trên bên trái của bài đăng mới nhất. Bạn cần chỉnh lại giá trị của thuộc tính top và left ở bước 2 để hình ảnh được hiển thị phù hợp với template đang dùng. Nếu có thể, hãy design một hình ảnh cho riêng mình và thay thế cho hình ảnh của thủ thuật trên.

Thủ thuật này không dựa vào giá trị thời gian nên khi duyệt theo label sẽ không gắn hình ảnh cho bài đăng mới nhất, có vẻ còn gượng ép khi nói "tạo sự khác biệt cho bài đăng mới nhất"!

Đọc tiếp...

Xem bài viết trên phiên bản di động

20:54

Bài viết này hướng dẫn bạn thêm Bài viết liên quan với hình thu nhỏ cho blog.Tiện ích sẽ hiển thị lựa chọn một số bài viết liên quan được tạo ra bằng cách sử dụng nhãn, mỗi bài viết chỉ hiển thị hình ảnh thu nhỏ nhưng khi rê chuột vào nó thì sẽ hiển thị tiêu đề bài viết. Bạn xem bản demo để rõ ràng hơn sau đó làm theo các bước hướng dẫn bên dưới

Thêm Bài Viết Liên Quan Cho Blogger

Vào blogger > Mẫu > Chỉnh sửa HTML
Chọn mở rộng mấu Tiện ích
Dán đoạn code bên dưới vào trước ]]></b:skin>

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Tìm đoạn code sau

<div class='post-footer'>

Và dán ngay sau code vừa tìm được phía trên đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzARUP1Kr0cWBS05ZghJ54iaSGbzMr53CpQppxGYYiN1itwfypbdurE81p0XV6CcN7GYLJgqaYaUuK8SCtgB8ZdyGXr0IADkaU9vC4Lzb9XdXWDpO4_Hp4eBVQ7Bg7O8332B5PxeE2shw/s1600/no-image.gif";
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if>
<div style='clear:both'/>
<br/><br/>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRzjrOA-nKccR8-BDGlhy_z_OKOs2frn4XO-c6jSsxcUtBaYJQ0YhBxa6NS5IUFBi16v15b-peVF_5Dkne3DRFDfhP_-ZlZ_xNYEzy1T-U6zEeu3UDbpLBN0ab7wVfEDKC7rYsRqxGN3B/s1600/best+blogger+tips.png'/></a>

Mặc định mình để số bài viết liên quan được hiển thị là 6 ,các bạn có thể tùy biến sao cho phù hợp với blog của mình

Lưu template lại và xem kết quả

Chúc bạn thành công và đừng quên comments đóng gióp cho mình nha!

Đọc tiếp...

Xem bài viết trên phiên bản di động

20:46

Bài viết này hướng dẫn thêm các nút phóng to/thu nhỏ văn bản trên bài viết của Blogger. Sử dụng một số jQuery đơn giản và các biểu tượng đầy màu sắc để tạo ra một bảng thay đổi kích cỡ văn bản thật phong cách và nổi trên góc của bài viết.Tiện ích gồm ba nút tăng, giảm kích thước văn bản và một nút thiết lập lại cỡ chữ mặc định.

Để thêm tiện ích này bạn hãy làm theo hướng dẫn sau nha

Vào blogger > Mẫu > Chỉnh sửa HTML
Chọn mở rộng mẫu Tiện ích
Dán đoạn code bên dưới trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>

Tìm đoạn

<div class='post-header-line-1'/>

Và dán sau nó đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9lox5NqcKEG8A4lZMbFspsrVnvzcu_FabMQAUyluEWjmExe9br8fue9ydsfIpfETQffeFzWmYdoNVlETEnsRO6hUBGPCgA5hLibEq-1I6O_D26Z6ogLbE1fd7mk3zcE5HxdngJrE9J4Dg/h120/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDf1LoScaR0irRkfhxA7RlrJz-rj8ijUx9mbzM-9XfnSIGdPUp0-l1YBrKxbT6to5bbVVRwoIvOWjH0C7PsKYkEorLCyme1sQMuwJWqEkx6t2Kx9YhBKBMckptwT7bA2vvwrxSrVY7tUg0/h120/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXsq0-iWPdeDvYH2cl0bwJfQzNOmBO9mLarYzJlxIT66G29ULZwXsotl8Z2mWCDTrIv-lrhtyx0x2NLweDzxOyT22smjSEnKMprwVfbxguUYYeHEmtobKokmv7DezJgGXbyLeFuLJLz0a/h120/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOvpF43o7Yk8vzrW90RrZJrJ1zdVMXlq7vHsA1smJLCaA2TCmXlSvQBldBbbW8R2adjuDrIRrCH0WbPNEZ6QchtHU03nmcSmcGUAuU694C8UwtZfjCmHbP1hDzbxm2FToCwN6NchAoWefh/h120/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>