Biasanya beberapa majalah template Suami Sering Kita jumpai hal-hal semacam. Wah biasanya Kita Langsung tertarik nih, dan mengganti template blog kita. Hummm .... TAPI kalau udah terlanjur cinta sama template Yang lama gimana? & e Kita pengen Punya slide Menarik yang.
Lebih Baik Kita buat slide aja Sendiri! Caranya?
Gampang kok! Suami kali Kita akan mencoba Membuat slide show Yang Kurang lebih tampilannya Pembongkaran Suami di Bawah:
nb: sumber gambar Aku Ambil Dari amatullah83.blogspot.com blog
Demonya Bisa Kamu modem.jpg link di Bawah Suami:
Small berlama-lama, mending Langsung aja ke tutorial!
Silahkan login dulu ke Blogger dan Masuk ke "Edit HTML" Dari template menu "Tata Letak"
Salin kode CSS di Suami Bawah, dan paste Diatas ]]></ b: skin>
=============================
Simpan gadget! dan silahkan lihat hasilnya?
#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/AVvXsEg7qgvS6YPlcZLh4MWlOpplTQ0wNH5fJJ93Phm2ilJiXCZG3GcvZ4McujLkmLIZVps4tepBI6g-zEF9EmK3Z4-QqW_sCb1lxKHUj3vxdOB-bmytc34N3qepuBVA0IV8T0QMBDQc4FYy_Yk/s320/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/AVvXsEhmFF73k_fdKXTwOhHRo4NO1ftXhedIikMLzBTnfsin8CNyRt-k1qTDn_Zz2OFq3hPBuARql2r4iJA5vll57WPHC8GUjwWUg0ilH8CfcL6o_usEbyy-C0XEgNkVGvrQEMVqWD0-v_B4otPV/s1600/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;
}
Lalu instal JQuery dengan mempaste kode di bawah ini di atas </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>
Copy lagi kode dibawah ini dan pastekan dibawah kode JQuery tadi!
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>
===========================
Sudah? simpan templatemu dulu!
"Mana? kok gak terjadi apa-apa?" Sabar dunk! orang belum selesai kok!
Langkah berikutnya kamu tambahkan gadget melalui "Tata Letak" -> "Elemen Halaman"
Ini baru kode gadgetnya!
===========================
<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 src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
=========================
Simpan gadget! dan silahkan lihat hasilnya?
kalau ada yang kurang jelas jangan sungkan buat nanya!
Sumber : blog.yudhaime.co.cc
0 komentar:
Posting Komentar