Memasang Content Slider di Blog
Postingan Kedua Hari ini Setelah sebelumnya Postingan kami beberapa menit yang lalu mengenai Cara Membuat Slideshow di Blog. Dan untuk postingan Kedua Hari ini masih Menyangkut mengenai Tutorial Blogging. Teman-teman yang bermain jejaring sosial tadi biarkan saja dulu (Aku Cuek). Kali ini Kami postingkan dan kami bagikan tutorial dengan Judul Memasang Content Slider di Blog. Alhamdulillah Cara / Tutorial ini sedang kami gunakan di Blog ini. Perhatikan saja di Halaman Depan Blog ini.
Content slider ini mengandalkan dan menggunakan Kode JQuery untuk Sildeshownya dan sedikit script-script UI yang digunakan sebagai pendukung JQuerynya. Content Slider ini memang banyak digunakan oleh para Blogger yang mengedepankan Kreatifitas dan Modif serta Desain buat blog Mereka.
Berikut Silahkan ikuti langkah-langkahnya :
Pertama :
Login Ke Akun Blogger
Kedua :
Pergi ke Rancangan >> Edit HTML
Ketiga :
Masukkan Kode di bawah ini Setelah Kode <head>
Berikut Silahkan ikuti langkah-langkahnya :
Pertama :
Login Ke Akun Blogger
Kedua :
Pergi ke Rancangan >> Edit HTML
Ketiga :
Masukkan Kode di bawah ini Setelah Kode <head>
<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
</script>
Keempat :
Letakkan Kode berikut Sebelum kode </head>
<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" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>
Keterangan :
5000 adalah keterangan kecepatan Slidenya
Kelima :
Letakkan Kode berikut Sebelum Kode ]]></b:skin>
5000 adalah keterangan kecepatan Slidenya
Kelima :
Letakkan Kode berikut Sebelum Kode ]]></b:skin>
#featured{
width:400px;
padding-right:200px;
padding-left:5px;
position:relative;
border:5px solid #ccc;
height:260px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:200px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:200px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuTBmtXqnKN5cTLOGH8xayf1FDKEPIgqIjOJgGfWWw43HcpQUyj0u3Xqgbdo06fbbyZP47d_4vqImPndMiMIsf5sSWnLJRXHpUCBGAy15Woh4Txn0cxn8pT9RI7OVFwa7wT1qaH_tIvI/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; 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;
}
#featured .ui-tabs-hide{
display:none;
}
Keterangan :
Silahkan ganti Kode berwarna biru di atas dengan Selera Anda
Keenam :
Letakkan Kode di bawah ini Setelah Kode <div id='content-wrapper'> atau Tempat Lainnya
Silahkan ganti Kode berwarna biru di atas dengan Selera Anda
Keenam :
Letakkan Kode di bawah ini Setelah Kode <div id='content-wrapper'> atau Tempat Lainnya
<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='https://sites.google.com/site/idesainerweb/hpsmart_80x50.jpg'/><span>Modem Smart di Linux (Ubuntu)</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='https://sites.google.com/site/idesainerweb/MultiLevel-DropDown-Menu-With-Out-J-Query-Onlt-HTML-CSS_80x50.jpg'/><span>Toolbar Multi DropDown di Blogger </span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='https://sites.google.com/site/idesainerweb/sosialmediakiri_80x50.jpg'/><span>Sosial Media di Sisi Kiri Blogger</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='https://sites.google.com/site/idesainerweb/social-networking_80x50.jpg'/><span>Social Network Teknik Floating</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='https://sites.google.com/site/idesainerweb/hpsmart.jpg'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/pasang-modem-smart-di-linux.html'>Pasang Modem Smart di OS Linux (Ubuntu)</a></h3>
<p>Memasang Modem Smart di Linux dapat dilakukan dengan....<a href='http://idesainer.blogspot.com/2012/02/pasang-modem-smart-di-linux.html'>read more</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='https://sites.google.com/site/idesainerweb/MultiLevel-DropDown-Menu-With-Out-J-Query-Onlt-HTML-CSS.png'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/membuat-toolbar-menu-drop-down-di-blog.html'>Membuat Multi DropDown JQuery di Blog</a></h3>
<p>Toolbar Multi DropDown adalah toolbar yang berisi...<a href='http://idesainer.blogspot.com/2012/02/membuat-toolbar-menu-drop-down-di-blog.html'>read more</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='https://sites.google.com/site/idesainerweb/sosialmediakiri.jpg'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/memasang-sosial-media-di-sisi-kiri-blog.html'>Sosial Media di Bagian Kiri Blog</a></h3>
<p>Media Sosial yang kami maksud disini adalah Facebook...<a href='http://idesainer.blogspot.com/2012/02/memasang-sosial-media-di-sisi-kiri-blog.html'>read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='https://sites.google.com/site/idesainerweb/social-networking.jpg'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/cara-memasang-sosial-network-dengan.html'>Sosial Network dengan Teknik Floating</a></h3>
<p>Memasang Sosial Network di Blog dengan Floating....<a href='http://idesainer.blogspot.com/2012/02/cara-memasang-sosial-network-dengan.html'>read more</a></p>
</div>
</div> </div>
</b:if>
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='https://sites.google.com/site/idesainerweb/hpsmart_80x50.jpg'/><span>Modem Smart di Linux (Ubuntu)</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='https://sites.google.com/site/idesainerweb/MultiLevel-DropDown-Menu-With-Out-J-Query-Onlt-HTML-CSS_80x50.jpg'/><span>Toolbar Multi DropDown di Blogger </span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='https://sites.google.com/site/idesainerweb/sosialmediakiri_80x50.jpg'/><span>Sosial Media di Sisi Kiri Blogger</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='https://sites.google.com/site/idesainerweb/social-networking_80x50.jpg'/><span>Social Network Teknik Floating</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='https://sites.google.com/site/idesainerweb/hpsmart.jpg'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/pasang-modem-smart-di-linux.html'>Pasang Modem Smart di OS Linux (Ubuntu)</a></h3>
<p>Memasang Modem Smart di Linux dapat dilakukan dengan....<a href='http://idesainer.blogspot.com/2012/02/pasang-modem-smart-di-linux.html'>read more</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='https://sites.google.com/site/idesainerweb/MultiLevel-DropDown-Menu-With-Out-J-Query-Onlt-HTML-CSS.png'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/membuat-toolbar-menu-drop-down-di-blog.html'>Membuat Multi DropDown JQuery di Blog</a></h3>
<p>Toolbar Multi DropDown adalah toolbar yang berisi...<a href='http://idesainer.blogspot.com/2012/02/membuat-toolbar-menu-drop-down-di-blog.html'>read more</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='https://sites.google.com/site/idesainerweb/sosialmediakiri.jpg'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/memasang-sosial-media-di-sisi-kiri-blog.html'>Sosial Media di Bagian Kiri Blog</a></h3>
<p>Media Sosial yang kami maksud disini adalah Facebook...<a href='http://idesainer.blogspot.com/2012/02/memasang-sosial-media-di-sisi-kiri-blog.html'>read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='https://sites.google.com/site/idesainerweb/social-networking.jpg'/>
<div class='info'>
<h3><a href='http://idesainer.blogspot.com/2012/02/cara-memasang-sosial-network-dengan.html'>Sosial Network dengan Teknik Floating</a></h3>
<p>Memasang Sosial Network di Blog dengan Floating....<a href='http://idesainer.blogspot.com/2012/02/cara-memasang-sosial-network-dengan.html'>read more</a></p>
</div>
</div> </div>
</b:if>
Keterangan :
Silahkan Edit Kode di atas dengan link dan deskripsi blog Anda Sendiri
Terakhir :
Simpan Template
Selamat Mencoba tutorial ini
Silahkan Edit Kode di atas dengan link dan deskripsi blog Anda Sendiri
Terakhir :
Simpan Template
Selamat Mencoba tutorial ini
0 komentar
Posting Komentar