Wah, hampir seminggu absen ngeblog nih setelah kemarin sempat disibukkan oleh kegiatan offline.
Pada kesempatan kali ini mencoba menghadirkan satu tips untuk membuat "headline Slide". Cukup sederhana sekali, untuk demonya bisa lihat
Disini.
Oke, jika anda tertarik untuk membuatnya, silakan ikuti langkah-langkahnya dibawah ini :
1. Login terlebih dahulu ke Blogger
2. Masuk ke bagian Tata Letak/Layout
3. Pilih Tab menu
Edit HTML4. Centang tulisan Expand Widget Template
5. Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
6. Copy Paste code CSS dibawah ini
sebelum code diatas :
#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;
} |
7. Langkah selanjutnya cari code ini </head>
8. Copy Paste code berikut
sebelum 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(" sfhover\b"), ""); }}}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
9. Simpan hasil kerja anda
10. Langkah selanjutnya klik tab menu Elemen Laman
11. Buat klik
Add a Gadget, pilih
HTML/Javascript12. Paste code dibawah ini didalamnya
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="
http://serba-seru.blogspot.com/">
JUDUL SLIDE 1</a></h2>
<p>
isi artikel slide 1</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="
http://serba-seru.blogspot.com/">
JUDUL SLIDE 2</a></h2>
<p>
isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="
http://serba-seru.blogspot.com/">
JUDUL SLIDE 3</a></h2>
<p>
isi artikel slide 3</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>
13. Ganti tulisan
http://serba-seru.blogspot.com dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda
NB: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada
code CSS diatas
Selamat berkreasi
Semoga bermanfaat
(Sumber : http://forantum.blogspot.com)
