Make an impressive landing page for blogspot .

By nhamngahanh | posted: 20:46 | 0 comments
landing page
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

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
<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>

&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function() {
var $menu = $('#ei_menu &gt; 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 &gt;= 0 &amp;&amp; current &lt; 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() &amp;&amp; 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 &quot;mLeave&quot; is just true when all the items close,
in which case we want that all of them get opacity 1 again.
&quot;dir&quot; 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 &lt;li&gt; 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)
*/
});
&lt;/script&gt;

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 .

Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for SimplexDesign check out our Write for us page for details about how YOU can share your tips with our community.

Share this post

Related Posts

Advertisement

0 comments:

Post a Comment