Tutorial lengkap Kunjungi Di :
Sekarang saya akan share bagaimana cara membuat atau menampilkan beberapa posting dengan slideshow supaya lebih terlihat dan menarik perhatian pengunjung blog Anda.
Untuk membuatnya silahkan ikuti langkahnya berikut ini :
1. Login ke akun Blogger
2. Klik
Design
3. Pilih Tab menu
Edit HTML
4. Centang tulisan
Expand Widget Template
5. Letakkan kode dibawah ini sebelum kode
]]></b:skin> ,untuk memudahkan pencarian tekan Ctrl+F atau F3
#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}
#mover {
width: 600;
position:absolute;
overflow:hidden;
}
.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}
.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}
.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}
6. Kemudian Copy Paste code dibwah ini sebelum / diatas code </head>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
7. Save Template
8. Langkah selanjutnya klik tab menu Elemen Laman
9. Klik Add a Gadget, pilih HTML/Javascript
10. Paste code dibawah ini didalamnya
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="ALAMAT URL">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src="LINK GAMBAR"/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>
*Keterangan
- Ganti tulisan ALAMAT URL dengan link posting blog anda.
- Ganti tulisan JUDUL SLIDE dengan Judul Slide anda
- Ganti tulisan Isi artikel dengan isi artikel slide anda
- Ganti tulisan LINK GAMBAR dengan link image yang sudah di upload.
11. Klik Save dan lihat hasilnya....
NOTE: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS diatas
Semoga bermanfaat!
Title : Cara Membuat Headlines Slide Show | Tutorial Blog
Description : Tutorial lengkap Kunjungi Di : 1. andrianacom.blogspot.com 2. sh3hack3r.blogspot.com Sekarang saya akan share bagaimana cara membuat ata...
