Saturday, September 14, 2019

How to make a Responsive Blogger Template and mobile friendly-

How to make a Responsive Blogger Template and mobile friendly?

How to make a Responsive Blogger Template and mobile friendly?
Create a responsive blog

Responsive design blogs matching for all types of desktops, laptops, tablets, and smartphones.

Responsive blog design has recently become a professional blog design. There was a time when there was no blog responsive. But at the present time, everyone wants to make their blog a responsive design. Top-level blog designers have adopted their blogs to adapt to various mobile devices. The speed of any responsive blog is much higher than that of other normal blogs.

If you look at good quality blogs, you will see their blog looks the same on desktop, laptop, tablet, and smartphone. Especially for desktops and laptops, one looks at the design, and the tablet and smartphone have a completely different design. This type of blog makes it easy to visit and read content from any size device. As a result, the number of visitors increases through both computers and mobile devices. On the other hand, templates that are not responsive have a lot of slow-motion when visiting from a mobile device and have to zoom in to read the contents. This is why many visitors do not like to read such blogs.

What Does Responsive Design Mean?

Responsive Designs Mean?
One can say that matching all kinds of desktops, laptops, tablets, and smartphones are called blogs of responsive design. The Android version of this type of blog is much faster than the speed normal blog. Moreover, the Google search engine is currently evaluating Responsive Design blogs. This kind of blog can increase revenue by displaying responsive Google Adsense ads on all types of divas. Because Adsense ads cannot be shown in mobile versions without a responsive blog. Below is a view of our blog. All parts of it are Responsive. You can check whether your blog is Responsive or not.

Benefits of Responsive Blog:

  • Responsive blogs tend to be more SEO Friendly.
  • According to all the devices, its size is automatically adjusted. This makes the content easy to read from all devices.
  • Load time for responsive design blogs is very fast.
  • Visits from all types of devices continue to increase.
  • The revenue can be increased by showing different types of PPC ads on all devices.

How to Create a Responsive Design Blog?

Those who have good knowledge of HTML5 and CSS3 can easily create responsive design blogs. Because every part of the blog has to be added to the style sheet on the device size of different sizes. This is required for CSS3. HTML5, on the other hand, is a Markup Language suitable for responsive design. Below we will give you ideas on the basis of making a Responsive Design blog. If you know HTML5 and CSS3, it will make your blog responsive.

  • First login to the blog.
  • Then click on Template from the dashboard.

How to Create a Responsive Design Blog?
  • Now clicking on the Gear icon of the mobile template will show the image.

How to make a Responsive Design Blog?
  • Select "No, show desktop template on mobile devices".
  • Then click on Template> Edit Html.
  • Search for the <head> section by pressing Ctrl + F on the keyboard.
  • Now paste the Meta Tag below the blog's <head>.
 <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
  • From the keyboard again press Ctrl + F]]> </b> skin> Search section.
  • Then paste the following Media Queries on the blog]]> </b> skin>.
/*For Small Tablets*/
@media only screen and (max-width : 768px) {
.sidebar {width:100%; overflow:hidden}
/*For iPhones */
@media only screen and (max-width : 640px) {
.sidebar {width:100%; overflow:hidden}
/* Mobiles */
@media only screen and (max-width : 480px) {
.sidebar {width:100%; overflow:hidden}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
.sidebar {width:100%; overflow:hidden}
  • Finally, click Save Template and save the template.
As I have said before, the above issues are quite easy for those who have good experience with HTML5 and CSS3. Here we have tried to give you some basic ideas about Responsive Designs. Can you let us know if there is a problem somewhere? Further, in the future, we will show each part of the blog separately on how to create a blog in a fully responsive way?

No comments:

Post a Comment