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

Thứ Năm, 1 tháng 8, 2013

Firebase - Tiện ích hiển thị lượt xem bài viết cho blogspot

Tất cả các blogger bây giờ  đều mong muốn sẽ có một tiện ích đếm số lượt đọc bài viết trên blog của mình một cách "miễn phí".

Đếm lượt xem bài viết 

Đếm xem số lượt người đã xem qua bài viết 


Tạo tài khoản Firebase

Trước tiên bạn phải tạo một tài khoản firebase bằng cách click vào đây sau đó thực hiện theo hướng dẫn bằng hình ảnh

lượt xem bài viết
Bạn cần phải ghi nhớ đường link đã tạo được ở bước 4 hình ảnh trên để thực hiện các bước tiếp theo của thủ thuật


Cài đặt bộ đếm lượt truy cập bài viết cho blogspot

Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Dán code bên dưới trước thẻ ]]></b:skin>
#views-container {
width: 375px;
float: left;
}
.tvlloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizM0qkmPuXV3l7uF9q6CKlOazdiAzJtIQPBBtVbvwFx37D9uwRD0xGH-Ccp7sxi1snhOGaFffS5j7EMJq9H5M82baNaUMylkUgs9LyCa_2q-NU1KRv1katVeJQlw74yWnL7kkBY0i7qHdK/s1600/loadingtvl.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: left;
padding-left: 5px;
color: #0F83A0;
font: bold 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #0F83A0;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHb67kN3lXQKouJsZ9D84yQ1J5ut0aS0k42GDhjXOW-UbWwRArKmAuUt6GI72RhgWpJxBokUSz9rrLvx2R3Hn8ntGxplnO1tvjwm7-WBXPA-s-ybh1ZsL5H_WV4XRy9hqVja0wRpI2OmqP/s1600/thongke.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
margin: -3px 2px 2px 2px;
}

Bạn có thể đổi left thành Right nếu muốn hiển thị bên phải

Bước 4: Tìm thẻ </body> sau đó dán trên nó đoạn code sau
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;tvlloading&#39;);
var blogStats = new Firebase(&quot;https://thu-thuatblog.blogspot.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;tvlloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>
Nhớ thay link thu-thuatblog.blogspot.com bằng link mà mình đã lưu ý bạn ở bước 4 ở Tạo tài khoản Firebase
Bước 5: Tiếp tục tìm thẻ <data:post.body/> và dán trước nó code sau rồi lưu template lại để hoàn tất thủ thuật
<div id='views-container'><span class='views-icon'/><div class='views-text'>Lượt Xem:</div> <div class='tvlloading viewscount' id='postviews'/></div>
Dán code trên vào đoạn code đầu tiên bạn tìm được trong template
Bạn có thể thay thế Lượt Xem: bằng từ nào phù hợp với blog bạn

Chúc bạn thành công với thủ thuật hiển thị lượt xem bài viết cho blogger

Thứ Năm, 11 tháng 7, 2013

Thêm mô tả cho link của tiêu đề tối ưu seo blogspot

Nhằm tối ưu seo cho blogspot ta cần thêm mô tả cho link của tiêu đề tối ưu seo blogspot, thêm mô tả khi ta hover chuột vào sẽ tăng cường seo cho blogspot của bạn hơn.
mo ta link tieu de
Hình demo
Khi đưa chuột vào tiêu đề bài viết, bạn sẽ thấy hiện lên phần mô tả cho đường link đó.
Để làm được điều này các bạn làm như sau :
Đăng nhập vào Blogger -> chỉnh sửa HTML -> Tiện ích mở rộng
Tìm đến dòng :
<a expr:href='data:post.link'><data:post.title/></a>
và sửa thành :
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
Tiếp tục tìm đến dòng
<a expr:href='data:post.url'><data:post.title/></a>
và sửa thành :
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
Lưu template và kiểm tra kết quả.
Chúc blog của bạ được tối ưu nhất với thủ thuật này :)
Nếu hữu ích có thể ấn like nhé , thank nhiều 

Hiệu ứng hover cho thẻ tiêu đề blogger

Thẻ tiêu đề với hiệu ứng hover cho blogger,

Thêm hiệu ứng hover khi trỏ chuột đẹp cho thẻ tiêu đề blogspot
Việc Sử dụng thẻ tiêu đề trong khi trình bày bài viết góp phần nhìn bài viết thêm phần pro và đẹp mắt hơn.
Làm cho người đọc cảm thấy họ được chăm sóc chu đáo hơn :D
hieu ung hover

Muốn làm được điều này Ta cần thêm CSS vào trong mẫu,như hình trên là có 6 mẫu thẻ tiêu đề sẽ được trình bầy và ứng với mỗi mẫu là code CSS và HTML của nó.
Đầu tiên ta quan tâm tới CSS trước nhé
Thêm CSS thì các bạn đều biết là thêm vào trước thẻ ]]></b:skin> 
Mẫu 1

DEMO tiêu đề hover
Code CSS
.dtc1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
}
.dtc1:hover {
background:#f2f2f2;
)

Mẫu 2

DEMO tiêu đề hover
Code CSS
.dtc2{
color: #000;
font-size: 20px;
font-family:Verdana;
background: #fff;
margin: 0px 0px 5px;
padding: 3px 0 3px 10px;
border-left:4px solid #FF0000;
}
.dtc2:hover {
background:#F6CECE;
}

Mẫu 3

DEMO tiêu đề hover
Code CSS
.dtc3{
background:#FFFFFF;
font-weight: bold;
font-family:consolas;
font-size:19px;
color:#FA5858;
text:1px 1px 1px #AAA;
border-bottom:4px solid #Ff0000;
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
-moz-box-shadow:1px 1px 22px #AAA;
-webkit-box-shadow:1px 1px 2px #AAA;
box-shadow:1px 1px 24px #AAA;
text-transform:capitalize;
display:block;
width:96%;line-height:1;
margin:6px 3px;
padding:4px 10px}
.dtc3:hover {
background:#E0E0F8;
}

Mẫu 4

DEMO tiêu đề hover
Code CSS
.dtc4{
font-size:20px;
padding:5px;
font-family:consolas;
color:#0000FF;
text:1px 1px 1px #333;
background:#CEF6CE;
border-left:20px solid #FF0040;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
}

Mẫu 5

DEMO tiêu đề hover
Code CSS
.dtc5 {
font-size:20px;
font-family:verdana;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.dtc5:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
}

Mẫu 6

DEMO Tiêu đề hover
Code CSS
.dtc6{
color:#444;
font-size:15px;
font-weight:bold;
font-style:italic;
font-family:georgia;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
background:#E0F2F7;
}
.dtc6:hover{
background:#ffffff;
}

Bây giờ là phần HTML tức là khi post bài ta cần thêm thành phần HTML
Vậy trong bài viết khi cần nhấn mạnh 1 tiêu đề nhỏ nào đó ta dùng mẫu 
<div class="dtc@">Dòng chữ của bạn</div>
Trong đó dtc@ ứng với từng biểu mẫu bên trên có nghĩa là bạn dùng mẫu 1 thì dtc@ là dtc1.Dùng mẫu 6 thì dtc@ là dtc6....
Chúc bạn có những tiêu đề hover đẹp tạo sự sang trọng cho blog của bạn

Thứ Hai, 8 tháng 7, 2013

Hướng dẫn cách thay đổi template cho blogger

Cách thay đổi template cho blogger , cách thay đổi theme cho blogspot, cách thay đổi giao diện cho blogspot,cách thay đổi giao diện cho blogger
Là tất cả các câu hỏi thường gặp của các blogger mới 
Việc này cũng không quá phức tạp,rất đơn giản là đằng khác
Đầu tiên bạn đang nhập vào blog bạn muốn thay đổi
Sau đó chọn template ,nếu bạn dùng giao diện tiếng việt thì đó là Mẫu
Click on Template, thay theme cho blog
Chọn vào nút Backup / Restore ở góc phải màn hình
Click on Backup Restore button, sao luu du lieu
Một của sổ xuất hiện, và đó là cửa sổ để bạn back up hoặc restore template cho blog của bạn
Backup Restore Template, tao blog, cach tao blog
Bạn chọn vào duyệt mẫu và chọn trên máy tính của bạn 1 file xml  mà bạn đã chọn
Một số template cho bạn tham khảo:
Cuối cùng nhấn upload và đợi 
Sau đó bạn có thể vào template để chỉnh sửa widget tùy ý 
Bạn có thể tham khảo thêm các template ở blog thủ thuật

Thứ Sáu, 28 tháng 6, 2013

Những blog nào có thể chạy được google adsen?

Đó là câu hỏi của rất nhiều blogger khi muốn tham gia google adsen đó là làm sao để blog của mình có thể được google kiểm duyệt chạy google adsen?
google adsen
Gần đây nhất google đã cho phép chạy adsen trên blog có nội dung tiếng việt nên các blogger việt liên tục bàn luận về vấn đề này và có ý định tham gia google adsen , tuy nhiên theo nhiều người việc đăng ký adsen của google là rất khó. Blog của bạn phải đạt được 1 số điều kiện nhất định
Nhiều blog đã hướng dẫn tạo adsen nói là đơn giản nhưng thực sự không phải dễ để google chấp nhận đơn đăng ký của bạn.
Hiện giờ có rất ít blog có xuất hiện quảng cáo google adsen.

Lưu ý khi bạn muốn tham gia google adsen cho blog của mình

-Nếu blog của bạn có ít bài viết, bài viết đó lại copy từ nơi khác thì chắc chắn rằng bạn sẽ không được google chấp nhận
- Blog của bạn phải đạt được số lượng view tương đối cao
- Và nếu bạn đã được tham gia google adsen thì đừng có dùng các thủ thuật để tăng số lượng click chuột
và đừng bao giờ tự click vào các quảng cáo trên blog của bạn, điều này có thể dẫn đến nguy cơ khóa tài khoản rất cao, và nếu khi blog nào bị google ghét thì đừng có hỏi tại sao :D
Trên đây là những ý kiến của riêng mình về việc sử dụng quảng cáo google adsen cho blog của bạn
bạn nào có ý kiến đóng ghóp thì cứ comment ở dưới để chúng ta cùng thảo luận về vấn đề này 
Nếu thấy bài viết hay có thể like :) , share nếu muốn, nhưng share thì phải ghi rõ nguồn trỏ về link bài này vì mình đã đăng ký DMCA.
Chúc bạn thành công với blog của mình và có quảng cáo google adsen cho riêng mình. 

Thứ Ba, 25 tháng 6, 2013

Bài viết liên quan theo nhiều label cho Blogspot

Bài viết này thủ thuật blogspot cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiều label (nhãn) và đã được sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.
Demo online ngay tại blog này
Các bạn có thể xem qua ảnh để thấy được kết quả hiển thị của thủ thuật rất hay này.
Bài viết liên quan theo nhiều label cho Blogspot
☼ quy trình tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Chọn Mở rộng tiện ích mẫu (Expand Widget Templates)
5- Tìm đoạn code <data:post.body/> (thường chọn là vị trí đầu tiên nếu có nhiều kết quả). Và gắn vào sau nó đoạn code bên dưới.

<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;
thu-thuatblog.blogspot.com&quot;;maxNumberOfPostsPerLabel = 10;maxNumberOfLabels = 6;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/>
<!-- /related post -->
Chú ý:
Bạn sẽ pải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp
Thay thu-thuatblog.blogspot.com bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối nhé.
maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label).
maxNumberOfLabels là số nhãn (label) sẽ được hiển thị.

Thứ Bảy, 22 tháng 6, 2013

Hiển thị title cho bài đăng phổ biến blogspot

Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

PopularPosts là 1 widget có sẵn được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc.
 Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. 
Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

PopularPosts Title

Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 4. Hãy xem trên blog của bạn đã có widget PopularPosts này chưa?

đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và chọn tải template về máy để tiến hành chỉnh sửa 

Mở template và tìm với từ khóa PopularPosts1. Trong đoạn mã của widget này có 4 đoạn mà Blogger đã chú thích: <!-- (1) No snippet/thumbnail --><!-- (2) Show only snippets --><!-- (3) Show only thumbnails --><!-- (4) Show snippets and thumbnails -->

Ở đây chúng ta quan tâm đến đoạn thứ 4, đó là nơi chứa mã của kiểu hiển thị tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Dưới đây là đoạn mã chúng ta cần chú ý:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <b:if cond='data:post.thumbnail'>
        <div class='item-thumbnail'>
            <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
        </div>
    </b:if>
    <div class='item-title'>
        <a expr:href='data:post.href'><data:post.title/></a>
    </div>
    <div class='item-snippet'>
        <data:post.snippet/>
    </div>
</div>
Chú thích:
  • data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thays72-c vào đường dẫn).
  • data:thumbnailSize: Kích thước ảnh mà Blogger resize, là ảnh hình vuông nên bao gồm luôn cả chiều cao và chiều rộng.
  • data:post.href: Địa chỉ của bài đăng.
  • data:post.title: Tiêu đề của bài đăng.
  • data:post.snippet: Đoạn trích dẫn của bài đăng.

Hoạt động của đoạn mã này:
Đầu tiên sẽ xem xem có địa chỉ ảnh cho bài đăng phổ biến này hay không qua lệnh diều kiện<b:if cond='data:post.thumbnail'>. Nếu đúng, một thẻ div với thành phần bên trong là thẻ imgchứa địa chỉ ảnh có liên kết tới địa chỉ của bài đăng được xuất hiện, bài đăng nào không có ảnh thì bỏ qua. Tiếp theo sau đó là 2 thẻ div lần lượt chứa tiêu đề bài đăng có liên kết tới địa chỉ của bài đăng <a expr:href='data:post.href'><data:post.title/></a> và đoạn trích dẫn<data:post.snippet/>.

Bây giờ chúng ta sẽ sửa lại đoạn mã này theo hướng hiển thị tiêu đề bài đăng với title là đoạn trích dẫn và hình ảnh với kích thước tùy chọn, loại bỏ đi liên kết tới địa chỉ của bài đăng khi click vào ảnh, thêm thuộc tính alt là tiêu đề bài đăng cho ảnh này. Một vấn đề nữa là khi dùng trình duyệt từ IE7 trở về trước thì tiêu đề bài đăng bị thụt xuống một đoạn so với ảnh.


PopularPosts Eror IE

Nhưng Để hiển thị tốt trên phiên bản trình duyệt này chúng ta đưa hình ảnh và tiêu đề bài đăng vào cùng 1 thẻ div. Đoạn mã trên được viết lại như sau:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' border='0' width='38px' height='38px'/>
        </b:if>
        <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
    </div>
</div>
Lưu lại và tải template lên Blogger.

Ảnh do Blogger resize có kích thước là 72x72 pixels sẽ mất cân đối khi hiển thị chỉ cùng với tiêu đề bài đăng. Đoạn mã trên đặt lại là 38x38 pixels, bạn tùy chỉnh cho phù hợp với blog của mình. Một điều mình mới phát hiện và bổ xung thêm vào đây là ảnh của bài đăng phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600s800... thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện trên widget PopularPosts.

Bạn Có thể thêm thuộc tính float:right cho class item-thumbnail để ảnh hiển thị bên phải.
Trong 3 kiểu hiển thị còn lại có ít thuộc tính hơn, tùy theo ý thích mà bạn chỉnh sửa cho phù hợp nếu muốn.

Hiển thị popular post dạng ảnh chuyển động cho blogspot

Chắc mọi người đều không xa lạ với hiệu ứng trình diễn ảnh chuyển động sử dụng jQuery. 
Hôm nay mình sẽ hướng dẫn áp dụng hiệu ứng này vào widget PopularPosts để trình diễn những bài đăng phổ biến dạng kiểu slider, widget PopularPosts này nằm ở phía trên của bài đăng.
Hình ảnh demo:

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

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSK_jyIN6EY5trZwpJ0EjEOVp6IBhuIVUl96jO77LT-9spSHlOsbcQAooAqx_hVbHEI-FRYrsEv-bED5x0dAww48uP-WcgO2HDIJGSjNmJGqDLSBWP-P-y9muZMdLE9QWKu_M0YcLgrTr/) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://duyphaminfo.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSVEF1Os13DfjUj0vGlBpc7XebrS-JObXfnIPT2qrlpj5I8YCRJGJZpRHJCocePsvltJIAiR9mJaQKMU2csCSX-IFDn80q6vBohWmbzToFuJF3ccKet0Xohdhxe-2XPuz94u92gUYQK7O/", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6raR9itbKWDS7QFHReRFR43ix0_5wBXo76Y4tJRu_gElHUdFAl9mA25YieSxZqXws1LLjKC8_n56ZE7PQvWIw45BNF1mgrVivnCBa3TRCOxaLfDOWY2RjSoFC9Km5oaNyczl8O-OjpLP6/", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Bước 3: Tìm thẻ <b:section class='main' id='main' showaddelement='yes'/> hoặc <b:section class='main' id='main' showaddelement='no'/> và thêm vào sau nó đoạn mã dưới đây:

<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRN2MaWMOsrV8a61-qJ7pjt-32ttDyXuZQjLMFITvDuhn8tYoGBoT3qASDUPDHhsiNgE1yju9R10xGqAKdWZeNu14__0-gZYNVSiXXkq2oLZA636X7_4bztD3jADGYSQXkjCwql5URCcbk/'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Bước 4: Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo ở Bước 3. Phần Hiển thị chọn hình ảnh thu nhỏ và Hiển thị tối đa 10 bài đăng.

Lưu thiết lập và test

CHú ý: Để ảnh bài đăng xuất hiện trên widget PopularPosts thì phải có ít nhất 1 ảnh được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...
Tìm kiếm liên quan:

Hiển thì bài viết phổ biến blogspot

hiển thị bài đăng phổ biến dạng ảnh

Popular post dạng ảnh chuyển động

Hiển thị bài đăng phổ biến dạng slide

Bài viết phổ biến dạng slide

Bài viết xem nhiều dạng ảnh động

Đánh số thứ tự cho comment blogspot

Thread Comment cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét tạo sự khác biệt. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Đánh số theo comment có quy luật:
Số thứ tự được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau. 
Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.
number comments2222222222
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây: 

var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây: 

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn. 

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>


Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.
Tìm kiếm liên quan:

Tạo số thứ tự cho comment blogspot

Đánh số thứ tự cho comment

Số thứ tự cho nhận xét

Đánh số thứ tự cho nhận xét

Comment mới cho blogspot với style windows 8

Windows 8 chính thức được phát hành vào cuối tháng 10 vừa qua và đang tạo nên một cơn sốt thực sự. Mình cũng không phải là ngoại lệ khi bị lôi cuốn bởi vẻ đẹp đầy màu sắc mà đơn giản của nó. Và kết quả là phiên bản tiếp theo của Recent Comments với style theo phong cách Messaging trên Windows 8.
style windows 8

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Comments. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.
<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_x_r44pI2Wtg6KursfUGEAOMSEcd8HMy4acfRHB5fa6ekT4zRnd9qw10tz7647RL5wgP4d7z1eF7DC9A0y1_CSToCnk40p6EmrISj5Lor5Z03iZO0Hivpo-ZvYVq4yWMhSB00rkDSXCg/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>
CHúc các bạn thành công !
Tìm kiếm liên quan:

Tạo comment cho blogspot

bình luận blogspot

comment style win 8

bình luận mới đẹp

bình luận mới cho blogspot

Thứ Năm, 20 tháng 6, 2013

Thêm nút Like cho Comment blogspot

Trong bài viết này mình sẽ hướng dẫn tạo nút Like cho nhận xét ở phiên bản Thread Comment mới. Vẫn được sử dụng tiện ích Star Ratings "cây nhà lá vườn" của Blogger tuy nhiên không gây xung đột với tiện ích này ở phần đánh giá bài viết, chỉ tải về khi đưa chuột vào nút Like do đó không làm chậm blog.
Like cho Comment
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_KRjEb7E6p0uYWRkcTnxAeME6HmRZNYKvOaJV095pOaAQhilZJ-7SisE_cGXeiZMaM3rJEms4Rp2DKrZQDT1Nhp1yXvb6X5aG7E9WBlafQAP6b0Ip0mdqdhZ4GxEH02R2BANA9QJ2sk/s10/like.png) no-repeat}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây: 
var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây: 
var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn. 
<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>

Hãy bấm Like cho nhận xét mà bạn thích nhé!

Thứ Tư, 19 tháng 6, 2013

Floating Social Bookmark dengan Efek Easing

 Do hạn chế tối đa việc sử dụng javascript, tôi vô tình đã làm cho nó tiện ích đơn giản mà không cần sử dụng một hiệu ứng đặc biệt với những hiệu quả của việc sử dụng hình ảnh để định hình nó ngày càng nhiều vật dụng. Vâng, lần này tôi sẽ đưa ra một hướng dẫn hoặc làm thế nào để tạo một widget đánh dấu trang xã hội nổi với thư viện jquery và ảnh hưởng của nhiên nới lỏng thêm với việc sử dụng hình ảnh ít hơn (chỉ một). 

nổi đánh dấu trang xã hội


Với việc bổ sung jquery, nếu bạn đặt con trỏ trên một trong những biểu tượng xã hội đánh dấu, ông sẽ đi ra từ từ, nhẹ nhàng như một Khach công chúa ra khỏi cung điện, đó là do tác động của việc nới lỏng về hiện jquery-ui.min . Bên cạnh đó tôi thêm giảm bớt hiệu ứng trên widget này, cũng như các loại phương tiện truyền thông xã hội mà tôi đặt hơn. Trong mẫu Johny Ribet hoặc Pakdhe Johny chỉ có 4 loại, thời gian này tôi đã thêm một phương tiện truyền thông xã hội phụ tùng Pinterest và Youtube để làm cho nó hoàn chỉnh hơn. Đây là các bước :
  1. Đăng nhập vào Blogger
  2. Đăng nhập vào mẫu >> Chỉnh sửa HTML (đánh dấu mở rộng mẫu tiện ích )
  3. Đặt mã CSS sau đây trên ]]> </ b: skin> :
  1. .social-buttons {
        position: fixed;
        top: 130px;
        width: 45px;
        z-index: 9999;
    }
    .button-left {
        left: 0;
    }
    .button-right {
        right: 0;
    }
    .social-buttons #twitter-btn .social-icon,
    .social-buttons #facebook-btn .social-icon,
    .social-buttons #google-btn .social-icon,
    .social-buttons #rss-btn .social-icon,
    .social-buttons #pinterest-btn .social-icon,
    .social-buttons #youtube-btn .social-icon {
        background-color: #33353B;
        background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
    }
    .button-left #facebook-btn span {
        background-position: right 10px;
    }
    .button-left #twitter-btn span {
        background-position: right -35px;
    }
    .button-left #google-btn span {
        background-position: right -127px;
    }
    .button-left #rss-btn span {
        background-position: right -80px;
    }
    .button-left #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-left #youtube-btn span {
        background-position: 11px -223px;
    }
    .button-right #facebook-btn span {
        background-position: 12px 10px;
    }
    .button-right #twitter-btn span {
        background-position: 11px -35px;
    }
    .button-right #google-btn span {
        background-position: 10px -127px;
    }
    .button-right #rss-btn span {
        background-position: 11px -80px;
    }
    .button-right #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-right #youtube-btn span {
        background-position: 11px -223px;
    }
    .social-buttons #facebook-btn:hover .social-icon {
        background-color: #3B5998;
    }
    .social-buttons #twitter-btn:hover .social-icon {
        background-color: #62BDB2;
    }
    .social-buttons #google-btn:hover .social-icon {
        background-color: #DB4A39;
    }
    .social-buttons #rss-btn:hover .social-icon {
        background-color: #FF8B0F;
    }
    .social-buttons #pinterest-btn:hover .social-icon {
        background-color: #D43638;
    }
    .social-buttons #youtube-btn:hover .social-icon {
        background-color: #C4302B;
    }
    .social-buttons a:hover .social-text {
        display: block;
    }
    .button-left .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: left;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-left .social-text {
        display: none;
        float: right;
        font-size: 1em;
        font-weight: bold;
        margin: 11px 40px 11px 0px;
        white-space: nowrap;
    }
    .button-right .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: right;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-right .social-text {
        display: none;
        float: left;
        font-size: 80%;
        font-weight: bold;
        margin: 11px 0 11px 40px;
        white-space: nowrap;
    }
    .social-buttons .social-text {
        color: #FFFFFF;
    }
-- Javascript jquery và sau đó bổ sung, vẫn còn trong Edit HTML đặt code sau vào trước </ head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
  1. Thư viện jquery cho màu xanh ở trên, nếu mẫu bạn đang sử dụng đã được cài đặt,
  2. Các widget cuộc gọi tiếp theo, hãy đặt đoạn mã HTML dưới đây trước khi </ body> :
  3. <div class='social-buttons button-right hidden-phone hidden-tablet'>
    <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
    <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
    <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
    <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
    <span class='social-text'>Follow via Pinterest</span></span></a>
    <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
    <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
    </div>

  4. Thay thế các từ trong xanh ở trên, với mỗi ID không nên bị nhầm lẫn với các ID người hàng xóm.
  5. Cuối cùng, Lưu Templates
  6. Vâng đó là một hướng dẫn để làm nổi xã hội đánh dấu với giảm bớt những ảnh hưởng của trả lời câu hỏi Muhammad Farhan . Nếu có kebangeten ít rõ ràng .. eh xin vui lòng để lại tin nhắn trên hộp bình luận ở phía dưới. Bất cứ hình thức bình luận của bạn sẽ được đánh giá cao, nhưng xin vui lòng không spam.