Test

Test

• Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
• Klik Ctrl+F Kemudian Cari kode <div id='main-wrapper'>
• Setelah dapat tambahkan kode HTML berikut diatas kode no 2 tadi

<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->        
<b:if cond='data:blog.url == data:blog.homepageUrl'>         
<div id="tbi_slider">         
<ul>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
</ul>         
</div>         
</b:if>         
<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->

Kustomisasi

• Ganti TITLE dengan judul posts (Buat Pendek Saja)
• Ganti POST LINK dengan link postingan anda
• Ganti IMAGE LINK dengan link gambar anda.
• Setelah menambahkan Kode HTML sekarang tambahkan kode CSS berikut diatas kode ]]></b:skin>

/* Accordion Featured Post Slider @ TipsTrikBlogging.com */        
#tbi_slider {         
    overflow: hidden;         
    margin: 20px auto;         
    padding: 0;         
    width: 805px;         
    height: 320px;         
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
}         
#tbi_slider ul {         
    margin: 0;         
    padding: 0;         
    width: 2000px;         
}         
#tbi_slider li {         
    position: relative;         
    display: block;         
float: left;         
    width: 160px;         
    border-left: 1px solid #888;         
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
-webkit-transition: all 0.5s;         
-moz-transition: all 0.5s;         
-ms-transition: all 0.5s;         
-o-transition: all 0.5s;         
    transition: all 0.5s;         
}         
#tbi_slider ul:hover li {         
    width: 40px;         
}         
#tbi_slider ul li:hover {         
    width: 640px;         
}         
#tbi_slider li img {         
    display: block;         
    width: 640px;         
}         
#tbi_title {         
    position: absolute;         
    top: 0;         
    left: 0;         
    padding: 20px;         
    width: 640px;         
    background: rgba(0, 0, 0, 0.5);         
    color: #fff;         
    font: bold 16px 'trebuchet MS', sans-serif;         
}         
#tbi_title a {         
    display: block;         
    color: #fff;         
    text-decoration: none;         
}         
/* Accordion Featured Post Slider @ TipsTrikBlogging.com */