Blogger

17:16 2 , ,
Nếu bạn đang làm Blogspot, và đang tìm cách ẩn/hiện widget thì bắt buộc bạn phải có được ID của widget đó. Hoặc bạn đang muốn sticky/float một widget nào đó thì bạn cũng cần phải có ID widget. Và rất rất nhiều lý do khác để bạn cần phải có ID widget để có thể tùy chỉnh giao diện theo mong muốn của mình.

Cách tìm ID widget trong Blogspot

11:43 8 , ,
Bạn muốn trang web của mình mới lạ với mỗi lượt truy cập, nhằm làm cho người xem đỡ nhàm chán với giao diện hiện tại? Mình đề xuất các bạn nên thay đổi màu nền cho Blogspot của bạn, và mình sẽ hướng dẫn một thủ thuật blogspot giúp các bạn tự động thay đổi màu nền mỗi khi truy cập vào trang blog.

Hướng dẫn tự động thay đổi màu nền cho Blogspot

15:30 2 , , , ,
Đây là hướng dẫn tạo sitemap cho Blogspot nhằm cung cấp cho các công cụ tìm kiếm sơ đồ trang blog của bạn, nó sẽ giúp điều hướng bots và hỗ trợ SEO Blogspot tốt hơn. Ngoài ra, với sitemap này, đây có thể nói là một trang điều hướng cho các bài viết của bạn, nó sẽ hiển thị theo label, tên đầy đủ các bài viết trong từng label, giao diện khá đẹp nhé ^^

Tạo sitemap cho Blogspot - SEO Blogger

10:35 1 , , ,
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 ^_^

08:30 4 , , ,
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!

15:30 2 , , ,
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é :)

19:40 4 , ,
Cách tạo blog cá nhân dễ dàng nhất là sử dụng Blogspot, bạn sẽ chẳng tốn phí gì cả, và việc tạo được một blog diễn ra chỉ trong vài bước, rất nhanh chóng.

Blogspot (hay còn gọi là Blogger) là một sản phẩm của Google cho phép bạn tạo một trang blog hoàn toàn miễn phí, bạn không hề tốn chi phí gì cho hosting hay tên miền. Tên miền của Blogspot sau khi được tạo ra sẽ có dạng tenbandat.blogspot.com. Và nếu bạn có một tên miền riêng, thì Blogspot cho phép bạn trỏ tên miền đó về để thay thế cho tên miền sẵn có.

Cách tạo trang blogspot
Cách tạo blogspot

Contact Form

Name

Email *

Message *

Javascript DisablePlease Enable Javascript To See All Widget