Cara pasang photo slider pada blogspot

Cara pasang photo slider pada blogspot

Ditulis oleh: Nescafe ais | 

Untuk memasang photo slider seperti yang boleh anda lihat pada blog ini (sila klik), sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl+F dan taip atau paste kod]]> pada ruang Find.seterusnya tekan kekunci Enter.

Langkah 3

Salin kod CSS di bawah dan paste diatas atau sebelum kod ]]>

p/s: Anda boleh edit kod yang di bold mengikut kesesuaian saiz width dan height.

/*Slider*/
#coverslide{
position:relative;
width:340px;
float:center;
height:230px;
margin-left:30px;
border:2px solid #666666;
overflow: hidden;
}
#slider ul{
margin:0px 0px;
padding:0;
list-style:none;
}
#slider li{
width:340px;
height:230px;
overflow:hidden;
margin:0px 0px;
}
.slider-position {
position:relative;
}
.post-tittle {
position: absolute;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj84aCIxJAxTtKWbuR1bUtEdR-vO96zWuztlXxhgKl29cp2gfMBlRnfBskCCYKN9GXX5fvHo9AtZldlec_pQJRsErbTFl-_f_1AZ2JP4fUdj1ObwuUQB-rBhc3rqjUtT-cNYD77qoF_SCl/s1600/titlebg.png) repeat 0 0;
font-family:Trebuchet MS;
font-style:bold;
width:340px;
height:36px;
margin-top:195px;
overflow: hidden;
}
.post-tittle h3 {
padding:0px 10px 0px 10px;
margin:0 0 -10px 0;
font-size: 16px;
font-weight:bold;
color: #ffffff;
}
.post-tittle-p {
font: italic 12px Trebuchet MS;
padding:0px 0px 0px 10px;
color:#cccccc;
}

Langkah 4

Sekali lagi, pada ruang Find, taip atau paste kod  dan seterusnya tekan kekunci Enter.

Langkah 5

Salin javascript di bawah dan paste diatas atau sebelum kod  . Seterusnya klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Langkah 6

Salin kod HTML dibawah dan paste pada notepad. Edit pada URL gambar dan juga teks yang di bold pada kod.

Natlie Imbruglia

Doesn`t she look very cool?

Thousands of Years

Earth has lived thousands of years...

Fruits

Fruits are vital for health and their nutrients...

The Lonely Road

The Lonely Road reminds Me with You...

Twister

Here are some twisting graphics for you...

Langkah 7

Klik pada Layout => Add A Gadget => HTML/Javascript. Seterusnya, salin kod yang telah siap di edit dan paste pada ruang Content HTML/Javascript.

Akhir sekali klik Save.