Thursday, June 23, 2016

Tiện ích nhận xét mới nhất cho Blogger
Có một tiện ích nhận xét, bình luận, comments, phản hồi mới nhất trên blogspot là một lợi thế, nó không chỉ giúp liên kết các bài viết trên blog của bạn, Bên cạnh đó còn giúp cho đọc giả dễ dàng theo dõi các cuộc thảo luận mới cũng như tương tác với các bài viết trên blog của bạn. Hãy thêm tiện ích nhận xét gần đây để cho blog của bạn trở nên chuyên nghiệp hơn. Trong hướng dẫn này, tôi sẽ chia sẽ cho bạn làm thế nào để Thêm tiện ích nhận xét mới nhất (​​gần đây) vào blogger. Nó hiển thị các nhận xét mới nhất cùng với các liên kết bài viết mà người dùng đã đăng. Điều này sẽ giúp cho bạn biết về các nhận xét mới và giúp bạn dễ dàng phản hồi những ý kiến đó hơn.


Để tạo một widget nhận mới nhất như hình trên, chỉ cần làm theo các bước đơn giản sau đây:
Vào Bố cục >> Thêm Tiện ích >> HTML/Javascript sao chép các đoạn mã dưới đây và đặt nó vào HTML/Javascript và Lưu lại


- Copy đoạn mã dưới đây vào HTML/Javascript

<style type='text/css'>
ul.nc_recent_comments{
list-style: none;
margin: 0;padding: 0;
}
.nc_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
word-break:break-all;
}
.nc_recent_comments li .avatarImage {
padding: 3px;
background: #fefefe;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
float: left;
margin: 0 6px 0 0;
position: relative;
overflow: hidden;
}
.avatarRound {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.nc_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}
.nc_recent_comments li span {
margin-top: 4px;
display: block;
line-height: 1.4;
}  
</style>
<script type="text/javascript">//<![CDATA[
    var
    numComments     = 5, //Số nhận xét muốn hiển thị
    showAvatar     = true, //true: hiển thị Avatar false: không hiển thị
    avatarSize     = 50, // kích thước avatar
    roundAvatar    = false, //false: avatar vuông true: avatar tròn
    characters     = 150, //Số ký tự hiển thị tóm tắc
    defaultAvatar     = "http://img1.blogblog.com/img/anon36.png",
    home_page = "#"; //Địa chỉ log của bạn
//]]></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwL0KbT-xOaTcENLSXhZeEhhM0E/"></script>

- Thiết lập các giá trị muốn hiển thị
- Lưu lại và xem kết quả

Sưu tầm internet

Saturday, June 11, 2016

Code widget form đăng ký nhận bài viết mới qua email cho blogspot bằng Feedburner
Form đăng ký nhận bài viết mới qua email là tiện ích không thể thiếu cho mỗi trang blog. Giúp người đọc nhận bài viết mới nhất của qua việc đăng kí qua email giúp tạo mối liên hệ và giữ chân người đọc thường xuyên ghé thăm blog của bạn.


Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website. Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích nhưng để tạo ra được 1 form theo dõi hoàn chỉnh như trên thì chúng ta sẽ cần sử dụng tới tính năng gửi bài viết qua email.

Để tạo form như hình các bạn làm theo trình tự các bước sau:

Lấy url feedburner cho blogspot

URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.

Đăng nhập blogger, bên menu trái chọn Bố cục.
Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích chọn Theo dõi qua Email

    Tại phần này các bạn chỉ cần lấy phần chữ đằng sau .com/ sau đó bấm Hủy


    Tiếp tục bấm thêm tiện ích chọn HTML/Javascript


    Copy đoạn code dưới đây vào khung

    <div class="nam">
    <style>
    .nam {width:340px; height:240px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
    .nam b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
    .nam form {width:250px; margin:0 auto;}
    </style>
    <b>THEO DÕI QUA EMAIL</b><br />
    Đăng ký để cập nhật những bài viết mới nhất về thủ thuật Windows 10 từ blogthuthuatwin10.blogspot.com!<br />
    <br />
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ThThutWindows10', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="email" placeholder="Email của bạn..." style="border: 1px solid #fff; box-sizing: border-box; padding: 9px 5px; width: inherit;" type="text" />
    <input name="uri" type="hidden" value="ThThutWindows10" />
    <input name="loc" type="hidden" value="vi_VI" />
    <input class="button" style="background: #019877; border: none; color: white; font-size: 18px; font-weight: bold; margin: 10px auto; padding: 9px 5px; width: inherit;" type="submit" value="ĐĂNG KÝ NGAY" />
    </form>
    </div>

    • Thay dòng chữ màu đỏ bằng đoạn bạn đã copy lúc thêm tiện ích Theo dõi qua Email
    • Thay dòng chữ màu xanh thành tên gì tùy thích
    • Dòng width:340px; height:240px để thay đổi kích thước phù hợp với sidebar
    • Dòng #3e433e thay đổi màu nền form
    • Dòng #019877 thay đổi màu nền dòng chữ ĐĂNG KÝ NGAY
      Code widget bài viết mới nhất có ảnh thumnail cho Blogspot
      Bên cạnh bài viết được xem nhiều thì bài viết mới nhất không thể thiếu cho một trang blog. Nếu bạn sử dụng mẫu template có cấu trúc bài viết dạng blog thì không cần thêm tiện ích này làm gì nhưng với mẫu template ví dụ như blog của mình dùng nhiều slide bên trái thì phần bên phải không thể nào thiếu được tiện ích này


      Cách làm thì đơn giản thôi
      • Đăng nhập Blogger.com
      • Bên menu trái, chọn bố cục
      • Ở khung sidebar chọn dấu + Thêm tiện ích chọn tiện ích HTML/Javascript


          • Copy - paste code khung



            Đây là đoạn code cần thêm

            <div>
            <style type="text/css">
            img.recent_thumb {padding:1px;width:70px;height:70px;border:0;float:left;margin-right:10px;border:1px solid #d1d1d1;}
            .recent_posts_with_thumbs {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff;}
            ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; list-style-type:none; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}
            ul.recent_posts_with_thumbs li:last-child {border:none;}
            .recent_posts_with_thumbs hr {display:none;}
            .recent_posts_with_thumbs a {text-decoration:none; font-weight:bold;}
            .recent_posts_with_thumbs i {font-style:normal; font-size:12px; }
            .recent_posts_with_thumbs strong {font-size:10px;}</style>
            <script src="https://googledrive.com/host/0B4v2llDGaFQyNnZrTXE4ZjFSQVU"></script>
            <script>
            var numposts = 9;
            var showpostthumbnails = true;
            var displaymore = false;
            var displayseparator = true;
            var showcommentnum = false;
            var showpostdate = false;
            var showpostsummary = true;
            var numchars = 100;</script>
            <script src="https://blogthuthuatwin10.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>
            </div>

            Thay đường link màu đỏ bằng địa chỉ blog của bạn

            var numposts = 9 : số lượng bài muốn hiển thị
            var showpostthumbnails = true;
            var displaymore = false : hiển thị nút more
            var displayseparator = true;
            var showcommentnum = false :  hiển thị comment
            var showpostdate = false; hiển thị ngày tháng
            var showpostsummary = true;
            var numchars = 100; hiển thị đoạn mô tả ngắn gọn


            • Nếu muốn hiển thị ghi true ngược lại ghi false
            • Giá trị số có thể thay giá trị số khác
            • Phần kích thước ảnh thumnail width:70px;height:70px bạn có thể tùy chỉnh tùy ý sao cho phù hợp