Thư viện

Trải nghiệm

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

Thứ Ba, tháng 11 18, 2014

[Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger

by
[Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger
[Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger với hiệu ứng cực kỳ đẹp mắt, xoay rất ấn tượng và hấp dẫn đó nhé!

Thứ Bảy, tháng 11 15, 2014

[Tips] - Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger

by
Có nhiều bạn vừa hỏi Terocket làm sao để Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger? Việc tạo số đếm này thực ra rất đơn giản, nên hôm nay Terocket sẽ hướng dẫn cho các bạn thắc mắc và các bạn khác nếu có yêu cầu thì cũng sử dụng được.

[Tips] - Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger
Một mẫu tạo số đếm cực kỳ đẹp mắt dành cho tất cả mọi người!

Thứ Bảy, tháng 11 01, 2014

[Tips] - Popular Posts / Bài đăng phổ biến hiện đại & hiệu ứng đẹp tùy chỉnh cho Blogger V1

by
Bạn đã quá nhàm chán với các giao diện Popular Posts / Bài đăng phổ biến mà Blogger mặc định cho bạn? Bạn không thích nó vì nó quá đơn điệu và giống quá nhiều người, vì ai cũng sử dụng nó? Bạn muốn có sự thay đổi và điểm nhấn trong Popular Posts / Bài đăng phổ biến? Đừng quá lo lắng, hôm nay Terocket sẽ giới thiệu đến các bạn một thủ thuật blogger nâng cao dành cho Popular Posts / Bài đăng phổ biến. 

>>Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger
>>Bo tròn bài viết trong Popular Post cho Blogger
>>Rainbow PopularPosts với thumbnail và số cho blogger(V4)
>>Multi Color Popular Posts có số đếm cho blogspot (v3)
>>Popular Posts dạng Slides trượt dọc cho Blogger
>>Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
>>Popular posts dạng ảnh có số đếm từ jquery v2 cho blogger
>>Popular Post dạng ảnh Gallery cho blogspot
>>Tiện ích Bài đăng phổ biến bố trí chiều ngang - vers 2
>>Cool Popular Posts style đẹp cho bài đăng phổ biến
>>Màu nền riêng cho bài viết xem nhiều nhất
>>Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger
>>Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)
>>Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger
>>Ẩn một bài viết bất kỳ trong tiện ích Popular Posts
>>Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến
>>Hiển thị bài đăng phổ biến dạng ảnh chuyển động
>>Popular pots có có số đếm và title trích dẫn

Popular Posts / Bài đăng phổ biến được Terocket giới thiệu với giao diện cực kỳ đẹp, cực kỳ trang nhã, hiện đại với các hiệu ứng, hình ảnh to, phông chữ to, đập vào mắt người đọc là sự ấn tượng khó thể phai nhòa. Bạn sẽ không hối tiếc với Popular Posts / Bài đăng phổ biến phiên bản V1 mà Terocket cung cấp sau đây. Nào, cùng Terocket thiết kế Popular Posts / Bài đăng phổ biến cho blogger hiện đại và thật phá cách nhé.

Demo Popular Posts / Bài đăng phổ biến V1

Live Demo

Cách thức thực hiện thủ thuật Popular Posts / Bài đăng phổ biến V1 cho blogger:

Bước 1 - Đầu tiên bạn cần tạo một tiện ích Popular Posts / Bài đăng phổ biến cho blog của mình

Bằng cách vào Blog Title → Layout → Add Widget → Popular Posts. Tiếng Việt có nghĩa là Vào Blogger → Bố cục → Thêm tiện ích → Bài đăng phổ biến.

Bạn cần làm như hình ảnh nhé!

Bước 2 - Thêm CSS cho Popular Posts / Bài đăng phổ biến V1

Bước đầu tiên bạn cần vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F và tìm kiếm ]]></b:skin> trong hộp tìm kiếm. Sau đó hãy dán đoạn mã code dưới đây vào trước ]]></b:skin>

/* Popular Posts Widget customized by Terocket.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; } 
.PopularPosts .item-title { position: relative; } 
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; } 
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

***Lưu ý là bạn phải gỡ bỏ hết tất cả các CSS của Popular Posts / Bài đăng phổ biến trước đây mà bạn đã từng làm nhé.

Bước 3 - Chèn Javascript Popular Posts / Bài đăng phổ biến vào trước </body>

Thường thì Popular Posts / Bài đăng phổ biến không cần phải sử dụng Javascript, nhưng với Popular Posts / Bài đăng phổ biến V1 thì cần sử dụng nhé.

Đầu tiên bạn cần vào Blog Title → Template → Edit HTML và Nhấn Ctrl + F và tìm kiếm </body>. Sau đó chép đoạn mã code dưới đây vào trên </body> nhé.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by Terocket.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

Bạn nhớ là nếu trong mẫu của mình đã có jquery.min.js rồi thì không cần sử dụng jquery.min.js trong đoạn code trên nữa, lúc đó thì xóa đoạn link của nó trong đoạn code  ở trên đi nhé!

Bước 3 - Lưu mẫu và tận hưởng thành quả nào.

Terocket - An Thành Adthinks

Thứ Ba, tháng 4 22, 2014

Tổng hợp một số style tiện ích Popular Posts cho blog

by
Popular Posts là tiện ích mà hầu hết các blogger đều áp dụng đối với blog của mình. Theo mình thì 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. Bài viết này mình sẽ chia sẻ 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:

Thứ Tư, tháng 3 05, 2014

Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger

by
Như các bạn đã biết trong tiện ích Bài đăng phổ biến (Popularposts) của blogger có chức năng giúp bạn cho phép hiện thị ảnh thu nhỏ của bài viết. Tuy nhiên nó có nhược điểm là nó hiển thị toàn bộ hình ảnh của tất cả các bài đăng trong blogspot của bạn. Vậy vấn đề đặt ra ở đây là bạn chỉ muốn một bài nhất định hiển thị hình ảnh như chỉ muốn hiển thị ảnh của bài viết đầu tiên, hay chỉ hiển thị hình ảnh của bài viết cuối cùng trong tiện ích bài đăng phổ biến.
Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger

Thứ Tư, tháng 7 10, 2013

Bo tròn bài viết trong Popular Post cho Blogger

by
Trong hướng dẫn này namkna sẽ giải thích làm thế nào để bo góc cho các bài viết phổ biến của blogger. Thủ thuật này chạy tốt với tất cả các trình duyệt web hiện đại. Namkna đã sử dụng CSS3 để bo góc xung quanh tất cả các bài viết. Các bạn có thể làm theo các bước hướng dẫn dưới đây để thêm nó vào blog.
Xem demo ngay tại blog của namkna.
Ảnh minh họa.
Round Corners Popular Post for Blogger

Thứ Sáu, tháng 4 19, 2013

Rainbow PopularPosts với thumbnail và số cho blogger(V4)

by
Rainbow PopularPosts multiple lever (V4)
Popular posts là 1 tiện ích được cung cấp bởi Blogger, Tiện ích này hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị: chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).

Thứ Bảy, tháng 4 06, 2013

Multi Color Popular Posts có số đếm cho blogspot (v3)

by
Multi Color Popular Posts count ves 3
Thủ thuật này sẽ hướng dẫn các bạn cách thêm nhiều màu khác nhau và số đếm trong Popular Post Widget của blogger. Điểm nổi bật của thủ thuật này là bạn không cần phải thêm bất kỳ JavaScript nặng hoặc bất thuộc tính nào khác, bạn chỉ cần thêm 1 đoạn CSS đơn giản. Ngoài ra, bạn có thể tùy chỉnh widget này với việc sử dụng trình thiết kế mẫu của blogger. Chúng ta hãy đi đến hướng dẫn.

Thứ Tư, tháng 3 20, 2013

Popular Posts dạng Slides trượt dọc cho Blogger

by
Rotating Slides for Popular Posts Blogger - Popular Posts dạng Slides trượt dọc cho Blogger
Thủ thuật tuyệt vời này sẽ biến đổi widget bài viết phổ biến (popular post) cung cấp bởi blogger thành thanh trượt dọc với nội dung cập nhật tự động. Tiện ích được tạo bởi Abu-Farhan sau đó được cải thiện bởi mybloggertricks. Widget rất dễ dàng cài đặt  trên blogger. Bạn chỉ cần dán mã của hiệu ứng bên trong một widget HTML/Javascript. Tiện ích mới này hoạt động trên tất cả các trình duyệt phổ hiến hiện nay và có thể dễ dàng tùy chỉnh. Tôi đã chỉnh sửa đôi chút so với mã gốc để màu sắc đẹp hơn. Widget sẽ không có hình ảnh thu nhỏ xuất hiện nếu bạn chưa thêm bất kỳ hình ảnh trong bài viết của bạn.

Thứ Năm, tháng 3 14, 2013

Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

by
Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
Namkna chỉ sử dụng một tiện ích khi biết chắc mình có thể tùy biến thiết kế nó theo sở thích của mình. Tiện ích bài đăng phổ biến (popular post) để hiển thị các bài viết được xem nhiều nhất cùng với một hình ảnh thu nhỏ dựa trên các số liệu thống kê Analytics của bạn. Nhưng giao diện còn khá đơn giản và thô sơ, Namkna sẽ ghi đè lên các stylesheet của tiện ích này hoàn toàn với phông chữ tùy chỉnh và màu sắc của mybloggertrick. Bạn có thể xem tiện ích phổ biến ngay trên blog demo của namkna hoặc hình ảnh minh họa bên cạnh để thấy rõ hơn.. 

Thứ Hai, tháng 3 11, 2013

Popular posts dạng ảnh có số đếm từ jquery v2 cho blogger

by
Popular posts style gallery jquery v2 blogger
Bài viết này sẽ hướng dẫn các bạn tùy chỉnh tiện ích Popular posts dạng ảnh gallery với hiệu ứng từ Jquery cho blogspot. Thủ thuật này thích hợp với các blog chuyên về ảnh, blog bán hàng hay blog về phim,... Được mình source từ template Simplex PhoneMag. Đây là một dạng cải tiến từ vestion 1 mà mình đã giới thiệu trước đây.

Chủ Nhật, tháng 3 10, 2013

Popular Post dạng ảnh Gallery cho blogspot

by
Popular Post dạng ảnh Gallery cho blogspot
Bài viết này sẽ hướng dẫn các bạn cách sửa đổi giao diện cũ nhàm chán của blogger. Trong thủ thuật này các bài viết phổ biến sẽ hiển thị dưới dạng ảnh thumbnail và có tóm tắt trên nền thumbnail đó. Tiện ích thích hợp với các blog chia sẻ hình ảnh, bán hàng. Với các blog chia sẻ thông tin thì sẽ không hợp cho lắm (tất nhiên vẫn có thể áp dụng nếu bạn thấy thích).

Thứ Năm, tháng 4 05, 2012

Tiện ích Bài đăng phổ biến bố trí chiều ngang - vers 2

by
Tiện ích Bài đăng phổ biến bố trí chiều ngang
Hôm nay namkna sẽ giới thiệu cho các bạn thêm một tiện ích popular post dạng ngang nữa. Đặc điểm của dạng này là không sử dụng các hiệu ứng Javarscrip mà chỉ cải tiến từ dạng popular post của blogspot do vậy ác bạn có thể yên tâm về tốc độ của tiện ích này tuy nhiên nó không tự dộng trượt được. Nếu muốn dạng trượt thì các bạn tham khảo bài viết này

Thứ Bảy, tháng 3 10, 2012

Cool Popular Posts style đẹp cho bài đăng phổ biến

by
Tiện ích Popular posts là 1 tiện ích được cung cấp bởi Blogger, nó hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị: chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).

Thứ Năm, tháng 12 29, 2011

Màu nền riêng cho bài viết xem nhiều nhất

by
Thủ thuật này sẽ thay đổi màu nền của blog bạn khi truy cập vào bài viết được xem nhiều nhất. Bài viết xem nhiều nhất thống kê theo widget Popular Posts, do đó blog bạn cần phải có widget này.

Thứ Hai, tháng 12 05, 2011

Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger

by
Tiện ích bài viết mới nhất từ Bloglisst hoặc Popular Posts của blogger đã không còn xa lạ với chúng ta nữa. Các tiện ích này hầu như chỉ được tùy biến đơn điệu và chưa trang trí gì được . Namkna từng giới thiệu cách Làm đẹp tiện ích Popular Posts với hiệu ứng tooltip Tại đây. Hôm nay namkna sẽ thêm style mới với hiệu ứng (tooltips) vào cho 2 tiện ích này càng vượt trội hơn.

Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)

by
Như các bạn đã biết, tiện ích này có 3 chế độ hiển thị khác nhau. Và trong 3 chế độ này đa phần mọi người thường dùng cách hiển thị ảnh thumnnail và tiêu đề vì cách này nhìn tương đối nhất. Với cách hiển thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn), thì cách này thường chiếm nhiều không gian của blog, do đó mà ít người dùng. Hôm nay mình sẽ áp dụng hiệu ứng tooltips cho tiện ích này, để có thể hiển thị đầy đủ nhất nôi dung của tiện ích này mà không tốn nhiều không gian của blog

Thứ Năm, tháng 10 27, 2011

Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger

by
Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ. tạo hiệu ứng ảnh chuyển động xoay tròn khi bạn chỉ chuột vào ảnh

Thứ Hai, tháng 10 10, 2011

Ẩn một bài viết bất kỳ trong tiện ích Popular Posts

by
Ẩn một bài viết bất kỳ trong tiện ích Popular Posts
Tiện ích bài viết xem nhiều (Popular Posts) được cung cấp bởi Blogger. Nó hiển thị các bài viết được xem nhiều nhất trên blog. Giúp cho đọc giả của blog có thể đọc những bài viết được quan tâm nhiều nhất trên blog của bạn. Nhưng vì 1 vấn đề nào đó mà bạn không muốn hiển thị nó trên tiện ích. Khi đó ta hoàn toàn có thể ẩn nó đi 1 cách dễ dàng.

Chủ Nhật, tháng 8 14, 2011

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

by
Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến
PopularPosts là 1 widget đượ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 đề.