Cara membuat featured post slider ( bergerak ) di homepage pada blog, feature post ini saya temukan pada salah satu blog yang tidak sengaja saya temui pada saat saya lagi mencari sebuah tutorial di Google. Dibawah ini merupakan tampilan dari feature post slider di homepage.
Gimana menurut Anda? keren bukan? jika Anda ingin memasang feature post ini, ada sebaiknya Anda pasang di bagian homepage saja, untuk menghindari kebanyakannya widget pada blog Anda.
Langsung saja ke intinya, jika Anda ingin menggunakan slide feature post ini, ada baiknya Anda tidak terlalu memakai widget yang banyak, nanti akan memberatkan loading pada blog Anda, pakailah widget seperlunya saja.
Memasang Slide Feature Post
Langkah pertama :
Login ke Blogger > Tema > Edit HTML. Lalu Anda copy CSS dibawah ini di atas kode
]]></b:skin>/* Slider */
#slider-body
{
width: 100%;
margin:0 auto;
padding:0;
}
#slider-content
{
position: relative;
padding: 35px 0 112px 0;
background-image:url(http://4.bp.blogspot.com/-dphLEfOsanI/TzLoZ3NMrxI/AAAAAAAAHP4/jmCht-4MANA/s1600/slider.png),url(http://2.bp.blogspot.com/-zTuJW2D_2YQ/TzL0e9AasVI/AAAAAAAAHRg/dEi85g4__Hc/s1600/silder-bg-1.png);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
}
#featured{
width: 960px;
background:#181818;
height: 400px;
margin: 0 auto;
text-align: left;
overflow: hidden;
position: relative;
}
#featured ul.gambar-kanan{
position:absolute;
top:0px;
right:0px;
list-style:none;
padding:0;
width:218px;
height:100%;
overflow:auto;
overflow:hidden;
z-index:100;
}
#featured ul.gambar-kanan li{
padding:0 0 0 15px;
}
#featured ul.gambar-kanan li img{
float:left;
margin:0 8px 0 0;
background:#111;
padding:3px;
width:60px !important;
height: 45px !important;
}
#featured ul.gambar-kanan li span{
position:relative;
top:10%;
padding:0;
line-height:1.5em;
}
#featured li.gambar-kanan a{
background:url(http://1.bp.blogspot.com/-YfV_DJOQ9SU/T0NkcN2bmhI/AAAAAAAAAg4/QbMXMlxgcpY/s000/nav-item_bg.png) no-repeat center bottom,url(http://4.bp.blogspot.com/-O8yztk6WVcU/T0NkbFabmQI/AAAAAAAAAgY/5b0-oJ207os/s000/pattern.png);
border:1px solid #aaa;
display:block;
padding:8px;
height:65px;
text-decoration:none;
line-height:1.2em;
outline:none;
border:none;
}
#featured li.ui-tabs-selected{
background:#111;
z-index:200;
}
#featured ul.gambar-kanan li.ui-tabs-selected a{
color:#999;
border:none;
}
#featured .ui-tabs-panel{
width:410px;
height:280px;
position:relative;
padding:0;
margin:0;
z-index:50;
}
#featured .ui-tabs-panel img{
width:729px !important;
height:375px !important;
border:13px solid #111;
z-index:50;
}
#featured .ui-tabs-panel .tulisan-bawah{
background:#222;
position:absolute;
padding:5px 10px;
bottom:-110px;
left:12px;
line-height:1.3em;
overflow:hidden;
height:66px;
width:710px;
opacity:0.6;
filter:alpha(opacity=90);
.width: 100%; /* IE */
z-index:50;
}
#featured .tulisan-bawah h2{
height:23px;
font-size:18px;
padding:0;
margin:0;
font-family:"PT Sans", Arial, Tahoma, sans-serif;
font-weight:bold;
overflow:hidden;
}
#featured .tulisan-bawah h2 a{
color:#fff;
}
#featured .tulisan-bawah p{
margin:0;
padding:0;
line-height:1.4em;
color:#999
}
#featured .tulisan-bawah a{
text-decoration:none;
color:#e8e4db;
}
#featured .tulisan-bawah a:hover{
text-decoration:none;
}
#featured .ui-tabs-hide{
display:none
}Lalu Anda cari kode
<div id='outer-wrapper'> atau <div id='content-wrapper'> atau sebagainya<!-- Featured Content Slider Started -->
<!-- Featured Content Started -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='slider-body'>
<div id='slider-content'>
<div id='featured'>
<!-- star icon gambar kanan -->
<ul class='gambar-kanan'>
<li class='gambar-kanan ui-tabs-selected' id='nav-gambar-1'><a href='#gambar-1'><img alt='featured 1' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>
</li>
<li class='gambar-kanan ' id='nav-gambar-2'><a href='#gambar-2'><img alt='featured 2' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>
</li>
<li class='gambar-kanan ' id='nav-gambar-3'><a href='#gambar-3'><img alt='featured 3' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>
</li>
<li class='gambar-kanan' id='nav-gambar-4'><a href='#gambar-4'><img alt='featured 4' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>
</li>
<li class='gambar-kanan' id='nav-gambar-5'><a href='#gambar-5'><img alt='featured 4' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>
</li>
</ul><!-- end icon gambar kanan -->
<!-- gambar 1 -->
<div class='gambar-slider' id='gambar-1' style=''>
<img alt='featured-1' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Cool</p></div></div>
<!-- gambar 2 -->
<div class='ui-tabs-panel ui-tabs-hide' id='gambar-2' style=''>
<img alt='featured-2' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Awesome</p></div></div>
<!-- gambar 3 -->
<div class='ui-tabs-panel ui-tabs-hide' id='gambar-3' style=''>
<img alt='featured-3' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Wow</p>
</div></div>
<!-- gambar 4 -->
<div class='ui-tabs-panel' id='gambar-4' style=''>
<img alt='featured-4' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Cool</p></div></div>
<!-- gambar 5 -->
<div class='ui-tabs-panel' id='gambar-5' style=''>
<img alt='featured-5' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Images</p></div></div>
</div>
</div>
</div></b:if>
<!-- Ends of Featured content-->
<!-- Featured Content Slider End -->Silakan Anda ganti tulisan
URL GAMBAR UTAMA ANDA dengan Url gambar utama atau depan pada feature post. Lalu Anda ganti juga tulisan URL GAMBAR KANAN dengan Url gambar icon yang di gunakan pada gambar kanan.Tahap selanjutnya silakan Anda Copy kode Javascript di bawah ini dan Pastekannya di atas kode
</body><script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 2500, true);
});
</script>Silakan Anda Save Template Anda, dan lihat hasilnya.
Demikian tutorial yang saya berikan hari ini, semoga bermanfaat. Jangan lupa Share Sob!
Post a Comment