Blog Trung Hi

Tạo Sticky Widget trượt dọc cho Blogger - Đôi khi bạn muốn làm nổi bật một Widget nào đó trên blog hay đơn giản là làm nổi bật quảng cáo, khung Social thì việc tạo một  Widget cố định - Sticky Widget trượt dọc trên Blogrer là một điều phù hợp. Thao tác sau đây sẽ giúp bạn làm được điều đó! Tạo Widget cố định - Sticky Widget trượt dọc trên Blogger Các bước thực hiện Cách 1: Sử dụng Javascript Bước 1: Chèn đoạn code sau lên trên thẻ đóng </body> <style type="text/css"> .stickywidget{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);} #HTML3 .widget-content {padding:0;margin:auto;}</style> <script type='text/javascript'> //<![CDATA[ // Sticky Widget function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" stickywidget",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");

Widget Top nhận xét nhiều nhất -Top Commentators giúp cho Blog của bạn trở nên chuyên nghiệp hơn, người truy cập sẽ cảm thấy hứng thú hơn trong việc để lại nhận xét. Mình giới thiệu đến các bạn Style tiện ích Top nhận xét nhiều nhất của bác Tien Nguyen (Blogger Cando). Widget Top Commentators Các bước thực hiện Bước 1: Các bạn truy cập vào Blog của bác Tien Nguyen  Top Commentators  để lấy mã tiện ích  Top Commentators theo Blog của bạn. Lưu ý:    Number of names: là số lượt xếp hạng.   Round corner number for avatar image: là độ rộng của avatar   Comment label / text in your language: chọn text tùy ý của bạn.   Time limit, longer then slower: khoảng thời gian xếp hạng comment: có thể là 1 tuần, 1 tháng hay 1 năm tùy vào cách chọn của bạn.   Show avatar image: chọn hiện avatar hoặc không.   Show order number: chọn hiện số thứ tự hoặc không.   Your blog url: nhập vào là địa chỉ blog của bạn. sau đó chọn add widget. Bước 2: Sau khi các bạn nhận được code của Widget, bạn chỉ việc

Một thao tác nhỏ giúp bạn trang bị cho mình tiện ích  Mega Menu nhỏ gọn, không chiếm nhiều diện tích của blog và thật chuyên nghiệp. Cách thức hoạt động đơn giản và bạn hoàn toàn có thể dễ dàng tùy biến sao cho phù hợp nhất với sở thích của mình. Cut & Paste Mega Menu Trang chủ:   Cut & Paste Mega Menu Các bước thực hiện Bước 1: Các bạn dán đoạn code sau vào trên thẻ đóng </head>. Lưu ý đây là thư viện JQuery, nếu blog của bạn đã có thư viện này thì không cần thực hiện bước này nhé! <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Bước 2: Thêm đoạn code sau vào trên thẻ đóng  ]]></b:skin> .megamenu{position:absolute;display:none;left:0;top:0;background:white;border:1px solid #f06b24;border-width:5px 1px;padding:10px;font:normal 12px Verdana;z-index:100} .megamenu .column{float:left;width:180px;margin-right:5px} .megamenu .column ul{margin:0;padding:0;list-style-type:non

Một thao tác nhỏ giúp cho blog của bạn trở lên gọn gàng, khoa học hơn. Hơn nữa với cách làm này, đảm bảo tốc độ tải trang sẽ không bị ảnh hưởng, mình sẽ hướng dẫn các bạn cách tạo dạng Dropdown Menu cho tiện ích nhãn-label Blogspot. Các bước thực hiện Bước 1:   Các bạn vào  Bảng quản trị Blogger →Bố cục →Thêm tiện ích HTML/Javascript →Thêm một tiện ích nhãn (Label) đặt vào vị trí phù hợp với mong muốn của bạn nhé! Bước 2: Một lần nữa bạn vào  Bảng quản trị Blogger →Mẫu →Chỉnh sửa HTML →Chuyển đến tiện ích →Label1 Thay toàn bộ đoạn code mình đã đánh dấu bên dưới nhé, với blog của bạn đoạn code này cũng sẽ giống như vậy chỉ khác title do bạn đặt. Lưu ý: Thay toàn bộ code từ <b:widget ... </b :widget> <b:widget id='Label1' locked='false' title='Chuyên mục bài viết' type='Label'> <b:includable id='main'>  <b:if cond='data:title'>  <h2><data:title/></h2>  </b:if>  <div class='widget-co

Tiện ích Recent Posts với hiệu ứng trượt dọc chuyên nghiệp sẽ giúp cho người đọc cảm thấy thú vị khi đến với blog của bạn. Họ sẽ không có lí do gì mà không thử click xem bài viết đó, mình sẽ giới thiệu sau đây tiện ích này. Xem trước DEMO   Cách 1 Bước 1:   Các bạn vào Bảng quản trị Blogger →Mẫu →Thêm đoạn code sau trên thẻ  ]]></b:skin>. #recent-list{overflow:hidden;margin-top:5px;padding:0 0;height:350px} #recent-list ul{width:100%;overflow:hidden;list-style-type:none;padding:0 0;margin:0 0} #recent-list li{padding:5px 5px;margin:0 0 5px;list-style-type:none;float:none;height:70px;overflow:hidden;background:#fff url() repeat-x;border:1px solid #ddd;white-space:nowrap;text-overflow:ellipsis} #recent-list li a{text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0 0;padding:0 0 2px} #recent-list li img{float:left;margin-right:5px;background:#EFEFEF;border:0} .recent-date{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0;margin:1px 0 0

Ở bài trước mình có giới thiệu đến các bạn tiện ích Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot , tuy nhiên mẫu này khi áp dụng đối với một số Blog thì gặp một số lỗi về hiển thị. Vậy nên, mình sẽ hướng dẫn các bạn tạo cho blog của mình tiện ích này với mẫu 2 đã được mình tối ưu. Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot Preview Các bước thực hiện Có 2 cách để bạn tạo cho mình widget  Recent Comments cho blog. Cách 1:  Các bạn vào Trang quản trị của Blogger →Trang →Trang mới →Chuyển chế độ soạn thảo HTML →Dán đoạn code sau và lưu lại. Cách 2: Nếu như bạn không muốn tạo wiget này ở 1 trang riêng, mà muốn nó hiện ở trang chủ thì thực hiện các thao tác sau:  Các bạn vào  Trang quản trị của Blogger →Bố cục →Thêm tiện ích →HTML/Javascript →Dán đoạn code sau và lưu lại. <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="widget-content"> <style type="text/css"> ul.recent_comments{l

Ở bài viết trước mình đã giới thiệu đến các bạn bài viết   Tạo thanh Breadcrumbs và một số style đẹp cho Blogspot . Đây là một tiện ích hỗ trợ SEO quan trọng đối với Blogspot, hôm nay mình giới thiệu đến các bạn cách t ạo thanh Breadcrumbs chuẩn SEO, HTML5,CSS3 cho Blogspot. Tạo thanh Breadcrumbs chuẩn SEO, HTML5, CSS3 cho Blogspot Bài viết làm cho mình chăm chú từng chi tiết, từ logo ảnh thiết kết từ buổi sáng ngày hôm nay. Mới đi học về... Để tạo cho Blog của mình  thanh Breadcrumbs chuẩn SEO, HTML5,CSS3 các bạn thực hiện các bước sau: Bước 1: Chèn đoạn code sau trên thẻ   ]]></b:skin> .breadcrumbs { word-wrap: break-word; margin: 5px; border: 1px solid #fff; box-shadow: 1px 1px 5px rgba(1,1,1,.1); overflow: hidden; padding: 5px; background: #fff; Bước 2: Bạn tìm đoạn code sau: <b:includable id='main' var='top'> Thay thế đoạn code đó bằng đoạn code bên dưới: <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.ho

Breaking News là một widget phù hợp cho những trang tin tức, công nghệ, giúp cho người đọc có thể dễ dàng tiếp cận thông tin. Hơn nữa tiện ích này đảm bảo tính khoa học, chuyên nghiệp cho blog. Mình đã tìm tiện ích này trên mạng, tuy nhiên đa số các tiện ích này đều bị lỗi. Nay chia sẻ đến các bạn tiện ích 2 trong 1 tích hợp  Breaking News kết hợp cùng bộ nút mạng xã hội, RSS ẩn hiện trên thanh  Breaking News. Tạo Widget Breaking News (Tin tức mới) kèm Social Buttons cho Blogger -Tốc độ load của thanh  Breaking News  nhanh. Bạn có thể DEMO trực tiếp   TẠI ĐÂY Nếu bạn yêu thích tiện ích này, hãy comment email phía bên dưới, mình sẽ gửi code. Cảm ơn các bạn đã quan tâm tới Đồng Việt's Blog!

Tiếp nối bài viết  Tạo Recent Posts với style tin tức đẹp theo nhãn (label) cho Blogspot   mình giới thiệu thêm mẫu   Recent Posts với style 3 cột kết hợp với  thumbnail đẹp mắt. Tạo Recent Posts 3 cột với style thumbnail đẹp Để tạo mẫu Recent Posts, các bạn vui lòng 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"> #vanvietblog-rc-3cot {width:350px;} table#vanvietblog-rc-3cot {border:1px solid #ccc;} #rc-3cot {padding:0 8px;width:30%;} #rc-3cot p{padding:0;margin:0 0 5px 0;} #rc-3cot img {margin:8px 0 2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;} #rc-3cot a:link {font:normal 12px arial;} #vanvietblog-rc-3cot h2 {background:#098047; padding:5px 0 14px 15px; font:bold 15px Arial; margin:0px; color:#fff; text-align: center; } </style> <script type="text/javascript"> home_page = "http://vanvietblog.blogspot.com/"; label = "Blogger"; numposts =

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"> :) :)) ;(( :-