Blog Trung Hi

Recent Posts là widget cập nhật thông tin bài viết mới nhất của blog hoặc theo một nhãn (label) của blog. Hôm nay, mình giới thiệu đến các bạn tiện ích này với style tin tức đẹp . Demo-Recent Posts Để tạo widget  Recent Posts , các ban thực hiện các bước sau: Bước 1:  Các bạn vào Bố cục →Thêm tiệc ích HTML →Thêm đoạn code sau: <style type="text/css"> #rc-plus {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff} .rc-plus h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold} .rc-plus ul{list-style:none;margin:0;padding:0} .rc-plus li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZb-SNIegki9ZuX6jEjGaCRzc0uPGNTF-r7UwD6NgnpKifEU-p8B3o2KBP_ktlzWXrqXJ9f_L8r0IrLFJ0CoGSzddMAUexyQzIPzZizjZF1svWW7TkxLmnrd060qScD2IT-M0biI5OenwH/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px} .rc-plus h2 a:link, .rc-plus h2 a:visited {color:#fff} </sty

Để giúp cho blog thêm phần khoa học hơn, trông đẹp mắt, tạo sự thú vị cho đọc giả khi bình luận một bài viết. Các bạn có thể tiến hành chèn Emoticons cho khung bình luận blogger. Chèn Emoticons trước khung nhận xét Blogger Các bước thực hiện Bước 1: Thêm thư viện Jquery nếu Template của bạn chưa có! <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' /> Bước 2: Chèn đoạn code sau trước thẻ </body> . <b:if cond='data:blog.pageType == &quot;static_page&quot;'>   <script type='text/javascript'>     //<![CDATA[     var emoRange = "#comments p, div.emoWrap",       putEmoAbove = "iframe#comment-editor",       emoMessage = "Để chèn biểu tượng cảm xúc, bạn phải copy trước để dán các mã icon.";     // Emoticon bar before comment-form     $(function() {       $(putEmoAbove)         .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-

Để góp phần cho Blog của bạn thêm phần chuyên nghiệp hơn, hãy tạo cho blog của bạn hộp tìm kiếm thông tin. Công cụ này cho phép đọc giả có thể tiếp cận thông tin dễ dàng hơn, tăng tính khoa học của Blog . Hôm nay mình sẽ giới thiệu một mẫu Seach Box giao diện Metro UI đẹp mắt cho Blogger. Tạo Search Box (hộp tìm kiếm) Metro UI cho Blogger Các bước thực hiện Bước 1:  Đăng nhập vào  B logger -> Bố cục Bước 2:   Thêm tiện ích-> HTML/ Javarscip Bước 3:  Dán code bên dưới: <style> #abt-search-btn { background: none repeat scroll 0 0 #0F8528 ; border: 0 none; border-radius: 0 0 0 0; color: #FFFFFF; font-weight: 700; padding: 10px 20px; } #abt-search-box { background: none repeat scroll 0 0 #EEEEEE; border: 0 none; padding: 10px; width: 160px; } </style> <form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="abt-search-box" name="q"

Đối với blog, các bạn sẽ không thể thiếu đi khung Subscribe . Đây là khung giúp cho người đọc có thể dễ dàng tiếp cận bài viết qua email qua hình thức đăng kí và nhận bài viết qua Email . Mình sẽ giới thiệu đến các bạn một số mẫu đẹp nhất. Tạo khung Subscribe (đăng kí nhận bài viết mới qua Email) Các bước thực hiện Bước 1: Đăng nhập vào Blogger -> Bố cục Bước 2: Thêm tiện ích-> HTML/ Javarscip Bước 3: Dán code mẫu mà bạn thích. Code mình sẽ đề cập bên dưới Mẫu 1 Code <div class="sub-email"> Đăng ký nhận bài qua Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=dongvietblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.

Chào các bạn! Hôm nay mình sẽ viết bài đầu tiên về  thủ thuật Blogger . Và với những bài viết đầu tiên, mình sẽ giới thiệu với các bạn những Widget cần thiết cho Blog. Tạo  nhận xét mới (Recent Comments)  cho Blogspot-tức là bạn sẽ tạo 1 trang hoặc 1 Widget hiển thị tại trang chủ. Chức năng của tiện ích này là cập nhật những bình luận mới nhất tại Blog của bạn! Nhận xét mới (Recent Comments) cho Blogspot Đây là một mẫu Recent Comments mà mình cảm thấy rất đẹp, và Blog của mình cũng đang áp dụng mẫu này. Tiện ích mình giới thiệu hôm nay khá đẹp:  Tự động hiển thị avatar cho nhận xét của tài khoản Blogger và avatar mặc định cho nhận xét của người không có avatar. Thêm trích đoạn nội dung của nhận xét. Tự động phân biệt nhận xét của Admin. DEMO   Và bây giờ mình sẽ hướng dẫn các bạn tạo một Widget hay 1 trang nhận xét mới. Bước 1:   Thêm đoạn mã dưới đây vào trước thẻ   ]]></b:skin>  trong template của bạn. .rc-avatar{float:left;margin-right:10px;border:1px solid #999;border-radi