Latest Post

GearCrowd là một template cho blogspot thiết kế theo phong cách tạp chí, danh mục đầu tư và gallery. Template GearCrowd có 2 chế độ xem là lưới và danh sách để giới thiệu bài viết. Facebook like box được thêm vào bài viết để giúp tăng người theo dõi cũng như người nhận thông tin mới qua email.

Template đẹp blogspot

Template GearCrowd blogger có thể được sử dụng trên các trang web tạp chí, danh mục đầu tư, tin tức, công nghệ cao và các bộ sưu tập.

Một số thông tin về Template GearCrowd cho Blogspot:

  • Thiết kế phong cách tạp chí, gallery và danh mục
  • Giao diện 3 cột
  • Hiển thị bài viết theo danh sách hoặc lưới
  • Có sẵn các vị trí đặt banner quảng cáo
  • Footer 4 cột
  • Tối ưu hóa công cụ tìm kiếm
  • Thiết kế hoàn toàn Responsive
  • Bài viết liên quan
  • 2 sidebar nằm bên phải
  • Thanh menu trên top có khả năng xổ xuống
  • Tương thích với các trình duyệt phổ biến
  • Buttons chia sẻ và theo dõi các mạng xã hội
  • Hộp tìm kiếm ở tiêu đề
  • Điều hướng trang
  • Có Facebook Like Box
  • Hộp theo dõi quá email bên dưới mỗi bài viết
  • Phù hợp cho các trang web tạp chí, danh mục đầu tư, tin tức, công nghệ cao và gallery
  • Màu chủ đạo: Đen, Cam và Trắng
Demo:
http://gearcrowd-bloggertheme9.blogspot.com/

Link download Template Blogspot - GearCrowd:

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.

Thêm nút chia sẻ mạng xã hội vào bài viết Blogspot
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.

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.
- Paste đoạn code dưới đây vào phía dưới đoạn code đã tìm kiếm ở trên:

<!-- Button chia sẻ mạng xã hội -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec4dd3d1e59e9dc' type='text/javascript'/>
<!-- Kết thúc button chia sẻ mạng xã hội  -->

Sau khi paste xong thì hãy lưu template lại và vào một bài viết nào đó để kiểm tra xem. Nếu không xuất hiện hãy thử với các vị trí khác nhé :D 

Thế là bạn đã thêm được nút chia sẻ mạng xã hội vào bài viết blog để giúp người xem có thể dễ dàng chia sẻ bài viết rồi. Và đoạn code trên sử dụng những nút (button) chia sẻ có sẵn. Tuy nhiên bạn có thể thay thế nó bằng những nút chia sẻ khác!

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ó!

Cách hiển thị ảnh Blogspot dù bị VNPT chặn

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:
Cách hiển thị ảnh Blogspot dù bị VNPT chặn
- 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 :)
- 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.

template đẹp cho blogspot

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:

Template Blogspot - Movieism Entertainment - Responsive

Đô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.

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 đề:
Cách phục hồi bài viết đã xóa trong blogspot

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:

Cách phục hồi bài viết đã xóa trong blogspot

- 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.

Cách phục hồi bài viết đã xóa trong blogspot

- 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!
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.

tạo widget bình luận mới nhất (Recent comments)


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é :)

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:
Cách tạo widget bình luận mới nhất (Recent comments) blogspot

- Thêm HTML, JavaScript:
Cách tạo widget bình luận mới nhất (Recent comments) blogspot

- 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.

Template Blogspot - Smartify Gallery - Responsive



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!

Cách làm menu xổ xuống (Drop down) Blogspot


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)


Cách làm menu xổ xuống (Drop down) Blogspot

- 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>

Trong đó:
+ Những dấu # sẽ được thay bằng các đường dẫn đến các chủ đề mà các bạn muốn nó xuất hiện
+ Chữ màu xanh là nội dung hiển thị của các chủ đề
+ Thẻ <ul>...</ul> là thẻ dùng để mở rộng tạo menu xổ xuống (drop down). Như đoạn code trên thì khi  trỏ chuột vào Menu, sẽ xổ xuống các Menu 1,2,3
Sau đó lưu lại đi!

- Giờ thì đến Design (Mẫu)> Edit HTML (Chỉnh sửa HTML)
- Giờ thì nên backup toàn bộ code trước khi chỉnh sửa nhé, để khi cần còn có thể phục hồi lại như cũ
- Tìm kiếm đến thẻ ]]></b:skin> và thêm đoạn CSS này lên trên nó:
/*----- Drop Down Menu ----*/

#drnavbar { 
    background: #060505; 
    width: 960px; 
    color: #FFF; 
        margin: 0px; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#drnav { 
    margin: 0; 
    padding: 0; 
#drnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
#drnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #333; 
        border-right:1px solid #333; 
        height:35px; 
#drnav li a, #drnav li a:link, #drnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:normal 12px Helvetica, sans-serif;    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
        
#drnav li a:hover, #drnav li a:active { 
    background: #BF0100; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px; 
        
    
        
}
#drnav li { 
    float: left; 
    padding: 0; 
#drnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
#drnav li ul a { 
    width: 140px; 
#drnav li ul ul { 
    margin: -25px 0 0 161px; 
#drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { 
    left: -999em; 
#drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { 
    left: auto; 
#drnav li:hover, #drnav li.sfhover { 
    position: static; 
}
#drnav li li a, #drnav li li a:link, #drnav li li a:visited { 
    background: #BF0100; 
    width: 120px; 
    color: #FFF; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;
    
#drnav li li a:hover, #drnavli li a:active { 
    background: #060505; 
    color: #FFF; 
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

Các đoạn CSS có #... là màu của các thành phần trong thanh menu nhé, màu thế nào là tùy các bạn. Bạn có thể thay đổi font chữ tại đoạn code màu xanh

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.

 tạo thanh menu trượt (Sticky menu) khi cuộn trang

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 :))

Bắt đầu vào hướng dẫn tạo sticky menu thôi:

- Đầu tiên phải tạo CSS cho nó, bạn vào Edit HTML là thêm đoạn CSS này phía trên thẻ ]]></b:skin> nhé:

/* Bắt đầu Stick Nav */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* Kết thúc Stick Nav */


2 cái bên trong dấu /* */ chỉ dùng để báo cho bạn biết code bên trong nó nói về gì thôi, nên không cần quan trọng đâu ^^
- Giờ thì tìm đến đoạn code chứa navigation bar của các bạn, ví dụ như của mình thì chính là đoạn code chứa navitions này:
 tạo thanh menu trượt (Sticky menu) khi cuộn trang

Hãy đặt toàn bộ code của navigation bar vào trong thẻ:

<sticknav>
(Đoạn code của navigation bar ở đây)
</sticknav>

- Cuối cùng là đặt đoạn code này trên thẻ </body> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var aboveHeight = $('header').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>
Trong đó:

+ Với đoạn js màu xanh kia. Nếu trong blog bạn đã có dòng nào tương tự (Khác phiên bản 1.6.4 cũng được) thì bỏ nó đi nhé.

+ Còn đoạn màu tím nếu để nguyên như thế thì mỗi khi bạn cuộn xuống thì thanh navigation sẽ tự nhảy để chuyển thành sticky nav. Còn nếu bạn muốn quy định khi cuộn xuống bao nhiêu px thì nó mới thành sticky nav thì dùng đoạn code này thay vào đó:

var aboveHeight = 300;

Cuối cùng là lưu lại và bạn đã có được thanh menu cố định ( Sticky menu) khi cuộn trang rồi đấy, nó sẽ nằm trên cùng và trượt theo bạn!

SpotCommercetemplate 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.
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ư.

SpotCommerce Shopping - Template bán hàng


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.

Cách thay đổi template blogspot

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:
Hướng dẫn thay đổi template cho blogspot

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.
Hướng dẫn thay đổi template cho blogspot

- 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ướng dẫn thay đổi template cho blogspot

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

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

- 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

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

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.
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.

Template Blogspot - Spraymag - Responsive



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:

Template Blogspot - Spraymag - Responsive

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.