DAFTAR ISI
Nonton Televisi Online

HTML Scroll Boks Warna

Sabtu, 22 Mei 2010

MEMBUAT HEADLINE DENGAN SLIDESHOW

Hai Sobat semua kita berjumpa kembali dengan saya disini, adapun maksud perjumpaan kali ini adalah untuk memberikan ilmu hasil dari blogwalking ke penjuru google dan alhamdullih saya membawa beberapa bingkisan pemberian dari sahabat-sahabat baik kita dan tentunya tidak semua penduduk google yang baik hati ada juga segelintiran manusia yang pada pelit diproteksi halaman blognya supaya tidak di Copy Paste pengunjung tapi mungkin ada alasan -alasan tertentu bagi dia, kita sendiri tidak manyalahkannya mau di proteksi silahkan itu hak dia, baik kita tidak perlu mempersoalkannya yang penting postingan kita jalan terus nah ini code script hasil Blogwalking . . . satu saja dulu ya kita tampilkan ntar saya kasih lagi.
Cara pasangnya seperti biasa kita masuk ke Edit HTML dan sebaiknya kita download template lengkap untuk jaga-jaga selanjutnya mari kita ikuti langkah-langkah berikut 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 untuk melanjutkan langkah berikutnya
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://www.seiparing.co.cc/">JUDUL SLIDE 1</a></h2>
<p>iaisrtikel slide 1</p>
<img src="LINK GAMBARR"/>
</div>
<div class="slide">
<h2><a href="http://www.seiparing.co.cc/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="www.seiparing.co.cc/">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://www.seiparing.co.cc dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda
16. Ganti tulisa LINK GAMBAR dengan link image yang sudah di upload. misal di Photobucket.com dan ambil linknya.
Selesai silahkan anda setting sendiri sesuaikan dengan blog anda.
Catatan Code ini sudah saya coba dengan hasil bagus dan memuaskan mau liha nih hasilnya
klik disini



Komentar :

ada 15 komentar ke “MEMBUAT HEADLINE DENGAN SLIDESHOW”
BRI Jakarta Veteran mengatakan...
pada hari 

yang pertamakah ... sahabat

BRI Jakarta Veteran mengatakan...
pada hari 

tipsnya menarik dan layak dicoba nih...

odah etam mengatakan...
pada hari 

trimz..ya info nya...

epl mengatakan...
pada hari 

keren sob, thak infonya

Aguestri mengatakan...
pada hari 

Buat wp gimana sob???

Review Blog Gratis mengatakan...
pada hari 

wah, hebat nich .... jadi pingin ...

Mas Herman mengatakan...
pada hari 

sebelum kode ini...itu maksutnya kode apa bro

anggasona mengatakan...
pada hari 

menarik u dicoba sob, tutorial yang kreatif :)

Saeful Ulum mengatakan...
pada hari 

kalo di WP bisa dipake ga Gan?

Arbazena mengatakan...
pada hari 

Gilaaa, keren bgt nih bloggg...
Kumplit bener....
Mangstabbb boss...



Salam,
http://onlinetourservices.com
http://the-arbazenas.blogspot.com

Arbazena mengatakan...
pada hari 

Mampir lagi boss, sdh lama juga nih gak mampir. Semoga sehat dan sukses terus yak.

Salam,
http://onlinetourservices.com

spirit lion mengatakan...
pada hari 

semoga gan dapat amal dari kebaikannya ini....

poncolgate mengatakan...
pada hari 

duh...dari kemaren gagal terus nih...T-T

bersediabelajar mengatakan...
pada hari 

mantap bro blog n artikelnya, thx sdh mau berbagi, sgt membantu utk blog yg masih br, maklum msh newbie, perlu bnyak bljr, salam kenal

Juragan Bazz mengatakan...
pada hari 

thx banyak22222222222..........!!!!

Posting Komentar


weather counter

BUKU TAMU


Anda berminat buat Buku Tamu seperti ini?
Klik disini
Read more: Membuat Buku Tamu Melayang di http://paksi-dirgantara.blogspot.com

Pengikut

 
This Blog is proudly powered by Blogger.com | Template by Angga Leo Putra