So, why are you going to design your own homepage? What are some of the reasons? Well, in Blogger the classic style of your website when you are in the homepage is just the list of all the articles, from the oldest up to the newest one as you can see in the example below.
Technically, speaking, when you are done making this tutorial the sidebar as well as the navigation menu on the top of your website will still be there. The only thing that will be hidden is your article
But these articles, even though are hidden on your home page, are still accessible in the internet once you submitted your sitemap to different search engines and robots started to index your posts.
Assuming that you wanted you have a customized home page, then let's start this tutorial.
First, we need to made the articles or blog post disappear in your homepage. All you need to do is just copy and paste the code given below in your blog.
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 { display: none; }
</style>
</b:if>
</b:if>
You need to put the code above just before the closing </head> tag of your blog. After that save your template. Refresh your homepage and you will notice that all your blog posts are gone.
We are now, going to add some design to replace the big white portion inside your blog. We are going to use the HTML/Javascript gadget to customized your Blog1 or Blog post section.
1. Now if you still want to show your articles, you can insert the "Labels gadget". Just click any of the "Add a gadget" link that you will find your Blogger Layout page, then find and select "Labels".
2. When you are done making the Labels, just drag and drop that gadget above the blog post gadget. Yes! all Blogger gadgets are draggable. Save your Layout. View blog to see the changes that you have done. See the sample below.
3. You can add as many gadgets as you like since you are now in control of the Blog post section. In the image below I added the "Search this blog" + "Contact Form", and then "Link List" + "Featured Post" gadget in the sidebar.
See live demo, click the button below.
0 Comments
Post a Comment