Cara Memasang Featured Slide Show di Blog



Cara Memasang Featured Slide Show di Blog - Sobat anaktimor-17 , tinggal beberapa hari lagi bulan februari akan berakhir . Pada kesempatan ini Anaktimor-17 coba membagikan tips cara menghias blog dengan memasang featured  slide show di blog . Slide show ini sangat menarik karena dilengkapi dengan Thumbnail disamping kanan . Tentunya membuat blog Anda jadi seru, dan pengunjung betah.Lihat demo

Oke langsung ke TKP, he..he...
Berikut langkah-langkahnya, seperti ibawah ini :


1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates

3.    Cari kode  ]]></b:skin> (tekan tombol CTRL+F untuk memudahkan pencarian) .

4.    Jika sudah ketemu,copy code di bawah ini lalu pastekan tepat 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/AVvXsEijzN4ZoMz2IPBgchGo956t7gNZ6b-yFR0UeQzqAvkogIz49m0y4KKBP-ySSXhv7nudNnbbaoHqQSKqedtLzwq4n5i5QppU8IyL-AmkIjgyuXH8N4cu4DvpbN8-PYPMW6vSXzbugtlpU40/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/AVvXsEj3nHEM7T4h5xNFtSyOTZEDcmEqB9e7b6IVGUUIpJ24_zYQpUQMOhbRwFKZDj9U0abjSbiVWb9QfZ6aYOlYMtUHTWzJpDscnPVBhABoo77iWfCc1-DEGtjDEJv6sXA32BgnTIqWSnAHikc/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>


5.    Kemudian cari lagi code  <div id='main-wrapper'>

6.    Jika sudah ketemu,copy code dibawah ini dan pastekan tepat di bawah code  <div id='main-wrapper'>

<!-- 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>  
NB:
Anda ganti Isi keterangan artikel 4 dengan deskripsi artikel Anda , Judul Artikel 4 Anda ganti dengan judul artikel Anda dan ganti URL Gambar artikel 4 dengan URL gambar Anda .



7.     Selanjutnya Cari code  </body>

8.    Copy code di bawah ini dan pastekan sebelum 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(){  
        $(&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'/>  


9.   Sekarang simpan template Anda .

Salam ide kreasi,
Semoga berhasil dan bermanfaat,

Post a Comment