Minggu, 11 Februari 2018

How to Make Text or Picture Header Automatically in the middle

How to Make Texs or Picture Header Automatically in the middle, Ok this time I will explain how to make How to Make Texs or Image Header Automatically in the middle, why should be in the middle If we put or give a picture on our Blog hedaer then beside our header we put Ad unit, When we open in the Mobile Device will automatically the image that we place in the header will shrink either to the left or right and of course very unpleasant in the eyes. and after searching on Google how to Make Texs or Picture Header Automatically in the middle finally meet Also, if you want to do it Please SImak How.

Center Header

Creating a Header Image in the middle with Blogger designer template

How to Make this change fairly easy. You can make these Auto adjustments on every page of your Blogger blog without having to change them individually. All you have to do is modify the CSS from your blog which can be found directly through your Blogger dashboard Even if you have little or no experience in website design either blog or wodpress or coding, you can certainly make header images easily right in the middle with follow these steps.


Step 1. Log in to your blogger account and select the blog you want to modify, then go to the "Templates" tab and click the "Customize" button on the right side.
Cara membuat gambar header di tengah #2
Membuka template designer blogger
Step 2. Then Navigate to the "Advanced" tab> "Add CSS" and paste the code in the empty box:
#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
 }
#header-inner img {
margin: auto;
}
If you have a small image and you want to be full width, add the following CSS instead:
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
 width: 100%;
height: 100%;
}
Step 3. Next Step Save CSS or Press ENTER after you paste the css code, then click "Apply to Blog" button in the upper-right corner of the template designer templates.
Cara membuat gambar header di tengah #3
Memodifikasi CSS

Here are some other aligned options for your header:

The picture on the right and the title on the left
#header-inner {
background-position: right !important;
width: 100% !important;
}

.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

The image on the left and the title on the right

#header-inner {
background-position: left !important; 
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Note: for larger images, you may need to resize them to make them appear side by side with the text.

Disqus Comments