» » Cara Membuat / Menambah Fitur Slider di Blog

Cara Membuat / Menambah Fitur Slider di Blog

By Unknown on Tuesday, January 20, 2015

Zetroblog.com | Cara Membuat / Menambah Fitur Slider di Blog - Hallo sobat, kembali lagi bersama saya, Steven Wayne.. sudah lama saya tidak melakukan kewajiban saya sebagai pemilik dari blog ini. Karena saya sangat sibuk dengan dunia nyata , apa lagi saya duduk di bangku kelas 3 SMA dan akan menghadapi Ujian Nasional pada Bulan April mendatang.

Pada hari yang cerah ini saya akan membagikan sebuah trik atau cara membuat yang ada kaitannya dengan Dunia Blogging, Seperti yang kita ketahui, desain merupakan cara orang untuk melampiaskan kreatifnya itu sendiri. Nah sesuai dengan judul kita yakni Cara Menambah atau Membuat Fitur Slider di Blog.

Cara Membuat / Menambah Fitur Slider di Blog
Apa itu Slider? Slider adalah thumbnail atau informasi-informasi dan atau posting (artikel) yang berjalan dengan cara yang sangat keren di blog anda. Untuk menambahkan kelengkapan fitur pada template blog, guna untuk mempercantik tampilan maupun anda suka dengan gaya slidernya. Mungkin cara atau trik ini menjadi salah satu alternatif untuk penerapan atau pemasangan fitur Slider.

Pada umumnya, slider di kenal sebagai pemakan loading blog, artinya jika anda memakai slider maka loading blog anda akan semakin menurun, tapi tentang saja sob, semua itu tergantung pada fitur slider yang digunakan, sebab cara yang saya bagikan ini tidak memakan loading blog sehingga tetap bisa menjaga loading speed pada blog agan.

Oleh karena itu, anda tidak perlu khawatir tentang loading blog jika memakai slider, cara menambah slider yang saya bagikan ini terbagi menjadi 2 (dua), 1 (satu) terdapat title pada sisi kanan pada thumbnail, sedangkan yang ke- 2 (dua) hanya menampilkan thumbnail saja tetapi tidak terdapat title.

Tutorial Menambah Fitur Slider di Blog :

Login ke akun blogger.com anda tentunya.
Sesudah itu cari blog yang mau di pasang slider, lalu ke Tata Letak > HTML / Javascript
Setelah itu maka pasanglah code di bawah ini sesuai selera anda.

Style Slider 1
Cara Membuat / Menambah Fitur Slider di Blog

<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/AVvXsEiJuvv-_NZvFBW5z4rVlT5bNXNormbJ9BtM-UvliAuZdrALfDVA3SOUwmt5fmBAWc0umgalBHOZzdJqYnxU0sXWxNQJgJbWqpbRIE4mwLiVPRzFnSuVKJrfej3xL11wzWZT1O3biNuTUiJd/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/AVvXsEjPtBn8yY_-GKnIjW8dE-gnaBOMDn65ODeQMLwrQ1o3rGP7mH9uGpIGXN4Jkbz70XWGtHmBSottas3pGrFdR9bGRdkJiiTstXNGYmnkTe0Fh4FGyaE4ljYJSTsRv4clIBovoNlfPZ1T6qKh/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/AVvXsEgRkD5lqneyhbM5wWvWbVeUEZykKKgOfo6uUytELShj4G9RRu0T23Sj_4Di05DZbgEf6ETP2Npspg-8MQ7X5dcSIijxscPBxx3PxpdoziSriTOZ4Z79Ov0bKJBB5Pmxyxo-SgVK3iTT-qpv/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/AVvXsEg6iAHNvNR4REAmO9zON-Xk9o4mgLI2-vvI1bPiyruguXrNNfY4mCAExsXCy1UEjjxd5y22UaAJ3YQrdxY-O5WhY4OcxMp6vbx7dZ__TmF2GSHZG17Cm6uRB2XL6VLLPlPG0hpqG-84ewgP/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/AVvXsEh93JLqYNQ8J2rAd3V1ist8P_qclk193su-p8YCK5X3wyKsWifVUldIbFugLPECv5jhyphenhyphen3NlLgxGLwVzcCpO9xG0iz14Woad5S6fLGoGMDk8v9kebuU_Xq2QnBxqiTOLk7EkZnuaHLcd-4JF/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/AVvXsEhWFR9qDfcPaAWd99_eMcUPJuc8SgqEwDo8FikQE-nW21l22kCtSfV5gq-_hcREhtOQxTFlHq9tu3CsnRsrlBwWiJxN8eSrlBCDTtH6tisk8AwbkSFQaL7pFGx1pTTpn0lxE50mfiBi9iAt/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/AVvXsEj3IggbD2GqK36alfgsvPtw-Lg7XwZ50ElE_9QpNE07mVyagAxloea7x1lookX6tEw4D7SKhGKr8jHMQTmvwgSbJFOo-t_3JYl6CYBdYwF2L6fdF71o2VEp_CMiYfBoBJ4nRosdxOCZ9NNp/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg"
 alt="" />
<div class="info" >
<h2><a href="http://zetroblog.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/AVvXsEjzifoetj1l4etReWKSLXB2ndAcu2c9S-7ocUraor0EYyO_rUlp23lBKu4hUkv15TQ6Sp7lnRGN8Jfpxld4lQYMnTztT6cNtIJpLIvnRWgSD_OAF4YBC7Wz2wtTRsrTB3I3DQAvJeTa9-5B/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg"
 alt="" />
<div class="info" >
<h2><a 
href="http://zetroblog.com"
 >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://zetroblog.com"
 >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/AVvXsEhyO_ogo7j9zu9MVQBmWLHvMT96UmKXDpPHdTYtwaWXMuqiCa_zeizkaVQzcc7Nl45KJLltk6KGs9F4siaxI8hCCje1L85uGAKe2slvFAZqUV59jdgxlNm-YhMy5MfZ6otjj3wwL47NCRV3/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg"
 alt="" />
<div class="info" >
<h2><a 
href="http://zetroblog.com"
 >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://zetroblog.com"
 >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/AVvXsEjZW79GgvNpdNu3SXcL749GqdmSMbb2rtPJxC9NUO1r9ZC5hO5qyvNSYbKQBTQseQWiUQIwDvaya5iRiE_aoEiXDmVX5bExsGzCEoMzR1-Un_THck8XYc0auV6uw7atwe_qn1_F4BXNK3n9/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://zetroblog.com"
 >read more</a></p>
</div>
</div>
</div>


Style Slider 2
Cara Membuat / Menambah Fitur Slider di Blog


<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/AVvXsEiJuvv-_NZvFBW5z4rVlT5bNXNormbJ9BtM-UvliAuZdrALfDVA3SOUwmt5fmBAWc0umgalBHOZzdJqYnxU0sXWxNQJgJbWqpbRIE4mwLiVPRzFnSuVKJrfej3xL11wzWZT1O3biNuTUiJd/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/AVvXsEjPtBn8yY_-GKnIjW8dE-gnaBOMDn65ODeQMLwrQ1o3rGP7mH9uGpIGXN4Jkbz70XWGtHmBSottas3pGrFdR9bGRdkJiiTstXNGYmnkTe0Fh4FGyaE4ljYJSTsRv4clIBovoNlfPZ1T6qKh/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/AVvXsEgRkD5lqneyhbM5wWvWbVeUEZykKKgOfo6uUytELShj4G9RRu0T23Sj_4Di05DZbgEf6ETP2Npspg-8MQ7X5dcSIijxscPBxx3PxpdoziSriTOZ4Z79Ov0bKJBB5Pmxyxo-SgVK3iTT-qpv/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/AVvXsEg6iAHNvNR4REAmO9zON-Xk9o4mgLI2-vvI1bPiyruguXrNNfY4mCAExsXCy1UEjjxd5y22UaAJ3YQrdxY-O5WhY4OcxMp6vbx7dZ__TmF2GSHZG17Cm6uRB2XL6VLLPlPG0hpqG-84ewgP/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/AVvXsEh93JLqYNQ8J2rAd3V1ist8P_qclk193su-p8YCK5X3wyKsWifVUldIbFugLPECv5jhyphenhyphen3NlLgxGLwVzcCpO9xG0iz14Woad5S6fLGoGMDk8v9kebuU_Xq2QnBxqiTOLk7EkZnuaHLcd-4JF/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/AVvXsEhWFR9qDfcPaAWd99_eMcUPJuc8SgqEwDo8FikQE-nW21l22kCtSfV5gq-_hcREhtOQxTFlHq9tu3CsnRsrlBwWiJxN8eSrlBCDTtH6tisk8AwbkSFQaL7pFGx1pTTpn0lxE50mfiBi9iAt/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/AVvXsEj3IggbD2GqK36alfgsvPtw-Lg7XwZ50ElE_9QpNE07mVyagAxloea7x1lookX6tEw4D7SKhGKr8jHMQTmvwgSbJFOo-t_3JYl6CYBdYwF2L6fdF71o2VEp_CMiYfBoBJ4nRosdxOCZ9NNp/w400-h250-no/Faceblog+Evolutions+%25281%2529.jpg"
 alt="" />
<div class="info" >
<h2><a href="http://zetroblog.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/AVvXsEjzifoetj1l4etReWKSLXB2ndAcu2c9S-7ocUraor0EYyO_rUlp23lBKu4hUkv15TQ6Sp7lnRGN8Jfpxld4lQYMnTztT6cNtIJpLIvnRWgSD_OAF4YBC7Wz2wtTRsrTB3I3DQAvJeTa9-5B/w400-h250-no/Faceblog+Evolutions+%25282%2529.jpg"
 alt="" />
<div class="info" >
<h2><a 
href="http://zetroblog.com"
 >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://zetroblog.com"
 >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/AVvXsEhyO_ogo7j9zu9MVQBmWLHvMT96UmKXDpPHdTYtwaWXMuqiCa_zeizkaVQzcc7Nl45KJLltk6KGs9F4siaxI8hCCje1L85uGAKe2slvFAZqUV59jdgxlNm-YhMy5MfZ6otjj3wwL47NCRV3/w400-h250-no/Faceblog+Evolutions+%25283%2529.jpg"
 alt="" />
<div class="info" >
<h2><a 
href="http://zetroblog.com"
 >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://zetroblog.com"
 >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/AVvXsEjZW79GgvNpdNu3SXcL749GqdmSMbb2rtPJxC9NUO1r9ZC5hO5qyvNSYbKQBTQseQWiUQIwDvaya5iRiE_aoEiXDmVX5bExsGzCEoMzR1-Un_THck8XYc0auV6uw7atwe_qn1_F4BXNK3n9/w400-h250-no/Faceblog+Evolutions+%25284%2529.jpg"
 alt="" />
<div class="info" >
<h2><a 
href="http://zetroblog.com"
 >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://zetroblog.com"
 >read more</a></p>
</div>
</div>
</div>

Demikian ulasan saya tentang Cara Membuat / Menambah Fitur Slider di Blog semoga bermanfaat dan berguna bagi anda!
Labels: