Bro sist, Tips Tricks Bloggers back again ya with posts about CSS in a long while this blog is rarely updated because of busy taking care of some online stores.
Maybe my friend feel less satisfied with the look of your blog sidebar header title. Less of this, less of that, too gelaplah, or the color is less appealing. Or, perhaps also background on the title sidebar too intrusive and want to be removed. The following tips may be for my friend who had never tamper Utik CSS (intermediate), but there is no harm in anyway for my friend to learn CSS newbie blogger to start from changing the CSS rules in the sidebar title.
In Blogger, such as on the web in general, the entire display is set with CSS. So, as well as the title of the sidebar, zoom is set with CSS via a property and certain declarator. Before we take an important point on the CSS command header. CSS header has the same announcer HTML code (<h1> title </ h1>), which is h. Because it is a header, sidebar title also contains a declaratory h.
Title sidebar header is usually the type of header level 2, ie <h2> title </ h2>. Then, early in the edit HTML / Blogger template, look for the CSS rule containing h2, which is part of the CSS that governs all blog header level 2. CSS rules are in between <b: skin> <! [CDATA [and]]> </ b: skin>.
A simple example:
Before focusing on the conversion of the header view sidebar, note that h2 set the entire look of the blog header at level 2. While the CSS governing overall sidebar usually called sidebar-wrapper (or the like, for example sidebarwrapper, etc., looking similar), then title on the sidebar-wrapper is usually also characterized by an announcer with his id, the # sidebar-wrapper h2.
examples:
At a certain template, for example Minima template, the CSS rules do not exist, then the friend had to add their own. Later, created first and then put h2 or # sidebar-wrapper h2 between <b: skin> <! [CDATA [and]]> </ b: skin>. If no # sidebar-wrapper (or the like; namely wrapper element in the sidebar), then just use h2.
By modifying the CSS elements Sidebar Header (Title Sidebar)
To make modifications, there are several elements / CSS properties that need to be known. CSS positioning properties in general are: the margin and padding. Then the color is to set the font color. Line height is to set a high line spacing, and line spacing is the distance between letters. Background is to set the background color of the header. Buddy can add elements / other properties to add zoom. To test the change in value in a safe, backup template beforehand. Then please change the value of each property. Never in Crystal. See the results of zoom by clicking "Preview". If it has been done, the new "Save". To find out all elements / CSS styling properties, please see w3schools.com.
Adding Icon / Image Next Door Title / Title Header Sidebar
Through the CSS rules, my friend can enhance your appearance sidebar title with the image. This trick is done by adding elements background image and position it in such a way. Add url (alamatgambar.jpg) in the background.
For example:
So that the image is not repeated (meet background):
Furthermore, if you want the image to be on the left sidebar article title:
More examples of the use of a CSS rule to add the icon image on the sidebar header title:
Maybe my friend feel less satisfied with the look of your blog sidebar header title. Less of this, less of that, too gelaplah, or the color is less appealing. Or, perhaps also background on the title sidebar too intrusive and want to be removed. The following tips may be for my friend who had never tamper Utik CSS (intermediate), but there is no harm in anyway for my friend to learn CSS newbie blogger to start from changing the CSS rules in the sidebar title.
In Blogger, such as on the web in general, the entire display is set with CSS. So, as well as the title of the sidebar, zoom is set with CSS via a property and certain declarator. Before we take an important point on the CSS command header. CSS header has the same announcer HTML code (<h1> title </ h1>), which is h. Because it is a header, sidebar title also contains a declaratory h.
Title sidebar header is usually the type of header level 2, ie <h2> title </ h2>. Then, early in the edit HTML / Blogger template, look for the CSS rule containing h2, which is part of the CSS that governs all blog header level 2. CSS rules are in between <b: skin> <! [CDATA [and]]> </ b: skin>.
A simple example:
h2 {Obviously the rules vary in each template Blogger.
background: #000;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff;
}
Before focusing on the conversion of the header view sidebar, note that h2 set the entire look of the blog header at level 2. While the CSS governing overall sidebar usually called sidebar-wrapper (or the like, for example sidebarwrapper, etc., looking similar), then title on the sidebar-wrapper is usually also characterized by an announcer with his id, the # sidebar-wrapper h2.
examples:
#sidebar-wrapper h2 {
background: #000;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff;
}
By modifying the CSS elements Sidebar Header (Title Sidebar)
To make modifications, there are several elements / CSS properties that need to be known. CSS positioning properties in general are: the margin and padding. Then the color is to set the font color. Line height is to set a high line spacing, and line spacing is the distance between letters. Background is to set the background color of the header. Buddy can add elements / other properties to add zoom. To test the change in value in a safe, backup template beforehand. Then please change the value of each property. Never in Crystal. See the results of zoom by clicking "Preview". If it has been done, the new "Save". To find out all elements / CSS styling properties, please see w3schools.com.
Adding Icon / Image Next Door Title / Title Header Sidebar
Through the CSS rules, my friend can enhance your appearance sidebar title with the image. This trick is done by adding elements background image and position it in such a way. Add url (alamatgambar.jpg) in the background.
For example:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) #000:}
So that the image is not repeated (meet background):
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat #000:}
Furthermore, if you want the image to be on the left sidebar article title:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat left center #000:}In order to be on the right sidebar title:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat right center #000:}
Then, set the large padding that writing does not collide with the icon / image. In some cases, written individually padding: padding-left, padding right, padding-top and padding-bottom. Change the value in the padding left if the image on the left. If the image on the right, change the value of padding-right. Padding value must be greater than the width (width) image / icon is used.
In other cases, written in shorthand CSS padding. examples:
h2 {padding: 3px 2px 4px 4px;}
Value right there on the second part, while the value of any part of the fourth left. Change one of the value is greater than the width of the image / icon.
There is also a shorthand like this:
h2 {padding: 4px 6px;}The first value is for padding up and down while the second value is for the left and right padding. Changing the value of both will make writing more and have a narrow space. It's good buddy remove and replace rule independently padding (padding-right, padding-left, and so on) or by shorthand consisting of 4 values lined up as shorthand example above.
More examples of the use of a CSS rule to add the icon image on the sidebar header title:
#sidebar-wrapper h2 {
background: url (alamatgambar.jpg) no-repeat left center #000;
margin:4px;
padding: 5px 40px 5 40px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff; ...; ...; dst...
}
Change the value of each property as you wish.
After editing the CSS, preview first. If it is wrong, and will, save the template.
![এবার আয় হবে শুয়ে শুয়ে প্রতিদিন অন্তত ১$ । [Likesplanet Point Hack By AutoPilot ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQY0XiWh6VS_yqjPecM2cpxNPfpaP6Vi2DctEuY6YkSwQlogaTfiK789IRv68aMljVliNreuE9_qGP7B-MFH05mVMJ9BA0cdcSwx0LB7zvk10EJE3q65XRCPmtBt5dltEg7buCTLYwXEy/s72-c/Earn+Money+From+Likesplanet.png "এবার আয় হবে শুয়ে শুয়ে প্রতিদিন অন্তত ১$ । [Likesplanet Point Hack By AutoPilot ]")
0 comments
Post a Comment