Friday, August 28, 2009

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? :

27 komentar:

Klik Here To Show All Comment


narti Friday, August 28, 2009 6:34:00 AM  

nambah berat saat buka blog tidak ya?

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

djami ed Friday, August 28, 2009 7:14:00 AM  

Thanks banget sudah berbagi infonya
Aku akan mencobanya

lover 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 Tips 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

Willyo Alsyah P.Pratama 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???

Mas Doyok Saturday, August 29, 2009 9:22:00 AM  

sip untung masih ingat wkekekeke

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

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!!!!!

Post a Comment

newer page older page home
top