Cara Menambah Fitur Slider Pada Blog With CSS3

Cara Menambah Fitur Slider Pada Blog With CSS3 – untuk menambah kelengkapan fitur pada template blog guna mempercantik tampilan maupun memang suka dengan adanya slider pada sebuah blog, mungkin ini bisa menjadi alternatif dan penerapanya untuk yang membutuhkan apabila ingin lebih mengkreasikan blognya. Slider blog memang banyak dikenal dan tidak jauh dari speed loading, namun hal tersebut bisa teratasi tergantung dari slider yang digunakan. Pada tutorial ini slider hanya berupa sederhana dengan tampilan yang minimalis dan tidak banyak efek digunakan  sehingga akan tetap menjaga speed loading pada template blog yang digunakan. Oleh sebab itu pengguna slider juga tidak perlu khawatir akan terganggu pada loading blognya dengan adanya slider yang menempel pada blognya. Untuk menggunakannya terdapat dua pilihan, pada slider pertama terdapat title di sisi kanan thumbnail sedangkan pada slider kedua tidak terdapat title pada thumbnail. Oke langsung saja untuk penerapannya kedalam blog, maka berikut adalah tutorial Cara Menambah Fitur Slider Pada Blog With CSS3:

1. Login ke akun blogger.
2. Copy kode dibawah ini.
SLIDER 1:

<style>
#sliderblog{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#sliderblog ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#sliderblog ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px; 
font-size:12px;
color:#666;
}
#sliderblog ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#sliderblog ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#sliderblog li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#sliderblog li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#sliderblog li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dvgwFpi0-Z1YCztVX8xdPQ79riPdv2i-WB7eZGkGrvYzzDUDycGuLsP5nCCSr16G4UDCebZO4tCflx5-rbyNQsl6V8nTbTLBm1gY3rD8hkW4KP5tz0xnOQRm1zG4nlKUerMv6L52PSfC/w15-h40-no/selected-item.gif') top left no-repeat; 
}
#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#sliderblog .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#sliderblog .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxmMHtexaGJMgTPUSeYXT70Ovj3C7EU8x0Kjz33lG3P9N58J_1UN_ahxQYeoNsJNpmfHmAEaFg1obcg0DqMl6nXCL9OXWFVM5vzyC6R6G8l-7TzwEFRYtlT1Gt7_8H-g1sQwvhrVFTwQo/s2/transparent-bg.png');
}
#sliderblog .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#sliderblog .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#sliderblog .info a{
text-decoration:none;
color:#fff;
}
#sliderblog .info a:hover{
text-decoration:underline;
}
#sliderblog .ui-tabs-hide{
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="sliderblog" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqtEXIdebZABZNLCNpwHS4sHwcRSmHNiH5-vBswmUL-5W6E5EFP-rRSnnuly1VKTUopdDmglGqPzI3aeGBEUAmv102Yj9ccaZUp9dBgFN2vumXQllyZh9NWpm_t1yLDN5QkUNiPGq4SOb/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /><span>Faceblog Evolutions</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLW4xZmycyXHDEnXHOUiTnzmrvq0whTDRvxRcVR6mARdnmQGrx3a5l4TV86KsoIokSg9-vUpIxaHN2EbbbmGU-VbEVyTIPgYqmIWkopQtAG8241X_yyKkJLe0LVyWj7bNTkDB1bwDSqByj/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /><span>Membuat Iklan Seperti Google Adsense</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7vuk5x_9GuKAbcYbNottCdVjPvoh6v-SLFs9LWSZtIS1i_-Brr0fho3ocupM8lL4xHEwBeYFkbTucl1byS2EDlC702fbNthQiGZJOEOY7K1BuCtZarfZT6yGgj8LGRgFKnoehhV0YGKcM/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /><span>Optimasi Meta Tag SEO Valid HTML5</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGA__R7jBp-Ns68En-lkX-yLeRSpoK-XC6SlIYE1ELKWNP5d6plGCPqHtV3Js8YrWTUbdMNsujM5vNf8E3E6C208A1Gxi5Y9x7PH_PWv_kpd51JJvvryYMGKSuEfvqvBNII57vDvkgSogc/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /><span>Membuat Sidebar Blog Efek Ribbon</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbMCsk8k2uuKdOA6KDSXMZPgZCzaJjYI-tYAxuBBzbKa-EwZOfF9lMn9Gvgg2G3y-a1uO8RQ_YawhgbtQCaByTLIXwE1wmKCU5q_TkZzo1WaW3TCAokpYDqXYhWD7OGHyofwHwpElwks8/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2>
<p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdHFyW3x9HmgkVi-6t0Kp8PKb7jZcnup5Pe5LgKaN_AHF_Xc51bLF693Gc9_Qp-cyvhNdtIqAG_LCpXFOQNlXBVo3ToaDLbrrj5NHbEps5o_Tu8GhbLNSkrgMY4RRiNHCZXNkevfVsBcC/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2>
<p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt41WkqhrBWGesGb5sPCRC81eqOmQIjkGEX6ncMAq9tpeyqt3Oyu8TCTFMVIGDLVrkKTcn34TGLniYq-ApNda3Caj3LpSiTcQ_U7x-6tYm6GHilDKeBjBBGrjSlO3ySgZOF59eo9A2xSM/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2>
<p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBX9N15CUeS4HOt2tTdTXW41IamSsJKLUo4H3Xqx1pQi3qTk-4JewpmY6pxy1w45d1oV_w_pZaVakG-EYH4Q_A42VIOjn7bbWtE_T53C7Lx2wkXrh6K3jhffILN_TztdEmDjJMw3WAc7Av/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2>
<p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p>
</div>
</div>
</div>

SLIDER 2:

<style>
#sliderblog{
width:400px;
padding-right:115px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#sliderblog ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:115px;
}
#sliderblog ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px; 
font-size:12px;
color:#666;
}
#sliderblog ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#sliderblog ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#sliderblog li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#sliderblog li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#sliderblog li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dvgwFpi0-Z1YCztVX8xdPQ79riPdv2i-WB7eZGkGrvYzzDUDycGuLsP5nCCSr16G4UDCebZO4tCflx5-rbyNQsl6V8nTbTLBm1gY3rD8hkW4KP5tz0xnOQRm1zG4nlKUerMv6L52PSfC/w15-h40-no/selected-item.gif') top left no-repeat; 
}
#sliderblog ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#sliderblog .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#sliderblog .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxmMHtexaGJMgTPUSeYXT70Ovj3C7EU8x0Kjz33lG3P9N58J_1UN_ahxQYeoNsJNpmfHmAEaFg1obcg0DqMl6nXCL9OXWFVM5vzyC6R6G8l-7TzwEFRYtlT1Gt7_8H-g1sQwvhrVFTwQo/s2/transparent-bg.png');
}
#sliderblog .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#sliderblog .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#sliderblog .info a{
text-decoration:none;
color:#fff;
}
#sliderblog .info a:hover{
text-decoration:underline;
}
#sliderblog .ui-tabs-hide{
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sliderblog > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="sliderblog" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqtEXIdebZABZNLCNpwHS4sHwcRSmHNiH5-vBswmUL-5W6E5EFP-rRSnnuly1VKTUopdDmglGqPzI3aeGBEUAmv102Yj9ccaZUp9dBgFN2vumXQllyZh9NWpm_t1yLDN5QkUNiPGq4SOb/w80-h50-no/Faceblog+Evolutions+Small+%25281%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLW4xZmycyXHDEnXHOUiTnzmrvq0whTDRvxRcVR6mARdnmQGrx3a5l4TV86KsoIokSg9-vUpIxaHN2EbbbmGU-VbEVyTIPgYqmIWkopQtAG8241X_yyKkJLe0LVyWj7bNTkDB1bwDSqByj/w80-h50-no/Faceblog+Evolutions+Small+%25282%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7vuk5x_9GuKAbcYbNottCdVjPvoh6v-SLFs9LWSZtIS1i_-Brr0fho3ocupM8lL4xHEwBeYFkbTucl1byS2EDlC702fbNthQiGZJOEOY7K1BuCtZarfZT6yGgj8LGRgFKnoehhV0YGKcM/w80-h50-no/Faceblog+Evolutions+Small+%25283%2529.jpg" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGA__R7jBp-Ns68En-lkX-yLeRSpoK-XC6SlIYE1ELKWNP5d6plGCPqHtV3Js8YrWTUbdMNsujM5vNf8E3E6C208A1Gxi5Y9x7PH_PWv_kpd51JJvvryYMGKSuEfvqvBNII57vDvkgSogc/w80-h50-no/Faceblog+Evolutions+Small+%25284%2529.jpg" alt="" /></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbMCsk8k2uuKdOA6KDSXMZPgZCzaJjYI-tYAxuBBzbKa-EwZOfF9lMn9Gvgg2G3y-a1uO8RQ_YawhgbtQCaByTLIXwE1wmKCU5q_TkZzo1WaW3TCAokpYDqXYhWD7OGHyofwHwpElwks8/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com" >Faceblog Evolutions</a></h2>
<p>http://mas-andes.blogspot.com - Tutorial Blog | SEO | HTML | CSS | jQuery....<a href="http://mas-andes.blogspot.com" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdHFyW3x9HmgkVi-6t0Kp8PKb7jZcnup5Pe5LgKaN_AHF_Xc51bLF693Gc9_Qp-cyvhNdtIqAG_LCpXFOQNlXBVo3ToaDLbrrj5NHbEps5o_Tu8GhbLNSkrgMY4RRiNHCZXNkevfVsBcC/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >Membuat Iklan Seperti Google Adsense</a></h2>
<p>Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti Google Adsense....<a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt41WkqhrBWGesGb5sPCRC81eqOmQIjkGEX6ncMAq9tpeyqt3Oyu8TCTFMVIGDLVrkKTcn34TGLniYq-ApNda3Caj3LpSiTcQ_U7x-6tYm6GHilDKeBjBBGrjSlO3ySgZOF59eo9A2xSM/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >Optimasi Meta Tag SEO Valid HTML5</a></h2>
<p>Dalam sebuah blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO....<a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBX9N15CUeS4HOt2tTdTXW41IamSsJKLUo4H3Xqx1pQi3qTk-4JewpmY6pxy1w45d1oV_w_pZaVakG-EYH4Q_A42VIOjn7bbWtE_T53C7Lx2wkXrh6K3jhffILN_TztdEmDjJMw3WAc7Av/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
<div class="info" >
<h2><a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >Membuat Sidebar Blog Efek Ribbon</a></h2>
<p>Tutorial cara membuat sidebar pada blog anda agar lebih elegant dengan tampilan efek ribbon yang cantik....<a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" >read more</a></p>
</div>
</div>
</div>

Keterangan:
Untuk width dan height maupun URL gambar silahkan anda sesuikan selera.

3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.