Menambahkan Featured Slide Show Pada Blog

Hemmmm.......

Jadi seneng dech melihat wajah manis agan..... Senyum terus pasti karena mendengan kabar bahwa Bahasa Indonesa sudah disupport Google Adsense ne....owh yadah didaftarkan belum blog agan??

kembali pada judul diatas yaitu Menambahkan Featured Slide Show Pada Blog.

Sering kali kita melihat Featured Slide Show pada blog tetangga yang menambah blog kelihatan keren tentunya kita juga ingin memasangnya.

Jika sobat ingin Menambahkan Featured Slide Show Pada blog sobat sobat bisa ikuti langkah berikut :

Pertama Login ke blog kita terus Edit HTML >Centang tanda Expand Widget Templates

Cari kode ]]></b:skin> pencarian cepat gunakan ( Ctrl+F )

Jika sudah ketemu, copas Code berikut di bawah code ]></b:skin>

<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/AVvXsEjNhkTl0X3Qhln_m8rYUhmJeWhQt0-1M2Uz8YYqMjF_RYG8gUGxuf21bP4jc8m2400JXiMpSVIQ0hMC9RCMa9ovCOTdUowQsc95smJT5VfBDu8HGTaquEW6UlnU-G_9lY6OjpAudP3Yqvk/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-mqhBtl4oWTt3tUWZubVzz3wn5T6bYp901rWEa6yu3Kx42IHKdgV6GNYAuoLhClfIs290XqlUV_x9fXK8-AzgNDSrxTlbEQIh_StaOWPcqmAPOTv6siwNfHJE_BaM2CZUNiq-W8pCoJA/s1600/arrow.png') 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>

Selanjutnya cari code <div id='main-wrapper'>
Jika sudah ketemu, Copas Code berikut tepat dibawah code <div id='main-wrapper'>
<!-- Featured Content Started --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType != "item"'> <div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#URL Target4'><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='URL Target3'><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='#URL Target2'><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='#URL Target1'><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'> </div>

Cari juga code </body>
Jika sudah ketemu, Capas code berikut tepat diatas Code </body>
<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(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> <script src='http://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/>

Catatan:

Judul Artikel ganti dengan Judul Artike sobat

Isi keterangan artikel berilah keterangan sekilas tentang Artikel target

URL Gambar artikel ganti Url gambar yang akan ditampilkan

#URL Target ganti dengan Url artikel Target

Apabila hal diatas sudah sobat lakukan, maka langkah terkahir Save Template

Untuk Melihat Demo dari Postingan ini, bisa anda lihat Disini

Hemmmm Salamat Blog anda sudah terpasang Featured Slide Shownya