How to center your Blogger header image, blog post images, sidebar pictures, gadgets, text, headings, and anything else? I've put together a reference list for you below that explains how to properly center the various items on Blogger without having to use deprecated methods.
To center the various elements on your Blogger blog may differ depending on the code used by your template. Replace the selector below with the correct one for your template after double-checking the class or id., and replace the selector below with the correct one for your template.
First of all Backup yout Template
How to Centre Header Image/Logo on Blogger
Add the following code above </b:skin> to Template > Edit HTML
#header-inner img {width: 900px; margin: 0 auto;}
#header-inner {text-align: center;}
How to Center Menu Bar Pages on Blogger
How to Center Menu Bar Pages on Blogger
Add the following code above </b:skin> to Template > Edit HTML
.PageList {text-align:center !important;}
.PageList li {float:none !important; display:inline !important;}
How to Centre Post Title on Blogger
Add the following code above </b:skin> to Template > Edit HTML
How to Centre Post Title on Blogger
Add the following code above </b:skin> to Template > Edit HTML
.h3.post-title, .post-title { text-align: center; }
In some template maby need to add:
.date-header { text-align:center; }How to Centre Post Date on Blogger
Add the following code above </b:skin> to Template > Edit HTML
.date-header {text-align:center;}
.post-title.entry-title {text-align:center;}
How to Centre Navigation Menu Items/Tabs on Blogger
Add the following code above </b:skin> to Template > Edit HTML.
Add the following code above </b:skin> to Template > Edit HTML.
.tabs-inner .widget ul { text-align: center;}
.tabs .widget li, .tabs .widget li {display: inline-block; float: none;}
How to Centre Page List Items/Tabs on Blogger
Add the following code above </b:skin> to Template > Edit HTML.
How to Centre Page List Items/Tabs on Blogger
Add the following code above </b:skin> to Template > Edit HTML.
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
How to Centre Sidebar Gadget/Widget Titles on Blogger
Add the following code above </b:skin> to Template > Edit HTML.
How to Centre Sidebar Gadget/Widget Titles on Blogger
Add the following code above </b:skin> to Template > Edit HTML.
.sidebar .widget h2, .title {text-align:center;}
How to Centre Blog Post Images on Blogger
Add the following code above </b:skin> to Template > Edit HTML.
Add the following code above </b:skin> to Template > Edit HTML.
.post-body img {margin: 0 auto; text-align: center; }
How to Centre The Archive Widget/Gadget List on Blogger
Add the following code above </b:skin> to Template > Edit HTML
.#ArchiveList,
#ArchiveList ul {text-align:center;}
How to Centre Sidebar Items and Gadgets on Blogger
Add the following code above </b:skin> to Template > Edit HTML
Add the following code above </b:skin> to Template > Edit HTML
.#sidebar-right-1,
#sidebar-left-1 {text-align:center;}
How to Centre Heading Tags in Posts on Blogger
Add the following code above </b:skin> to Template > Edit HTML
Add the following code above </b:skin> to Template > Edit HTML
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {text-align:center;}
How to Centre slider bar widgets
Add the following code above </b:skin> to Template > Edit HTML
XX is your widget nuber
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
A Excelent SEO Idea is to Make a Powerful Blog and sen all trafic to your e-shop, Read more at: istogrami
المشاركات
