Home » ALL ABOUT BLOG » Cara Membuat Konten Slider Pada Blogspot Dengan Mudah

Cara Membuat Konten Slider Pada Blogspot Dengan Mudah

Posted by adsadadas

» ALL ABOUT BLOG

» Tuesday, 5 April 2016

Pada kesempatan kali ini, Saya akan share bagaimana cara menambahkan konten slider / slideshow untuk blog atau website.Sebagian besar blogger menggunakan content slider ini , Konten slider adalah cara yang bagus untuk menunjukkan banyak konten di area yang lebih kecil dari halaman web atau blog .Ini adalah teknik yang bagus untuk mewakili berbagai jenis konten dalam ruang terbatas dan cara yang baik untuk melibatkan pembaca.

Apakah Anda tertarik untuk menerapkan slider konten di situs web Anda ? Langsung saja ..:p

1. Masuk ke Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Copy paste script dibawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#featured{
width:330px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:330px;
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:330px; 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/AVvXsEj71ukB6vRDoZsRdQkfO16y7Xv4i5aZxw-Cu_OgUXYqvsI9BMYumAQWNC2pcLFIVvWatDXKs1roiMhA6APqW-r_Dkt-zsgyx8y4NA9ECU2H0PVXUtTaJqmq5zZpnA9_Q_iPOhScPsHBIy1n/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: 330px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8JuPYo_ITudZ3WIVVStvkPkYs3Mi5Iz_56HHfTgoJTeuqNp4lnY3KX6o3kSpiq0HN6mojqW6igGSCoomCI_BwUpVAPxyB9Vzs0CuHfWB9sELpRbghGGfInGG-OTTSIVoFcgV-ZYJ74QEM/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/AVvXsEhvBncmzqFLMChBjE2jfiSralQ1RqqA-HLUJlqETFpVunY3QZ2cVZHBvDOq1FRhfo5vVEWQYETBwuqFKevWvR241bnWepIig4Qf6TcWHezhRTOJqD2TGW2dvnGSYIqNCE8wdUBsf1TKDqE/s1600/ur.jpg" width="60px" height="45px"/><span>PENGERTIAN UNJUK RASA, MIMBAR BEBAS, DISKUSI, DIALOG, POSTER, RAPAT</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/AVvXsEiyzDc4LMgzmMuLRPlmjRfSRkf-1PSCLzDB4NpRKc90Y_TCeETLzgx3ETkY9BiHnIq8fuzxdBzzx0B9hAwMdIrIOYx_2srMiPMzdqEd3SSPjhGc2lDUvQ_HTWvDWc1SIVDGhTS_CjiseZo/s1600/untitled.JPG" width="60px" height="45px"/><span>Script Php Video dan Mp3 Search Engine </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/AVvXsEjiCHYTJrQa32a_gfgTnRitRLfY8OycclbzhkvSj4G8FGEFUGjn-cnY4K0AtD59dIxG0DFir1kbClLZDa0uQeyrcSNmbyNIWz9jd3BLU6uFctyhRBg1ziRErsvEaWMBoz8frZi9VsddUvs/s1600/redirect-BLOGSPOT-TO-CUSTOM-DOMAIN.jpg" width="60px" height="45px"/><span>Tips Mencegah Redirect dari Blogspot.com ke Blogspot.co.id</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/AVvXsEjKrUl02nnymOklrh1m_pKt4s1lwJxVJCn5ia7ogmZLUIj3I-k5TOrW02dcQABbNITJNY4njkaeEyjo3-vwbWEwYB8dsu3NYDHbQ3AGiqSaBt3B1tsXGpaPa0Z-FMgcefSDWoHaQAQTBsI/s1600/random+post.JPG" width="60px" height="45px"/><span>Cara Membuat Random Post Title With Thumbnail </span></a></li>
</ul>


<div id="fragment-1" class="ui-tabs-panel" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBncmzqFLMChBjE2jfiSralQ1RqqA-HLUJlqETFpVunY3QZ2cVZHBvDOq1FRhfo5vVEWQYETBwuqFKevWvR241bnWepIig4Qf6TcWHezhRTOJqD2TGW2dvnGSYIqNCE8wdUBsf1TKDqE/s1600/ur.jpg"/>
<div class="info">
<h2><a href="https://oratoto.blogspot.com/2015/03/pengetian-unjuk-rasa-mimbar-bebas.html" target="_blank">PENGERTIAN UNJUK RASA, MIMBAR BEBAS, DISKUSI, DIALOG, POSTER, RAPAT</a></h2>
<p>Mimbar Bebas adalah kegiatan penyampaian pendapat di muka umum yang dilakukan secara bebas dan terbuka tanpa tema tertentu </p>
</div>
</div>


<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyzDc4LMgzmMuLRPlmjRfSRkf-1PSCLzDB4NpRKc90Y_TCeETLzgx3ETkY9BiHnIq8fuzxdBzzx0B9hAwMdIrIOYx_2srMiPMzdqEd3SSPjhGc2lDUvQ_HTWvDWc1SIVDGhTS_CjiseZo/s1600/untitled.JPG"/>
<div class="info">
<h2><a href="http://oratoto.blogspot.com/2016/03/script-php-video-dan-mp3-search-engine.html" target="_blank">Script Php Video dan Mp3 Search Engine </a></h2>
<p>MP3 Search Engine adalah sebuah mesin pencarian MP3 yang menggunakan host di souncloud ataupun dari Youtube. Web ini sama sekali tidak melakukan Upload lagu. Semua lagu sudah ada di Souncloud dan Youtube</p>
</div>
</div>


<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiCHYTJrQa32a_gfgTnRitRLfY8OycclbzhkvSj4G8FGEFUGjn-cnY4K0AtD59dIxG0DFir1kbClLZDa0uQeyrcSNmbyNIWz9jd3BLU6uFctyhRBg1ziRErsvEaWMBoz8frZi9VsddUvs/s1600/redirect-BLOGSPOT-TO-CUSTOM-DOMAIN.jpg"/>
<div class="info">
<h2><a href="http://oratoto.blogspot.com/2016/02/tips-mencegah-redirect-dari-blogspotcom.html" target="_blank">Tips Mencegah Redirect dari Blogspot.com ke Blogspot.co.id</a></h2>
<p>Beberapa waktu lalu blogspot mengalihkan semua trafik blog ini ke country specific domain untuk Indonesia, yaitu blogspot.co.id. Bagi anda yang tidak menyukai perkembangan ini </p>
</div>
</div>


<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrUl02nnymOklrh1m_pKt4s1lwJxVJCn5ia7ogmZLUIj3I-k5TOrW02dcQABbNITJNY4njkaeEyjo3-vwbWEwYB8dsu3NYDHbQ3AGiqSaBt3B1tsXGpaPa0Z-FMgcefSDWoHaQAQTBsI/s1600/random+post.JPG"/>
<div class="info">
<h2><a href="http://oratoto.blogspot.com/2016/03/cara-membuat-random-post-title-with.html" target="_blank">Cara Membuat Random Post Title With Thumbnail </a></h2>
<p>Dalam postingan kali ini, saya akan share Type Random Post with Thumbnail. Widgets ini tidak akan memberatkan loading blog anda, jadi anda tidak perlu khawatir.</p>
</div>
</div>

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

3. keterangan

Warna hijau = sesuaikan dengan ukuran template blog anda

Warna merah = sesuaikan dengan konten + image blog anda

4. save....

Demikianlah langkah mudah membuat konten slider pada blog, semoga bermanfaat.....