CARA MEMBUAT SLIDE ANGKA 1234 BERURUTAN

Cara membuat Slide berurutan nomer atau angka berurutan ada 3 langkah. Karena sudah aku praktekkan jadi masih segar ingatan cara membuatnya. Aku postingkan cara ini karena aku biar gak lupa lagi nantinya. Bagi sahabat Blogger yang mau tahu caranya ayo kita baca bersama...
Caranya :
LANGKAH PERTAMA :
1. Masuk ke bagian Edit HTML (jangan lupa di upload dulu),
2. Lalu cari kode ]]></b:skin>
3. Letakkan kode di bawah ini di atas ]]></b:skin>
--------------------------------------------------
.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
-----------------------------------------------
LANGKAH KE DUA :
4. Shobat download dulu kode berikut, KLIK DI SINI
5. Copy script tadi dan pastekan tersebut sebelum kode </head>
6. Simpan template.

LANGKAH KE TIGA :
Sekarang tinggal menambahkan kode html berikut ini untuk widget HTML Shobat:

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>

</ul>
<br style="clear: left"/>
</div>

<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">
<a href="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>

<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>

<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>

<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>

<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>

<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>

<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>

<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat artikel keempat kamu disini [...]
</div> </div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>
Untuk merubah berapa detik tampilan tinggal ganti angka 2000 terserah menjadi 3000 apa 4000 dst.
Selamat Mencoba semoga ada manfaatnya...
Sumber Mas Doyok

Anda Sudah Baca Yang Ini? :

free donwload

daftar isi blog

berita unik

berita

tutorial tip dan trik

tutorial blog

27 komentar:

Klik Here To Show All Comment

FATAMORGANA, Friday, August 28, 2009 6:17:00 AM: Makasih atas tutorialnya.....
narti, Friday, August 28, 2009 6:34:00 AM: nambah berat saat buka blog tidak ya?
sindangheula, Friday, August 28, 2009 6:59:00 AM: Maksih tutorialnya say
Free Tips, Friday, August 28, 2009 7:06:00 AM: Thx for sharing. this is a good tips.
coretan asal, Friday, August 28, 2009 7:07:00 AM: tutorial bagus dan perlu dipraktekkan, nich....
thank you for sharing about it
Ed Abdul, Friday, August 28, 2009 7:14:00 AM: Thanks banget sudah berbagi infonya
Aku akan mencobanya
Mr. X, Friday, August 28, 2009 7:37:00 AM: buat mbak narti kalau dibilang berat nggak juga kok mbak...coba aja deh...
Terima kasih buat semua sahabat yang berkomentar disini...
semoga kebaikan semua sahabat dapat imbalan pahala...
jhonson blog, Friday, August 28, 2009 9:09:00 AM: mantab info nya..tapi agak sedikit ribet yah...:)
Macam2 Info, Friday, August 28, 2009 11:06:00 AM: tutorial nya lengkap ni,thanks ya....
bobby, Friday, August 28, 2009 11:38:00 AM: berkunjung. ..

.di tunggu kunjungan ma komen baliknya ya
b_boy, Friday, August 28, 2009 11:40:00 AM: .slam kenal. . .keren nih blognya. .

.kunjungi aku balik ya
Unknown, Friday, August 28, 2009 8:23:00 PM: duh...adik ku yang satu ini...makin hebat aja eyyyy....
gema_gogo, Saturday, August 29, 2009 12:51:00 AM: Ternyata lumayan ribet yah..

wa juga pernah pake ftur slide angka 1234, tapi itu bawaan Template, jadi gak tau yah kalo ternyata buatnya ribet gini..
heheh... makasih yah udah share, bisa di coba pelan2 ini.
gema_gogo, Saturday, August 29, 2009 12:51:00 AM: This comment has been removed by a blog administrator.
satria, Saturday, August 29, 2009 5:13:00 AM: ada yang bisa bantu aku ga untuk templatku agar slidernya berada di bawah header gimana ya aku harap ada yang mau tolong aku khususnya buat yang posting artikel ini heheheheheh........
tips dan informasi, Saturday, August 29, 2009 6:55:00 AM: script-nya teralau panjang banget ya, tapi okey juga di coba
ekosulistio, Saturday, August 29, 2009 7:11:00 AM: makasih sob tipsnya...tp ntar ga bikin berat???
MbahDoyok, Saturday, August 29, 2009 9:22:00 AM: sip untung masih ingat wkekekeke
akhatam, Saturday, August 29, 2009 9:45:00 AM: wah mantapz....
yogo, Saturday, August 29, 2009 11:16:00 AM: welah panjang amat scriptnya, jd pusing aku.

kalo script yang pendek aja ada gak? soalnya aku pernah memasang script panjang kayak gt di blog aku, trus aku pengen buang tuh script, aku jadi bingung awal dan akhir scriptnya.

maklum aku gak tahu soal bahasa yang ditulis pake script itu, aku cuma copy2 aja.

makasih bantuannya.
Ica, Saturday, August 29, 2009 11:22:00 AM: Thanks ya untuk tutorialnya.. Btw, blognya bagus... follow ah... :)
dobloger follow, Saturday, August 29, 2009 2:35:00 PM: Wah Boleh ni. Blognya meriaaaah seruuuuu Boz, mampir ke blog gurem ya :) lam kenal sahabat
JT, Saturday, August 29, 2009 7:22:00 PM: kebtulan lg seneng slide kayak gini ni, izin donlot js nya yeee n ntar mo di coba.
thanksss buangetts
sahabat, Saturday, August 29, 2009 9:24:00 PM: thanks infonya ya...s
jaya, Saturday, August 29, 2009 9:56:00 PM: terimakasih atas infonya kawan, makasih.
buxbag, Sunday, August 30, 2009 1:41:00 AM: wah thx banget nih infonya :)
btw.. kok bisa sih nulis kode html di posting blog? aku pernah nyoba bikin posting yang ada kode htmlnya(cara bikin read more). waktu diposting malah kosong semua ...

Gimana caranya?
jOe, Monday, August 31, 2009 12:12:00 AM: thx ya tutorial ny...
sekalian ijin donlod ya!!!!!