Test

Thêm nút chia sẻ lên mạng xã hội vào các bài viết luôn rất quan trọng đối với trang web nào. Điều này giúp thu hút người biết đến website của bạn, những nút chia sẻ mạng xã hội này sẽ là công cụ giúp người xem có thể chia sẻ những bài viết của bạn lên MXH một cách nhanh chóng.

Nếu người xem thấy những button chia sẻ mạng xã hội này, và chỉ một vài người trong số họ chia sẻ bài viết lên đó thì sẽ tạo ra những điều thuận lợi cho bạn trong SEO, đồng thời tăng lượt truy cập vào website của bạn.

Ở đây mình chỉ hướng dẫn thêm vào cuối bài viết, vì sau khi xem bài viết, người xem sẽ không thích thú lắm với việc cuộn trang lên lại để bấm share cho bạn, vì vậy các button chia sẻ mạng xã hội nằm cuối bài viết sẽ là lựa chọn tốt nhất.

• Xem thêm: Thêm nút follow mạng xã hội chạy dọc trang

Làm thế nào để thêm nút chia sẻ mạng xã hội vào cuối bài viết Blogspot?

- Vào trang quản trị của Blogger, tiếp tục vào Template (Mẫu)
- Bạn tìm kiếm đoạn code sau:

<div class='post-footer'>
- Có thể  sẽ có tới 2 - 4 vị trí, tùy vào template. Tuy nhiên nên chọn vị trí cuối cùng.

Như các bạn đã biết, hiện Blogspot ở Việt Nam chúng ta đang bị nhà mạng VNPT chặn truy cập, vì có nhiều thành phần chống đối nhà nước sử dụng Blogspot làm công cụ để phát tán tin tức xấu. Điều này làm ảnh hưởng đến cả những Blogger chân chính như chúng ta, điều này rõ ràng là không đáng xảy ra.

Vậy phải có cách gì đó cho chúng ta có thể tồn tại chứ, không thể cứ nhìn trang web mỗi lần bị chặn lại sụt giảm 30% lượt view như vậy được! Nhiều bạn có thể đã biết, để tránh bị VNPT chặn thì đầu tiên là nên trỏ tên miền về cho Blog, cái này mình không nói đến nữa, vì nó chính xác hoàn toàn rồi.
Nhưng... trỏ tên miền xong thì chưa đủ, vì những hình ảnh trên web chúng ta đều có đuôi .blogspot.com, chính vì thế, cũng bị nhà mạng VNPT chặn nốt. Vào trang web mà ảnh thì chẳng có cái nào, xem bài viết ảnh toàn lỗi, vậy nếu là bạn bạn có out ngay cho khỏe không? Câu trả lời là có!


Chính vì thế, mình viết bài hướng dẫn này, giúp các bạn hiển thị ảnh trên Blogspot cho dù VNPT có chặn hay không! Cách này rất đơn giản, không cần phải sử dụng bất kỳ trang upload ảnh nào khác!

Vậy cách hiển thị ảnh Blogspot dù bị VNPT chặn làm thế nào?

Blogspot, mặc định nó có 1 công cụ upload ảnh, tuy rằng, các bạn khi kiểm tra HTML của nó, thì ảnh có đuôi là .blogspot.com. Tuy nhiên, không phải, trang web lưu ảnh của chúng ta upload lên là Picasa chứ không phải Blogspot, nhiệm vụ của Blogspot chỉ là đổi đường link ảnh mà thôi :)

- Sau khi upload ảnh, viết bài đầy đủ rồi, thì đừng public vội, hãy chuyển sang tab html:
- Tìm hết những đường link ảnh mà bạn đã upload, và thay toàn bộ phần này:

1.bp.blogspot.com
2.bp.blogspot.com
3.bp.blogspot.com
4.bp.blogspot.com

thành lh3.ggpht.com  hoặc lh3.googleusercontent.com --->> Chú ý: lh3, các bạn có thể thay số 3 thành 3-6 đều được nhé, hiện các subdomain này đều đang được Picasa sử dụng :)

• Xem thêm: Khắc phục ảnh bị VNPT chặn bằng Javascript

- Và giờ thì bạn đã có thể public bài viết, những đường link ảnh đã được chuyển về đúng dạng của nó, và tất nhiên là sẽ hiển thị ảnh dù VNPT có chặn hay không, vì VNPT chỉ chặn blogspot.com thôi ^_^

Movieism là một template blogspot giải trí miễn phí với phong cách độc đáo. Movieism được xây dựng với HTML5 mới nhất, CSS3 và jQuery mã hóa. Với cách bố trí của nó và các tùy chọn quản trị bạn có thể dễ dàng tạo ra một trang chủ đẹp và tùy theo nhu cầu của bạn.

Một số thông tin về template Moviesm Entertainment:

• Thiết kế theo phong cách Gallery
• Giao diện 2 cột
• Có sẵn vị trí các banner quảng cáo
• Tối ưu hóa công cụ tìm kiếm
• 100% Responsive - Thích nghi với bất kỳ kích thước màn hình nào 
• Widget bài viết phổ biến 
• Widget bài viết liên quan
• Thanh điều hướng đẹp
• Sidebar bên phải
• Hệ thống bình luận Google+
• Bài viết ở trang chủ nổi bật
• Icon chia sẻ mạng xã hội
• Không có footer
• Thanh menu trên top
• Hộp tìm kiếm ở sidebar
• Tương thích với hầu hết các trình duyệt phổ biến
• Trang web lý tưởng để xem phim, trailer phim và video trang web album 
• Màu chủ đạo là Trắng, xanh dương, đen

Demo:
http://moviezees.blogspot.com

Link download Template Blogspot - Movieism Entertainment:

Đôi khi trong quá trình quản trị bài viết ở blogspot, các bạn có thể click nhầm dẫn đến việc bài viết bị xóa mà không tìm ra được cách phục hồi. Vì thế mình viết bài này để hướng dẫn các bạn cách phục hồi bài viết đã xóa trong Blogspot.


Viết 1 bài viết mệt lắm, nào là chuẩn bị nội dung, hình ảnh, kiểm tra độ chính xác rồi mới public bài ra. Vậy là loay hoay cái xóa mất bài viết, hơi bị ức chế, làm mất thời gian vô cùng!

Làm thế nào để phục hồi bài viết đã xóa trong blogspot?

- Đầu tiên, lỡ xóa bài rồi thì cũng hãy bình tĩnh nhé, không nhất thiết phải viết lại đâu. Tuy nhiên, ở bài hướng dẫn này mình chỉ hướng dẫn các bạn lấy lại các bài viết đã được Google Index, còn các bài viết mà không được index thì có lẽ mình sẽ update lại sau hoặc có bài viết khác cho các bạn.
- Sau khi lỡ xóa bài viết rồi thì hãy lên Google, tìm kiếm theo site của bạn, kèm với từ khóa có trong tiêu đề bài viết. Ví dụ bài viết của mình có chữ "bình luận mới nhất" trong tiêu đề:

Sau khi đã tìm thấy bài viết bị xóa, thì các bạn click vào mũi tên nhỏ bên ngoài cùng của breadcrums, và chọn xem bản sao lưu (cache).
- Bản sao lưu này sẽ được mở ra, đây là bài viết đã được Google Index nội dung, mặc dù giờ nó chẳng còn trên trang web của bạn, nhưng Google có bản sao lưu đó rồi. Giờ thì view-source thôi:


- Bấm Ctrl+F để tìm kiếm, các bạn tìm kiếm cái postid, đây là id của bài viết, dãy số ngay sau postid chính là id của bài viết mà mình đã xóa. Hãy copy nó lại.


- Quay trở lại khu vực quản lý bài đăng, chọn Edit 1 bài đăng nào đó đã có sẵn. Và nhìn trên thanh địa chỉ các bạn sẽ thấy có 1 cái postid khác, thay postid của bài viết bị xóa vào vị trí postid hiện có và enter:


OK, toàn bộ nội dung bài viết đã được load lại như cũ ^^

- Tuy nhiên khi bạn bấm lưu chắc chắn nó sẽ báo lỗi, vì thay đổi đường dẫn cũ của bài viết... nên tốt nhất chuyển qua tab html copy toàn bộ nội dung ra, rồi đăng 1 bài đăng mới với nội dung đó lại!

• Xem thêm: Cách làm menu xổ xuống (Drop down) Blogspot

Thế là bạn đã phục hồi bài viết đã xóa trong Blogspot, mặc dù đường link đã thay đổi, nhưng không tốn công, nhọc sức để viết lại nữa.
Và cuối cùng, nên vào Google Webmaster Tool khai báo xóa url bài viết bị xóa đi nhé, để tránh trùng lặp nội dung và thẻ meta với bài viết bạn đăng lại.

Bài viết này mình sẽ hướng dẫn cách tạo widget bình luận mới nhất (Recent comments) cho blogspot. Vì với blogspot thì việc quản lý bình luận khá khó khăn, hoặc bạn phải thường xuyên theo dõi mail của mình và rất dễ bị spam mail vì thông báo bình luận từ trang web.



Với widget bình luận mới nhất này sẽ giúp bạn theo dõi những bình luận trên toàn bộ nội dung của blog mình, sẽ phản ứng kịp thời với những spammer hay trả lời nhanh nhất cho những câu hỏi của các bạn khác đặt ra trong các chủ đề của mình. Và widget bình luận này hiển thị cả avatar của blogger nhé :)

• Xem thêm: Tạo thanh menu cố định (Sticky menu) khi cuộn trang

Làm thế nào để tạo widget bình luận mới nhất cho Blogspot?

- Vào trang quản trị của bạn ở Blogger
- Tiếp tục chọn Layout (Bố cục), và chọn ví trí thêm widget bình luận mới nhất:

- Thêm HTML, JavaScript:

- Và paste toàn bộ đoạn code bên dưới này vào nội dung của HTML, JavaScript:

<style type="text/css">

    ul.ST_recent_comments{list-style:none;margin:0;padding:0;}

    .ST_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;}

    .ST_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;}

    .ST_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

    .ST_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

    // Recent Comments Settings

    var

    numComments     = 5,

    showAvatar     = true,

    avatarSize     = 40,

    roundAvatar    = true,

    characters     = 40,

    showMorelink    = false,

    moreLinktext    = "More »",

    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",

    hideCredits    = true;

//]]>

</script>

<script type="text/javascript" src=" https://googledrive.com/host/0B_1mqJd2tC8qdDdPb25PXzNiSUk"></script>

<script type="text/javascript" src="http://www.tranbadat.info/feeds/comments/default?alt=json&callback=ST_recent_comments&max-results=5"></script>

Trong đó, chữ màu xanh bạn sẽ thay bằng đường dẫn blog của bạn nhé. Còn 2 con số màu đỏ là số bình luận bạn cho phép hiển thị, có thể tùy chỉnh theo ý mình nhé. Và lưu lại!

Hãy F5 trang web của bạn và xem kết quả đi nào ^_^

Smartify là một template blogspot miễn phí đẹp, thanh lịch và nhanh. Với Smartify, bạn vô cùng dễ dàng để cấu hình và tùy chỉnh rất linh hoạt khi được mã hóa bằng cách sử dụng HTML5và CSS3 mới nhất .

Smartify là một lựa chọn lý tưởng cho bộ sưu tập, danh mục đầu tư và làm web cung cấp template.

Một số thông tin về template Smartify Gallery cho Blogspot:

• Giao diện đẹp và thanh lịch
• Giao diện 2 cột
• Có sẵn vị trí các banner quảng cáo
• Footer 3 cột
• Tối ưu hóa SEO
• Tải trang nhanh
• Code sạch sử dụng HTML5 và CSS3
• Sidebar bên phải
• Tương thích với các trình duyệt phổ biến
• Các button chia sẻ và follow mạng xã hội
• Hộp tìm kiếm
• Thanh menu top xổ xuống (Drop down)
• Bình luận bằng hệ thống G+
• Tốt nhất phù hợp cho thư viện, danh mục đầu tư và bộ sưu tập các trang web
• Màu chủ đạo: Đen, xám, đỏ và trắng

Demo:
http://smartify.templateify.com

Link download template Smartify Gallery cho Blogspot:

Bạn có thích 1 thanh menu đẹp để áp dụng cho thanh menu cố định khi cuộn trang lung thị linh hơn? ^_^ Ở đây mình sẽ chia sẻ cách làm menu xổ xuống (drop down) cơ bản nhất cho Blogspot. Sau khi hoàn thành bạn sẽ có 1 thanh menu ấn tượng!


Chú ý là tất cả hướng dẫn ở đây chỉ áp dụng cho những mẫu có sẵn khu vực navigation ở top, còn những mẫu template khác thì các bạn phải tùy biến nhiều hơn mới có kết quả!

Làm thế nào để làm menu xổ xuống (Drop down)?

- Truy cập vào trang quản trị Blogger > Design (Thiết kế)  > Page Elements (Bố cục)



- Hãy chọn thêm HTML/JavaScript như ảnh trên, và paste đoạn code này vào:

<div id='drnavbar'> 

      <ul id='drnav'> 

        <li> 

          <a href='#'>Trang chủ</a> 

        </li> 

        <li> 

          <a href='#'>Chém gió</a> 

        </li> 

        <li> 

          <a href='#'>Liên hệ</a> 

        </li> 

        <li> 

           <a href='#'>Menu</a>

            <ul> 

                <li><a href='#'>Menu 1</a></li> 

                <li><a href='#'>Menu 2</a></li> 

                <li><a href='#'>Menu 3</a></li> 

              </ul> 

        </li>

      </ul> 

    </div>

Cuối cùng là lưu template lại và tận hưởng thành quả :D Nhưng nhớ là có không vừa ý thì cũng tự hiểu rằng đây chỉ là đoạn code cơ bản để làm menu xổ xuống (Drop down) cho Blogspot thôi ^_^ Bạn phải tùy chỉnh một vài nội dung nữa nó mới hợp với trang web của bạn!

Nay tiếp tục với phần hướng dẫn các thủ thuật dành cho blogspot. Các bạn luôn muốn trang web mình trở nên hiện đại và đẹp, các bạn thấy nhiều trang web có cái thanh menu mỗi khi cuộn trang xuống là nó tự dính vào phía trên của màn hình và trượt theo... như web của mình ^_^ Thanh menu này sẽ giúp mọi người dễ dàng chuyển qua lại giữa các nội dung.

Và bài viết này là để hướng dẫn các bạn làm điều đó: Tạo thanh menu cố định (Sticky Menu) khi cuộn trang

Trước khi vào bài viết, mình lưu ý rằng chỉ áp dụng cho những blog có sẵn thanh navigation bar, hay gọi là thanh điều hướng trang như của mình nha. Còn nếu không có thì bạn có thể tạo ra nó, bằng cách... đợi bài hướng dẫn tiếp theo của mình :))

SpotCommerce là template blogspot bán hàng cao cấp. Nó là một template blogspot dễ dàng sử dụng và thiết kế bố trí có tùy biến cao.

• Xem thêm: Template Blogspot - Theme bán hàng BetaCommerce

SpotCommerce là một sự lựa chọn hoàn hảo cho doanh nghiệp nhỏ mua sắm trực tuyến của bạn và có thể được sử dụng để trưng bày, trang web danh mục đầu tư.

Một số thông tin về template bàn hàng SpotCommerce:

• Thiết kế danh mục bán hàng
• Tùy biến hoàn toàn
• Hoàn toàn Responsive 
• Dễ dàng điều khiển trên thiết bị di động
• Buttons share mạng xã hội
• Sản phẩm yêu thích
• Hỗ trợ 3 phương pháp thanh toán: PayPal, chuyển khoản và séc
• Status sản phẩm: Bình thường, On Sale và Out Of Stock
• Email thông báo cho phương thức đặt hàng: Thanh toán
• Thân thiện với công cụ tìm kiếm
• Menu top drop
• Chi tiết sản phẩm theo dạng danh sách ảnh
• Có tài liệu đi kèm
• Dễ dàng cài đặt với dữ liệu mẫu
• Tương thích với các trình duyệt được ưa thích
• Dễ dàng sử dụng giao diện quản trị

Hôm trước mình có viết bài hướng dẫn các bạn cách tạo ra một trang blog cho mình bằng Blogspot. Đó mới chỉ là tạo ra blog và sử dụng những template có sẵn mà Blogger cung cấp cho chúng ta. Nay với bài viết này, mình sẽ hướng dẫn các bạn cách thay đổi template mặc định của blog bằng những template tùy chỉnh khác đẹp hơn.

Hướng dẫn thay đổi template cho Blogspot:

- Đầu tiên bạn hãy download những template blogspot cực đẹp được share tại Trần Bá Đạt (_CTPG_)
- Tiếp theo hãy truy cập vào trang quản trị blog của bạn tại: https://www.blogger.com
- Chọn blog của bạn, và làm theo ảnh này:

Click vào Mẫu (Templates), tại đây chúng ta có nhiều tùy chọn. Từ những tùy chỉnh mà template cung cấp, cho đến chỉnh code của template và các template có sẵn...

Hãy chọn vào Sao lưu/ Khôi phục ở góc bên phải (Vị trí số 2 trên ảnh), đây là khu vực cho bạn có thể export code của toàn bộ trang blog của mình ra file xml và cũng là nơi bạn import những file template có sẵn (xml) vào để thay thế code hiện tại.

- Sau khi vào đó, hãy click vào phần Chọn tệp (Choose file), và duyệt đến file template blog mà bạn đã tải ở trên (Nó là file xml nha). Và tiếp hành Tải lên (Upload). Đợi 1 tí thì sẽ có thông báo thành công (hoặc lỗi :v :v ).

Đây là cách tải lên template bằng công cụ có sẵn của blog, tuy nhiên, bạn có thể thay đổi template blogspot bằng cách khác. Nhất là khi việc Upload lên bị lỗi:

- Đầu tiên vẫn là tải template về, sau đó hãy giải nén ra. Chúng ta sẽ có một hoặc nhiều template có sẵn trong đó.
- Tiếp hành mở các template này, bằng notepad có sẵn (Code sẽ lộn xà bần lên ^^)  hoặc sử dụng một công cụ lập trình khác như Notepad ++ (Mình đang dùng cái này)


- Hãy copy toàn bộ code trong đó


- Và vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML), hãy chọn toàn bộ code trong đó và paste toàn bộ code đã copy lúc nãy vào và lưu lại


OK, sau khi lưu lại xong thì hãy vào xem sự thay đổi của trang blog của mình nhé. Tuy nhiên, với nhiều template, thì bạn cần phải tùy chỉnh nhiều mới có thể được đúng như ảnh demo. Chính vì thế nếu cần support gì thì cmt bên dưới nhé :)

Spraymag là một template blogspot tạp chí với các tính năng hiện đại. Thiết lập trang web bằng cách sử dụng tùy chọn trong bảng điều khiển cực kỳ dễ dàng.

• Xem thêm: Template tạp chí DecoMag Magazine cực đẹp

Spraymag blogger template là một sự lựa chọn hoàn hảo cho các tạp chí trực tuyến, công nghệ, tin tức và các trang web thích hợp nội dung.

Một số thông tin khác về template Spraymag:

• Thiết kế tạp chí
• Giao diện 2 cột
• Slider nổi bật đầu trang
• Có sẵn vị trí các banner quảng cáo
• Thân thiện với các công cụ tìm kiếm
• Responsive
• Các button và icon mạng xã hội
• Mã hoá với HTML5 và CSS3 mới nhất
• Không footer
• Bài viết bổ biến có thumbnails
• Điều hướng trang
• Hệ thống bình luận bằng G+
• Có 2 thanh menu
• Chi tiết người viết cho mỗi bài viết
• Tương thích với hầu hết các trình duyệt
• Màu chủ đạo: Đen và trắng

Demo:
http://spraymag.blogspot.com/

Link download Template tạp chí Spraymag:

Altis là template blogspot phong cách tạp chí được cung cấp miễn phí bởi Oddthemes. Altis đi kèm với quảng cáo ngang và thanh sidebar, nơi mà bạn có thể đưa nội dung và banner quảng cáo một cách dễ dàng.

• Xem thêm: Template Giáng sinh cực đẹp

Altis blogger template là một sự lựa chọn hoàn hảo cho các tạp chí, bộ sưu tập, danh mục đầu tư, nhiếp ảnh và bất kỳ trang web theo định hướng hình ảnh.

Một số thông tin khác về template Altis:

• Phong cách thiết kế Tạp chí 
• Giao diện 2 cột
• Có sẵn vị trí đặt banner quảng cáo
• Bài viết phổ biến với Thumbnails lớn
• bài viết nổi bật
• Footer 3 cột
• Tối ưu hóa công cụ tìm kiếm
• Thiết kế Highly Responsive
• Điều hướng trang
• Sidebar bên phải
• Tương thích với các trình duyệt được ưa thích
• Các buttons mạng xã hội
• 2 thanh menu
• Hiệu ứng hình ảnh khi trỏ chuột vào
• Tự động resize ảnh thumbnails
• Hệ thống bình luận G+
• Màu chủ đạo: Đen, Xanh và Trắng