Teduh responsive blogger template

Chào bạn!
Hôm nay, Khánh xin chia sẻ với bạn một template mà mình cho là có chất lượng. Với những đặc tính vượt trội, cập nhật, rất phù hợp cho SEO.

Tự động bôi đen khung chứa code bằng nhấp đúp chuột

Chào bạn! Nếu bạn đã tìm đến được bài viết này thì chắc hẳn bạn là một web developer hoặc là một blogger đúng không? Ở bài viết này Khánh sẽ giới thiệu cách để blog/web của bạn thêm chuyên nghiệp hơn và thân thiện với người đọc. Thông thường, khi trích dẫn một đoạn code nào đó chúng ta thường đặt chúng trong thẻ <pre> hoặc thẻ <code>. Người đọc muốn copy đoạn code trong thẻ này chỉ cần kéo chuột bôi đen đoạn code sau đó ấn Ctrl + C là được. Nói có vẻ đơn giản nhưng với những đoạn code dài thì rất mất thời gian. Để đơn giản hơn cho việc này, bạn chỉ cần dán đoạn code sau trước thẻ </body> trong template là được.

<script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> Với đoạn code này người đọc chỉ cần đơn giản là nhấp đúp chuột vào đoạn code là có thể bôi đen toàn bộ code trong khung chứa code rồi. Bạn có thể xem demo ngay trên đoạn code bên trên. Bên trên Khánh có tô đỏ chữ pre đó chính là thẻ được áp dụng. Trường hợp bạn dùng thẻ <code> thì sửa thành code

Recent comment đơn giản cho blogspot

Chào bạn! Ở bài viết này Khánh sẽ giới thiệu đến bạn một widget quen thuộc đối với một blogger đó chính là Recent comment. Ở phiên bản này, Widget recent comment của chúng ta sẽ trở nên rất đơn giản và nhẹ nhàng với ảnh avatar được bo góc, hiển thị số ký tự đầu của comment được rút gọn. Và điều tuyệt vời hơn hết là bạn hoàn toàn có thể tùy chỉnh các thông số trên một cách dễ dàng. Bạn có thể xem thử

DEMO

Để thêm widget recent comment cho blogspot của bạn, bạn vào Bố cục > Thêm tiện ích > HTML/Javarscript dán đoạn code sau vào khung code và save lại.<style scoped="" type="text/css">
ul.blogduykhanh_recent{list-style:none;margin:0;padding:0;}
.blogduykhanh_recent li{background:transparent;margin:0 0 6px!important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.blogduykhanh_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}
.blogduykhanh_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{border-radius:100px;width:35px;height:35px}
.blogduykhanh_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgY4xLQwtn-shabvym38cj5EFXDk2y1QgZXAbyQfg6cRustVSpgrxKkbkITxK0HttVe8RJXa1IIIS-yuISjVWYVZ3JIkQYKS18nIs1VjKFwy5UFnjJsXVnqDmLfe1U6c7MDtg7tZ98xw/s1600/avatar-blogduykhanh.png",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='BLOGDUYKHANH';
//]]>
</script>
<script src="https://googledrive.com/host/0B5VqGSVMkE9IWXM3VUlfRldQbUE/" type="text/javascript"></script>
<script src="/feeds/comments/default?alt=json&amp;callback=blogduykhanh_recent&amp;&amp;max-results=50" type="text/javascript">
</script> Trong đoạn code trên bạn chú ý đoạn code màu đỏ, đó chính là những thông số của widget có thể thay đổi được.

1. numComments  = 5,   Số comment được hiển thị
2. showAvatar  = true, Hiển thị avatar comment hay không, nếu không muốn hiển thị bạn có thể sửa "true" thành "false"
3. avatarSize  = 35,   Kích thước avatar hiển thị
4. roundAvatar = true, Có bo góc hình tròn avatar hay không, nếu không muốn bo góc bạn có thể sửa "true" thành "false"
5. characters  = 40,   Số ký tự nội dung comment hiển thị
6. defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgY4xLQwtn-shabvym38cj5EFXDk2y1QgZXAbyQfg6cRustVSpgrxKkbkITxK0HttVe8RJXa1IIIS-yuISjVWYVZ3JIkQYKS18nIs1VjKFwy5UFnjJsXVnqDmLfe1U6c7MDtg7tZ98xw/s1600/avatar-blogduykhanh.png",  Avatar mặc định cho những người bình luận ẩn danh

Xong xuôi thì lưu lại và thưởng thức thôi. Chúc một ngày tốt lành! :D

Sharing Social Widget - Nút chia sẻ lớn có đếm số cuối bài viết cho blogspot

Chào các bạn! Ở bài viết này Khánh sẽ giới thiệu đến các bạn một bộ nút chia sẻ mới với font chữ khá lớn gây ấn tượng cho bạn đọc ở cuối blog. Khi load bài viết, nút chia sẻ sẽ hiện tổng số lượt chia sẻ và hai mạng xã hội lớn nhất hiện nay là Facebook và Twitter. Ngoài ra bạn đọc cũng có thể nhấn nút mở rộng để chia sẻ đối với các mạng xã hội khác như: Google+, Linkedin, Pinterest. Mời bạn xem thử

Social follow widget - Nút theo dõi mạng xã hội đẹp và đơn giản

Như các bạn cũng biết là môi trường internet hiện nay chịu ảnh hưởng rất nhiều từ các mạng xã hội. Để blog phát triển được thì ngoài nội dung ra chúng ta cần đặc biệt chú ý đến việc quảng bá blog bằng các phương tiện của mạng xã hội. Hôm nay BDK sẽ giới thiệu đến các bạn một widget nhỏ đó là Social follow widget. Bạn có thể đặt link của 3 mạng xã hội phổ biến nhất là Facebook, Google+, Twitter ở đây để người đọc tiện theo dõi các trang mạng xã hội của bạn.