Cách Thêm Popular Posts (bài đăng phổ biến) với hiệu ứng Đẹp Và Chuyên Nghiệp cho blogspot

 

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách thêm tiện ích Popular Posts (bài đăng phổ biến) với hiệu ứng đẹp và chuyên nghiệp cho blogspot.
<img alt="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" border="0" data-original-height="0" data-original-width="0" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2zhum9TowPM3XjcJZz5C_zau70umsRVe5Ut0leyb0BHcBS_rSibcc6kk40Fahe4-h_fEliKf9_aYR8ook_6m9zHr6o4bINldCfPMjPgDpcPRMAiUzfWamjVEPodm40-d7Qvnu4NQ3lQ/s640/CSSth%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" title="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" width="0" />
<!--more-->
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ci0xItULEYAzXHfk266-cSHRKVRH0T-u6ZaJLA60eTfJWvoHs1gfDk11CQaeyrU3AbCnFeAgNjIOoxZIzuDHrmTvOxOA3R5jQB_VdBgu8bcPVDQRXjRH5s4RmJgXY8_anfUK4Q9VuQ/s1600/CSSth%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" border="0" data-original-height="405" data-original-width="314" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ci0xItULEYAzXHfk266-cSHRKVRH0T-u6ZaJLA60eTfJWvoHs1gfDk11CQaeyrU3AbCnFeAgNjIOoxZIzuDHrmTvOxOA3R5jQB_VdBgu8bcPVDQRXjRH5s4RmJgXY8_anfUK4Q9VuQ/s400/CSSth%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" title="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" width="310" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cách Tạo Hiệu Ứng Popular Posts</td></tr>
</tbody></table>
<h3 style="background: 0px 0px rgb(255, 255, 255); border-bottom-style: solid; border-color: initial; border-image: initial; border-left-style: initial; border-right-style: initial; border-top-style: initial; border-width: 0px 0px 1px; box-sizing: border-box; color: #00796a; display: table; font-family: Roboto, sans-serif; font-size: 20px; font-stretch: normal; font-variant-numeric: inherit; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 15px 0px; outline: 0px; padding: 0px 0px 5px; position: relative; text-align: justify; text-transform: uppercase; vertical-align: baseline;">
CÁCH THỰC HIỆN</h3>
Bước 1: Vào Blog - Bố cục - Thêm tiện ích - Bài đăng phổ biến
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZr3IEIHC3pxf8NDmRSOpKW6And-yHhAnLJSI7ar7OMJIVC1xfWjCVoniIytNlw9R2ZQu-cQ1mE7tIDThXFf9BAhi226U-GQtmrGc5RakDK8309sfRwLwheSiQcsoZRznLlDIF70MzQQ/s1600/CSS+th%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZr3IEIHC3pxf8NDmRSOpKW6And-yHhAnLJSI7ar7OMJIVC1xfWjCVoniIytNlw9R2ZQu-cQ1mE7tIDThXFf9BAhi226U-GQtmrGc5RakDK8309sfRwLwheSiQcsoZRznLlDIF70MzQQ/s640/CSS+th%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" title="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" width="640" /></a></div>
Các bạn chọn 10 bài và đặt tên cho tiện ích xong lưu
Bước 2: Chèn đoạn CSS bên dưới trước thẻ <code> ]]&gt;&lt;/b:skin&gt; </code>
<pre>/* CSS PopularPosts */
.left{float:left;text-align:left}
.right{float:right;text-align:right}
.center{text-align:center}
#PopularPosts1 ul{padding:0;margin-top:10px;counter-reset:popcount}
#PopularPosts1 ul li{position: relative; height: 60px; padding-left: 45px; line-height: 20px;}
#PopularPosts1 ul li:last-child{height:44px}
span.title-top{margin-top:-3px;font-size:15px;line-height:20px;float:left;max-height:40px;overflow:hidden}
#PopularPosts1 ul li:before{content:counter(popcount,decimal);counter-increment:popcount;text-align:center;list-style-type:none;position:absolute;display:inline-block;font-weight:600;top:0;left:0;border-width:1px;width:34px;height:34px;line-height:40px;font-size:16px;background:#f1f1f1}
#PopularPosts1 ul li:after{content:"";position:absolute;top:34px;left:0;width:0;height:0;border-style:solid;border-width:10px 17px 0;border-color:#f1f1f1 transparent transparent}
#PopularPosts1 ul li:nth-child(1):before{background:#f34444;color:#fff}
#PopularPosts1 ul li:nth-child(1):after{border-color:#f34444 transparent transparent}
#PopularPosts1 ul li:nth-child(2):before{background:#58a59e;color:#fff}
#PopularPosts1 ul li:nth-child(2):after{border-color:#58a59e transparent transparent}
#PopularPosts1 ul li:nth-child(3):before{background:#7577a9;color:#fff}
#PopularPosts1 ul li:nth-child(3):after{border-color:#7577a9 transparent transparent}
</pre>
Bước 3: Vào HTML - Chuyển đến tiện ích - PopularPosts1
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisglG7UxtrQxDJIQAb23eDV9uZvVqhfBKugBXuY8oyQuVh7RERChBrATnNsWzlknLleqEh5KgrjOCMhesRZqiF0RsIPZ0N4OOrE18aTipdM2fBG8p2FAnJ3LgJhP_MSnYNesjwd092KA/s1600/CSS-th%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" border="0" data-original-height="608" data-original-width="1299" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisglG7UxtrQxDJIQAb23eDV9uZvVqhfBKugBXuY8oyQuVh7RERChBrATnNsWzlknLleqEh5KgrjOCMhesRZqiF0RsIPZ0N4OOrE18aTipdM2fBG8p2FAnJ3LgJhP_MSnYNesjwd092KA/s640/CSS-th%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" title="Cách Tạo Hiệu Ứng Popular Posts (bài đăng phổ biến) Đẹp Và Chuyên Nghiệp cho blogspot" width="640" /></a></div>
Các bạn sẽ thấy một đoạn code
<pre>&lt;b:widget id=&#39;PopularPosts1&#39; locked=&#39;false&#39; title=&#39;Xem nhiều trong tuần&#39; type=&#39;PopularPosts&#39; version=&#39;1&#39;&gt;...&lt;/b:widget&gt;</pre>
mở rộng tiện ích PopularPosts1 ra, các bạn tìm đến thẻ <code>&lt;/b:includable&gt;</code> và chèn đoạn code bên dưới trước nó
<pre>&lt;a id=&#39;pp-show&#39; title=&#39;Xem thêm PopularPosts&#39;&gt;Xem thêm &lt;i class=&#39;fa fa-angle-down&#39; style=&#39;margin-left:5px&#39;/&gt;&lt;/a&gt;
&lt;a id=&#39;pp-hide&#39; title=&#39;Ẩn bớt PopularPosts&#39;&gt;Rút gọn &lt;i class=&#39;fa fa-angle-up&#39; style=&#39;margin-left:5px&#39;/&gt;&lt;/a&gt;
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGzCPybwG4mJEBUWqAM1KElqjwsHzK9oZm3pwxA_mhIU_RyYRwFS_M14qvEHDKmKYzhobd55sKAMoXaaqVRk5HnjrF9N4JWqGsXGDQIfxIEjbTsUP7z4mC_0T9o95D8Uh8YFbSB2afQ/s1600/CSS-th%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGzCPybwG4mJEBUWqAM1KElqjwsHzK9oZm3pwxA_mhIU_RyYRwFS_M14qvEHDKmKYzhobd55sKAMoXaaqVRk5HnjrF9N4JWqGsXGDQIfxIEjbTsUP7z4mC_0T9o95D8Uh8YFbSB2afQ/s640/CSS-th%25C3%25AAm-b%25C3%25A0i-vi%25E1%25BA%25BFt-Popular-Posts-min.jpg" width="640" height="244" data-original-width="1297" data-original-height="495" /></a></div>
Bước 4: Chèn đoạn code bên dưới trước thẻ <code>&lt;/body&gt;</code>
<pre>&lt;script type=&#39;text/javascript&#39;&gt;
//&lt;![CDATA[
$(&quot;#pp-show&quot;).click(function()
{
$(&quot;body&quot;).append(&#39;&lt;style id=&quot;pp1&quot;&gt;#pp-show{display:none!important}.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:block!important}&lt;/style&gt;&#39;);
$(&quot;#pp2&quot;).remove()
}
);
$(&quot;#pp-hide&quot;).click(function()
{
$(&quot;body&quot;).append(&#39;&lt;style id=&quot;pp2&quot;&gt;.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:none!important}#pp-show{display:block!important}&lt;/style&gt;&#39;);
$(&quot;#pp1&quot;).remove()
}
);
//]]&gt;
&lt;/script&gt;
</pre>
Lưu HTML và xem kết quả
<div align="right">
Code: BacSiWindows</div>

Đăng bởi: Nguyễn Ngọc Quí Đz Link Facebook Hoặc Blogger: https://www.nguyenngocquidz.tk/

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Dịch Vụ Auto Tăng Tương Tác, Bot Tương Tác Bạn Bè Facebook

Hình ảnh
Auto Tương Tác bạn bè hay còn được gọi là Bot Tương Tác trên facebook là một BOT (Robot tự động) được  Tuongtacmxh.vn  đầu tư và nghiên cứu để mang lại trải nghiệm cho những khách hàng của mình. Vậy thì tại sao bạn lại cần ứng dụng auto tương tác này và công dụng mà nó mang lại khi bạn trực tiếp sử dụng sẽ như thế nào. Cùng theo dõi bài viết này để hiểu hơn về ứng dụng  auto tương tác  giúp bạn thả like, comment, thả cảm xúc… tương tác với bạn bè trên Facebook tự động ngay cả khi bạn đang ngủ. Cùng rất nhiều tính năng khác. Chúng tôi sẽ giúp bạn lấy lại tương tác bạn bè bị mất lâu năm một cách nhanh nhất và hiệu quả nhất. Auto tương tác bạn b...
Đọc thêm

Dịch vụ tăng bình luận facebook

Hình ảnh
Tăng Comment Facebook còn có 1 số cách gọi khác như: tăng cmt facebook, tăng bình luận facebook, tăng cmt facebook, auto comment fb... được hiểu đơn giản là việc tăng bình luận cho 1 bài viết trên fanpage hoặc profile cá nhân. Tại sao phải tăng bình luận dõi trên Facebook? Vậy tăng lượt binh luận Facebook để làm gì? Nếu bạn bán hàng trên nền tảng mạng xã hội này thì việc tăng lượng binh luận Facebook là điều hết sức có lợi nó giúp nhiều người nhìn vào bài viết của bạn uy tín hơn. Lượng bình luận Facebook lớn vô cùng hữu ích cho việc quảng bá sản phẩm, dịch vụ của bạn mà không tốn chi phí quảng cáo. Hoặc trang cá nhân của bạn có sức ảnh hưởng và thu hút đối với người dù...
Đọc thêm

HD cài đặt Directadmin NULL Trên Centos7

Share Mọi Người Script Cài Đặt DIRECTADMIN 1.4 Cho CENTOS 6 Và 7 Nha. Bản Null Nha... Lưu Ý: Cài được trên cả CENTOS7 lun nha(Thành Công 100%). Quá bất ngờ phải Không???? Giới thiệu sơ: Cái script này mình đã mất cả buổi chiều để nghiên cứu. Phải rebuilt 3,4 lần cái VPS Centos7 mình mới làm xong. Như các bác đã biết mình có đăng kí VPS Ram 12 GB í, mà ngặt nổi nó chỉ cho đăng kí Centos7, mình thấy bỏ thì uổng cái VPS nên ngồi viết thử và kết Quả hơn như mong đợi Cài Đặt Cho Centos 7 đã thành công Công Sức E Ngồi Cả Buổi Ấy Mấy Bác Ạ. Hướng dẫn cài đặt(File TXT): Tại Đây <?php Login Vào SSH Chạy Lệnh Sau Để Cài Đặt: => wget http://hotlike.net/da-1480.sh;chmod 777 da-1480.sh;./da-1480.sh Nếu VPS Chạy CentOS6 Thì Tốt Rồi, Còn CentOS7 Thì Tiếp Tục Các Bước Sau: ////////////////////////////////CENTOS7/////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// Chạy Lệnh OpenPort Và Fix Quota DA (Mới Cài Nên Cần...
Đọc thêm