Hiển thị các bài đăng có nhãn thu-thuat-blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn thu-thuat-blogger. Hiển thị tất cả bài đăng
Bài Đăng Phổ Biến dẹp Cho Blogger Blogspot

Bài Đăng Phổ Biến dẹp Cho Blogger Blogspot

Bài đăng phổ biến (Popular post) không thể thiếu cho blog blogspot của bạn. Với kiểu bài viết này sẽ cho khách truy cập thấy những bài viết hay được nhiều người quan tâm nhất. Có khá nhiều kiểu bài đăng phổ biến bạn có thể lựa chọn một vài kiểu bài viết phổ biến cho blogger dưới đây.

Bài Đăng Phổ Biến Đẹp Cho Blogspot

Bước 1: Sao lưu lại template vào Notepad để lỡ may không thành công thì có cái mà sửa
Bước 2: Đăng nhập vào Blogger chọn Mẫu >> Chỉnh sửa HTML








Bước 3: Click vào ô chứa mã HTML và bấm tổ hợp phím CTRL + F nó sẽ hiện ra ô tìm kiếm




Bước 4: Copy thẻ ]]></b:skin> Hoặc </style> vào ô tìm kiếm sau đó nhấn Enter.

Bước 5: Dán đoạn CSS bên dưới lên trên/trước thẻ ]]></b:skin> Hoặc </style>



Hãy chọn kiểu mà bạn thích nha:))

Kiểu 1 :





Kiểu 2:




/* Popular Posts */



.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{liststyle:none;border:none;background:none;outline:none;margin:0;padding:0} .PopularPosts ul{list-style:none;font-family:Oswald,Sans-Serif;font-size:13px;color:#fff;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:400;font-size:13px;color:inherit;text-decoration:none} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:#555;color:#FFF;width:20px;height:20px;line-height:20px;text-align:center;bottom:5px;right:5px;margin-top:15px;border-radius:100px} .PopularPosts ul li:nth-child(1){background-color:#096a91;margin-right:0} .PopularPosts ul li:nth-child(2){background-color:#cd1be2;margin-right:2%} .PopularPosts ul li:nth-child(3){background-color:#657688;margin-right:4%} .PopularPosts ul li:nth-child(4){background-color:#00aba9;margin-right:6%} .PopularPosts ul li:nth-child(5){background-color:#8CBF26;margin-right:8%}






Kiểu 3:




/* CSS Popular Posts */



.PopularPosts .widget-content ul{list-style-type:none;overflow:hidden;}



#PopularPosts1 ul li .item-thumbnail{overflow:hidden;float:right;margin-left:10px;}



#PopularPosts1 img {overflow:hidden;width:72px;height:72px;-ms-transform: scale(1.0);-webkit-transform: scale(1.0);-moz-transform: scale(1.0);transform: scale(1.0);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}



#PopularPosts1 img:hover{-ms-transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}



.PopularPosts .widget-content ul li{position:relative;padding:0;margin:10px auto;}



.PopularPosts .widget-content ul li:first-child {margin-top:0;}



.PopularPosts .widget-content ul li:last-child {margin-bottom:0;}



.PopularPosts .widget-content ul li:nth-child(1){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(202,220,85,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(2){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(243,93,92,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(3){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(10,151,181,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(4){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(15,203,205,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(5){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(16,170,206,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(6){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(202,220,85,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(7){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(243,93,92,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(8){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(10,151,181,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(9){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(15,203,205,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li:nth-child(10){background:#2e3138;border:1px solid #464a54;border-left:2px solid rgba(16,170,206,0.8);width:100%;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li a{color:#b2b5be;transition:all 0.3s ease-out;}



.PopularPosts .widget-content ul li a:hover{color:#e8eaef;}



.PopularPosts .widget-content ul li:hover:nth-child(1),.PopularPosts .widget-content ul li:hover:nth-child(2),.PopularPosts .widget-content ul li:hover:nth-child(3),.PopularPosts .widget-content ul li:hover:nth-child(4),.PopularPosts .widget-content ul li:hover:nth-child(5),.PopularPosts .widget-content ul li:hover:nth-child(6),.PopularPosts .widget-content ul li:hover:nth-child(7),.PopularPosts .widget-content ul li:hover:nth-child(8),.PopularPosts .widget-content ul li:hover:nth-child(9),.PopularPosts .widget-content ul li:hover:nth-child(10){background:#464a54;}



.PopularPosts .widget-content{background:#353840;}



.PopularPosts .item-thumbnail{float:left;padding:0;margin:0;}



.PopularPosts .item-title {color:#b2b5be;font-weight:400;font-size:13px;padding:5px;}



.PopularPosts .item-snippet {display:none;font-size:13px;color:#b2b5be;overflow:hidden;text-align:justify;}



#PopularPosts1 h2 {background:#42454f;color:#e8eaef;font-family:'Oswald',sans-serif;font-size:18px;font-weight:400;margin:0 0 0 0;padding:12px 65px 12px 15px;position:relative;border-left:3px solid #fc4f3f;text-transform:uppercase;transition:all .5s ease-out;}



#PopularPosts1 h2:before {content:'\f005';font-family:FontAwesome;font-size:20px;font-style:normal;font-weight:normal;top:0;right:0;position:absolute;padding:12px 15px;background:transparent;color:#2c3038;line-height:26px;}






#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:#ff4c54;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#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,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;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:70px;height:70px;}#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}#PopularPosts3 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;padding:4px; border:1px solid #fff !important; background: #F2F2F2;}#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-560deg) ; -webkit-transform: scale(1.2) rotate(-560deg) ; -o-transform: scale(1.2) rotate(-560deg) ; -ms-transform: scale(1.2) rotate(-560deg) ; transform: scale(1.2) rotate(-560deg) ;}



Kiểu 4:





#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; /* Color of the widget's title */ } #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; /* text color of numbers */ background: #FB8835; /* background color of numbers */ border: .2em solid #fff; /* border color */ -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; /* font size of post titles */ 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 5:





#PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin-bottom: 5px; font-size:17px; color:#757575; /* Color of the widget's title */ text-align:left; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ 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; /* background color of the numbers */ 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; /* background color of the right arrow*/ } #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; /* Background color on mouseover */ } #PopularPosts1 ul li a:hover{ color:#444; /* Link color on mouseover */ margin-left:3px; }



Kiểu 6 :





#PopularPosts1 h2{ position:relative; right:-2px; padding:8px 63px 6px 17px; width:100%; margin:0; font-size:16px; background:#4F4F4F; /* Background color */ color:#f2f2f2; /* Color of the widget's title */ 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; /* Arrow background color on the left */ } #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; /* Font size of the links */ color: #666; /* Color of the links */ text-decoration:none; transition: all .1s ease-in-out;font-weight: bold; } #PopularPosts1 ul li a:hover{ color:#3366FF; margin-left:3px; }



Kiểu 7 :





#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{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 6px 10px; padding:4px 5px; } #PopularPosts1 ul li:before{ /* Style of the numbers */ content:counter(li); counter-increment:li; position:absolute; top:3px; left:-39px; font-size:21px; width:28px; height:28px; border-radius: 50%; color:#777; /* Text color */ border: 2px solid #ddd; /* Rounded border color */ 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; /* color of the links */ text-decoration:none; font-size:14px; /* Font size of the links */ font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-left:3px; }



Kiểu 8:





/*--- MBT Popular Posts --- */ .popular-posts ul { padding-left: 0px; counter-reset: popcount; } .popular-posts ul li:before { list-style-type: none; margin-right: 15px; padding: 0.3em 0.6em; counter-increment: popcount; content: counter(popcount); font-size: 16px; background: #292D30; color: #ffffff; position: relative; font-weight: bold; font-family: georgia; float: left; border: 2px solid #dddddd; box-shadow: 1px 2px 9px #666666; } .popular-posts ul li { border-bottom: 1px dashed #dddddd; } .popular-posts ul li:hover { border-bottom: 1px dashed #696969; } .popular-posts ul li a { text-decoration:none; color:#5A5F63; } .popular-posts ul li a:hover { text-decoration:none; }

Nguồn: http://www.vnzed.com
Cách thay đổi và cài đặt giao diện (template) cho blogger

Cách thay đổi và cài đặt giao diện (template) cho blogger

Một ngày nào đó bạn cảm thấy chán cái giao diện (Template) cũ trong blogger blogspot, bạn muốn thay đổi và cài đặt lại nó, làm thế nào để thay đổi giao diện template trong blogger blogspot đây? Bài viết cách thay đổi và cài đặt giao diện (template) cho blogger blogspot sẽ hướng dẫn bạn làm điều đó.

Cách thay đổi và cài đặt giao diện (template) cho blogger


Đầu tiên bạn cần Đăng nhập vào Blogger, sau đó hãy nhấp vào Mẫu (Template) hãy để ý phía góc trên bên trái có dòng chữ Bố cục

 
Thay đổi giao diện template cho blogspot

Cách thay đổi giao diện template cho blogspot

Tiếp theo để tải lên mẫu giao diện (Template) bạn nhấp vào Browse tìm đến template bạn đã download về, file này phải là file XML, nhấp vào tải lên để hoàn tất tải.

Để lưu backup lại template đã chỉnh sửa hoàn tất bạn nhấp vào tải xuống mẫu hoàn chỉnh

Thay đổi giao diện template cho blogspot

Với bài viết hướng dẫn Cách thay đổi cài đặt giao diện (template) cho blogger chúc các bạn tạo một blogger hoàn chỉnh nhất.

Xem thêm bài viết: Hướng dẫn sao lưu (backup) toàn bộ dữ liệu cho blogspot
Chúc thành công!
Cách tạo blogger những bước cơ bản nhất

Cách tạo blogger những bước cơ bản nhất

Cách tạo blogger cho người mới bắt đầu là rất cần thiết. Để thiết kế website bằng blogger blogspot của Google với những bước đơn giản, bài viết cách tạo blogger những bước cơ bản nhất hướng dẫn những người mới làm như thế nào để dần dần từng bước có một blogger đẹp theo phong cách chuyên nghiệp nhất.

Cách tạo blogger những bước cơ bản nhất


Blogger hay còn gọi là blogspot là một CMS miễn phí của ông lớn Google, vì là con đẻ nên Blogger được dành nhiều ưu ái hơn so với những dịch vụ tạo blog khác. Ngày nay để tạo một website rất dễ dàng vì đã có sẵn các hosting miễn phí như Blogger, Blog.com, Weebly...Nhưng được sử dụng nhiều nhất vẫn là Blogger.

Những đắc điểm nổi bật khi tạo website bằng Blogger


  • Đăng ký dễ dàng, chỉ cần bạn có tài khoản gmail là có thể đăng ký
  • Cấu trúc đơn giản, dễ dàng chỉnh sửa, hỗ trợ giao diện tiếng Việt
  • Các hàng mẫu Blogger Template blogspot miễn phí
  • Tốc độ tải nhanh, thân thiện
  • Sử dụng không mất phí như weebly, wordpress

Hướng dẫn đăng ký và tạo website bằng Blogger blogspot


Bước đầu tiên bạn truy cập vào http://www.blogger.com/, bạn nhập địa chỉ gmail và mật khẩu để log in. Bạn có thể tạo hồ sơ bằng hố sơ Google hoăc hồ sơ trên Blogger sau đó nhấn tiếp tục


Cách tạo blogger những bước cơ bản nhất

Tiếp theo bạn sẽ thấy giao diện như hình bên dưới, để khởi tạo một blog bạn nhấp vào Blog mới



Bạn điền tiều đề, địa chỉ và chọn mẫu có sẵn cho Blogger của mình, sau đó nhấp vào Tạo blog

Cách tạo blogger những bước cơ bản nhất

Tiếp theo sẽ được giao diện như bên dưới

Cách tạo blogger những bước cơ bản nhất

Để đăng bài viết bạn nhấp vào Bài đăng mới, để xuất bạn hãy nhấp vào Xuất bản, bạn nhấp vào Lưu để lại lại bài viết trong bài viết nháp hoặc cũng có thể nhấp vào xem trước bài viết của mình.

Cách tạo blogger những bước cơ bản nhất

Để chỉnh sửa Bố cục Blog bạn nhấp vào Bố cục, ở đây bạn có thể thêm bớt các tiện ích, để thêm bạn nhấp vào thêm tiện ích hoặc chỉnh sửa bạn nhấp vào chỉnh sửa góc bên dưới.

Cách tạo blogger những bước cơ bản nhất

Cách thêm một tiện ích mới nhấp vào thêm tiện ích

Cách tạo blogger những bước cơ bản nhất

Bạn có thể tùy chọn các tiện ích ở trên, để thêm một tiện ích trống nhấp vào HTML/JavaScript trong ô nội dung chúng ta có thể viết bằng văn bản thường, html, css hoặc bằng javascript, bạn có thể lưu, hủy hoặc xóa như hình bên dưới.

Cách tạo blogger những bước cơ bản nhất


Cách chỉnh sửa mẫu HTML 


Bạn nhấp vào mẫu => Chỉnh sửa HTML hoặc có thể nhấp vào tùy chỉnh để thay đổi màu sắc, font chữ, bố cục cho giao diện...

Cách tạo blogger những bước cơ bản nhất

Cuối cùng để xem blog vừa tạo bạn nhấp vào xem blog phía góc phải trên cùng.

Trên đây là các bước đơn giản và cơ bản để tạo một blogger đơn giản cho người mới bắt đầu, chúc các bạn có những blog đẹp cho mình.

Bạn có thể xem thêm bài viết: Cách thay đổi và cài đặt giao diện (template) cho blogger
Code cuộn trang hiển thị thêm bài viết cho Blogspot

Code cuộn trang hiển thị thêm bài viết cho Blogspot

Code cuộn trang hiển thị thêm bài viết cho Blogspot


Hiệu ứng cuộn trang hiển thị thêm bài viết đẹp cho Blogger blogspot - Infinite Scrolling là một hiệu ứng đẹp, và rất tiện lợi. Bạn không cần phải nhấp chuột để chuyển trang hay mở rộng xem thêm các bài viết mà nó hoàn toàn tự động hiển thị thêm các bài viết cũ khi bạn dùng chuột kéo đi xuống.

Hiệu ứng next trang

Hiệu ứng cuộn trang hiển thị thêm bài viết đẹp với hình ảnh nền khá bắt mắt, các Blogger nên sử dụng và chắc chắn bạn sẽ thích nó. Dưới đây là code các bạn hãy copy và paste vào phía trên thẻ </head> nhé

Code cuộn trang hiển thị thêm bài viết cho blogger


<!--Hiệu ứng Infinite Scrolling Code cuộn trang tự động--> 
 
<b:if cond='data:blog.pageType == "index"'> 
 
<script type='text/javascript'> 
 
jQuery.ias({
 
item: '.post-outer',
 
pagination: '#blog-pager',
 
next: '#blog-pager-older-link a', 
 
container : '.blog-posts',
 
loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQrUpfrCJPsKoOvAhu5l_wKQ76ZZKh3pPiIFBRjCEE-Ppi_MlawDB5uIEHY8jOaC2Kvc_7_c7xz0WcABFO94Y5hYL809vJeV6l8xd5xDSRdSS0oBcPOBwleoNe4XJlwxSD-Vk9hPhgqwPQ/s1600/loading.gif
 
}); 
 
</script> 
 
<script src='https://sites.google.com/site/10kthuthuatblogger/code/code-cuon-trang.js' type='text/javascript'/> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> </b:if> 
 
<!--Hiệu ứng Infinite Scrolling Code cuộn trang tự động-->

Tùy chỉnh:
  •  Nếu Blogger của bạn đã có jQuery 1.9.1 rồi thì không cần phải thêm nó vào nữa có thể bỏ đi
  • Url màu xanh là ảnh nền load bạn cũng có thể thay nó bằng ảnh khác nếu bạn thích

Sau khi chèn code này vào bạn hãy lưu lại, từ bây giờ bạn sẽ không phải lo lắng hay ngại khi cuộn trang hiển thị thêm bài viết nữa. Chúc bạn thành công!
Tạo Related Post widget cho blogger có thumbnail

Tạo Related Post widget cho blogger có thumbnail

Related Post widget (bài viết liên quan) trong Blogger là quan trọng nhất, dưới mỗi bài đăng nên chèn Related Post widget để độc giả có thể tìm kiếm thêm một vài thông tin hữu ích. Với bài viết Tạo Related Post widget cho blogger có thumbnail dạng đẹp hi vọng giúp bài đăng của các Blogger Blogspot giao diện mới tốt hơn.



Related Post widget (bài viết liên quan)
Related Post widget blogger có thumbnail


Tạo Related Post widget blogger có thumbnail


Bước 1: Bạn cần đăng nhập vào Blogger => Mẫu (Template) => Chỉnh sửa HTML (Edit HTML)

Bước 2: Tìm thẻ ]]></b:skin> bằng cách nhấp Ctrl + F và chèn code CSS lên phía trên nó

#related-posts{
 float:left;
 height:auto;
 width:660px;
 border-top:1px dashed #d0cfff;
 border-bottom:1px dashed #d0cfcf;
 padding-top:20px;margin-top:20px}
#related-posts a{
 width:200px!important;
 transition:all 300ms ease-in-out;
 -webkit-transition:all 300ms ease-in-out}
#related-posts img{
 width:200px!important;
 transition:all 310ms ease-in-out;
 -webkit-transition:all 310ms ease-in-out;
 border:1px solid;padding:1px}
#related-posts img:hover{
 opacity:0.6;
 transition:all 310ms ease-in-out;
 -webkit-transition:all 310ms ease-in-out
 } 

Bước 3: Bạn tìm tới thẻ </head> và chèn code phía trước nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
var defaultnoimage=&quot;Ảnh Nền Khi Không Có Ảnh Hiển Thị;;
<script type='text/javascript'>
var maxresults=6;
var splittercolor=&quot;#fcf8f8&quot;;
var relatedpoststitle=&quot;RELATED POST:&quot;;
</script>
<script src='https://sites.google.com/site/10kthuthuatblogger/related-post/228052015.js' type='text/javascript'/></b:if>

Bước 4: Bước này là sắp hoàn tất rồi, bạn hãy lấy code bên dưới và chèn phía sau <div class='post-footer'>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if> 

Cuối cùng lưu lại để xem kết quả.

Tạo Related Post widget blogger có thumbnail
tao, related, post, widget, Related Post widget, blogger, blogspot, thumbnail, anh, hinh thu nho
Cách tối ưu hóa meta tag cho blogger

Cách tối ưu hóa meta tag cho blogger

Tối ưu hóa thẻ meta là công việc hàng đầu trong việc seo onpage website và Blogger cũng vậy. Để thân thiện với các công cụ tìm kiếm (Search Engine) vì vậy bạn phải tối ưu hóa thẻ meta cho website blogspot của bạn.

Cách tối ưu hóa meta tag cho blogger
Cách tối ưu hóa meta tag cho blogger


Các template được thiết kế sẵn trên mạng chưa được tối ưu hoàn toàn, bạn phải chỉnh sửa rất nhiều. Vì thế để nhanh chóng hơn bài viết này sẽ giới thiệu với bạn cách Cách tối ưu hóa meta tag cho blogger.

Cách tối ưu hóa meta tag cho blogger

Code tối ưu hóa meta tag


Đầu tiên bạn đăng nhập vào Blogger => Template => Chỉnh sửa HTML, xóa tất cả code nằm trong <head>...<b:skin>

<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:title='data:blog.title + &quot; - Atom&quot;' href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link href='https://plus.google.com/YOURGOOGLEPLUS' rel='author'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
    <!-- SEO Meta Tag -->
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
   <meta expr:content='data:blog.title' name='keywords'/>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
   <meta expr:content='data:blog.pageName' name='keywords'/>
    </b:if>
    </b:if>
    </b:if>
    <b:if cond='data:blog.searchLabel'>
      <meta content='noindex,nofollow' name='robots'/>
    </b:if>
    <b:if cond='data:blog.isMobile'>
      <meta content='noindex,nofollow' name='robots'/>
    <b:else/>
      <meta content='index,follow' name='robots'/>
    </b:if>
    <meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>

    <!-- SEO Title Tag -->
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:if cond='data:blog.isMobile'>
      <title><data:blog.pageTitle/> Mobile Version</title>
    <b:else/>
      <title><data:blog.pageTitle/></title>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <title>Archive for <data:blog.pageName/></title>
      <meta content='noindex,nofollow,noarchive' name='robots'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.isMobile'>
      <title><data:blog.pageName/></title>
    <b:else/>
      <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
    <b:else/>
      <title><data:blog.pageName/></title>
    </b:if>
    </b:if>
    </b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Mô tả Blog của bạn' name='description'/>
<meta content='Từ khóa Blog của bạn' name='keywords'/>
</b:if>
<meta content='YOURFBAPPID' property='fb:app_id'/>
<meta content='YOURFBID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found</title>
<meta content='5;/' http-equiv='refresh'/>
</b:if>

Save và xem kết quả.
Popular Post widget bài viết phổ biến cho Blogger Blogspot.

Popular Post widget bài viết phổ biến cho Blogger Blogspot.

Popular Post widget bài viết (đăng) phổ biến đa màu sắc đẹp cho blogger blogspot là một thủ thuật tiện ích hiển thị bai viet pho bien cho blogger, có thể hiển thị hình ảnh thu nhỏ (thumbnail) hoặc không. Popular Post widget cần phải trang trí để thay đổi tạo nên điều gì đó mới lạ cho blogger của bạn, vì vậy với bài viết này giới thiệu và chia sẻ với mọi người code tạo Popular Post widget bài viết phổ biến cho Blogger Blogspot.

Popular Post widget bài viết phổ biến

Xem chi tiết: Popular post cho blogger 7 sắc vồng cực đẹp

2 Cách xóa nút chỉnh sửa nhanh widget cho blogspot

2 Cách xóa nút chỉnh sửa nhanh widget cho blogspot

Nút chỉnh sửa nhanh cho widget là  tiện ích để các Blogger có thể chỉnh sửa nhanh chóng widget ngay trên trang mà bạn không cần phải vào Bố cục.



Hướng dẫn xóa nút chỉnh sửa nhanh widget cho blogspot


Cách 1: Bạn đăng nhập vào Blogger => Chỉnh sửa HTML. Sau đó hãy tìm đến widget mà bạn muốn chỉnh sửa và đoạn code sẽ như sau:


</b:includable>
  </b:widget>
  <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
Hãy chú ý <b:include name='quickedit'/> và bạn sẽ xóa nó

Cách 2: Ấn Ctrl + F tìm đến ]]></b:skin> và thêm code này bên trên nó

.quickedit{ display:none; }
Với cách thứ hai này khi bạn thêm một widget bất kì thì nó sẽ ẩn hết tất cả các nút chỉnh sửa nhanh mà bạn không cần phải xóa như cách thứ nhất.

Với 2 cách xóa nút chỉnh sửa nhanh cho blogger chỉ với thủ thuật nhỏ thôi thì blog của bạn đã trông chuyên nghiệp hơn chút rồi. Chúc bạn thành công nha!
Cách ẩn widget biến mất hoàn toàn cho blogger

Cách ẩn widget biến mất hoàn toàn cho blogger

Khi xây dựng một blog thì các Blogger chưa biết làm thế nào để ẩn widget biến mất không hiển thị nữa. Chỉ một đoạn code nho nhỏ bạn sẽ ẩn nó đi hoàn toàn. Dưới đây là code ẩn widget biến mất hoàn toàn không hiển thị nữa.

Cách ẩn widget biến mất hoàn toàn cho blogger
Cách ẩn widget biến mất hoàn toàn cho blogger

Cách ẩn widget cho blogger


Bước 1: Đăng nhập vào BLogger => Mẫu => Chỉnh sửa HTML

Bước 2: Tìm đến widget bạn muốn ẩn đi ví dụ HTML1, HTML2, HTML...Và thêm đoạn code </head>


<style> div#HTML1, div#HTML1, div#Popular Posts, div#Blogarchive1 { display: none; } </style>

Ok hãy lưu lại nếu không muốn ẩn hữa thì bạn có thể xóa code này đi.

Như vậy là mình đã hướng dẫn các bạn cách ẩn widget biến mất hoàn toàn rồi. Chúc thành công!
Hiển thị bài viết theo nhãn (Label) thumbnail cho blogger

Hiển thị bài viết theo nhãn (Label) thumbnail cho blogger

Hiển thị bài viết theo nhãn (Label) thumbnail cho blogger

Hiển thị bài viết theo nhãn (Label) thumbnail cho blogger có hình thu nhỏ (thumbnail) là một tiện ích khá quen thuộc đối với các Blogger, các bài viết sẽ được phân loại (categories) theo một nhãn (Label) nhất định.

Xem thêm bài viết:
>> 5 kiểu bài viết mới ( Recent Post Widget) đẹp cho blogspot 
>> Tạo bài viết mới nhất có hình thu nhỏ cho blogger
>> Tạo bài viết mới có ảnh hiệu ứng chuyển động cho blogger




Hiển thị bài viết theo nhãn (Label)


Bên cạnh những tiện ích như bài đăng phổ biến (Popular Post), Bài viết mới (Recent Post) thì Hiển thị bài viết theo nhãn (Label) cho Blogger cũng khá đa dạng và phong phú. Trong bài viết này sẽ chia sẻ code hiển thị bài viết theo nhãn.

Code hiển thị bài viết theo nhãn (Label) cho blogger

Bước 1: Đăng nhập Blogger => Mẫu (Template) => Chỉnh sửa HTML
copy code bên dưới và paste lên phía bên trên thẻ </b:skin>

img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
list-style:none;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

Bước 2: Vào bố cục => Add widget => Copy code bên dưới và paste vào trong widget vừa thêm

<script type='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nhãn của bạn?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Save lại và xem kết quả.

Tùy chỉnh:
  • 5; là số bài viết được hiển thị
  • Label; bạn điền nhãn bạn cần hiển thị

Hiển thị bài viết theo nhãn (Label) thumbnail cho blogger

Recent Post widget bài viết mới nhất có hình ảnh (thumbnail) thu nhỏ đẹp cho blogger

Recent Post widget bài viết mới nhất có hình ảnh (thumbnail) thu nhỏ đẹp cho blogger


Hôm nay mình sẽ giới thiệu cùng mọi người dạng Recent Post widget bài viết mới nhất có hình ảnh (thumbnail) thu nhỏ đẹp cho blogger. Recent Post widget with thumbnail for blogger.



Recent Post widget bài viết mới nhất có hình ảnh (thumbnail) thu nhỏ đẹp cho blogger

Các bước tạo Recent Post widget bài viết mới nhất có hình ảnh (thumbnail) thu nhỏ đẹp cho blogger


Bước 1: Đăng nhập Blogger => Thêm tiện ích (Add widget)

Bước 2: Copy và paste code bên dưới vào trong widget

<div class="eggTray">
<script
 src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://softwarecrack.ga/feeds/posts/default"},
"hideHeader":"false","height":"490","count": 10 }</script>
<div
 style="font-family: arial, sans-serif; font-size: 9px;" 
class="ycdr"><a 
href="http://www.softwarecrack.ga/2015/05/tao-bai-viet-moi-nhat-co-hinh-thu-nho.html"
 target="_blank" title="Grab this widget">Recent Posts 
Widget</a> <a href="http://softwarecrack.ga/" 
target="_blank">Blogger 
Widgets</a></div><noscript>Your browser does not 
support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr
 {background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8s0KcO5sRoIcsqFpdg7RdwuhziOBgd-bF606Dri_9itGEB2ffgIqUxqBrSmVeQM6LUG5MKa1bX1O2pE93HFqWE3qQ-dshttfNH2i4UetqlhtdYKsawd4KMsxNsT0Niz4Eyd4a_SyKcfk/s1600/logo.png)
 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 
0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Tùy chỉnh:
  • http://softwarecrack.ga; thay bằng tên blog của bạn
  • height:490; bạn có thể thay đổi chiều cao bài viết mới của bạn
  • 10; số lượng bài viết hiển thị
Tags: Bài viết mới, bài viết mới nhất cho blogger, bài viết mới nhất có hình thu nhỏ cho blogger, recent post widget with thumbnail for blogger, bài viết mới có ảnh thu nhỏ cho blogspot, tạo bài viết mới có hình ảnh thu nhỏ đẹp cho blogspot.
Tạo bài viết mới nhất có hình thu nhỏ cho blogger

Tạo bài viết mới nhất có hình thu nhỏ cho blogger


Có nhiều bài viết mới (Recent Post Widget) khác nhau, mỗi loại có một đặc điểm khác nhau hiển thị lên blogger. Với một số tùy chỉnh CSS bạn có thể tạo ra bài viết mới nhất (Recent Post) có hình thu nhỏ hình tròn, hình vuông. Thêm nữa việc thêm các loại Recent Post có ảnh làm blog trở nên xinh động, hấp dẫn hơn.



Hướng dẫn tạo bài viết mới nhất có hình thu nhỏ cho blogger


Hướng dẫn tạo bài viết mới nhất có hình thu nhỏ cho blogger

Đăng nhập vào Blogger => Bố cục (Layout) => Thêm tiện ích (Add widget) và copy code và paste vào trong nó. Sau đó lưu lại và kiểm tra kết quả

Code bài viết mới nhất tại đây

Chúc bạn thành công!
Tạo bài viết mới nhất có ảnh cho blogger blogspot dạng ô vuông đẹp

Tạo bài viết mới nhất có ảnh cho blogger blogspot dạng ô vuông đẹp

Tiếp tục với loạt bài viết tạo bài viết mới nhất (Recent Post Widget) có ảnh thumbnail đẹp trong bài viết này mình hướng dẫn mọi người làm như thế nào tạo bài viết mới nhất có ảnh cho blogger blogspot dạng ô vuông. Mọi người hãy theo dõi nhé!



Hướng dẫn tạo bài viết mới nhất có ảnh cho blogger blogspot dạng ô vuông

Hướng dẫn tạo bài viết mới nhất có ảnh cho blogger blogspot dạng ô vuông


Bước 1: Đăng nhập vào blogger của bạn => Chỉnh sửa HTML (Edit HTML)

Bước 2: Thêm code CSS trước ]]></b:skin> bằng cách ấn Ctrl + F

img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}

Bước 3: Thêm Widget bằng cách vào Bố cục => Thêm widget (Add widget) và paste code vào

<script type='text/javascript'>
//<![CDATA[
var numposts = 4;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://softwarecrack.ga/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script> <script type="text/css" src="https://sites.google.com/site/thuthuatbloggerpro/trang-chu/animated-recent-posts-ycode-6.js"></script>

Tùy chỉnh:
  • Thay softwarecrack.ga bằng blog của bạn
  • Để hiển thị bài viết theo nhãn ta thêm /-/Label vào giữa default?/-/Label?order
Tạo bài viết mới nhất có ảnh cho blogger
Tạo bài viết mới có ảnh hiệu ứng chuyển động cho blogger

Tạo bài viết mới có ảnh hiệu ứng chuyển động cho blogger

Code tạo Bài viết mới có hình ảnh thu nhỏ với hiệu ứng chuyển động cuộn lên xuống cho blogger blogspot là Recent Post khá đẹp, với CSS đóng khung hình bo góc, di chuyển khá mượt mà bằng cách sử dụng jQuery. Nếu bạn đưa vào blog của bạn sẽ trở nên rất nổi bật. Thêm nữa khi bạn rê chuột vào thumbnail thì xuất hiện hiệu ứng ảnh xoay tròn cực đẹp mắt.



tao bai viet moi co hinh anh thu nho chuyen dong cho blogger

Code tạo bài viết mới có hình ảnh thu nhỏ chuyển động cuộn lên xuống cho blogger blogspot


Bước 1: Đăng nhập vào Blogger => Mẫu(Template) => Chỉnh sửa HTML

Bước 2: Ấn Ctrl + F tìm ]]></b:skin> và chèn code ngay phía trên nó

#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwmTKSs219FQZFYvu1pkWVPMJQSckJhGI5YYBpyvY0NVCpRJY1SQutHgz5CESXj3WXcy4NvtJmhsv33Wizuj6qVgjy9nAsuv1xZqR1odEKJzGONKuU9LVWWx2CEEFwLAe_LPZ6NfGBoVV/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

Bước 3: Vào bố cục => Thêm widget (Add widget) => Thả code bên dưới vào

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-JV9pRG5xe5YBTHbMUhrVg95YlGtOZOz2H6lECbgD9hinFlXNxu-vwf5dnrq1cuzqPkyeKehp1Yg1F8vWc7t7CcassombTozcv1LsbPzMAvDFIJv-UIbgdPPgcBzl412xiOdOLwAhIKU/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-JV9pRG5xe5YBTHbMUhrVg95YlGtOZOz2H6lECbgD9hinFlXNxu-vwf5dnrq1cuzqPkyeKehp1Yg1F8vWc7t7CcassombTozcv1LsbPzMAvDFIJv-UIbgdPPgcBzl412xiOdOLwAhIKU/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-JV9pRG5xe5YBTHbMUhrVg95YlGtOZOz2H6lECbgD9hinFlXNxu-vwf5dnrq1cuzqPkyeKehp1Yg1F8vWc7t7CcassombTozcv1LsbPzMAvDFIJv-UIbgdPPgcBzl412xiOdOLwAhIKU/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-JV9pRG5xe5YBTHbMUhrVg95YlGtOZOz2H6lECbgD9hinFlXNxu-vwf5dnrq1cuzqPkyeKehp1Yg1F8vWc7t7CcassombTozcv1LsbPzMAvDFIJv-UIbgdPPgcBzl412xiOdOLwAhIKU/s1600/noimage.png";
imgr[4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://softwarecrack.ga/";
limitspy=4;
intervalspy=4000;
</script>
<div class="workwidget1" style="display:none!important"><a href="http://softwarecrack.ga/" rel="dofollow" target="_blank">Thủ Thuật Blogger</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<div id="workwidget">
<script type="text/javascript" src="https://sites.google.com/site/thuthuatbloggerpro/trang-chu/animated-recent-posts-ycode-2.js">
</script>
</div>

Tùy chỉnh:
  • boxwidth = 255; chiều rộng hộp (box)
  • thumbwidth = 50; chiều rộng hình ảnh thu nhỏ (thumbnail)
  • thumbheight = 50; chiều cao hình ảnh thu nhỏ
  • numposts = 10; số lượng bài được hiển thị
  • http://softwarecrack.ga; thay bằng link của bạn
Cuối cùng hãy lưu lại và xem kết quả của bạn. Cảm ơn bạn đã đọc bài viết "code tạo bài viết mới có hình ảnh thu nhỏ chuyển động cuộn lên xuống cho blogger blogspot"
Chúc bạn thành công!
Auto refresh trang web, reload website

Auto refresh trang web, reload website

[Auto refresh] Các phương pháp tự động refresh, reload

Auto refresh trang web hay tự động load lại trang web (tự động tải lại trang web) là một công việc website hoặc blog sẽ được load lại sau một thời gian cố định hoặc thay đổi. Code auto refresh Pages rất tốt cho seo web, đây là một thủ thuật blackhat, nhưng bạn đôi khi cũng nên lừa tình bác Google một chút, nó sẽ giúp tăng traffic, rank cho web của bạn. Dưới đây là các phương pháp tự động refresh lại trang web hay blog của bạn. Hãy áp dụn cho website của mình nhé!

auto refresh

1. Auto refresh bằng thẻ meta

Cách này rất đơn giản và nhanh nhất, và có thể chèn code autorefresh phía trên phần header của wbesite.


<meta http-equiv="refresh" content="15;url=http://softwarecrack.ga/">

Tùy chỉnh:
  • 15; là thời gian để load lại trang web của bạn, hãy thay nó nếu bạn thích
2. Tự động tải lại trang web bằng cách thêm JavaScript, thêm vào phần <head>...</head> của website

<!--
<script type="text/javascript">
 function reFresh() {
   window.open(location.reload(true))
 }
 window.setInterval("reFresh()",30000);
</script>
-->

Tùy chỉnh:
  • 30000; là thời gian auto refresh lại trang
auto, refresh, trang web, blog, tự động, tải lại, chu kì, random, tự động load lại trang web,JavaScript, Auto refresh bằng thẻ meta, tiện ích,Tự động làm mới trang, Auto refresh random thời gian
3. Auto refresh random thời gian
Đây là phương pháp khá ưu việt, thời gian sẽ thay đổi liên tục vì thế các bot của Goolgle sẽ không phát hiện được bạn gian lận như hai phương pháp trên

<!--
<script type="text/javascript">
 function reFresh() {
   window.open(location.reload(true))
 }
 window.setInterval("reFresh()",<?php echo rand(15000, 30000); ?>);
</script>
-->

4. Tự động refresh web với trình duyệt Firefox, Google Chrome

 Các bạn có thể đọc bài hướng dẫn này http://1thuthuat.blogspot.com/2015/04/tien-ich-tu-dong-refresh-trang-web.html

Bài này với 4 phương pháp auto refresh trang web giúp bạn có thêm nhiều phương pháp tăng traffic cho website của mình nhé!

How to Auto Refresh Pages in Chrome, Firefox and Opera

Auto Read More with thumbnail for Blogger/Blogspot Posts

Auto Read More with thumbnail for Blogger/Blogspot Posts

Auto Readmore được các blogger tạo ra rất nhiều loại code, những để sử dụng được nó thì hơi khó đối với newbie, bởi vì nó liên quan đến JavaScipt, mình cũng biết chút ít về CSS mà mày mò mãi mới chỉnh sửa được cái resize ảnh cho auto Read More with thumbnail for Blogger/Blogspot Posts. Hôm nay trong bài viết này mình sẽ hướng dẫn chi tiết về cách tạo auto Read More with thumbnail for Blogger/Blogspot Posts dạng danh sách mọi người theo dõi nhé!

Auto Read More with thumbnail for Blogger/Blogspot Posts
Auto Read More with thumbnail for Blogger/Blogspot Posts

Các bước thực hiện auto Read More with thumbnail for Blogger/Blogspot Posts


Bước 1: Bạn đăng nhập vào Blogger => Mẫu (Template) => Chỉnh sửa HTML (Edit HTML)

Bước 2: Ấn Ctrl + F tìm <data:post.body/> sau đó thay thế (replace) bằng đoạn code bên dưới


 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <div expr:id='&quot;summary&quot; + data:post.id'>
                <data:post.body/>
            </div>
            <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>

Auto Read More with thumbnail for Blogger/Blogspot Posts

Bước 3: Ấn Ctrl + F tìm tới ]]></b:skin> và chèn code lên phía trên nó (above)


.post {height:auto;width:100%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.posts-thumb {width:32%!important;height:200px!important;overflow:hidden;clear:both;}
.post-body {border-radius:0px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}
.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: block;}

Bước 4: Lưu lại để kiểm tra kết quả nhé!

Chúc mừng bạn đã tạo xong một auto Read More with thumbnail for Blogger/Blogspot Posts.

Chúc thành công nhé!
 Bài viết mới (Recent Post) nhiều màu sắc cho blogspot đẹp.

Bài viết mới (Recent Post) nhiều màu sắc cho blogspot đẹp.

Có nhiều dàng bài viết mới (Recent Post) cho blogspot, có dạng hiển thị có ảnh, có dạng trượt dọc load đổi bài...Và hôm nay nữa thêm một dạng bài viết cho các bạn dạng này bài viết mới (Recent Post) nhiều màu sắc cho blogspot đẹp.



 bài viết mới (Recent Post) nhiều màu sắc cho blogspot đẹp.

Đầu tiên các bạn đăng nhập => Bố cục => Thêm tiện ích => Sau đó copy và paste code ở dưới vào tiện ích.

Code bài viết mới (Recent Post) nhiều màu sắc cho blogspot đẹp

<style>
#recent-posts ul li {
list-style-image:none;
}#recent-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
#recent-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
#recent-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 89%;
}
#recent-posts ul li:first-child:after {
content: "1";
}
#recent-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
#recent-posts ul li:first-child + li:after {
content: "2";
}
#recent-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
#recent-posts ul li:first-child + li + li:after {
content: "3";
}
#recent-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
#recent-posts ul li:first-child + li + li + li:after {
content: "4";
}
#recent-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
#recent-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
#recent-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
#recent-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
#recent-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
#recent-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
#recent-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
#recent-posts ul li:first-child:after, #recent-posts ul li:first-child + li:after, #recent-posts ul li:first-child + li + li:after, #recent-posts ul li:first-child + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li + li + li:after, #recent-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
#recent-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div id="recent-posts">
<script language="JavaScript">
home_page = "http://sofwarecrack.ga/";
numposts = 5;
imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script>
<script>
var _0x8189=["\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x73\x74\x61\x72\x74","\x74\x72\x69\x67\x67\x65\x72","\x62\x69\x6E\x64","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x73\x74\x6F\x70","\x73\x69\x6D\x70\x6C\x65\x53\x70\x79","\x75\x6C\x2E\x73\x70\x79","\x66\x6E","\x68\x65\x69\x67\x68\x74","\x3E\x20\x6C\x69\x3A\x66\x69\x72\x73\x74","\x66\x69\x6E\x64","\x3C\x6C\x69\x3E","\x68\x74\x6D\x6C","\x3C\x2F\x6C\x69\x3E","\x70\x75\x73\x68","\x65\x61\x63\x68","\x3E\x20\x6C\x69","\x6C\x65\x6E\x67\x74\x68","\x63\x73\x73","\x70\x61\x72\x65\x6E\x74","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x57\x72\x61\x70\x70\x65\x72\x22\x20\x2F\x3E","\x77\x72\x61\x70","\x72\x65\x6D\x6F\x76\x65","\x3A\x67\x74\x28","\x29","\x66\x69\x6C\x74\x65\x72","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6E\x6F\x6E\x65","\x61\x6E\x69\x6D\x61\x74\x65","\x3E\x20\x6C\x69\x3A\x6C\x61\x73\x74","\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x22\x3E","\x77\x72\x69\x74\x65","\x72\x61\x6E\x64\x6F\x6D","\x66\x6C\x6F\x6F\x72","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x72\x65\x70\x6C\x69\x65\x73","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x20","\x73\x70\x6C\x69\x74","\x63\x6F\x6E\x74\x65\x6E\x74","\x73\x75\x6D\x6D\x61\x72\x79","","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x3C\x69\x3E\x3C\x66\x6F\x6E\x74\x20\x63\x6F\x6C\x6F\x72\x3D\x22","\x22\x3E\x28","\x29\x3C\x2F\x66\x6F\x6E\x74\x3E\x3C\x2F\x69\x3E","\x4A\x61\x6E","\x46\x65\x62","\x4D\x61\x72","\x41\x70\x72","\x4D\x61\x79","\x4A\x75\x6E","\x4A\x75\x6C","\x41\x75\x67","\x53\x65\x70","\x4F\x63\x74","\x4E\x6F\x76","\x44\x65\x63","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x2D","\x22\x3E\x20\x28","\x3C\x62\x3E","\x3C\x2F\x62\x3E","\x3C\x6C\x69\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x65\x63\x65\x6E\x74\x2D\x6C\x69\x6E\x6B\x22\x3E","\x3C\x2F\x61\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x64\x61\x74\x65\x22\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x70\x79\x63\x6F\x6D\x6D\x65\x6E\x74\x22\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x2F\x75\x6C\x3E","\x3C\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3D\x22","\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x3F\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x26\x6F\x72\x64\x65\x72\x62\x79\x3D\x70\x75\x62\x6C\x69\x73\x68\x65\x64\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x73\x68\x6F\x77\x72\x65\x63\x65\x6E\x74\x70\x6F\x73\x74\x73\x22\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x4D\x79\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x4D\x79\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x30\x25\x3B\x20\x74\x6F\x70\x3A\x20\x30\x70\x78\x3B\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x41\x6C\x6C\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x41\x6C\x6C\x20\x42\x6C\x6F\x67\x67\x65\x72\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x30\x25\x3B\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x32\x34\x77\x6F\x72\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x4C\x61\x74\x65\x73\x74\x20\x54\x69\x70\x73\x20\x41\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x62\x69\x74\x6C\x79\x2E\x63\x6F\x6D\x2F\x32\x34\x77\x6F\x72\x6B\x70\x6E\x67\x31\x22\x20\x61\x6C\x74\x3D\x22\x4C\x61\x74\x65\x73\x74\x20\x54\x69\x70\x73\x20\x41\x6E\x64\x20\x54\x72\x69\x63\x6B\x73\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x66\x69\x78\x65\x64\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x31\x30\x25\x3B\x20\x6C\x65\x66\x74\x3A\x20\x30\x25\x3B\x22\x20\x2F\x3E\x3C\x2F\x61\x3E"];jQuery(function (){jQuery(_0x8189[7])[_0x8189[6]](limitspy,intervalspy)[_0x8189[3]](_0x8189[4],function (){jQuery(this)[_0x8189[2]](_0x8189[5]);} )[_0x8189[3]](_0x8189[0],function (){jQuery(this)[_0x8189[2]](_0x8189[1]);} );} );(function (_0x91b2x1){_0x91b2x1[_0x8189[8]][_0x8189[6]]=function (_0x91b2x2,_0x91b2x3){_0x91b2x2=_0x91b2x2||4;_0x91b2x3=_0x91b2x3||5000;return this[_0x8189[16]](function (){var _0x91b2x4=_0x91b2x1(this),_0x91b2x5=true,_0x91b2x6=[],_0x91b2x7=_0x91b2x2,_0x91b2x8=0,_0x91b2x9=_0x91b2x4[_0x8189[11]](_0x8189[10])[_0x8189[9]]();_0x91b2x4[_0x8189[11]](_0x8189[17])[_0x8189[16]](function (){_0x91b2x6[_0x8189[15]](_0x8189[12]+_0x91b2x1(this)[_0x8189[13]]()+_0x8189[14]);} );_0x91b2x8=_0x91b2x6[_0x8189[18]];_0x91b2x4[_0x8189[22]](_0x8189[21])[_0x8189[20]]()[_0x8189[19]]({height:_0x91b2x9*_0x91b2x2});_0x91b2x4[_0x8189[11]](_0x8189[17])[_0x8189[26]](_0x8189[24]+(_0x91b2x2-1)+_0x8189[25])[_0x8189[23]]();_0x91b2x4[_0x8189[3]](_0x8189[5],function (){_0x91b2x5=false;} )[_0x8189[3]](_0x8189[1],function (){_0x91b2x5=true;} );function _0x91b2xa(){if(_0x91b2x5){var _0x91b2xb=_0x91b2x1(_0x91b2x6[_0x91b2x7])[_0x8189[19]]({height:0,opacity:0,display:_0x8189[28]})[_0x8189[27]](_0x91b2x4);_0x91b2x4[_0x8189[11]](_0x8189[30])[_0x8189[29]]({opacity:0},1000,function (){_0x91b2xb[_0x8189[29]]({height:_0x91b2x9},1000)[_0x8189[29]]({opacity:1},1000);_0x91b2x1(this)[_0x8189[23]]();} );_0x91b2x7++;if(_0x91b2x7>=_0x91b2x8){_0x91b2x7=0;} ;} ;setTimeout(_0x91b2xa,_0x91b2x3);} ;_0x91b2xa();} );} ;} )(jQuery);function showrecentposts(_0x91b2xd){document[_0x8189[32]](_0x8189[31]);j=(showRandomImg)?Math[_0x8189[34]]((imgr[_0x8189[18]]+1)*Math[_0x8189[33]]()):0;img= new Array();for(var _0x91b2x8=0;_0x91b2x8<numposts;_0x91b2x8++){var _0x91b2xe=_0x91b2xd[_0x8189[36]][_0x8189[35]][_0x91b2x8];var _0x91b2x3=_0x91b2xe[_0x8189[38]][_0x8189[37]];var _0x91b2x2;var _0x91b2xb;if(_0x91b2x8==_0x91b2xd[_0x8189[36]][_0x8189[35]][_0x8189[18]]){break ;} ;for(var _0x91b2x4=0;_0x91b2x4<_0x91b2xe[_0x8189[39]][_0x8189[18]];_0x91b2x4++){if(_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[40]]==_0x8189[41]){_0x91b2xb=_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[42]];break ;} ;} ;for(var _0x91b2x4=0;_0x91b2x4<_0x91b2xe[_0x8189[39]][_0x8189[18]];_0x91b2x4++){if(_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[40]]==_0x8189[43]&&_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[44]]==_0x8189[45]){_0x91b2x2=_0x91b2xe[_0x8189[39]][_0x91b2x4][_0x8189[38]][_0x8189[47]](_0x8189[46])[0];break ;} ;} ;if(_0x8189[48] in _0x91b2xe){var _0x91b2xf=_0x91b2xe[_0x8189[48]][_0x8189[37]];} else {if(_0x8189[49] in _0x91b2xe){var _0x91b2xf=_0x91b2xe[_0x8189[49]][_0x8189[37]];} else {var _0x91b2xf=_0x8189[50];} ;} ;postdate=_0x91b2xe[_0x8189[51]][_0x8189[37]];if(j>imgr[_0x8189[18]]-1){j=0;} ;cmtext=(text!=_0x8189[50])?_0x8189[52]+acolor+_0x8189[53]+_0x91b2x2+_0x8189[46]+text+_0x8189[54]:_0x8189[50];var _0x91b2x10=[1,2,3,4,5,6,7,8,9,10,11,12];var _0x91b2x11=[_0x8189[55],_0x8189[56],_0x8189[57],_0x8189[58],_0x8189[59],_0x8189[60],_0x8189[61],_0x8189[62],_0x8189[63],_0x8189[64],_0x8189[65],_0x8189[66]];var _0x91b2x12=postdate[_0x8189[47]](_0x8189[68])[2][_0x8189[67]](0,2);var _0x91b2x9=postdate[_0x8189[47]](_0x8189[68])[1];var _0x91b2x13=postdate[_0x8189[47]](_0x8189[68])[0];for(var _0x91b2x1=0;_0x91b2x1<_0x91b2x10[_0x8189[18]];_0x91b2x1++){if(parseInt(_0x91b2x9)==_0x91b2x10[_0x91b2x1]){_0x91b2x9=_0x91b2x11[_0x91b2x1];break ;} ;} ;var _0x91b2xa=(showPostDate)?_0x8189[52]+acolor+_0x8189[69]+_0x91b2x12+_0x8189[46]+_0x91b2x9+_0x8189[46]+_0x91b2x13+_0x8189[54]:_0x8189[50];_0x91b2x3=(aBold)?_0x8189[70]+_0x91b2x3+_0x8189[71]:_0x91b2x3;var _0x91b2x14=_0x8189[72]+_0x91b2xb+_0x8189[73]+_0x91b2xb+_0x8189[74]+_0x91b2x3+_0x8189[75]+_0x91b2xa+_0x8189[76]+cmtext+_0x8189[77];document[_0x8189[32]](_0x91b2x14);j++;} ;document[_0x8189[32]](_0x8189[78]);} ;document[_0x8189[32]](_0x8189[79]+home_page+_0x8189[80]+numposts+_0x8189[81]);document[_0x8189[32]](_0x8189[82]);
</script></div>
<script src="https://dl.dropboxusercontent.com/u/66256041/JQuery/namkna-blogspot-com/jquery-latest.js" type="text/javascript"></script> 

Tùy chỉnh:
  •  #FF4C54; màu nền các bài viết lần lượt từ trên xuống dưới
  • http://softwarecrack.ga; thay bằng địa chỉ của bạn
  • 5; số bài viết được hiển thị
  • showPostDate = false; hiển hị ngày tháng thì sửa lại là true nhé

Chúc thành công với bài viết "bài viết mới (Recent Post) nhiều màu sắc cho blogspot đẹp".

Nguồn: http://www.terocket.com/