Cách làm Footer đẹp cho Blogspot (P1)

Chào mọi người !

Từ trước tới nay, việc tạo các footer cho Blogspot là không khó, các bài viết hướng dẫn tràn lan trên mạng. Tuy nhiên cũng phải lưu ý một điều, đó là các hướng dẫn căn bản có thể áp dụng đối với các blog phát triển trên nền tảng cơ bản, còn đối với các bạn dùng mẫu template khác được chia sẻ, thì đó là vấn đề rất lớn.

Dùng thì dùng được, nhưng fix cho nó hoàn chỉnh và theo ý của mình là một điều không dễ, do vậy WinBlog sẽ áp dụng và giúp các bạn có được cái nhìn tốt nhất cho việc chỉnh sửa phần footer ( phần chân website ).

Đầu tiên ta có 3 bước để view footer :
1. Footer là gì ? Được định dạng cơ bản như thế nào ?
2. Cột footer và cách chia thêm nhiều cột tiện ích.
3. CSS và trang trí cho footer như thế nào ?

1. Footer là gì ? Được định dạng cơ bản như thế nào ?
Footer là phần chân nền của một website, nó là phần để lưu giữ các thông tin về web, liên hệ cũng như thông tin chủ sỡ hữu chẳng hạn. Do vậy nó là phần được quan tâm khi người dùng xem xong toàn bộ phần chính ở phía trên :

Footer thường được Blogspot định dạng là thẻ footer nằm dưới Main chính của Wrapper :

<div id='Footer'>
     <div class='footer-main'>
          <div class='footer-column'>
               Nột dung Cột 1
          </div>
          <div class='footer-column'>
               Nội dung Cột 2
          </div>
          <div class='footer-column'>
               Nội dung Cột 3
          </div>
     </div>
     <div class='footer-copyright'>
     </div>
</div>

Để điều chỉnh một footer, các bạn nên tìm đến phần code này - nếu không có thì copy đoạn code trên vào dưới main, và chỉnh sửa theo ý của mình.

Theo thiết kế, để chia các cột, thì chúng ta có thể thêm các thẻ DIV có các định dạng CSS với kích thước chuẩn, nhằm tạo ra các cột đồng đều, giúp blog nhìn cân đối hơn. 

Như vậy, chúng ta đã tạo ra được 3 cột như mẫu, các phần sau mình sẽ hướng dẫn các bạn cách phân chia kích thước các cột và CSS footer.

WinBlog

Những code tiện ích hay cho blogspot - blogger

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)

<span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Nội_dung</span>
<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span> 

#339966 // Mã màu cho chữ
12pt Tahoma // Cỡ chữ và font chữ

margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.

Template mới về ảnh - Picture 1

Template mới nhất có thể dùng cho blog ảnh hoặc giới thiệu về phong cảnh, địa điểm , du lịch blogspot.

Features:

Instructions:	How to install a Blogger template To edit the Menu you need to search and edit the links directly in your template code. This template looks better if you set the posts per page in a multiple of 3. Eg. 9 posts per page.
Template author:	Aoideszign
Description:	Oreki Houtarou is a free premium blogger template with 2 columns, responsive design, seo friendly, right sidebar, gallery-styled, an exclusive design for Blogger, footer columns, posts thumbnails, drop down menu, breadcrumbs, pagination, emoticons, well designed threaded comments, 404 error page customized, 3D effect and neutral colors. Excellent template for blogs about anime, games or kids. Download Oreki Houtarou for free in BTemplates. Download : http://adf.ly/1ctO1f Demo : http://adf.ly/1ctNyw

Its a Girl - Template blog new

Winblog xin giới thiệu đến các bạn một template mới với hình ảnh dễ thương từ BTemplate.
Template này miễn phí và các bạn có thể tùy biến để sử dụng nhé.

Instructions:	How to install a Blogger template To display the posts date properly you need to change theTimestamp Format.
Template author:	NBThemes
Designer:	Regretless
Description:	Its a Girl is a free blogger template adapted from WordPresswith 3 columns, responsive design, right sidebar, fresh look, rounded corners, a background pattern, well designed threaded comments, cute design, girly looking and floral motifs. Excellent template for blogs about animals, business, crafts, to write a diary, education, family, fantasy, fashion, health and beauty, kids, love, nature or people. Download Its a Girl for free in BTemplates. DOWNLOAD : http://adf.ly/1cs4c5 DEMO : http://adf.ly/1cs4iR

Thay đổi hình nền Background cho Blogspot

Cách đơn giản nhất đổi với việc thay một hình nền cho Blogspot đó là dựa vào mẫu thiết kế chuẩn Template của Blogger. Các bạn có thể vào mục Mẫu => Tùy Chỉnh , sau đó vào phần hình nền để thay thế lại nhé.

   Sau đây, Win Blog sẽ chỉ gửi đến các bạn cách thứ 2, nhanh chóng và đơn giản, có thể tùy biến CSS dễ dàng hơn. Đó là chỉnh mã code trong Chỉnh sửa HTML (chỉnh mẫu template ).

   Bước 1: các bạn vào Mẫu => Chỉnh sửa HTML => Tìm ]]></b:skin> :

   Bước 2 : Copy đoạn mã code sau trên đoạn code b:skin vừa tìm :

   body { background-image: url ( IMAGE-URL.png ) quan trọng;! background-repeat: no-repeat ; background-position: trung tâm hàng đầu; background-attachment: fixed; background-size: 100% ; }

   Lưu ý : Trong đoạn code, thay hình ảnh IMGAE-URL.png bằng đường link hình ảnh Background của bạn. Phần no-repeat các bạn có thể cho thành 2 đối tượng : no-repeat là không lặp lại, repeat là lặp lại hình (áp dụng các đối tượng hình nền hoa văn ).

    Bước 3: Nhấn lưu mẫu, chờ mẫu được cập nhật và xem lại hình nền blog nhé.

   Xem thành quả của các bạn sau khi hoàn thành nhé.
   Nếu khó khăn trọng việc lưu hình ảnh trên host để lấy link, thì các bạn có thể tham khảo thêm:
   Upload hình ảnh để sử dụng lên Blogspot.
   Các trang upload hình ảnh tốt nhất hiện nay.

Win Blog

Hình nền Background cho Blogspot

Các bạn blogger thân mến,

   Khi thiết kế một trang blogspot cơ bản, điều đầu tiên mà các bạn nên lưu ý đó là hình nền của trang Blog. Tuy một số trang hiện nay, đều dùng màu trắng đơn điệu, nhưng việc nó đóng một vai trò quan trọng trong vấn đề tạo sự nổi bật cho mỗi blogger là điều cần thiết.
   Sau đây, Win Blog xin gửi đến các bạn một trong các trang web cho phép lưu các hình nền để bổ sung và Background template :

   1. Trang shabbyblogs.com :
   Ưu điểm của trang ngoài các hình nền đẹp, màu sắc thì còn có thêm các mục khác đa dạng hơn như : nút bấm, nút like dễ thương. Khi đến với trang Shaddy, các bạn có thể copy scripts để vào trang web hoặc lấy link hình ảnh trong đoạn mã code.

 
   2. Trang dottydotdotdesign1.blogspot.com :
   Trang blog chia sẻ các hình nền ngộ nghĩnh, độc đáo, tạo tính ấn tượng cho người xem. Cơ bản dotty dùng các hình ảnh lạ, hình vẻ, tạo sự sống động cho một hình nền blog. Các bạn có thể sử dụng thử nhé.

 
   3. Trang leelou-blogs.com :
   Click tại đây
   Đặc điểm của hình nền Leelou đó là các hình vẻ lặp lại liên tục, tạo các khối hình họa ấn tượng. Các hoa văn được căn đều giữa hai bên, với nhiều sự đa dạng và phong phú, giúp người xem có nhiều lựa chọn.

   4. Trang textures.com :
   Đây là trang Background với rất rất nhiều thể loại đa dạng, bạn có thể tìm thấy ở đây tất cả các loại hình từ động vật, hoa văn cho đến các cảnh tự nhiên, cuộc sống.

   5. Trang shizoo-design.de :
   Click tại đây
   Hình nền ở đây được tạo nên bằng các phương pháp đồ họa ấn tượng, từ màu sắc đến kỹ năng nghệ thuật đều được thể hiện trên hình ảnh. Shizoo đáng là nơi để các bạn tìm các hình đẹp để thiết kế website.

 
   Làm thế nào để thay đổi hình nền Background, các bạn có thể tham khảo chi tiết ở đây:
   Thay đổi hình nền Background cho Blogspot

Win Blog

Tự động resize lại kích thước ảnh khi đăng bài viết Blogspot

   Trong một số trường hợp, người sử dụng Blog đăng một bài viết với rất nhiều hình ảnh khác nhau, kích thước khác nhau, nên có thể xảy ra lỗi tràn ảnh khỏi khung chứa. Điển hình nhất là ở một số hình ảnh có độ phân giải cao, kích thước lớn.
   Để chắc chắn điều này không lặp lại, Win Blog sẽ gửi đến các bạn một trong các cách đơn giản nhất : điều chỉnh trong CSS

   Bước 1 : Khi các bạn đăng một bài viết, hãy đưa hình ảnh đó vào chế độ Kích thước ban đầu (hay Original Size ) :

   Bước 2 : sau đó các bạn vào chế độ Điều chỉnh HTML (Mẫu ) , vào xem phần code CSS ( tìm <:b skin>  ) và thêm dưới nó đoạn code sau:

.post-body img {max-width: 100%;max-height: auto;display: block;margin: auto; box-shadow: none;border: none;padding: 0px; } 

   Bước 3: quay trở lại bài viết có ảnh ở Bước 1 , bạn sẽ thấy bức ảnh đã thon gọn lại và tự động điều chỉnh trong Body của bài viết.

Chúc các bạn vui vẻ.

Win Blog