Pasang Headline Posts Di Blogger

Sebelum para Sobat memulainya silahkan lihat dulu demonya DISINI

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lakukan back-up Template dengan mengklick Download Full Template, di maksud untuk memudahkan pengembalian Template seperti semula jika terjadi kesalahan.
@- Kemudian beri tanda Centang pada kotakan kecil di sebelah kiri Expand Widget Templates, dan tunggu sesaat biarkan Loading selesai.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah, silahkan Copy Kode CSS dibawah ini dan Pastekan di atas ]]></b:skin>

#slider {
height: 110px;
text-align:left;
overflow: hidden;
position: relative;
margin: -5px 0px;
}
#mover {
width: 600;
position:absolute;
overflow:hidden;
}
.slide {
padding: 8px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}
.slide ims {
font-family:Trebuchet, Trebuchet MS, Arial, sans-serif;
font-size: 12px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 30px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}
.slide rg a:link, .slide rg a:visited {
color:#E1771E;
background-color: transparent;
}
.slide rg a:hover {
color: #c0c0c0;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Trebuchet, Trebuchet MS, Arial, sans-serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #c0c0c0;
font-size: 12px;
text-align:justify;
font-family: Trebuchet, Trebuchet MS, Arial, sans-serif;
line-height: 20px;
width: 379px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Trebuchet, Trebuchet MS, Arial, sans-serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

@- Setelah itu silahkan Sobat cari Kode </head>
@- Kemudian Copy Kode Script dibawah ini lalu Pastekan di atas Kode </head>

<script src='http://iyang.googlecode.com/files/jquery-1.2.6.js' type='text/javascript'/>
<script src='http://iyang.googlecode.com/files/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

@- Langkah yang terakhir buatlah Element baru klick Gadget pilih HTML/JAVA SCRIPT kemudian Pastekan kode HTML di bawah ini :

<div id="casing">
<div id="slider">
<div id="mover">
<div class="slide">
<ims><a href="http://forummini.tk/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://forummini.tk/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://forummini.tk/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://forummini.tk/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://forummini.tk/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
<img src=""/>
</div>
</div>
</div>

@- Ganti kode yang berwarna MERAH dengan link artikel Anda, dan Kode yang berwarna HIJAU adalah judul dari Artikel Blog Anda.
@- Jika nanti hasilnya kurang cocok, Sobat bisa menyesuaikan dan cukup mengatur pada Kode CSSnya saja.
@- Selesai.
@- Selamat mencoba semoga berhasil.