Alhamdulillah saat blogwalking kesuatu web site, saya melihat featured content slider ini, rasa keingintahuan saya mengantarkan saya tuk search digoogle bagaimana cara pembuatannya. Dan saya menemukan tutorial yang saya cari dari Web Developer Plus.
Nah disini saya ingin berbagi bagaimana caranya agar tutorial tadi bisa diterapkan khusus untuk template blogger.
Berikut tutorial menambahkan featured content slider menggunakan JQuery ini pada template blogger.
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag
3. Tambahkan juga script berikut setelah kode diatas
Catatan: 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya, sobat bisa mengganti angka itu sesuai selera
4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]>
#featured{catatan: Silahkan edit css diatas dengan menambahkan image selected item, image transparent, atau jika sobat ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll. Untuk panduan kode warna lihat disini
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('images/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('images/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;
}
4. Tambahkan kode HTML berikut diatas
atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget
Semoga bermanfaat.
Catatan: Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content
15+ Excellent High Speed Photographs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....read more
20 Beautiful Long Exposure Photographs
Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....read more
35 Amazing Logo Designs
liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more
Create a Vintage Photograph in Photoshop
Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....read more
6. Simpan template
Selesai.Semoga bermanfaat.
0 komentar:
Posting Komentar