Thủ thuật thêm bài viết ngẫu nhiên cho blogger

Bài viết ngẫu nhiên Widget là một widget tuyệt vời cho tính năng quan trọng Blogger Blog. Là điều quan trọng nhất bạn của tiện ích này là nó cho phép người thăm Blog của bạn để lướt nhiều bài đăng trên blog của bạn trong blog.Chắc chắn nó làm tăng các liên kết nội bộ Blog của bạn cho phép lưu lượng truy cập blog của bạn cao hơn.
hãy để người dùng dành nhiều thời gian trong Blog của bạn với thủ thuật blog hay

Thủ thuật thêm bài viết ngẫu nhiên cho blogger

Cài Đặt Bài Viết Ngẫu Nhiên Widget

Hãy chắc chắn rằng bạn Đăng nhập vào tài khoản Blogger của bạn.

Nếu bạn là một người mới bắt đầu trong Blogger Editing, sử dụng Widget một cái click chuột

Manually Add Random Bài Widget

- Đăng nhập vào tài khoản Blogger của bạn.
- Tới Design> Page Elements
- Nhấp chuột vào Add Gadget và tìm kiếm HTML / Javascript mang nó
- Cung cấp cho các tiêu đề như bạn cần (ví dụ: Bài viết ngẫu nhiên)
- Sao chép và dán đoạn mã dưới đây vào phần nội dung
<style type="text/css">
.thuthuatseoblogger-random-posts ul li {
    list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivohCkUZtXvLZKAPZau7Ctn7k6_Ozfh634ED1Lr1EVh0HBzw6DZ_mYRbJJPZhqpMrGVqzfrtHOdIBb9Tzs_qNr3p4I74PY0ghM9zgj-uplV3sU3BpjH_5lTWLWCccQ6E2_0zRju5J0Loo/s1600/tick+list+style.png");
}
</style>
<div class="thuthuatseoblogger-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function thuthuatseoblogger(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://thuthuatseoblogger.blogspot.com/" style="font-size:0pt">Blogger Widgets</a><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=thuthuatseoblogger"></div></script></div>
-Nhấp chuột vào Save và nó Done ...
Nếu bạn có bất kỳ nghi ngờ không ngần ngại hỏi bằng bình luận. 
Tôi hy vọng bạn đã rất thích bài viết này.Leave Comments ...
Xem thêm:
Thủ thuật bảo vệ hình ảnh bằng html và css3 cho blogger

Read more »

Thủ thuật bảo vệ hình ảnh bằng html và css3 cho blogger

Đây là một thủ thuật tuyệt vời để bảo vệ images. Bạn có thể bảo vệ hình ảnh của bạn từ việc sao chép này với thủ thuật blog đơn giản với html và css áp dụng thủ thuật này người lưu hình ảnh sẽ có được một hình ảnh minh bạch thay vì những hình ảnh ban đầu.
Demo:
Cố gắng Lưu hình ảnh dưới đây

Bảo Vệ Hình Ảnh Của Bạn Với CSS Chồng Chéo

Tới Blogger Account Sử dụng các mẹo sau đây đã
<img src="Place image URL Here" />
<img border="0" src="http://i.imgur.com/eYKPf7b.png" alt="NetOops protected image" width="200" height="200" style="left: 0px; opacity: 0; position: relative; top: -216px;" />
Bạn có thể sử dụng mã này bất cứ nơi nào, nếu bạn muốn bảo vệ hình ảnh trong bài viết của bạn. Thêm hình ảnh và chuyển sang tab HTML và copy URL của hình ảnh (eg- http://3.bp.blogspot.com/-xxxxx/xxxxx/s1600/name-of-image.jpg) và dán vào mã đã đề cập ở trên Có bấy nhiêu thôi.

Bảo Vệ Hình Ảnh Của Bạn Với SPAN Nền

Sử dụng đoạn mã sau
<span style="background-image: url(Place image URL here)"><img src="http://i.imgur.com/eYKPf7b.png" width="200" height="200" border="0" alt="NetOops protected Image."></span>
Bạn đã xong..
Nếu bạn thích thì đừng tiếc 1 like, nếu bạn tốt hãy share bài này cho mọi người cùng biết
Tham khảo thêm:
Thủ thuật chống copy sao lưu hình ảnh cho blogger bằng jquery

Read more »

Thủ thuật chống copy sao lưu hình ảnh cho blogger bằng jquery

Đây là một thủ thuật quan trọng nhất tất cả các blogger cần.Thủ thuật này là làm thế nào để bảo vệ tất cả các hình ảnh của bạn trong blog của bạn với một hình ảnh minh bạch bao phủ trên nó. Gần đây tôi đã đăng một bài viết về Làm thế nào để bảo vệ hình ảnh? Điều .Đây về để bảo vệ tất cả các hình ảnh.

Thủ thuật chống copy sao lưu hình ảnh cho blogger bằng jquery

Bước 1: Thêm jQuery plugin (nếu blog của bạn có một plugin jquery, bỏ qua bước này)

Tới Template-> Edit HTML [Một hộp thoại sẽ xuất hiện nhấp vào Tiếp tục ]
Sao chép và dán đoạn mã dưới đây <head> và lưu nó
<script src="http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
Tới Tài khoản Blogger Template -> Edit HTML [Nhấp vào Tiếp tục] Sao chép đoạn mã trên </ head> Chỉ bảo vệ các hình ảnh đầu tiên trong mỗi bài viết
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script><'Text / javascript' script type =>
// <[CDATA [!
$ (function () {
$ ("post-body img:. nth-con (1)".) sau ("<img src = \" http: \ / \ / i.imgur.com \ /eYKPf7b.png \ "alt = \" NetOopsblog bảo vệ hình ảnh \ "style = \" margin-left: -212px; opacity: 0; position: relative; top: 0; \ "\ />");
});
//]]>
</ script>
Bảo vệ tất cả các hình ảnh trong mỗi bài viết
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>
Cảm ơn các bạn đã ghé thăm bài viết.
Hãy like nếu các bạn thích và chia sẻ để ủng hộ.
Xem thêm:

Thủ thuật làm nổi bật comment của admin trong hệ thống bình luận

Read more »

Tùy chỉnh Labels Widget với hiệu ứng rất thời trang

Thủ thuật blog hay tạo nhãn hiển thị danh sách các thể loại bài viết. Tạo nhãn giúp để phân loại các bài viết trong nhóm. Vì vậy, nó sẽ giúp du khách đến xem các bài viết thuộc một thể loại. Mặc định blogger Nhãn phụ tùng không phải là quá thời trang. Đừng lo lắng, ở đây tôi chia sẻ một số nhãn thú vị mát phụ tùng phong cách cho bạn. Nhãn phụ tùng này có thể tạo kiểu bằng cách sử dụng mã CSS đơn giản. Để làm điều này theo các bước ..
Đăng nhập vào Blogger > Bảng điều khiển
Tới Template -> Edit HTML
Tìm ]]> </ b: skin> và sao chép mã của phong cách nhãn thời trang bạn muốn trên ]]> </ b: skin>
Save Template và cảm nhận kỹ năng làm chủ blog của mình nhé

Black Theme Forest Nhãn Với Scaling Hoạt Hình

.Label li { background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent; border: 1px solid; border-radius: 6px 6px 6px 6px; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label li:hover { transform: rotate(351deg) scale(1.7); } .Label a { color: #fff; text-decoration: none; }

Yellow Customized Labels Widget

.Label li:before { background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47); border-bottom: 1px solid #D99D38; border-left: 1px solid #D99D38; content: ""; height: 1.39em; left: -0.69em; position: absolute; top: 0.2em; transform: rotate(45deg); width: 1.3em; z-index: 1; } .Label li:after { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D99D38; border-radius: 4.167em 4.167em 4.167em 4.167em; box-shadow: 0 1px 0 #FAEABA; content: ""; height: 0.5em; left: -0.083em; position: absolute; top: 0.667em; width: 0.5em; z-index: 9999; } .Label li { background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47); border-bottom: 1px solid #D99D38; border-radius: 0 0.25em 0.25em 0; border-right: 1px solid #D99D38; border-top: 1px solid #D99D38; box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #996633; float: left; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 0.75em; font-weight: bold; list-style: none outside none; margin: 0 0 7px 20px; padding: 0.417em 0.417em 0.417em 0.917em; position: relative; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: 1; }

Blue Customized Labels Widget

.Label li:before { background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%); border-bottom: 1px solid #145091; border-left: 1px solid #145091; content: ""; height: 1.39em; left: -0.69em; position: absolute; top: 0.2em; transform: rotate(45deg); width: 1.3em; z-index: 1; } .Label li:after { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #3F6893; border-radius: 4.167em 4.167em 4.167em 4.167em; box-shadow: 0 1px 0 #B5D8FF; content: ""; height: 0.5em; left: -0.083em; position: absolute; top: 0.667em; width: 0.5em; z-index: 9999; } .Label li { background-image: -moz-linear-gradient(center top , #1E5799, #207CCA); border-bottom: 1px solid #145091; border-radius: 0 0.25em 0.25em 0; border-right: 1px solid #145091; border-top: 1px solid #145091; box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #996633; float: left; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 0.75em; font-weight: bold; list-style: none outside none; margin: 0 0 7px 20px; padding: 0.417em 0.417em 0.417em 0.917em; position: relative; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: 1; }

Black Forest Theme Label Like NetOops Blog Labels

.Label li { background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent; border: 1px solid; border-radius: 6px 6px 6px 6px; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label li:hover { transform: rotate(5deg); } .Label a { color: #fff; text-decoration: none; }

Skeleton Theme For Labels Widget

.Label a { color: #000000; text-decoration: none; } .Label li { border: 1px solid #000; border-radius: 6px 6px 6px 6px; color: #000000 !important; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label li:hover { transform: rotate(5deg); }

Skeleton Theme With Painting Hover Effect

.Label a:hover { text-shadow:5px 5px 5px #dcdcdc; background:orange; border:1px solid orange; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 30px; border-top-right-radius: 30px; } .Label li { border: 1px solid; border-radius: 6px 6px 6px 6px; color: #000000 !important; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label a { color: #000; text-decoration: none; } .Label li:hover { transform: rotate(5deg); }

Leaf Theme For Labels Widget

.Label a { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #7FBF4D; background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F); border-bottom-right-radius: 30px; border-color: #63A62F #63A62F #5B992B; border-image: none; border-style: solid; border-top-left-radius: 30px; border-width: 1px; box-shadow: 0px 1px 0px 0px #96CA6D inset; color: #FFFFFF; float: left; font: 14px verdana; height: 18px; margin-bottom: 9px; margin-left: 10px; padding: 10px; position: relative; text-decoration: none; transition: all 0.5s ease-in-out 0s; } .Label a:hover { background: none repeat scroll 0% 0% orange; border-radius: 0px 30px 0px 30px; border: 1px solid orange; text-shadow: 5px 5px 5px #DCDCDC; } .Label { margin: 0px; padding: 0px; position: relative; } .Label li:hover { transform: rotate(5deg); } .Label li { float: left; font-size: 116%; list-style: none outside none; transition: all 0.3s ease 0s; }
Cuối cùng đừng quên like và chia sẻ bài viết này.
Tham khảo thêm:
Thủ thuật tạo hiệu ứng popular posts nhiều màu sắc cho blogger

Read more »

Thủ thuật tạo hiệu ứng popular posts nhiều màu sắc cho blogger

Popular Posts Widget là một Widget cung cấp bởi Blogger và chúng ta có thể thêm nó vào blog của chúng tôi. Widget này sẽ hiển thị các bài viết được xem nhiều nhất của blog của bạn, đó có thể là các tháng hoặc trong tuần hoặc tất cả các thời gian. Bạn có thể chọn cách viết phổ biến là để được hiện thị. Bởi mặc nó cho thấy một hình ảnh (nếu có bài) và Tiêu đề của bài viết tiếp theo là nội dung của bài viết bao bọc bởi 20-25 Words. Bài viết này là một hướng dẫn để Phong cách mà bài viết được ưa thích Widget cho một tuyệt vời nhiều - màu được ưa thích bài Widget. Thủ thuật blogspot này được thực hiện bằng cách sử dụng CSS3 đơn giản hơn là sử dụng JavaScript phức tạp. Một tính năng tuyệt vời của thủ thuật này là mỗi bài viết được hiển thị trong mỗi màu UI Flat, do đó, những màu sắc bắt mắt Blog của khách truy cập của bạn và họ có xu hướng đi mà thậm chí nếu các bài viết không phải là quá tốt.

Thủ thuật tạo hiệu ứng popular posts nhiều màu sắc cho blogger

Chương trình Demo ở phía dưới bên phải phía →
Đặc điểm của Widget này

• UI Flat màu sắc được sử dụng rất đẹp(nó sẽ thu hút sự chú ý người sử dụng)
• Tự động đánh số bài
• CSS3 Hiệu ứng di chuyển chuột

1. Đầu tiên:
- Đăng nhập vào tài khoản Blogger của bạn và Active Popular Posts Widget
- Đầu tiên Add Popular bài Widget cho Blogger
- Tới Layout -> Chọn "Add a Gadget" và Tìm chọn Popular Posts Widget trong danh sách Widget xuất hiện.
- Hãy cho Tiêu đề của widget, chọn cách viết phổ biến nên được xuất hiện (trong tháng, hoặc tuần hoặc Tất cả thời gian) và nhấn Save
- Tới Template -> Edit HTML , Tìm ( Ctrl + F ) ]]> </ b: skin>
Sao chép đoạn mã sau và dán ngay trên nó: #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%} #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 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; } #PopularPosts1 img:hover { border-radius: 0 0 0 0; -moz-transform: scale(1.2) rotate(-711deg) ; -webkit-transform: scale(1.2) rotate(-711deg) ; -o-transform: scale(1.2) rotate(-711deg) ; -ms-transform: scale(1.2) rotate(-711deg) ; transform: scale(1.2) rotate(-711deg) ; }
- Nhấn vào Preview Template (Bạn có thể thấy các mẫu mà không lưu)
- Lưu Template. Xem blog của bạn đã sẵn sàng để thu hút người dùng.
Tôi nghĩ rằng bài viết này sẽ giúp bạn nếu như vậy xin vui lòng chia sẻ và Like chúng tôi để lây lan Blog của chúng tôi. Nếu có bất kỳ vấn đề với trick này không ngần ngại hỏi, làm bình luận ở đây ...
Tham khảo thêm:
Thêm hiệu ứng cho nhãn trên blogger

Read more »

Thêm hiệu ứng cho nhãn trên blogger

Hôm nay tôi sẽ chia sẻ thủ thuật blogger với cách làm một widget nhãn cloud đẹp với hiệu ứng hover cho blogger. Hiệu ứng này chỉ phát huy đặc biệt với Blogger. Blogger Tag Clouds hiển thị tất cả các loại nhãn hoặc có mặt trong blog. Trên blogger mặc định chỉ được thiết kế đơn giản nên nó nhìn không được đẹp cho lắm. Chính vì thế mình chia sẻ cách thêm hiệu ứng cho nhãn trên blogger chỉ bằng CSS, những nhìn sẽ hấp dẫn hơn các blogger mặc định phong cách nhãn điện toán đám mây mới. bạn có thể nhìn thấy hình ảnh xem trước trong ảnh chụp màn hình của tôi để biết làm thế nào là đây là. Tôi hy vọng bạn sẽ thích nó.

Thêm hiệu ứng cho nhãn trên blogger

Xin lưu ý: - Trước khi áp dụng phụ tùng nhãn này, bạn phải thiết lập phong cách nhãn hiệu của bạn để đám mây và sao lưu mẫu của bạn cho an toàn .

Làm thế nào để Thêm Nhãn Tuỳ chỉnh đẹp như vậy?
Để thêm Widgets này trong Blog của bạn theo bạn thực hiện các bước đơn giản một cách cẩn thận.

1. Đăng nhập vào Blogger Bảng điều khiển sau đó đi đến Layout & nhấp vào Thêm một tiện ích tùy chọn và chọn Label.
2. Bây giờ thiết lập các cài đặt được hiển thị trong hình dưới đây.

thiết lập các cài đặt được hiển thị widgets

3. Bạn phải Chọn tùy chọn đám mây từ các thiết lập hiển thị.
4. Bây giờ bấm Save & nút đi cho CSS .
5. Bây giờ hãy nhấp Template tùy chọn và sau đó nhấp vào Edit HTML nút.
6. Bây giờ bấm Ctrl + F nút trên bàn phím của bạn và tìm ]]> </ b: skin> tag.
7. Bây giờ Sao chép mã dưới đây và dán nó ở trên ]]> </ b: skin> tag.

.label-size{ padding: 3px; text-transform: uppercase; margin:0 2px 6px 0; border: solid 2px #061ED5; border-radius: 3px; float:left; text-decoration:none; font-size:14px; color:#000000; background: #000000 ; } .label-size:hover {background: #0faefd ; border:5px solid #000000; text-decoration: none; -o-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -o-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; color:#0FAEFD; } .label-size a:hover { text-decoration: none; color:#000000;} 
8. Bây giờ bấm Save template nút và xem blog của bạn.

Nếu bạn thấy bài viết này là hữu ích thì vui lòng chia sẻ bài viết này trên mạng của bạn hoặc các trang web mạng xã hội. Cảm ơn đã ghé thăm trang của tôi.

Bài đọc thêm:
Thủ thuật chèn bàn phím vào trong blogger

Read more »