Lagi-lagi mengenai gambar slide di bawah header, yah soalnya ini lagi ngetrend di kalangan blogger untuk memperindah blog. Kali ini saya akan memberikan tutorial cara memasang gambar slide ala Drakon template. Pada dasarnya fungsi dari gambar slide ini sama dengan Zinmag Primus, perbedaannya jika pada Zinmag Primus gambar itu ditampilkan satu persatu secara otomatis, maka di Drakon template ini gambar yang ditampilkan ada beberapa sesuai dengan lebar template yang kita pakai, dan kita harus meng-klik tombol previous atau next untuk menampilkan gambar selanjutnya. Untuk lebih jelasnya temen-temen bisa lihat disini atau langsung saja pada Drakon template yang ada di situs template gratis.
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 ]]></b:skin>
#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5V1sAdtgEMGMCxp6q_oxcMv_fiImCVX192Pk8-1WqAonJU36WkLQgcLbEQ40i5083wxScZrq6_PM-tnwKKMG4YslPbnvQb5NmVet116k3XLkdKIwLv_1CrWP1v9y9PdysOhy0p-UGAuk/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/AVvXsEiGb8XfUgV8SZkSKPn6gczGt-JuKNPFrW_OcuYvyrAkNFS-nRlWWtNtrlbXw5sehWKky-6CgCXEej6wq_S95A3AOeCB2OEQTM9Qh7_Vens37De6Cs-44yGktExlFX0PFmbyaWRiRtkzYvw/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/AVvXsEi0chrjAe2cudMdVM30mEygKWYhNFz9b4nKxxZ6N8jCck7VsIlpFhvqRCMSi0vccRSCj84BsZf2-vMQOc3b2X_42OfmSSwJw102EehISNek6FL5wlxR2wyI8jkSDqnah8IHiGOvSMSBJ7U/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5V1sAdtgEMGMCxp6q_oxcMv_fiImCVX192Pk8-1WqAonJU36WkLQgcLbEQ40i5083wxScZrq6_PM-tnwKKMG4YslPbnvQb5NmVet116k3XLkdKIwLv_1CrWP1v9y9PdysOhy0p-UGAuk/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/AVvXsEiGb8XfUgV8SZkSKPn6gczGt-JuKNPFrW_OcuYvyrAkNFS-nRlWWtNtrlbXw5sehWKky-6CgCXEej6wq_S95A3AOeCB2OEQTM9Qh7_Vens37De6Cs-44yGktExlFX0PFmbyaWRiRtkzYvw/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/AVvXsEi0chrjAe2cudMdVM30mEygKWYhNFz9b4nKxxZ6N8jCck7VsIlpFhvqRCMSi0vccRSCj84BsZf2-vMQOc3b2X_42OfmSSwJw102EehISNek6FL5wlxR2wyI8jkSDqnah8IHiGOvSMSBJ7U/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}
