Click Here

Labels

Membuat Slide Headline

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 HTML
4. 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/Javascript
12. 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)
Harga Notebook Acer Aspire S3 Ultrabook

Sudah 15 Orang Berkomentar, Silakan anda yang selanjutnya :

Komentar dari Rizky2009 :

pertamax sob setelah beberapa hari off.... scriptnya panjang bgt blog q dah berat bgt kawan

Komentar dari Arief Masqulin :

mantep nih. sayangnya ane dapet yg kedua... :o

Komentar dari sulastiono :

hasilnya seperti templatenya pakde, cuma kalau punya pakde sudah include, maksud pakde sudah terima jadi.

terimakasih atas sharingnya, moga sukses selalu

Komentar dari mGm :

seru juga nih tutorialnya...dan selalu saja menarik untuk dicoba

Komentar dari Rizky2009 :

template q megazine sob made in kang rohman

Cara Modifikasi Navigasi Breadcrumb

Komentar dari agung ap :

nice tips!
thanks mamen, keren jg nih

Komentar dari Ngeposting ni yee :

tUtOrial yAngbAgus sObat.,,,
tHanks Ya.,.,..,

Komentar dari moekzone :

salam kenal bozz

Komentar dari GEORGEOUZ :

@ moekzone : salam kenal juga....

Komentar dari moekzone :

mbok saya diajari gan, ane buat ga jadi2 :(

Komentar dari Viyan Pradita :

Mantab sob.... Lanjutkan !!

Komentar dari Yusuf :

Alhamdulillah akhirnya ane bisa jg...
Tp kyknya buat naro gambarnya gak muat deh.
biar gambarnya kelihatan, bagian mana y yg harus di edit???

Komentar dari Stupid monkey :

di blog ane kok slide ngebut banget ya sob ??? mohon penjelasan ... terima kasih.

Komentar dari Adiar :

contohnya mana???

Komentar dari sastraremaja11 :

Yg lebih simple ada ga sob?

Silakan Tulis Komentar Anda di Bawah ini :

Silahkan tulis komentar anda dibawah ini, namun diharapkan jangan melakukan spamming,hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat