How To Make Your Blog Look More Attractive Using 30 Codes

Here we are going to mention 30 codes which are very helpful for beginners to use on their blog and make their blog look  more attractive. All you have to do is to open Template on your blog and then select Customize. A window will open on the top side of your blog. There click on advanced option present at the top left corner which is also encircled in orange color in the below shown screenshot.

When you click on Advanced option, a new white screen will open on the right side. 

1: Remove Page Titles

.page .title {
display: none;
}

#It will remove the page title of your blog.

2: Remove page title from a specific page

.page-id-200 .title {
display: none;
}

# You can remove title of any specific page using this code.

3: Remove image border

.entry img, img.thumbnail {   background: none;   border: medium none;   padding: 5px; }

4: Change colour of drop down menus

/* Changes the default background color of the drop down menus */ .nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a {background:#D0D9E0; } /* Changes the hover background, text and text shadow color  */ .nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul:hover {background:#316594; color:#FFFFFF; text-shadow:0 1px 0 #000;} /* Changes the default background color of a drop down menu with a child */ .nav li ul li, .nav li.sfHover ul li a.sf-with-ul { background:none repeat scroll 0 0 #D0D9E0; }

# It will change the color of your drop down menu being used in the menu used.

5: Change the header image per page

.page-id-xxxx #header {
    background: url("imageurl") no-repeat scroll 0 0 transparent; }

6: Remove next/previous buttons on Magazine slider

  .magazine #loopedSlider a.previous, .magazine #loopedSlider a.next {
  display: none;
}

7: To change the colour and transparency of block text on sliders

#loopedSlider .content p, #loopedSlider .content h2 {
background:rgba(255, 255, 255, 0.7);
}

8: Remove white space above the slider

#navigation {
margin-bottom: 0px;
}
.home .breadcrumbs {
margin-bottom: 0;
}

9: Remove breadcrumbs from your homepage

.home .breadcrumb {
    display: none;
}

10: Remove space between Header and Primary Navigation

#logo a img {
    display: block;
}

11: Align top menu to the right

#top-nav {
    float: right;
}

12: Change the background colour of Sliders

#loopedSlider .slides { background: #EEE;}

13: Add padding to Wootabs

#woo_tabs-3.widget {
    padding: 0;
}

14: Remove the footer on the homepage

.home #footer-widgets {
    display: none;
}

15: Add underline hover to navigation items

.nav a:hover {
    text-decoration: underline;
}

16: Customise caption style

.entry .wp-caption-text {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -x-system-font: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 22px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-align: center;
}

17: Delete Author and Post date

.post-meta { display:none; }

18: Add rounded corners to Portfolios

#portfolio img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

19: Add an image to the footer area

#footer {
background:url(<a href="http://link-to-your-image.com/image.jpg" rel="nofollow">
http://link-to-your-image.com/image.jpg</a>);
}

20: Remove ‘comments are closed’ message

.nocomments {
display: none;
}

21: Remove the words ‘You are here’ in breadcrumbs

.breadcrumb-title {
    display: none;
}

22: Centre ‘Comments and Continue reading’

a.more-link {
    display: block;
    text-align: center;
}
.post-more {
    text-align: center;
}

23: Centre Navigation

#main-nav {
float: none;
margin: 0 auto;
width: 400px;
}

24: Change the background colour of Main Content

#main {
   background: #fff;
}

25: Change Sidebar Background Colour

#sidebar {
    background: url("imageurl") repeat scroll 0 0 #FFFFFF;
}

26: Remove the Header (completely!)

#header {
    display: none;
}

27: Remove Space between Header and Navigation

#header {
    background-position: center bottom;
}

28: Change the default height of the Magazine Grid

.magazine .block { min-height: 400px; }

29: Change font for a single post

.postid-1066 .entry, .postid-1066 .entry p {
font: normal 16px/1.5em Antic;
color: #555;
}

30: Change Category link colours

.post-meta a:link, .post-meta a:visited, .post p.tags a:link, .post p.tags a:visited
{ text-decoration: underline; color:#888; }

Just put the above written codes in the white screen and press Apply to Blog as shown in the top right corner of the above shown screenshot. This is it. Now you can view your blog, it will look completely different and Amazing. If you have any other query do ask us in the comment box.