Tạo Khung SUBSCRIBE Đẹp Cho Blogspot

Hôm nay Hùng Coder Blog chia sẽ cho mọi người một tiện ích mới cho mọi người. Thủ thuật này khá đơn giản cho mọi người lại có bố cục đơn giản đẹp :D

Qua hình ảnh bên trên các bạn cũng thấy nó đơn giản như thế nào rồi chứ :v. Không cầu kỳ phức tạp
như những khung đăng ký theo dõi khác :D. Và bên dưới là full đoạn code cho ai muốn sữ dụng

<style>
#wp-subscribe { padding:15px; background: #ffffff; }
#wp-subscribe h4.title { font-size:18px; color:#e8503c; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 0;margin: 10px;}
#wp-subscribe h4.title span {display: inline-block; font-size: 35px; margin-top: 10px;}
#wp-subscribe p { color: #000000; margin: 0; text-align: center; }
#wp-subscribe p.text { margin: 15px 0; opacity: 0.8;font-size: 16px; }
#wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height:60px; }
#wp-subscribe .email-field {}
#wp-subscribe input.email-field {color: #000000;background: #ffffff;border-style: solid;border-color:#e8503c;border-width: 3px;}
#wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::input-placeholder { color: transparent !important }
#wp-subscribe input.submit {background:#e8503c; color: #fff; margin-top:10px; font-size: 20px; font-weight: 900; cursor: pointer;}
#wp-subscribe p.footer-text { margin-top: 10px; font-size: 12px; }
</style>

<div class="wp-subscribe no-name-field" id="wp-subscribe">
<h4 class="title">Get more nice stuff <br /> <span>in your inbox</span></h4>
<p class="text">instantly by Subscribing to us. So you will get email everytime we post something new here</p>

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=USER_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1"> <input class="email-field" type="text" value="" placeholder="Enter email id here..." name="email" /> <input type="hidden" value="USER_NAME" name="uri" /><input type="hidden" name="loc" value="en_US" /> <input class="submit" name="submit" type="submit" value="Subscribe Now" /></form>

<div class="clear"></div>
<p class="footer-text">We guarantee you won't get any other SPAM</p>
</div>
</div>

Các bạn chỉ cần bỏ đoạn code vào phần bạn muốn nó hiển thị thế là xong :D và bạn chỉ cần thay đỗi những phần mình bôi đỏ trên code thành tên FEED của các bạn vậy là xong :D
Đơn giản quá phải không mọi người :v ai cần thì sữ dụng nhé.

DEMO BÊN PHÍA TAY TRÁI CỦA MỌI NGƯỜI

Chia sẻ template blogspot đã được tối ưu chuẩn SEO load cực nhanh

Chào các bạn. Đã lâu rồi chưa share template blogspot nào cho các bạn. Hôm nay chia sẻ đến các bạn một template blogspot cũng khá cũ rồi nhưng đã được mình tối ưu tất cả các ưu điểm SEO cần thiết và đặc biệt là load cực nhanh cho bạn nào thích tốc độ.

THÔNG TIN VỀ TEMPLATE

1. Tên template: tạm đặt là Template NiemStyle SEO Fast Load nha :v
2. Phiên bản: không rõ
3. Cập nhật và chỉnh sửa một số lỗi nhỏ lần cuối: 14/03/2018
4. Giá trị: 0đ Free

MỘT SỐ ĐẶC ĐIỂM TEMPLATE

1. Tích hợp bài viết ngoài trang chủ đẹp mắt.
2. Chuẩn các thẻ SEO như title, h2,...
3. Cấu trúc Breadcrum label hoàn chỉnh trên Google
4. Đặc biệt sử dụng rất ít Js nên load cực nhanh
5. Và nhiều đặc điểm khác nữa các bạn vào demo xem nhé...

Demo Download

Chúc các bạn có được những trãi nghiệm mới mẻ. Cám ơn các bạn.

Nguồn : Niệm Style Blog

Làm thế nào để tạo một Widget Sticky trong Sidebar Blog

Hôm nay Hùng Coder Blog sẽ hướng dẫn cho các bạn làm cho Widget Sticky bên Sidebar. tự động trượt khi các bạn cuộn trang nhé :D, và ở đây là một thủ thuật mới mình mới tìm ra, biết là thủ thuật này có lâu rồi và có rất nhiều người sữ dụng nó nhưng chưa chia sẽ nhiều nên hôm nay mình tìm ra và đã áp dụng cho blog của mình và chia sẽ liền cho mọi người luôn. Ai cần thì áp dụng cho blog nhé ^^

Qua hình ảnh bên trên cấc bạn cũng sơ bộ hình dung được thủ thuật rồi chứ :D Và bên dưới là full
đoạn code

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML1').length) { // Ganti "#HTML1" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#HTML1').offset().top;
    var stickyHeight = $('#HTML1').height();
    $(window).scroll(function() {
      var limit = $('#Label1').offset().top - stickyHeight - 20; // Jarak berhenti di "#Label1"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

và bên trong đoạn code các bạn cần thay đỗi một số chi tiết đó là

#HTML1 : Thay bằng ID mà bạn muốn nó trượt
#Label1 : Thay bằng ID mà bạn muốn ID trượt dừng lại

Và thêm một số CSS để làm cho nó chạy mượt mà hơn :D

#sticky-sidebar{width:100%;max-width:300px}

và

#HTML1{width:100%;max-width:300px}

cuối cùng là RESPONSIVE

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

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

DEMO BÊN PHÍA TAY PHẢI CỦA CÁC BẠN

Tạo hiệu ứng (hover) text bằng css cực đẹp cho blogspot

Một trong những cách làm đẹp cho Blog của bạn đó là hiệu ứng (hover), giúp cho blog của bạn thêm phần nổi bật. Và hôm nay mình xin hướng dẫn các bạn tạo hiệu ứng (hover) text bằng css cực đẹp cho blogspot.

Bước 1: Các bạn thêm đoạn CSS sau vào trên thẻ ]]></b:skin>

.title-niem{animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

Bước 2: Sử dụng hiệu ứng


Cách 1: Sử dụng code

<div class='title-niem'>Chữ cần hiệu ứng</div>

Cách 2: Các bạn tìm đến thẻ có dạng id='header-inner' và thêm thuộc tính class='title-niem' phía trước nó. Ví dụ như hình dưới:

Khá đơn giản để có 1 hiệu ứng (hover) text đẹp cho Blog đúng không nào. Chúc các bạn thành công. Nếu thấy hay hãy để lại 1 comment để ủng hộ mình nhé!

DEMO THỦ THUẬT

Chữ cần hiệu ứng

Nguồn : Niệm Style

Lỗ Hổng Khôi Phục Mật Khẩu Của Quản Trị Viên Trên WordPress

WordPress, hệ thống quản trị nội dung phổ biến hàng đầu thế giới mới phát hiện một lỗ hổng cho phép tin tặc khôi phục mật khẩu người dùng trong một vài điều kiện cụ thể. Lỗ hổng có định danh CVE-2017-8295 càng trở nên nguy hiểm hơn khi ảnh hướng tới tất cả phiên bản WordPress – bao gồm cả phiên bản mới nhất 4.7.4.
Lỗ hổng được phát hiện bởi một nhà nghiên cứu người Phần Lan Dawid Golunski và được báo cáo tới WordPress vào tháng bảy năm ngoái. Nhưng đội ngũ bảo mật WordPress đã bỏ qua khiến hàng triệu website có nguy cơ bị tấn công. Golunski cũng là nhà nghiên cứu đã phát hiện ra lỗ hổng nghiêm trọng trong mã nguồn thư viện PHPMailer cho phép tin tặc độc hại thực thi mã độc trên máy chủ web và xâm nhập ứng dụng web.
Lỗ hổng CVE-2017-8295 nằm trong cách WordPress xử lý yêu cầu khôi phục mật khẩu. Khi người dùng yêu cầu khôi phục mật khẩu thông qua lựa chọn “Quên mật khẩu”, WordPress sẽ ngay lập tức tạo ra một mã bí mật duy nhất và gửi tới email của người dùng.

Khi gửi email, WordPress sư dụng một biến có tên SERVER_NAME để lấy giá trị cho trường dữ liệu From/Return-Path. “From” là địa chỉ email của người gửi và “Return-Path” là địa chỉ email sẽ nhận được thư trong trường hợp thư gặp trục trặc không được gửi đi.

Theo Golunski, tin tặc có thể gửi một gói tin HTTP giả với giá trị tên miền định trước nhằm can thiệp vào quá trình khôi phục mật khẩu. Do tên miền đọc hại được kiểm soát bởi tin tặc, giá trị các trường From và Return-Path sẽ bị thay đổi. Tin tặc sẽ nhận được mã khôi phục mật khẩu với kịch bản sau:

1. Nếu nạn nhân trả lời email, thư sẽ được gửi đến email của tin tặc (trong trường ‘From’) chứa đường dẫn khôi phục mật khẩu trong lịch sử thư.
2. Trong một vài trường hợp, máy chủ mail của nạn nhân không hoạt động, đường dẫn khôi phục mật khẩu sẽ được tự động chuyển vềhộp thư của tin tặc (trong trường ‘Return-Path’.
3. Trong một kịch bản khác, tin tặc thực hiện tấn công DDoS vào máy chủ mail của nạn nhân do đó tài khoản của nạn nhân không thể nhận được bất cứ email nào.

Do lỗ hổng đã được công bố mà vẫn chứa có bản vá chính thức từ WordPress, quản trị viên được khuyến cáo cập nhật cấu hình máy chủ kích hoạt UseCanonicalName buộc trường giá trị SERVER_NAME là giá trị tĩnh hoặc được định nghĩa trước.

Theo THN

Tạo trang Demo và Download với thanh công cụ cho Blogger

Hôm nay, mình sẽ hướng dẫn các bạn tạo 1 thanh công cụ dùng để cho khách xem trang Demo hoặc Download. Tùy theo mục đích của bạn sử dụng là gì mà bạn có thể áp dụng trang này, nó rất hữu ích cho bạn khi làm một trang tải giao diện, hoặc có thể cho người khác xem bất kỳ một trang web nào đó nhưng vẫn có thông tin của trang mình, để khi cần thì người xem có thể quay lại trang chủ của mình.


Cách làm rất đơn giản, hãy theo những hướng dẫn bên dưới là có ngay 1 trang Demo và Download tuyệt vời thôi. Bạn có thể truy cập vào đường dẫn bên dưới để xem thử:

DEMO
Các bước thực hiện
Bước 1: Tạo một trang mới và nhớ địa chỉ của trang này, ví dụ:

http://www.hungcoder.com/p/link.html

Lưu ý: Để trang trống và không cần thêm bất cứ thành phần nào nhé!
Bước 2: Chèn đoạn code sau lên trước thẻ đóng ]]></b:skin>

#view{padding:0;margin:0;border:0;position:fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:93%;background:url(http://i.imgur.com/zilbd7l.gif)no-repeat center center;transition:all .4s ease-out}
#tab-demo{width:100%;height:50px;top:0;left:0;background:#222;color:white;font:normal 13px Roboto,sans-serif;z-index:99999;position:fixed}
.closebutton{background:#66af33 url(http://i.imgur.com/afHYpSH.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0 20px 0 50px;position:fixed;top:0;right:0;line-height:50px;cursor:pointer;color:white}
a.closebutton{color:white;text-decoration:none}
.closebutton:hover{background:#579c26 url(http://i.imgur.com/bOce61g.png)no-repeat 15px 50%}
.dlbutton:hover{background:#579c26 url(http://i.imgur.com/Z6RRwwZ.png)no-repeat 15px 50%}
.dlbutton,a.dlbutton{background:url(http://i.imgur.com/Z6RRwwZ.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0 20px 0 55px;position:fixed;top:0;right:158px;line-height:50px;cursor:pointer;color:white;text-decoration:none}
.demologo,a.demologo{background:url(http://i.imgur.com/EmEPej2.png)no-repeat left center;padding-left:55px;font-size:17px;font-weight:normal;font-family:Roboto;text-transform:uppercase;line-height:50px;left:15px;position:fixed;color:white;text-decoration:none}

Bước 3: Tìm thẻ <body> và chèn đoạn code này bên dưới:

<b:if cond="data:blog.url != &quot;http://www.hungcoder.com/p/link.html"">

Tiếp tục tìm thẻ đóng </body> và chèn đoạn code này lên trên.

<b:else/>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
}
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='http://www.hungcoder.com'>Hùng Coder Blog</a>
<a class='dlbutton' href='' id='dl'>Tải về</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Loại bỏ khung</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

Các bạn tùy chỉnh code sao cho phù hợp với blog của mình.
Sử dụng trang DEMO như thế nào?
Sau khi soạn thảo xong bài viết, các bạn tiến hành thêm đoạn code sau để tạo xem trước cho sản phẩm của mình.

http://www.hungcoder.com/p/link.htm?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download

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

Trang Ẩn Danh Nội Dung Blogspot 2018

Chào mọi người, mình là Hùng Coder sau một thời gian tìm hiểu và mình đã tạo ra một trang ẩn danh cho các blogger, để chia sẽ những thứ hữu ích cho một số người bạn hoặc người quen. Để phòng tránh bị LEECH về một số trang mà không để lại nguồn bài viết ^^

Các bạn nhìn sơ qua thì ở trang chủ không hiển thị bất cứ nội dung bài viết nào. Hoặc lỗ hõng nào để cho mọi người xem được những bài viết ẩn đó :D

Và tiếp đến mình cũng đã thêm được đoạn code nhập PASSWORD để xem được nội dung bài viết đó :D, nhưng cái PASSWORD này không được ẩn danh như các SITE PHP vì trang mình tạo là
BLOGGER không được tùy biến hay có database để lưu trữ PASSWORD được. Và sau này mình sẽ tìm cách khác phục lỗi này sớm nhé :)

Và cuối cùng là bài viết được ẩn danh :D. Với một số bạn thì giao diện này quá đơn giản rồi phải không :D :D, có lỗi gì thì báo mình để mình FIX lỗi sớm để giao diện ẩn danh này tốt hơn nhé :D

DEMO SITE

Chúc các bạn thành công. Và các bạn copy bài viết này thì các bạn vui lòng để lại nguồn dùm HÙNG CODER nhé :D