Memasang Slider Gambar ala Drakon Template

Oke, langsung saja pada langkah-langkah pembuatannya :

PERTAMA

Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]>

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OdpAR7ff6E51fv9edc_9K7NCC2kCCZ9y3zGIFu4yimFQL3eAEqVY1mIHaHzuIfyO_c0uFf6vgDP9ZDlB3StfZcX7K2DR1TSMBXHx9xdEerfabi-tHqSNgriuddyLPXLWvPUQX1YqPFNS/s0/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:920px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:170px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:170px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_OENPO9bSLVgUFJmJYirz7kVGv4HBpyo4UCt0xhqrLD8JJiBsW_nvKt8yIcgquP28AZGzhdqS9-rtWxSXsJGV7pKwDdpIlQ9441TDYqMKdYh4FDT0l8kW9SZjpsQhhP6oWaReZqanZxI/s1600/back+demomaskolis.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxoPDGlfTNE86jMye3Odd-c1BkjVIDV3iiX1RdkyaT33xhGz3iBMPu-0c64vQpd4uNEALJV6UubH9kl2UXuw2BPR75nBNQzh5fiGmNLLCyyyKXbTmMPtuN0pqThMvRRT5RS7H8OL2S2G0/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

KEDUA

Masih pada posisi Edit HTML. Letakkan kode berikut di bawah kode ]]>.atau diatas

KETIGA

Kita akan meletakkan id untuk slider Drakon tepat di bawah header blog. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Langsung saja cari kode

Letakkan kode di bawah ini tepat di bawah kode

Norah Jones Lyrics

Sade Lyrics

Basia Lyrics

Jamiroquai Lyrics

Jamie Cullum Lyrics

Diana Krall Lyrics

Sting Lyrics

Kalau sudah klik simpan template dan perhatikan apakan slider gambar sudah terpasang dengan baik di blog anda. Pemasangan slider gambar ala Drakon ini saya sesuaikan dengan isi dari blog saya. Jika anda ingin merubah tampilan atau gambar, hal-hal yang perlu diperhatikan adalah :

Background slider, anda bisa ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OdpAR7ff6E51fv9edc_9K7NCC2kCCZ9y3zGIFu4yimFQL3eAEqVY1mIHaHzuIfyO_c0uFf6vgDP9ZDlB3StfZcX7K2DR1TSMBXHx9xdEerfabi-tHqSNgriuddyLPXLWvPUQX1YqPFNS/s0/header-background.png sesuai dengan background anda sendiri

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OdpAR7ff6E51fv9edc_9K7NCC2kCCZ9y3zGIFu4yimFQL3eAEqVY1mIHaHzuIfyO_c0uFf6vgDP9ZDlB3StfZcX7K2DR1TSMBXHx9xdEerfabi-tHqSNgriuddyLPXLWvPUQX1YqPFNS/s0/header-background.png) repeat-x;
border:5px ridge #052844;
}

Pada contoh slider di atas, saya menyertakan link dan teks (tulisan warna merah) dari blog demo saya. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :

Norah Jones Lyrics
Jika ingin menambahkan deskripsi singkat di bawah judul gambar, temen-temen bisa rubah menjadi seperti ini

Norah Jones Lyrics

Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....

Untuk merubah lebar (width:965px), anda bisa sesuaikan dengan lebar di template yang anda pakai. Demikian juga tinggi slider, anda bisa atur sendiri, bisa kan? Saya yakin pasti bisa.

Wah banyak juga kodenya ya? Temen-temen jangan bingung, saya yakin bagi anda yang senang mengutak-atik kode-kode HTML pasti bisa. Jika masih bingung juga, isi saja kotak komentar yang ada di bawah, siapa tahu saya bisa membantu.

Selamat mencoba dan semoga bermanfaat.