Website Mai Phương

Home » All posts

Style đẹp dành cho Thread Comment của Blogger

09:05 |

Đây là một style dành cho Thread Comment mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác. Style này được thiết kế theo đúng phong cách mình vẫn theo đuổi lâu nay: đơn giản, rõ ràng và hiện đại. Style này là thiết kế ban đầu dành cho những template của mình sau này vốn sẽ áp dụng Thread Comment làm mặc định, hi vọng nó phù hợp với style đại đa số blog.

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

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWozcn_6y8gb7U3VFKT-o7YlEzniK98TCqyUE8vEbiLwVZHLtAIRjLC0Dj7vfZOuISzEz2QRSh2bPk8jBcZfRlEYBX0_bC0Xotzlmk0dAGoYDaXxoraXa12VQ3_eQo83FAWbkuSoyKzQ/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

d80556 là màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.

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

09:02 |

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. 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 đó. 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.

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.

Thêm nút Cancel reply cho Thread Comment

09:00 |

Cancel reply là hủy bỏ hành động Reply, nó là nút thường có trong Thread Comment. Trong Blogger nó chính là nút Add comment, có điều nút này nằm dưới cùng danh sách nhận xét và như vậy khi muốn hủy bỏ Reply người nhận xét phải kéo con trỏ chuột xuống hết danh sách nhật xét mới gặp. Thủ thuật này sẽ hiển thị nút Cancel reply ngay trên khung nhận xét khi reply.

Thêm đoạn mã dưới đây vào sau đoạn mã if (replybox && (commentId !== replyParent)) { trong template của bạn.

cancelRep=document.getElementById('bc_0_'+items.length+'I');
document.getElementById(domId).insertBefore(cancelRep,null);
cancelRep.innerHTML=cancelRep.innerHTML.replace(msgs.addComment,'Cancel reply');
if((commentId!=replyParent)&&(replybox.src.indexOf('&parentID=')==-1)){cancelRep.style.display='inline-block'}

Thủ thuật đã xong. Nếu muốn trang trí cho nút Cancel reply bạn thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template.

.comments .continue{display:none;border-top:0}
.comments .continue a{border:1px solid #fa0320;border-radius:3px;box-shadow:0 1px rgba(255,255,255,.3) inset;background:#e8233a;padding:5px 10px;font-size:13px;color:#fff!important;text-decoration:none!important}
.comments .continue a:hover{background:#d70d25}

Thanh điều khiển cuộn trang cho blog

08:56 |

Hình minh họa

Trong quá trình duyệt web hẳn mọi người thường dùng chuột giữa để cuộn trang, hoặc có ai như mình cài Synaptics Touchpad để cuộn trang theo kiểu xoắn ốc rất tiện dụng? Tuy nhiên 4 phím chức năng: Home, Page Up, Page Down vàEnd sẽ giúp ngón tay bớt thao tác hơn, nhất là khi đọc những đoạn văn dài. Mình sẽ hướng dẫn các bạn mang 4 chức năng này vào blog và được điều khiển bằng bấm chuột, ngoài ra còn có thêm chức năng cuộn trang tự động rất tiện dụng cho khách đọc ở blog chuyên về truyện.

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

<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7hehkr0ht1Dixrb6PDvzgL_u-4H7aisI188fnr1D-LOfu_YU8zMt9ot7Pp8cPLhgP8WjY8WFlnm82su9-Lti6nRCJpMmnKpvBrdLZJeM6gR4Fl4tiv-1Kshw8tQjW5htUcOPGV9EA6w/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>  
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Tăng hoặc giảm giá trị 50 để giảm hoặc tăng tốc độ tự động cuộn trang.

Thêm nút Like cho Thread Comment

08:50 |

Ở bài viết trước đây mình có hướng dẫn tạo nút Like cho những nhận xét. Tuy nhiên nó có nhược điểm là nếu bài viết càng nhiều nhận xét thì tốc độ tải trang càng chậm theo, và đó là dành cho phiên bản nhận xét cũ của Blogger. 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.

Preview

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/AVvXsEjgGZorGpXLYyof3dlnD8uVsKboVcmq-2G89A0Y7aUktsQOvmQ_vfPqXwKOLdaT4NrwAQAnHl457dkXjvBlCPuDkNnuOkcU-QJJk-0soKuhT3Db_HzXQ7fb9XhfTuUhcKPSdPkTOb8qP5E/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>

Mang về blog và hãy bấm Like cho nhận xét mà bạn thích nhé!

Hiển thị avatar người viết bài bên cạnh tiêu đề bài viết

08:43 |

Thủ thuật hướng dẫn các bạn thêm bên cạnh tiêu đề bài viết avatar của người viết bài. Việc hiển thị avatar này giúp mọi người dễ dàng nhận biết nhận xét của người viết bài khi người đó viết nhận xét. Ngoài ra nếu blog bạn có nhiều cộng tác viên viết bài thì nó giúp phân biệt những người viết bài khác nhau.

Và tất nhiên việc hiển thị avatar này là hoàn toàn tự động, sẽ tự cập nhật nếu người viết bài thay đổi avatar.

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

.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

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

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Bước 3: Tìm thẻ <b:if cond='data:post.title'> và thêm vào trước nó đoạn mã dưới đây:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

Ở bước 3 cần tìm đúng thẻ <b:if cond='data:post.title'> dành cho phiên bản web, có thể nó là thẻ thứ 2 khi tìm kiếm.

Cool Popular Posts

08:41 |

Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự.

Trong bài viết này mình sẽ áp dụng cho Popular Posts có id là PopularPosts1.

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

/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/

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

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Bước 3: Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>. Thay thế nó bằng đoạn mã dưới đây.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <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/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBT7ZLEsegowz6DowvBcT1h6dchKw21NpG6YaduLjPvsLtU3QhsZ_JAOmME85_nu4OrnO_F1UkLoUxgag21BTH-fXtR68H00i5nkMiXIlgxQsTCDYq0CoBVf5eA1oG53sUL9zObgcnkmD/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBT7ZLEsegowz6DowvBcT1h6dchKw21NpG6YaduLjPvsLtU3QhsZ_JAOmME85_nu4OrnO_F1UkLoUxgag21BTH-fXtR68H00i5nkMiXIlgxQsTCDYq0CoBVf5eA1oG53sUL9zObgcnkmD/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>

Bước 4: Quay trở lại Bố cục và chọn Chỉnh sửa widget Popular Posts. Chọn Hiển thị tối đa 5 bài đăng, các thông số còn lại lựa chọn theo ý bạn.

Để dễ dàng cho mọi người thay đổi màu nền mình đã sử dụng Trình thiết kế Mẫu của Blogger. Bạn vào Thiết kế → Trình thiết kế Mẫu → Nâng cao → PopularPosts Backgrounds và thay đổi lần lượt background color1, background color2, background color3, background color4, background color5 theo ý muốn.

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWozcn_6y8gb7U3VFKT-o7YlEzniK98TCqyUE8vEbiLwVZHLtAIRjLC0Dj7vfZOuISzEz2QRSh2bPk8jBcZfRlEYBX0_bC0Xotzlmk0dAGoYDaXxoraXa12VQ3_eQo83FAWbkuSoyKzQ/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

.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}

cancelRep=document.getElementById('bc_0_'+items.length+'I');
document.getElementById(domId).insertBefore(cancelRep,null);
cancelRep.innerHTML=cancelRep.innerHTML.replace(msgs.addComment,'Cancel reply');
if((commentId!=replyParent)&&(replybox.src.indexOf('&parentID=')==-1)){cancelRep.style.display='inline-block'}

.comments .continue{display:none;border-top:0}
.comments .continue a{border:1px solid #fa0320;border-radius:3px;box-shadow:0 1px rgba(255,255,255,.3) inset;background:#e8233a;padding:5px 10px;font-size:13px;color:#fff!important;text-decoration:none!important}
.comments .continue a:hover{background:#d70d25}

.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGZorGpXLYyof3dlnD8uVsKboVcmq-2G89A0Y7aUktsQOvmQ_vfPqXwKOLdaT4NrwAQAnHl457dkXjvBlCPuDkNnuOkcU-QJJk-0soKuhT3Db_HzXQ7fb9XhfTuUhcKPSdPkTOb8qP5E/s10/like.png) no-repeat}

/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBT7ZLEsegowz6DowvBcT1h6dchKw21NpG6YaduLjPvsLtU3QhsZ_JAOmME85_nu4OrnO_F1UkLoUxgag21BTH-fXtR68H00i5nkMiXIlgxQsTCDYq0CoBVf5eA1oG53sUL9zObgcnkmD/'/>
</b:if>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBT7ZLEsegowz6DowvBcT1h6dchKw21NpG6YaduLjPvsLtU3QhsZ_JAOmME85_nu4OrnO_F1UkLoUxgag21BTH-fXtR68H00i5nkMiXIlgxQsTCDYq0CoBVf5eA1oG53sUL9zObgcnkmD/'/>
</b:if>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Liên hệ

Slider

Tổng số lượt xem trang

Labels

Thông tin cần biết

Culture

Favourite

Pages

About Me

Lưu trữ Blog

TIÊU ĐIỂM

Gallery

Event

iGooSeo làm gì?

Liên kết & Hợp tác

Trên mạng xã hội

Thống kê Web

Đơn vị chủ quản:Thiết Kế Web bởi iGooSEO.org

Địa chỉ: Số 386 - Đường Bưởi - Ba Đình - Hà Nội.

Đăng ký HĐ: 09/1/2014. GPS: 112598885967567996395/Blogger-Google Plus

News Scroll

Bình luận

Fanpage

Nhãn