Bài đăng

Đang hiển thị bài đăng từ Tháng 9, 2014

Tạo thanh Breadcrumbs chuẩn SEO, HTML5, CSS3 cho Blogspot

Hình ảnh
Ở 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

Tạo Widget Breaking News (Tin tức mới) kèm Social Buttons cho Blogspot

Hình ảnh
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!

Tạo Recent Posts 3 cột với style thumbnail đẹp

Hình ảnh
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 =

Tạo Recent Posts với style tin tức đẹp theo nhãn (label) cho Blogspot

Hình ảnh
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