Apakah Bisa Pasang Slider 2 di Blog?

info-gamepc.blogspot.com - Selamat pagi Sobat Blogger, kali ini saya akan memberikan cara memasang dua slider di blog, yang pertama Slider carousel dan slider Featured. Saya asumsikan sobat blogger sudah memasang slider carousel di blog dan sudah sukses, saya tidak akan membahas cara memasang slider carousel diblog kalau sobat belum blogger belum membacanya saya sarankan membaca dulu disini. Slider Featured adalah slider yang menampilkan gambar tiap kategori, kategori ini bisa diganti sesuai sesuai keinginan sobat, di blog ini saya buat berdasarkan kategori game, Ok kita langsung mulai saja.

1. Masuk ke blogger sobat dulu.
2. Tambahkan gadget baru, sobat bisa sesuaikan tampilan mana yang cocok
3. Pilih HTML/Javascripts
4. Patekan kode dibawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){$("#featured > ul").tabs({fx:
{opacity:"toggle"}}).tabs("rotate",5000,true);});
</script>
<style type="text/css">
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4U3F1eab3q92y-a4sGn9jr4Tr2WFioyZKPEkOp3Bg9-trxf3MBjaQxzOZtWtgrgo0BlDeHWUQQ05EzmVmCKU70vx8sgiGjcqvEMrcMmZG4tyQMIx-0mB7ZGBxpYXJ6cz0W5sSPfvoX94K/s1600/selected-item.gif')
top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjggDDHSRCL-sqBLMrcVYfCTldryn2BxJ6_h8F5FNvg_sELrHcPRcWqILSf6u5bdsSDeY9isouGO1LsdtwHTDhp2jS4Nu9XRdsRgAYFTJvws8o1ZlXvi8wLguOHJ3Hlymcs4SEtGjH4KNRA/s1600/117s1g9.jpg') ;
}
#featured .info h2{
font-size:14px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

</style>

<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-1"><img
alt="featured 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKarHdxRrXBeUyRYQybdvl7rP99UJLL8FqZ1y20zTxMdDitiSgPCeh-SCxa2viiWXe8fN5grwnGwX2Gf4dbCkVLYZQ6TwLFijpwVDBMQwV0DisSYQmwPBVKsfRvCKDMbILPQg6aZixWyp/w60-h45-no/3b.jpg"/><span>Arma 3</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img
alt="featured 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvJH4GdUgJzgOY_YRfGg8HQJYjn7BvG5TgL2sUw5czR-Vvu67lx0taIXrH6PGMEj3R3qwhOD9A6QAtjkpEbb6luPjlJr_2zIGhSRggVbXz9L4zd8aeph5SjDW0bBD4ipy2cEhFGmqnoH1/w60-h45-no/gost1.jpg"/><span>Call of Duty Ghosts</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img
alt="featured 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtlIk4J6PRiCqR_dXbDuVOKaq0m8J8ip3JT5prKecTNfeNAg42v1Ljp18zTE0U7zVbKwlXrJvmbEoXKp_oLU-CXJwTLBS8cpPaVpB3KLGwDQ-jjK55Hm0CeyBT3nZnagAtAJ-q78sYX00/s1600/ENEMY.jpg&
quot;/><span>Enemy Front</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img
alt="featured 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb2jdxftuV-gczs8Yu5qFhqQkSHWJoaXZlBSNzvwbcU46PUd908oegLUd2L179n_j0CvBnT2ehnYczy0i10igvgmVmIWh4nj1SleB5RsJ9Zbho4uuEPjCPO2f_Mr8hN0dFdhyphenhyphenjH0rS63U/s320/battle4.jpg&
quot;/><span>Battlefield 4</span></a></li>
</ul>

<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-0oUaJvCFkc-lz4YPRz1q2EsKyZOez_F53wKtUEHc5OrXTX-zlRrat8iTjdfKpAgB3x989KO0OYBC0UOlplIiNy2LwgdxrqBV2-WhH-j-aAJchQ06j7vebOyJ889Wwr9DK_6xO4zFEpg/s1600/ARMA33.jpg&
quot;/>
<div class="info">
<h2><a href="http://info-gamepc.blogspot.com/2013/12/arma-3.html">ARMA 3</a></h2>
</div>
</div>

<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYI9H9QpGSx2oWInbJfvR2sdVbnVL5jm0arEAcPw5F-Fcjro_R5m8oDg9X3cOOql4xKsYhMPiVG_fKDkV8Ak0aUsLDGyY1G6efJRzRjvXqv0IvIGo3VOJo8_KDho4cx0x760dvPC19xmg/
/Call+Of+Duty+Gosht.jpg"/>
<div class="info">
<h2><a href="http://info-gamepc.blogspot.com/2013/06/call-of-duty-ghosts.html" >Call of Duty:
Ghosts</a></h2>
</div>
</div>

<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLDOVRN4eH5STQ1VpXE4R7-7GQE21WY8qCDlwBkhQVxN4Bg6UEkNp-4OqqFBM3_vAffnvAOx1k3OyOcDWUZb2P-Yo5f5KSZX7AXg5nxbXZ4b8aYdXGkXFJBqp8Rs5trFC_pAvvxYliqg/s1600/enemy44.jpg&
quot;/>
<div class="info">
<h2><a href="http://info-gamepc.blogspot.com/2013/12/enemy-front.html">Enemy Front</a></h2>
</div>
</div>

<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHQFx0UAbnt31jCduBKK223jjaMbZRNm-0OsXQmkddpDGxzKZTSpIx-m1tQ7VlzlA8Nrg0NUKQDcn1HEFiAR2iRhS3t45xzjq_O7oauFT-gi_SYsGVue_RY0MNLuEX8uMb9EqRpXKnDo/s1600/bat.jpg&
quot;/>
<div class="info">
<h2><a href="http://info-gamepc.blogspot.com/2013/12/battlefield-4.html">Battlefield 4</a></h2>
</div>
</div>

</div>
<div style="clear:both;"></div>
<br/>
<div></div>

Perhatikan tulisan yang berwarna BIRU Sobat blogger bisa ganti sesuai kategori yang ada di Blog Sobat, kalo sukses tampilannya seperti ini:

Ok mungkin itu dulu artikel yang bisa saya berikan, segala pertanyaan atau lainnya bisa Sobat Blogger tulis dikotak Komentar.

Selamat Mencoba.....