Cách thêm tiện ích bài đăng có nhiều nhận xét nhất

Tiện ích bài đăng có nhiều nhận xét nhất trong blogspot là một trong những tiện ích thú vị. Với tiện ích này sẽ giúp cho người đọc sẽ biết bài viết nào đang HOT và được quan tâm thảo luận nhiều nhất trên Blog của bạn. Mặc định Tiện ích này sẽ liệt kê 10 bài viết có nhiều comment nhất, tuy nhiên bạn có thể thiết lập lại số bài theo ý muốn.

5 style tiện ích Popular Posts đẹp cho Blogspot

Popular Posts là tiện ích mà hầu hết các blogger đều áp dụng đối cho blog của mình. Lí do rất đơn giản là nó rất tiện lợi, giúp độc giả có thể biết được những bài viết được nhiều người quan tâm. Dưới đây là một số style của tiện ích Popular Posts, các bạn có thể lựa chọn style phù hợp để áp dụng cho blog. Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích Popular Posts (Bài đăng phổ biến), tùy chỉnh các thông số cho tiện ích và lưu lại. (nếu blog của bạn đã có tiện ích Popular Posts thì bỏ qua bước này)
Bước 2: Vào Mẫu → Chỉnh sửa HTML → Chèn code CSS của style mà bạn thích vào trước thẻ ]]></b:skin>. Sau đây là một số style để các bạn lựa chọn:

Kiểu 1:


.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}
.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}
#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}
Tiếp đến tìm thẻ <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget> 
Thay cụm thẻ đó bằng code dưới: 
<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;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>


Kiểu 2:


Tổng hợp một số style tiện ích Popular Posts cho blog
Code:
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* màu tiêu đề của tiện ích */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* màu của số đếm */
background: #FB8835; /* màu nền của số đếm */
border: .2em solid #fff; /* màu đường viền */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* kích cỡ và font chữ */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Kiểu 3:

Tổng hợp một số style tiện ích Popular Posts cho blog
Code:
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; 
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ 
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; 
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; 
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;   
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; 
}   
#PopularPosts1 ul li a:hover{
color:#444; 
margin-left:3px;
}

Kiểu 4:

Tổng hợp một số style tiện ích Popular Posts cho blog
Code:
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px; 
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; 
color:#f2f2f2; 
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000; 
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; 
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ 
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{ 
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888; 
}
#PopularPosts1 ul li a{
display:block;
font-size:16px; 
color: #666; 
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Kiểu 5:

Tổng hợp một số style tiện ích Popular Posts cho blog
Code:
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ 
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ 
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; 
border: 2px solid #ddd; 
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; 
text-decoration:none;
font-size:14px; 
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

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

Vẽ chân dung bằng nghệ thuật Typography

Để vẽ một bức chân dung đẹp bằng cọ vẽ hay bằng các phần mềm đồ họa không khó, nhưng để tạo ra nó bằng cách sử dụng các phông chữ, cỡ chữ khác nhau và những cách điệu cần thiết từ chữ cái, con số kết hợp với công cụ kỹ thuật số thì đòi hỏi người thiết kế phải có đam mê thực sự với nghệ thuật Typography.

Sau đây netdohoa xin giới thiệu một số bức chân dung ấn tượng bằng nghệ thuật Typography.

50 bức ảnh lịch sử về Chủ tịch Hồ Chí Minh (P-2)


50 bức ảnh lịch sử về Chủ tịch Hồ Chí Minh (P-1)

Dù Chủ tịch Hồ Chí Minh đã mãi mãi đi xa, hình ảnh giản dị mà cao cả của Người sẽ còn sống mãi trong trái tim của nhân dân Việt Nam và nhân loại yêu chuộng hoà bình, chính nghĩa trên toàn thế giới. Dưới đây là những bức ảnh tiêu biểu về cuộc đời và sự nghiệp của Hồ Chủ tịch được sưu tầm từ ấn bản "Hồ Chủ tịch sống mãi trong sự nghiệp của chúng ta", xuất bản tháng 11/1970.
Nhân kỷ niệm 124 năm ngày sinh của Người (19/5/1890 - 19/5/2014), xin trân trọng giới thiệu với bạn đọc bộ ảnh quý này.
Nhà cách mạng Nguyễn Ái Quốc năm 30 tuổi, khi ở Pháp.

Ảnh về các loại đồ uống có độ phân giải cao - High quality juice photos

Bao gồm 7 ảnh về các loại đồ uống khác nhau (cam, dâu tây..) có độ phân giải cao. Đây là những ảnh tư liệu cần thiết cho các bạn làm thiết kế. Định dạng file .JPG.


Set of 7 free high quality juice photos (orange juice, strawberry juice, etc.) for you. Format: .jpg photos. Quality: HQ.

Bộ ảnh Spa chất lượng cao - Spa stock photos

Bộ ảnh Spa có độ nét cao, dung lượng lớn. Gồm 7 ảnh chủ đề Phụ nữ với Spa.
Định dạng ảnh: JPG, độ phân giải: ~5616×3744 px.


Set of 7 spa related stock photos with women in spa, stones, etc.
Format:.jpg photos, quality: HQ ~5616×3744 px.