Create Headline view

This is a tutorial how to create a headline, in your blog (blogger).
If you want to make your blog look similar to the view wordpress, try to install the headline in the top post.

The step by step is as follows:

1. After you log in blogger, enter Layout | Edit HTML (without mark Expand Template Widget)
2. Find the code ]]></ b: skin>, then copy and paste the code below and add the code above ]]></ b: skin>

/* Front Page Styles */
#headline {
height: 249px;
margin:0px 0px 5px 0px;
padding: 15px;
overflow: hidden;
position: relative;
background:#000000;
}
#headline .glidecontent {
color: #fff;
position: absolute;
visibility: hidden;
z-index: 0;
}
#headline .teaser-image {
left: 15px;
width: 390px;
height: 252px;
line-height: 0;
position: relative;
z-index: 0;
}
* html #headline .teaser-image {
display: inline;
}
#headline .teaser-main {
left: 15px;
top: 170px;
width: 390px;
height: 82px;
position: absolute;
}
#headline .teaser-main .overlay {
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
position: absolute;
background: #000;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
#headline .teaser-main .teaser-wrap {
width: 100%;
height: 100%;
position: relative;
}
#headline .teaser-main .teaser-title {
margin: 0 10px;
padding: 10px 0 0;
font-size: 1.6em;
font-weight: normal;
line-height: normal;
position: relative;
}
#headline .teaser-main .teaser-text {
margin: 0 10px;
position: relative;
}
#headline .teaser-main .teaser-text p {
margin: 0;
}
#headline .teaser-main a:link,
#headline .teaser-main a:visited {
color: #fff;
}
#headline .teaser-main a:hover {
color: #e33258;
}
#headline .glidecontenttoggler { /* Style for DIV used to contain

toggler links. */
top: 15px;
right: 15px;
width: 180px;
color: #fff;
font-size: 12px;
position: absolute;
}
#headline .glidecontenttoggler a {
height: 83px;
display: block;
border: solid #222;
border-width: 1px 1px 0;
background: #333

url('http://174.132.149.5/~tmwwtw/thestars/img/bg-main.png') repeat-x 0

-20px;
cursor: pointer;
}
#headline .glidecontenttoggler a:link,
#headline .glidecontenttoggler a:visited {
color: #aaa;
}
#headline .glidecontenttoggler a:hover,
#headline .glidecontenttoggler a.selected {
color: #fff;
background-color: #222;
}
#headline .glidecontenttoggler .togglercontent {
padding: 10px;
font-weight: bold;
}
#headline .glidecontenttoggler .togglertitle {
margin: -2px 0 0 85px;
line-height: 1.2em;
display: block;
}
#headline .glidecontenttoggler .teaser-image-small {
float: left;
margin: 0 10px 0 0;
line-height: 0;
}

3. Then add this code of ]]></ b: skin> and </ head>

<script src='http://174.132.149.5/~tmwwtw/thestars/js/jquery.js' type='text/javascript'/>
<script src='http://174.132.149.5/~tmwwtw/thestars/js/featuredcontentglider.js' type='text/javascript'/>
<!--[if lte IE 6]> <script type="text/javascript" src="http://174.132.149.5/~tmwwtw/thestars/js/supersleight.js"/> <![endif]-->
<script type='text/javascript'>
featuredcontentglider.init({
gliderid: &quot;headline-content&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;teaser&quot;,
remotecontent: &quot;&quot;,
selected: 0,
persiststate: false,
speed: 500,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [5000, 5]
})
</script>

4. Find code: <div id='main-wrapper'>, then add the following code.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='headline'>
<div class='glidecontentwrapper' id='headline-content'>
<div class='clearfix glidecontent'>
<img alt='The first title of the article' class='teaser-image' height='252' src=' URL of the image first ' width='390'/>
<div class='teaser-main'>
<div class='teaser-wrap'>
<div class='overlay'/>
<h3 class='teaser-title'><a href='#' title='The first title of the article'>The first title of the article</a></h3>
<div class='teaser-text'><p>Description short article ....<a href='#'/></p></div>
</div>
</div>

</div>
<div class='clearfix glidecontent'>
<img alt='The second title of the article' class='teaser-image' height='252' src='URL of the image' width='390'/>
<div class='teaser-main'>
<div class='teaser-wrap'>

<div class='overlay'/>
<h3 class='teaser-title'><a href='#' title='
title of the article'>
title of the article</a></h3>
<div class='teaser-text'><p>Description short article .....<a href='#'/></p></div>
</div>
</div>
</div>

<div class='clearfix glidecontent'>
<img alt='The third title of the article' class='teaser-image' height='252' src='URL of the image' width='390'/>
<div class='teaser-main'>
<div class='teaser-wrap'>

<div class='overlay'/>
<h3 class='teaser-title'><a href='#' title='title of the article'>title of the article</a></h3>
<div class='teaser-text'><p>Description short article .....<a href='#'/></p></div>
</div>
</div>
</div>
</div><!-- .glidecontentwrapper -->

<div class='glidecontenttoggler' id='teaser'>
<a class='toc' href='#'>
<span class='togglerwrap'>
<span class='togglercontent clearfix'>
<img alt='The first title of the article' class='teaser-image-small' height='60' src='URL of the image first' width='60'/>
<span class='togglertitle'>Article title</span>
</span>
</span>
</a>

<a class='toc' href='#'>
<span class='togglerwrap'>
<span class='togglercontent clearfix'>
<img alt='The second title of the article' class='teaser-image-small' height='60' src='URL of the image second' width='60'/>
<span class='togglertitle'>Article title</span>
</span>
</span>
</a>

<a class='toc' href='#'>
<span class='togglerwrap'>
<span class='togglercontent clearfix'>
<img alt='The first title of the article' class='teaser-image-small' height='60' src='URL of the image third' width='60'/>
<span class='togglertitle'>Article title</span>
</span>
</span>
</a>

</div><!-- .glidecontenttoggler -->
</div><!-- #headline -->
</b:if>

Good luck