Cara Memasang Featured Slide Show di Blog

Friday, February 24, 2012

Berikut kami berikan informasi mengenai Cara Memasang Featured Slide Show di Blog Sebelum membaca postingan mohon dengan teliti untuk melihat kapan postingan ini diterbitkan
1 Like Anda sangat berarti buat kami..


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(http://4.bp.blogspot.com/-ivEJbCgKMNM/TcePJb4ZD0I/AAAAAAAAI2U/MtVGUzzs9O0/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;http://4.bp.blogspot.com/-XPVmFZxpCm0/TcevFkQU0tI/AAAAAAAAI20/8IlXBolIeMk/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,

1 Like Anda sangat berarti buat kami..
Demikian informasi mengenai: Cara Memasang Featured Slide Show di Blog untuk anda sekalian, semoga dapat membantu anda.Kunjungi juga Info Lowongan4400.net sebagai tambahan referensi untuk anda. Terima kasih atas kunjungannya! sering-seringlah berkunjung karena akan ada terus lowongan terbaru. Salam sukses dan terimakasih.
Gratis Info Lowongan Kerja Terbaru Kami:
*Silakan klik pada link konfirmasi yang dikirim di Email atau folder Spam Anda *
Share
 
Copyright © 2015. Lowongan4400.Net.
Lowongan Kerja Terbaru 2015.
Creative Commons License