How To Make Your Blogger Template Responsive

Về một vài tháng trước, chúng tôi đã xuất bản hướng dẫn cơ bản để tạo ra blogger mẫu mà nhiều người đã giúp độc giả của chúng tôi để trở thành nhà phát triển blogger và nó cũng đã đi virus, nhưng vẫn còn của nó lăn có. Nó là hướng dẫn cơ bản và chúng tôi còn nhiều điều hơn có thể làm cho bạn phát triển pro blogger vào ngày hôm nay chúng tôi đang trở lại với một trong những điều quan trọng nhất mà mỗi blogger mẫu cần phải có. Chúng tôi sẽ thảo luận làm thế nào có thể chúng tôi làm cho mẫu blogger của chúng tôi đáp ứng. Không biết về phản ứng? Đừng lo lắng, chúng tôi đang ở đây cho tất cả các bạn.
Hoặc là nó là blogger mẫu hoặc bất kỳ trang web mẫu, chúng tôi thường có thể gọi nó là "Thiết kế Web đáp ứng". Hãy để tôi mô tả trong đơn giản và phổ biến từ, để đáp ứng là một tính năng của chủ đề web cho phép thiết kế để phù hợp với bất kỳ kích thước màn hình. Trong thế giới công nghệ của ngày nay, người sử dụng các thiết bị khác nhau như máy tính xách tay, máy tính bảng, điện thoại di động để lướt internet mà có kích thước màn hình khác nhau và chúng tôi web chủ đề phải được tối ưu hóa cho tất cả các kích cỡ màn hình để phù hợp với tự động trong bất kỳ thiết bị do đó người dùng có thể không gặp phải bất kỳ vấn đề trong khi lướt blog hoặc trang web của chúng tôi.Những ngày này, hầu như tất cả mọi người đã cập nhật chủ đề trang web của họ để phù hợp trong mỗi màn hình nhưng một số trang web cũ và nhà thiết kế lười biếng như tôi không có Cập Nhật được nêu ra. Có! Blogger sân là không được đáp ứng bởi vì chúng tôi đang bận rộn ở đây nhưng sớm chúng tôi sẽ giới thiệu phiên bản hoàn toàn mới của Blogger sân mà cũng sẽ được đáp ứng.Có rất nhiều lý do cho việc thực hiện của chúng tôi đáp ứng chủ đề blog, đầu tiên và đơn giản, nó cải thiện giao diện người dùng, nó có thể tăng máy tính bảng và điện thoại di động người dùng và chúng tôi cũng có thể tạo ra nhiều tiền hơn với nó nếu chúng tôi hiển thị quảng cáo đáp ứng có thể xuất hiện trong mỗi kích thước màn hình. Trước khi chúng tôi bắt đầu hướng dẫn, cho tôi biết một trong hai bạn sẽ có thể để biến để đáp ứng trong mẫu blogger của bạn hay không. CSS kỹ năng:Bạn có cascading style sheet kỹ năng? Có? Tuyệt! Đưa để đáp ứng cho blogger mẫu là tất cả CSS làm việc và nếu bạn đã kỹ năng trong nó hơn bạn có thể không phải đối mặt với bất kỳ vấn đề trong nó.Cấu trúc mẫu:Bạn có biết cấu trúc của mẫu của bạn blogger? Nếu các mẫu được thiết kế của bạn hơn bạn phải biết làm thế nào bạn đã bọc tiêu đề, nội dung và các phần khác. Trong khi làm cho đáp ứng blogger mẫu, chúng tôi chơi với mỗi phần tử HTML và cho rằng chúng ta phải biết làm thế nào các mẫu được cấu trúc. Nếu các mẫu không được thiết kế của bạn hơn bạn có thể có một cái nhìn vào cấu trúc của nó và nghiên cứu nó hơn bạn có thể tiếp tục làm cho nó đáp ứng.Phần mở rộng hữu ích Chrome:Đây không phải là điều được biết đến trước khi nhưng chúng tôi đang đề xuất một hữu ích chrome phần mở rộng ở đây sẽ giúp bạn rất nhiều để làm việc trên để đáp ứng. Của nó thay đổi kích thước cửa sổ chrome phần mở rộng mà sẽ giúp bạn thay đổi kích thước cửa sổ trình duyệt với kích thước màn hình thiết bị khác nhau. Tôi khuyên bạn nên để làm việc trên mỗi kích thước màn hình được liệt kê trong phần mở rộng này.Vì vậy, thời gian của mình để tìm hiểu để đáp ứng và chúng tôi sẽ mất rất nhiều thời gian của bạn bởi vì chúng ta sẽ làm cho hướng dẫn này miễn là chúng tôi có thể. Hãy bắt đầu nó.Như bạn biết rằng thiết kế web đáp ứng có thể được thực hiện bằng cách sử dụng CSS chỉ và có là một thẻ đặc biệt trong CSS mà chúng tôi có thể sử dụng để đáp ứng. Bạn có thể sử dụng phương tiện truyền thông truy vấn (@media) và chỉ đơn giản của nó giống như nước uống nếu bạn biết CSS rất tốt. Các phương tiện truyền thông truy vấn hành vi thích nếu báo cáo khác trong JavaScript và cũng có thể có điều kiện thẻ trong Blogger. Chúng tôi làm cho nhiều phương tiện truyền thông truy vấn thẻ cho mỗi thiết bị kích thước màn hình và đặt nội dung CSS trong nó. Nội dung CSS sẽ được thêm vào trong các phương tiện truyền thông truy vấn thẻ sẽ chỉ hoạt động trong kích thước màn hình đã chỉ định. Nó không kết thúc ở đây người bạn! Đó là một điều nữa mà chúng tôi quên đề cập đến. Trước khi làm việc với phương tiện truyền thông truy vấn, chúng tôi nên thêm một thẻ meta dưới đầu giúp trình duyệt để phát hiện kích thước màn hình và hoạt động đúng với phương tiện truyền thông truy vấn.Chuyển đến Blogger >> mẫu >> sao lưu của bạn chỉnh sửa TemplateClick HTML >> tìm kiếmDán đoạn mã sau dưới đây It.Save!

Không có gì nhiều khó khăn với thẻ meta khung nhìn này. Bạn phải chỉ cần thêm nó dưới đây của bạnvà nó sẽ bắt đầu làm việc.
Ok! Vì vậy, tôi đã chuẩn bị các phương tiện truyền thông đơn giản truy vấn mã với kích thước màn hình khác nhau mà bạn phải làm việc.

@media màn hình và (tối đa chiều rộng: 1280px) {}
/ * CSS CHO NETBOOK VÀ MÁY TÍNH ĐỂ BÀN---* /
}

màn hình @media và (tối đa chiều rộng: 1024px) {}
/ * CSS CHO VIÊN---* /
}

màn hình @media và (tối đa chiều rộng: 768px) {}
/ * CSS CHO VIÊN NÉN NHỎ---* /
}

màn hình @media và (tối đa chiều rộng: 640px) {}
/ * CSS CHO IPHONE---* /
}

màn hình @media và (tối đa chiều rộng: 480px) {}
/ * CSS CHO ĐIỆN THOẠI DI ĐỘNG---* /
}

màn hình @media và (tối đa chiều rộng: 320px) {}
/ * CSS CHO ĐIỆN THOẠI DI ĐỘNG CŨ NHỎ---* /
}

Nghe này, làm thế nào các mã được viết. Đơn giản của nó. Bắt đầu với (màn hình @media và), thêm kích thước màn hình (tối đa-chiều rộng: 1280px) và dấu ngoặc nơi CSS sẽ được lưu trữ. Nó chỉ đơn giản là cho trình duyệt nếu kích thước màn hình là ít hơn tối đa chiều rộng hơn áp dụng mã trong ngoặc đơn. Có! Nếu kích thước màn hình sẽ là chính xác tối đa chiều rộng hay ít hơn nó sẽ làm việc cho đến khi nó đạt đến một phương tiện truyền thông truy vấn. Bạn cũng có thể thay đổi kích thước tối đa chiều rộng theo của riêng bạn.
Mẹo #1:Trong khi bạn đang viết mã cho phương tiện truyền thông truy vấn, cố gắng để xác định web yếu tố trong cách thức chúng tôi đang hiển thị cho bạn. Bạn nên sử dụng "em" thay vì "px" cỡ chữ, đệm, lề vv, sử dụng tỷ lệ phần trăm để xác định với các cột và sử dụng thuộc tính hộp kích thước, tối đa chiều rộng và chiều rộng min.Mẹo #2:Cố gắng để trang trải toàn bộ thiết kế trong bao bọc bằng cách div và cung cấp cho nó độ rộng khác nhau trong mỗi màn hình kích thước hoặc bạn cũng có thể làm điều này từ khóa cơ thể. Bằng cách này, những điều có thể mess lên trong ban đầu trong kích cỡ màn hình khác nhau nhưng các góc kết thúc sẽ tái kích cỡ và trở thành đáp ứng trong màn hình khác.Mẹo #3:Đặt một số lề ở bên trái và bên phải của toàn bộ cơ thể. Ví dụ: nếu chúng ta đặt lề của 100px trong màn hình phương tiện truyền thông của 768px hơn thiết kế sẽ được đáp ứng đến 668px kích thước màn hình.Tip #4 : Trong khi làm cho trình đơn điều hướng, cố gắng để đặt nhãn 3 lót nhấp nút với nó cho màn hình nhỏ kích thước như điện thoại di động cho thấy trình đơn danh mục chính sau khi nhấp vào nút. Nếu bạn không thể làm điều này hơn thử thêm lớp thẻ trong mỗi danh mục nhưng không thả downs và ẩn các mục danh sách trong màn hình khác nhau kích thước nơi có không suiting bởi kêu gọi với lớp.Đó là làm thế nào chúng tôi có thể làm cho đáp ứng blogger mẫu và chúng tôi hy vọng này hướng dẫn đầy đủ sẽ không để cho bạn đối mặt với bất kỳ vấn đề, nhưng bạn nhận được chúng, góp ý dưới đây và cho phép thảo luận. Chúng tôi đang hoạt động bây giờ!