Make an impressive landing page for blogspot .
10/17/2011 blogger 20 comments
Some readers asked me for making a static landing page for blogspot . It makes blog look more professional and separated to other blogspot’s blogs .
In this post ,I will tell you how to make a landing page for blogspot . This post related to HTML,CSS ,Jquery and some Blogspot Api’s ,so you must be familiar to them before we start .
The idea for this landing page is inspired by a design from Tympanus website .
Live Demo
Now let's start
The HTML structure consists of a main container and an unordered list where each item is one of the columns. The main container has class “ei_menu” and also the id “ei_menu”.
Under the main container ,each of <li> item contains a link element with two spans inside and a div element with the content.
The two spans are for the background image shown at the beginning and the image shown when click (active) . Since we are using just one image for each we will have to define the background position.
Div element contain the title ,text,and links .
<div id="ei_menu" class="ei_menu">
<ul>
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
<a href="#" class="pos2">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
<a href="#" class="pos3">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
<a href="#" class="pos4">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
.....................
</li>
</ul>
</div>
Link in href attribute of this line
<a href="link"> <h3>Click here to go</h3></a>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
The HTML markup
<b:else/>
Other elements you want to hide in home page
</b:if>
For example ,in default template (such as minima) ,we want to hide blog posts :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
The HTML markup
<b:else/>
<b:section class='main' id='main1' showaddelement='no'>
.......................
</b:section>
</b:if>
Meaning of these CSS tags can be found in CSS cheat sheets or websites focus on CSS . I will not explain here for keep the post short and clean .Replace the images in background attributes to yours own images .
Add two lines
Right after </head> for embedding Google fonts into this design .
Add this code right before </body>
That’s all .
There are two keypoints here :
1-Make the HTML markup ,adding CSS and javascript to make an expanding menu for homepage .
2-Hide elements which you do not want to show in homepage .
I hope this post helpful to you .
In this post ,I will tell you how to make a landing page for blogspot . This post related to HTML,CSS ,Jquery and some Blogspot Api’s ,so you must be familiar to them before we start .
The idea for this landing page is inspired by a design from Tympanus website .
Live Demo
Now let's start
1,HTML markup
The HTML structure consists of a main container and an unordered list where each item is one of the columns. The main container has class “ei_menu” and also the id “ei_menu”.
Under the main container ,each of <li> item contains a link element with two spans inside and a div element with the content.
The two spans are for the background image shown at the beginning and the image shown when click (active) . Since we are using just one image for each we will have to define the background position.
Div element contain the title ,text,and links .
<div id="ei_menu" class="ei_menu">
<ul>
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
<a href="#" class="pos2">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
<a href="#" class="pos3">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
<a href="#" class="pos4">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>title</h2>
<a href="link"> <h3>Click here to go</h3></a>
<p>Some text here...</p>
</div>
</li>
<li>
.....................
</li>
</ul>
</div>
Link in href attribute of this line
<a href="link"> <h3>Click here to go</h3></a>
Can be link to any page you want . Link to all posts in blog is :
http://blog_name.blogspot.com/search/posts/default
When we use this HTML markup for home page ,it means we have to hide another elements . It's the time to use Blogspot API - the conditional statement .
It look like this
When we use this HTML markup for home page ,it means we have to hide another elements . It's the time to use Blogspot API - the conditional statement .
It look like this
<b:if cond='data:blog.url == data:blog.homepageUrl'>
The HTML markup
<b:else/>
Other elements you want to hide in home page
</b:if>
For example ,in default template (such as minima) ,we want to hide blog posts :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
The HTML markup
<b:else/>
<b:section class='main' id='main1' showaddelement='no'>
.......................
</b:section>
</b:if>
2,The CSS
Add this code in CSS sections of your template/* Menu style */
.ei_menu{
background:#111;
width:100%;
overflow:hidden;
}
.ei_menu ul{
height:350px;
margin-left:50px;
position:relative;
display:block;
width:1300px;
}
.ei_menu ul li{
float:left;
width:75px;
height:350px;
position:relative;
overflow:hidden;
border-right:2px solid #111;
}
.ei_preview{
width:75px;
height:350px;
cursor:pointer;
position:absolute;
top:0px;
left:0px;
background:transparent url(../images/bw.jpg) no-repeat top left;
}
.ei_image{
position:absolute;
left:75px;
top:0px;
width:75px;
height:350px;
opacity:0.2;
background:transparent url(../images/color.jpg) no-repeat top left;
}
.pos1 span{
background-position:0px 0px;
}
.pos2 span{
background-position:-75px 0px;
}
.pos3 span{
background-position:-152px 0px;
}
.pos4 span{
background-position:-227px 0px;
}
.pos5 span{
background-position:-302px 0px;
}
.pos6 span{
background-position:-377px 0px;
}
.ei_descr{
position:absolute;
width:278px;
height:310px;
border-right:7px solid #f0f0f0;
padding:20px;
left:75px;
top:0px;
background:#fff;
}
.ei_descr h2{
font-family: 'Rock Salt', arial, serif;
font-size:26px;
color:#333;
padding:10px;
text-shadow:0px 0px 1px #fff;
background:#fff url(../images/stripe_light.gif) repeat top left;
}
.ei_descr h3{
font-family: 'Raleway', arial, serif;
color:#fff;
text-shadow:0px 0px 1px #000;
font-style:normal;
padding:10px;
background:#333;
}
.ei_descr p{
color:#000;
padding:10px 5px 0px 5px;
line-height:18px;
font-size:11px;
font-family: Arial;
text-transform:uppercase;
}
Meaning of these CSS tags can be found in CSS cheat sheets or websites focus on CSS . I will not explain here for keep the post short and clean .Replace the images in background attributes to yours own images .
Add two lines
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
Right after </head> for embedding Google fonts into this design .
3,The Javascript
The idea is to expand the menu when clicking on it . The initial width for each menu item is 75 pixel ,when clicked ,the width is enlarged to 400 pixel (75pixel plus 325pixel for the hidden content )Add this code right before </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#ei_menu > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems = $menuItems.length,
ExpandingMenu = (function(){
/*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
*/
var current = -1,
/*
@anim
if we want the default opened item to animate initialy set this to true
*/
anim = true,
/*
checks if the current value is valid -
between 0 and the number of items
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not just show it */
$item.css({width : '400px'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/* decrease the opacity of the others */
$menuItems.not($item)
.children('.ei_preview')
.css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem = function(idx) {
$menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),
itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};
/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
.stop()
.animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);
/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});
</script>
That’s all .
There are two keypoints here :
1-Make the HTML markup ,adding CSS and javascript to make an expanding menu for homepage .
2-Hide elements which you do not want to show in homepage .
I hope this post helpful to you .
Tags: blogger
Sharing is sexyRelated posts
20 comments for this post
Here are some rules for commenting on Simplex Design blog :
1,Search first ,then ask question . You will get the answer faster
2,All comments except spams are welcome .
3,Please make all requests in English .
4,Do not use generic titles such as Admin or Mod .This confuses readers
Hello nhamngahanh, been after a long break.... And like always, with an awesome tutorial... I have a question, how to auto embed the youtube, metacafe videos in a blogger template post area, like you used it in your simplextube template. I need that tutorial..will be great help
ReplyDeleteThis is awesome Tutorial . but i dont know where me to put thees codes graduly in blogger plz tell me how to make like the demo ( http://simplextest11.blogspot.com/ ) of this tutorial step by step...i am waiting of this..
ReplyDeleteShaan Ali
www.brainstechnology.net
www.Shaan-Ali.blogspot.com
as always nice work
ReplyDeleteLong time to return with an amazing tut. Thank you.
ReplyDeleteGreat bro, something new for me. will sure to adopt this.
ReplyDeleteHi thanks for this valuable Post! I am applied this menu in my blog, I think JQuery part is not working properly in my blog! please see Here Iam Applied:http://photobrowser.blogspot.com/
ReplyDeletePlease see and tell me what change i need to apply there!
Please i Need this Menu! I am waiting for your valuable Reply.. Admin.
Cho mình hỏi chút được không, mình thêm comment facebook vào blog của mình nhưng sao bài viết nào cũng vẫn hiện thị mấy comment đó, mình muốn mỗi một bài viết sẽ hiện thị những comment của riêng nó, phải làm thế nào hả bạn
ReplyDelete@chaitu's : sorry for this mistake . I edited the code and change the link for jquery easing to a workable version.You can copy and paste the code again for seeing it work .
ReplyDeleteThanks Admin (nhamngahanh) Thanks for your response !!
ReplyDeleteand now it was working..
hello nhamngahanh, you are awesome and your template and tut are really good for us.
ReplyDeletei have some question
1 is it possible to add a gallery box inside blog post one is big and other are in thumbs under that big image in side the post
2.how can we put separate tag line which will appear on home page.
3. how can we show related post in menu bar under separate label.
i hope you will help us and u are really cool man. respect!
@Mashnol Team :
ReplyDelete1,Yes ,you can add gallery inside a blog post . You can see demo in my template : simplexeshop . It's a demo for adding slideshow in a blogspot .
Question 2 and 3 I don't understand your question so I can not write the answer here .
For question 3 ,the related posts in menu bar under separated label ? I have no idea .
nhamngahanh.>>>
ReplyDeletei am also waiting of your answer?
@shaan : the blog at this address : simplextest11.blogspot.com is my new template ,and I'm still working on it . The purpose of this post is only to make a static landing page .
ReplyDeleteThanks for the great tuts!
ReplyDeletei use this trick in my blog, it looks awesome!
here's: http://www.wahyuputra.web.id/
This comment has been removed by the author.
ReplyDeleteNice info dude...
ReplyDeletebtw i have follow your blog...
follow me back please...
http://ian-kasanova.blogspot.com
thanks..
Hi nhamngahanh,it's Awesome!
ReplyDeleteI've a small question here which need some advices.
"May i know why is it once this was applied to my blog,
the WIDGET EDITOR/Page Elements were ALL GONE ?"
Hey man nice blog you I am big fan of you blog & been following almost 1 year , I am trying to make a landing page for my blog http://hyipyard.blogspot.com/ but it is not working properly give me some suggestion
ReplyDeleteHow to using static page on Simplex Photo Gallery?
ReplyDeletePlease help
I could use this trick to my blog. I'll be back for the report.
ReplyDelete