• Pilih Template >> Edit HTML >> centang Expand Widget Template
• Cari kode ]]></b:skin> kemudian copy paste kode dibawah ini tepat dibawah kode tadi

<style type='text/css'>
/* Featured */
#featured{
float:left;
width:620px;
height:292px;
padding:0;
margin-bottom:20px;
position:relative;
overflow:hidden;
}

#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:415px;
list-style:none;
padding:0;
margin:0;
width:205px;
height:292px;
overflow:auto;
overflow-x:hidden;
z-index:100;
}

#featured ul.ui-tabs-nav li{
padding:0 0 0 15px;
}

#featured ul.ui-tabs-nav li img{
float:left;
margin:0 5px 0 0;
background:#fff;
padding:3px;
width:70px !important;
height: 57px !important;
}

#featured ul.ui-tabs-nav li span{
position:relative;
left:0;
top:13%;
line-height:1.3em;
}

#featured li.ui-tabs-nav-item a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QxvOB-OQcMssaF8A3HGR1m3cczMElKWM53HGDXcs9j5_m7P06iGuscTss5nTlXyE8ZuuIdm9NTVCyfiz4cDDIT7RTQwX2ubd3n72P0pHYmuDQOXtW3S3adPqt-_1avOyT7x-i_GF2uU/s1600/panel-bg.jpg) no-repeat;
color:#fff;
display:block;
padding:5px;
height:63px;
text-decoration:none;
line-height:1.2em;
outline:none;
}

#featured li.ui-tabs-selected{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOWqSMvEAtXnc4MbuNh7ky6rTdkOTbykvuxfyS0zwMq0o1PQVpUVJk9sV8tVVoH6kDNc2pXHBJP6kYi1-KhrTYULBvFfGVfxAf4TL5KUjFu2twWFeZbx2ruMHa7P41_GNg9NY2Cr7vKQE/s1600/arrow.png&#39;) center left no-repeat;
z-index:100;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#f8ac00;
color:#333
}

#featured .ui-tabs-panel{
width:430px;
height:292px;
position:relative;
padding:0;
margin:0;
z-index:50;
}

#featured .ui-tabs-panel img{
width:430px !important;
height:290px !important;
z-index:50;
}

#featured .ui-tabs-panel .info{
position:absolute;
padding:5px 10px;
bottom:0;
left:0;
overflow:hidden;
height:63px;
width:410px;
background:#111;
opacity:0.85;
filter:alpha(opacity=85);
.width: 100%; /* IE */
z-index:50;
}

#featured .info h3{
font-size:20px;
padding:0;
margin:0;
overflow:hidden
}

#featured .info p{
margin:0;
line-height:1.4em;
color:#fff
}

#featured .info a, #featured .info a:visited{
text-decoration:none;
color:#f8ac00
}

#featured .info a:hover{
text-decoration:underline;
}

#featured .ui-tabs-hide{
display:none
}

</style>

• Lalu cari kode <div id='main-wrapper'>
• Kemudian copy paste kode dibawah ini tepat dibawah kode tadi

<!-- Featured Content Started -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='featured'>

<ul class='ui-tabs-nav'>

<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src=' URL Gambar artikel 1 ' width='80'/><span>Judul Artikel 1</span></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src=' URL Gambar artikel 2' width='80'/><span>Judul Artikel 2</span></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src=' URL Gambar artikel 3' width='80'/><span>Judul Artikel 3</span></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='URL Gambar artikel 4' width='80'/><span>Judul Artikel 4</span></a></li>

</ul>

<!-- First Content -->

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>

<img alt='testing' height='290' src=' URL Gambar artikel 1' width='430'/>

<div class='info'>

<h3><a href='URL Artikel 1'>Judul Artikel 1</a></h3>

<p>Isi keterangan artikel 1</p>

</div>

</div>

<!-- Second Content -->

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>

<img alt='testing' height='290' src='URL Gambar artikel 2' width='430'/>

<div class='info'>

<h3><a href='URL Artikel 2'>Judul Artikel 2</a></h3>

<p>Isi keterangan artikel 2</p>

</div>

</div>

 <!-- Third Content -->

 <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>

 <img alt='testing' height='290' src='URL Gambar artikel 3' width='430'/>

 <div class='info'>

 <h3><a href='URL Artikel 3'>Judul Artikel 3</a></h3>

 <p>Isi keterangan artikel 3</p>

 </div>

 </div>

 <!-- Fourth Content -->

 <div class='ui-tabs-panel' id='fragment-1' style=''>

 <img alt='testing' height='290' src='URL Gambar artikel 4' width='430'/>

 <div class='info'>

 <h3><a href='URL Artikel 4'>Judul Artikel 4</a></h3>

 <p>Isi keterangan artikel 4</p>

 </div>

 </div>

 </div>

 </b:if>

 </b:if>

 <!-- Ends of Featured content-->

 <div class='clear'>&#160;</div>

• Kemudian cari kode </body> dan copy paste kode dibawah ini tepat diatas kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true); }); </script> <script src='http://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/>

• Ganti URL gambar dengan gambar artikel
• Ganti tulisan judul artikel dengan judul artikel yang ingin kamu tampilkan
• Ganti URL artikel dengan artikel yang ingin kamu tampilkan