Ahad, 28 Oktober 2012

How to create unique or custom post in blogger

What is unique or custom post in blogger?, it's the different post than other post, every page have a different style. This time i will share about how to create that unique or custom post. This tutorial is easy for newbie, but i recommend to use this tutorial if you're understand about CSS. For example of unique post, you can see this blog: http://cyberqpale.blogspot.com, and if you want another demo, search in google with keyword "Blogaziner".  Have you see that?, ok if you want follow this tutorial.

The formula

  1. Open blogger.com and login, and then create a blank post
  2. Write anything in that post (whatever you want)
  3. Then in post you'll see Compose tab and HTML tab, click the HTML tab
  4. You found your text with html, then just put this code in the last line:
    <style type='text/css'>
    Put your CSS here
    </style>
  5. Then that is the formula, just fill the CSS in that area
  6. Still don't understand?
  7. Ok, now i'll tell you if you're newbie in HTML

Template structure

Your template structure maybe have:
  • #outer-wrapper
  • #content-wrapper
  • #main-wrapper
  • #sidebar-wrapper
  • #footer-wrapper
  • #header-wrapper
  • .post
  • .post-body
If you want to make a page without a sidebar in the #content-wrapper, or if you want your page is only post and without sidebar, just do this.

below the <style type=text/css'>, paste this:
#sidebar-wrapper {
display: none;
}
#main-wrapper {
float: none;
width: 100%;
}

So just play the CSS, if you want to remove the header, footer, comments, just do this
#header-wrapper {
display: none;
}
#comments, .comments {
display: none;
}
#footer-wrapper {
display: none;
}
if you want to make a different style like change a background color of post or the blog background color, follow this tutorial and also you can change it with image
.post {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLj0OqYNiXS1GnIGeqbx-w3n0pGiMeHFfX8F3DJBWaZxkyWZ42S4EFaWuaQG8NBESim2aG2QP2WbXI-WCL35dERJLP5GBas7Sw9JnK7fDPjE2ONIdQZ8nRugMKfaPsU0nRzMi6mhiym0/s1600/wrapper.png") repeat-x scroll 0 0 transparent;
}
body {
background: #ccc;
}
Ok just that, happy playing CSS!

Tiada ulasan:

Catat Ulasan