Pages

Thứ Năm, 29 tháng 8, 2013

Chống copy hay quét khối trên blogspot

Chống copy hay quét khối trên blogspot by: http://namkna.blogspot.com/
Hiện nay công nghệ thông tin phát triển thì vấn đề bảo mật an toàn trên internet càng được chú trọng. Đối với những người viết blog hay web thì vấn đề bản quyền về bài viết cũng cần quan tâm. Trên trang blog hay web của bạn có một số tài liệu quan trọng hay liên quan đến một vấn đề gì đó mà bạn không muốn chia sẽ với người khác thì bạn có thể vô hiệu tính năng copy trên trang blog/web của bạn. Đây là thủ thuật bảo mật cơ bản để bạn có thể ngăn chặn việc người dùng copy bài viết của bạn.

Các bạn có thể xem demo bằng cách vào blog demo bên dưới
.
VIEW DEMO

- Khi một người khác có ý định copy thì bảng thông báo bên dưới sẽ hiện ra và ngăn cản không cho người khác click chuột phải lên blog để copy bài viết của bạn.
Chống copy hay quét khối trên blogspot

☼ Cách thực hiện Chống copy hay quét khối trên blogspot:


1. Đăng nhập và vào bố cục
2. Chọn mẫu (template) => chỉnh sửa HTML (Edit HTML)
3. Sau đó hãy chọn code thủ thuật và chèn vào sau thẻ <head> (hoặc trước thẻ </head>)
3.1. Đây là code chống quét khối văn bản
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
3.2. Đây là code chống sử dụng chuột phải
<script language='JavaScript'>
var msg="Welcome to NAMKNA.BLOGSPOT.COM";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&amp;&amp;!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false")
</script>
- Hãy thay dòng chữ màu xanh trong code thành dòng chữ mà bạn muốn người đọc thấy được khi click chuột phải trên blog bạn.
4- Save template.và vào blog kiểm tra kết quả nha.

☼ Tùy biến thủ thuật Chống copy hay quét khối trên blogspot trên các trang chuyên biệt của blogspot.


1- Chỉ cấm sao chép ở trang bài viết, còn trang chủ và trang nhãn vẫn copy được. 
- Để thực hiện việc này, bạn chỉ cần thêm đoạn code ở bước 3 vào code màu đỏ bên dưới:
<b:if cond='data:blog.pageType == "item"'>
code bước 3
</b:if>
2- Chỉ chống copy và quet khối ở trang chủ, nhưng ở những trang khác thì ta vẫn copy và quét khối được bình thường. Thì dùng code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
code bước 3
</b:if>
3- Nếu muốn chỉ chống copy ở trang chủ và trang nhãn.
<b:if cond='data:blog.pageType == "index"'>
Code ở bước 3
</b:if>
4- Chỉ chống copy ở trang lưu trữ (archive).
<b:if cond='data:blog.pageType == "archive"'>
Code ở bước 3
</b:if>
5- Chỉ chống copy ở trang tĩnh (static page).
<b:if cond='data:blog.pageType == "static_page"'>
Code ở bước 3
</b:if>
6- Nếu muốn chỉ chống copy ở 1 bài viết cụ thể (1 trang riêng biệt).
<b:if cond='data:blog.url == "LINK_của_trang_riêng_biệt"'>
Code ở bước 3
</b:if>
7- Nếu muốn chống copy tất cả các trang trừ trang bài viết.
<b:if cond='data:blog.pageType != "item"'>
Code ở bước 3
</b:if>
Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại.
  • == Chỉ cấm sao chép ở trang ...
  • != Cấm sao chép hết ở các trang, trừ trang

Thứ Sáu, 23 tháng 8, 2013

chong coppy trang blog

Hướng dẫn:
đăng nhập vào blog > mẫu> chỉnh sửa HTML.
Bấm tổ hợp phím Ctrl+F để tìm Mã: </head> hoặc <head>

chèn đoạn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>


<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
</script> 





Lưu ý: Với đoạn mã trên, sẽ chống copy toàn bộ blog của bạn, nếu bạn muốn cho phép họ copy một trang hay một bài viết riêng biệt nào đó thì thêm đoạn mã dưới đây vào phần đầu đoạn mã trên. 

<b:if cond='data:blog.url != "Thay link của trang hoặc bài viết riêng biệt của bạn vào đây"'>

CHỐNG COPY BÀI VIẾT TRÊN BLOGSPOT - PHẦN 2

Thứ năm, tháng sáu 20, 2013


Bài gốc: http://caocongkien.blogspot.com/2013/06/chong-copy-bai-viet-tren-blogspot-phan-2.html#ixzz2cm3xOdKQ
Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn! 

Thứ Năm, 22 tháng 8, 2013


Tạo Responsive Dropdown Menu trong Blogger

Tạo Responsive Dropdown Menu trong Blogger
Trong thiết kế blogger để phần header thích hợp với các trình duyệt khác nhau rất quan trọng và phần quan trọng nhất của header là menu chính cung cấp liên kết hữu ích bên trong của bạn. Hôm nay mình sẽ hướng dẫn cách thiết kế một menu thả xuống linh hoạt cho Blogspot mà không cần sử dụng một scripts hoặc hình ảnh! Phần đặc biệt là nó không chỉ là một trình đơn ngang mà nó có thể biến thành một danh sách thả xuống. Đơn giản chỉ cần sử dụng mã HTML5, thẻ <nav> và CSS3 : bạn có thể kiểm tra tại đây, Mình sẽ giới thiệu một menu của mybloggertricks mà tôi hy vọng sẽ có ích cho cộng đồng blogger vì nó thực sự là một trình đơn hiệu quả đó là tương thích với tất cả các trình duyệt và sử dụng không Jquery!


Các ảnh chụp màn hình dưới đây được chụp bằng iPhone cá nhân của tôi để cung cấp cho bạn một cái nhìn tổng quát về blog của bạn sẽ như thế nào trong các kích cỡ màn hình khác nhau. Menu tự động điều chỉnh chính nó sử dụng CSS3 truy vấn phương tiện truyền thông mà chúng ta đã thảo luận trong phần đầu tiên của loạt bài này.
Tạo Responsive Dropdown Menu trong Blogger
Bạn có thể vào blog demo bên dưới sau đó thu nhỏ chiều ngang của trình duyệt nhỏ lại để xem menu sẽ biến dổi thế nào nha.

VIEW DEMO

»  Bước 1: Tắt trình duyệt mobile mặc định của blogger

1.1- Đăng nhập Blogger
1.2- Bấm vào icon chỉnh sửa ở mục điện thoại di dộng.
Tạo Responsive Dropdown Menu trong Blogger
1.3- Tại mục seleck chọn no.=> Lưu lại và tiến hành bước tiếp theo.

» Bước 2: Thêm Responsive menu vào template

2.1- Vào Mẫu
2.2- Chọn Chỉnh sửa HTML
2.3- Tìm trong template đoạn code như bên dưới (đoạn này thường nằm trước thẻ <head>)
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
- Thay thế nó thành đoạn code bên dưới (Nếu không tìm thấy đoạn code trên thì dán đoạn code bên dưới vào trước thẻ <head>)
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
2.4- Dán đoạn code bên dưới trước thẻ: ]]></b:skin>
/*-----Responsive Drop Down Menu by MBT ----*/

body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;

}


#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}

}
» Tùy chỉnh
  • #50B7DC Là màu nền của menu
  • #FFF Là màu chữ hiển thị trên menu chính.
  • 1024px Chiều rộng của thanh menu
  • #5FC6EB Màu sub menu khi rê chuột vào
  • max-width: 800px Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng dropdown

2.5- Dán code bên dưới sau thẻ <body> hoặc vị trí bạn muốn thêm menu.
<nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Namkna&#160;Blog</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    <li><a href='#'>Tab 4</a></li>
    <li><a href='#'>Tab 5</a></li>
    <li><a href='#'>Tab 6</a></li>

    </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
</nav>
»  Tùy chỉnh:
  • Thay Namkna&#160;Blog thành tiêu đề blog của bạn.Nếu giữa tên có ký tự khoảng trống bạn dùng ký tự &#160; để thay cho dấu cách.
  • Thay các dấu thăng màu đỏ (#) thành liên kết tới bài viết hoặc nhãn của bạn.
  • Bạn có thể dùng nút xổ dọc ▼ bằng các chèn ký tự sau &#9660; .
Dán đoạn mã bên dưới vào sau thẻ <ul> hoặc trước thẻ </ul> để tạo một menu thả xuống.
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
</ul>
</li> 
Menu trên sẽ chỉ tạo ra có một danh sách thả xuống và không thả xuống danh sách đa cấp bởi vì nó làm phức tạp các bố trí mẫu trên các thiết bị di động. Giữ nó đơn giản là tốt nhất.

» Cần giúp đỡ?

Trong ví dụ trên, Menu chính sẽ tự động được thiết lập hiển thị khi chiều rộng kích thước màn hình dưới hoặc bằng 800px. Tôi sử dụng hộp kiểm để giới thiệu các hiệu ứng chuyển đổi. Vì vậy, ngay sau khi kích thước màn hình đạt giảm 800px hoặc hơn nữa, các thuộc tính CSS truy vấn phát hiện ra nó và tự động thiết lập chế độ của hộp để kiểm tra và áp dụng các style. Đây là một kỹ thuật thú vị mà chúng tôi sử dụng ở đây mà loại bỏ sự cần thiết cho chức năng chuyển đổi JQuery.

Tôi đã sử dụng chỉ có hai điểm break quan trọng và đó là chiều rộng: 1024px cho màn hình máy tính để bàn và 800px cho các thiết bị bao gồm máy tính bảng, iPad và điện thoại thông minh. Vì vậy, toàn bộ quá trình được thực hiện rất dễ dàng. Mình chắc chắn những người hiểu các hướng dẫn ở trên sẽ thấy nó thực sự thú vị để tùy chỉnh nhiều hơn nữa và thêm các yếu tố thêm vào menu giống như một hộp tìm kiếm đáp ứng ở góc hoặc một biểu tượng RSS, vv

Xin vui lòng cho tôi biết nếu bạn muốn bất kỳ trợ giúp ở đây. Tôi hy vọng kỹ thuật này sẽ tiếp tục giúp các nhà phát triển để tạo ra các mẫu blogger thú vị hơn và đóng góp nhiều hơn cho cộng đồng thế giới blog. Tôi rất thích nghe phản hồi của bạn về điều này. Xin vui lòng cho chúng mình biết quan điểm quý báu của bạn để chúng tôi có thể cải thiện nó hơn nữa nếu cần thiết.

CSS Dropdown menu đơn giản cho blogspot

CSS Dropdown menu đơn giản cho blogspot
Bài viết này namkna sẽ hướng đẫn các bạn thiết kế một mẫu menu đơn giản để đặt trên sidebar hoặc header, Menu hoạt động dựa trên các thuộc tính CSS để góp phần làm giảm tới mức thấp nhất thời gian load trang: Về kiểu dáng menu này chỉ có một tiêu đề duy nhất và nó sẽ được mở rộng ra thêm các menu con khi bạn dê chuột lên phần tiêu đề đó.

Các bạn có thể xem hình minh họa ngay bên cạnh tiêu đề bài viết này:

☼ Cách thêm CSS Dropdown menu dơn giản cho blogspot:

1- Đăng nhập vào Blog
2- Vào Bố cục (Layout)
3- Bấm vào thêm tiện ích => Chọn HTML/Javascripts và dán code bên dưới vào.
<style>nav.drop-menu {
  position:relative;
  padding:10px 15px;
  background:#6D92A5;
  width:200px;
  font:bold 12px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#eee;
}

nav.drop-menu:after {
  content:"";
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#fff;
  position:absolute;
  top:16px;
  right:14px;
}

nav.drop-menu ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  text-transform:none;
  margin:0px;
  padding:0px;
  background:#6D92A5;
  width:100%;
  font-weight:normal;
  display:none;
}

nav.drop-menu li {
  list-style:none;
  margin:0px;
  padding:0px;
}

nav.drop-menu li a {
  display:block;
  margin:0px;
  padding:7px 15px;
  text-decoration:none;
  color:#ccc;
}

nav.drop-menu li a:hover {
  background:#74838F;
  padding-left:19px;
}

nav.drop-menu:hover ul {
  display:block;
}</style>
<nav class='drop-menu'>
Drop Down Menu
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Portfolio</a></li>
        <li><a href='#'>Contact</a></li>
        <li><a href='#'>Archive</a></li>
        <li><a href='#'>Search</a></li>
        <li><a href='#'>Company</a></li>
    </ul>
</nav>
» Tùy chỉnh:
  • Thay dấu thăng màu đỏ (#) thành liên kết URL tới blog, nhãn hoặc bài viết của bạn.
  • Thay phần màu xanh thành tiêu đề tương ứng với các liên kết cùng hàng. (Không nên đặt quá dài sẽ xuống dòng không đẹp nha.
  • Thay chữ Drop Down Menu thành chữ tiêu đề. Đây là phần luôn hiển thị của menu.
4- Lưu mẫu lại và quay trở lại blog để xem kết quả của bạn nha.