| 57 comments ]

Di Episode Tips & Trik kali ini saya akan membahas bagaimana membuat Slideshow Tabview, seperti yang terlihat dibagian atas blog ini.

Memang trik ini sedikit membutuhkan kesabaran untuk mengerjakannya. Tapi kesabaran anda pasti akan membuahkan hasil yang sesuai dengan usaha anda.


Selain berguna untuk mempercantik tampilan blog, Widget ini juga berguna sebagai promosi artikel anda yang sudah berada di halaman lama.


Langsung kita mulai saja proses pengerjaanya.

  • Login ke Blogger
  • Edit Layout > Edit HTML
  • Click "
Letakan Script dibawah ini, tepat diatas code: ]]></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;
}
}


  • Download Script ini, kemudian anda Copy lalu Paste diatas code: </head>
  • Setelah itu save hasil edit anda.
Langkah pertama telah selesai, kita akan lanjutkan ke langkah berikutnya:

  • Buka: Layout>Page Element> Add a Gadget (pilih HTML/Javascript)
  • Copy > Paste script dibawah ini, ke gadget tersebut.


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


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

<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>

<li><a href="#" rel="tab2">2</a></li>

<li><a href="#" rel="tab3">3</a></li>

<li><a href="#" rel="tab4">4</a></li>

<li><a href="#" rel="tab5">5</a></li>


</ul>


<br style="clear: left"/>

</div>


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


<div id="tab1" class="tabcontent">

<a href="http://tipspack.blogspot.com/2009/04/tips-mengembalika-file-yang-hilang.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://4.bp.blogspot.com/_a8HgbhL3M_w/SkxR0Grdv_I/AAAAAAAAAoA/v8Dgt2edg4Y/s320/tipspack.easy+recovery.jpg" height="152" title=""/></a>


<p><h3><a href="http://tipspack.blogspot.com/2009/04/tips-mengembalika-file-yang-hilang.html">Tips Mengembalikan file yang hilang</a></h3></p>


Jika anda pernah kehilangan file/data dari computer atau Flashdisc anda yang diakibatkan karena terhapus atau virus, anda tidak perlu bingung. Ada cara yang ampuh untuk mengembalikan file yang telah terhapus ataupun hilang tersebut. Baca selanjutnya di artikel ini....

</div>


<div id="tab2" class="tabcontent">

<a href="http://tipspack.blogspot.com/2009/03/tips-mempercepat-internet-connection.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://2.bp.blogspot.com/_a8HgbhL3M_w/SkTbf4gwWUI/AAAAAAAAAmI/9yWZWtNccXo/s320/images.jpg" height="152" title="beyone"/></a>

<p><h3><a href="http://tipspack.blogspot.com/2009/03/tips-mempercepat-internet-connection.html">Tips: Mempercepat Internet Connection Sampai 100%</a></h3></p>

Jika anda mengalami masalah dengan koneksi internet anda yang ada sekarang, anda tidak perlu bingung atau kesal. Dengan sedikit bantuan software, anda bisa meningkatkan kecepatan internet anda hingga 100%. Baca selengkapnya...

</div>


<div id="tab3" class="tabcontent">

<a href="http://tipspack.blogspot.com/2009/06/trik-memasang-back-to-top.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://3.bp.blogspot.com/_a8HgbhL3M_w/SjZ3AzTrhQI/AAAAAAAAAg4/zdOLB1JMbp8/s320/images.jpg" height="152"/></a>

<p><h3><a href="http://tipspack.blogspot.com/2009/06/trik-memasang-back-to-top.html">Trik Memasang Back to Top </a></h3></p>

rik ini dinamakan: "Back to Top", karena fungsinya adalah membawa anda menuju bagian paling atas blog anda, dengan sekali "click". Widget ini sangat berguna bagi kenyamanan pengunjung blog anda. Terutama jika blog anda memiliki halaman yang panjang. Baca selengkapnya...

</div>


<div id="tab4" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/trik-memasang-wallpaper-pada-flash-disc.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://3.bp.blogspot.com/_a8HgbhL3M_w/SjC_nUTznsI/AAAAAAAAAeI/eaSaj1y_Huw/s320/24l6lck.jpg" height="152"/></a>

<p><h3><a href="http://tipspack.blogspot.com/2009/06/trik-memasang-wallpaper-pada-flash-disc.html">Trik Memasang Wallpaper Pada Flash Disc & Folder</a></h3></p>


Hari gini punya flash Disc ga pake wallpaper? Hallow, kemana aja? Terus begitu buka folder di computer, eh, background nya masih putih polos... Ya! kalau anda masih punya flash disc yang polos dan folder yang membosankan, Silahkan anda lanjutkan membaca artikel ini...

</div>


<div id="tab5" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://1.bp.blogspot.com/_a8HgbhL3M_w/SinwwuhLnWI/AAAAAAAAAbE/O0rGxI3S66A/s320/java.jpg" height="152"/></a>

<p><h3><a href="http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html">Tips Hosting File Javascript Sendiri</a></h3></p>


Jika anda seorang blogger yang akrab dengan HTML/Javascript editing, anda wajib memiliki account untuk hosting Javacript anda sendiri. Kenapa? Karena setiap Website yang menyediakan jasa hosting memiliki bandwidth yang terbatas. Bandwidht adalah: batas maximum transfer data dari satu file host dalam waktu 24 jam. Baca selengkapnya...

</div>


</div>



<script type="text/javascript">

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

</script></div>
</div></left>


Keterangan:
  • Jika anda ingin menambahkan jumlah slide anda, silahkan copy script yang berkedip Dibawahnya. Ganti "tab5" dengan 6,7 dan seterusnya.
  • Yang berwarna Hijau adalah Link ke posting anda
  • Yang berwarna orange adalah judul slide
  • Yang berwarna merah adalah link gambar
  • Yang berwarna biru adalah deskripsi singkat slide anda.
  • angka yang bercetak tebal adalah ukuran panjang dan lebar slide.
  • Angka (3000) adalah kecepatan slide.

Untuk membuat benar-benar sama seperti yang ada di blog saya, anda bisa menambahkan script ini untuk membuat variasi warna background dan border menu slide show tersebut.



<left><div style="border: 1px solid rgb(233, 233,233); padding: 5px; overflow: auto; width: 470px; height: 360px; background-color: rgb(28, 27, 27);">



  • Letakan diatas code: <div style="float:left;margin:0px 10px 0px 0px;padding:5px;height:280px;">
  • Untuk cara mengedit warnanya, anda bisa lihat DISINI.

Ukuran nya harus lebih besar dari ukuran slideshow


  • Tambahkan code: </div> Dibawah code: </script></div>
    </div></left>


SUMBER: http://epg-studio.blogspot.com/

Selamat mencoba


57 comments

ALICE -- NINE said... @ July 19, 2009 at 7:45 AM

KEREN BANGET SOB, TAPI BISA GAK BIKIN TUTOR.. MENAMBAHKAN BACKGROUND PADA MENU TAB VIEW??

ALICE

NINE -- RAINBOWS


KATALOG BUKU AGUS MUSTOFA

A. Setiapermana said... @ July 19, 2009 at 7:47 AM

Pertamax........... good tips, ane mo coba ah...

Seri said... @ July 19, 2009 at 9:10 AM

wah panjangnya kode ini tapi amat manfaat untuk ubahsuai template. dicopy semua untukku simpan thanks sob.

pinkflower said... @ July 19, 2009 at 9:31 AM

enteng ga neh...hehehe...aku mau neh...blog aku berat...

dyos said... @ July 19, 2009 at 10:02 AM

okay deh sob..ohya salam kenal skalian ya..

fia al Kurosawa said... @ July 19, 2009 at 10:06 AM

tipsnya bagus mas, mau nyoba ah...sementara filenya di copas dulu sembari dipelajari, sekalian ijin yaa...ngga di posting di blog koq mas, tp untuk dipelajari dan diujicoba di template aja...trims sharingnya

zoomx Satriyo said... @ July 19, 2009 at 10:29 AM

tipsnya sangat bermanfaat sob...tapi sayang sekali kalau dipakai oleh pemula kaya aku,coz aku suka lupa backup template dulu jadi suka hang kalau gagal masang...sepengalaman aku,script tidak semua kompatible dengan template2 baru...ditunggu komen backnya dihttp://satriyoku.blogspot.com

Tipspack said... @ July 19, 2009 at 10:29 AM

@ ALICE -- NINE,
Sejauh ini aku belom tau sob, tapi tar kalo ada tips nya, bakal ku post...

@ A. Setiapermana,
Whuaha...!!! dah keduluan tuh sama: ALICE -- NINE.
Lain kali harus lebih cepet sob, pake kecepatan cahaya... hehe...

@ Seri said,
Hehe.. itu keliatanya aja panjang, karna itu hasil COPAS yang dipasang di blog ku, biar lebih gampang ngertiin script nya.

@ pinkflower,
Enteng kok, coba aja dulu. Kalo berat boleh dikembaliin kok, atau kasih aja ke kucing.. :D

@ dyos,
Salam kenal juga sob.. :)

@ fia al Kurosawa,
Saya juga trima kasih sobat, sudah bersedia tulis komentar di artikel ini... :)

Tipspack said... @ July 19, 2009 at 10:31 AM

@ zoomx Satriyo,
Ga masalah sob, aku juga masih belajar kok... :)

arunaspot said... @ July 19, 2009 at 11:44 AM

yahud bro tips nya...keren keren..perlu nih diceontek ke blog aku yg lg menuju super simple...
hihihih...

Kami yang Waras... said... @ July 19, 2009 at 3:04 PM

Haiiii...numpang lewat sekalian isi kolom komentar dengan ketidakjelasan...

Mmmm...infonya bagus (basi bgt komennya)
pokoknya oke deh...siapa dulu yg punya...

arunaspot said... @ July 19, 2009 at 3:45 PM

nice inpo (komen jamuran)]


hihihi...

oke donk des kan yg punya eko

oke:eko :p

Tipspack said... @ July 19, 2009 at 3:53 PM

@ Kami yang Waras,
Hehe... makasi... ^_^ (ckckck... ge-er nya...)

@ arunaspot,
Ssssttt... Ngeledek Desti mulu neh... :D
Ga akur-akur ya... ckckck..

arunaspot said... @ July 19, 2009 at 4:05 PM

arunaspot turut berduka cita...hihihi...

Tipspack said... @ July 19, 2009 at 4:14 PM

Kenapa sob???
Hamster nya desti ada yang mati????

Hamster Land said... @ July 19, 2009 at 5:13 PM

Eko,,, klo slideshow tabview, ngeberatin blog ga??
(serius nih nanya)

Tipspack said... @ July 19, 2009 at 5:30 PM

Ga kok... Beneran cobain aja, soalnya Javascriptnya langsung di pasang diatas "/head" jadinya ga perlu code pemanggilan script, hasilnya loading nya tetep enteng... :)

Kalo di blog ku si, kaya ga ada efek nya, enteng banget, cobain aja reload blog ku, pasti langsung muncul, ga pake lama :D

(aku juga jawabnya serius ^_^ )

Kami yang Waras... said... @ July 19, 2009 at 5:35 PM

Hmmmm...ooo gitu yah...

Sipp2... perlu docoba nih kayaknya...

Kami yang Waras... said... @ July 19, 2009 at 5:35 PM

huatchiiiii...

(aduh,,numpang bersin)

Tipspack said... @ July 19, 2009 at 5:41 PM

Yup, lumayan tuh buat promosi artikel..
baru kupasang setengah hari, terus lumayan tuh ada beberapa yang comment di artikel yang ku pasang di slide... :D

Kami yang Waras... said... @ July 19, 2009 at 5:57 PM

hoooo...gitu ya... hehe... :)
nice idea...

Kami yang Waras... said... @ July 19, 2009 at 5:57 PM

Iya,,klo hamster tuh suka gigit,,ama majikannya aja sering gigit,apalagi yg masih kecil2 tuh..ga tau aturan...

mazandrie said... @ July 19, 2009 at 6:03 PM

weeeee....goood posting bro.....bisa ngga dibuatin stap by step tanpa tercampur dengan topik yang lain......hehehhe

Ancis F Ama said... @ July 19, 2009 at 6:07 PM

Info yg bagus nih... nanti akan kucoba, he...he.... aku pasang linknya ya bro....

Miss J said... @ July 19, 2009 at 7:24 PM

So intresting!! Thanks udah mampir,, bisa jadi nambah ilmu disini. Ditunggu trick2 yg lainnya sahabat.

pecintakuliner said... @ July 19, 2009 at 7:49 PM

oke punya nih... tips ini bisa dipake buat wordpress gak ??

Tipspack said... @ July 19, 2009 at 7:58 PM

@ pecintakuliner,
Maav Mba'... Aku belom pernah coba... :)

Andie Gokil said... @ July 19, 2009 at 9:35 PM

ANJRIT!!!!
ke berapahax nih??????
sori sob
telat!!!
belum pake laurier!!!

Andie Gokil said... @ July 19, 2009 at 9:37 PM

ajib sob.
numpang sepam dulu
hidup nyepam!!!!

Andie Gokil said... @ July 19, 2009 at 9:39 PM

kebanyakan tab punyamu sob.

Andie Gokil said... @ July 19, 2009 at 9:45 PM

ada 3 tabnya.
ajiiibb.
udah berkembang tempaltenya.
ga kayak punyaku..
wakakakaka

Andie Gokil said... @ July 19, 2009 at 9:46 PM

udah ah.
cau dulu sob.
mau bokeer
*boong.

Andie Gokil said... @ July 19, 2009 at 9:51 PM

eh
ak ga beneran boker lho!

arunaspot said... @ July 20, 2009 at 12:28 AM

wkwkwkwkw...bukan,hamster dari manchester-england ga jadi dateng ke indonesia... ^^

MOCHAMMAD FATHONNY LESSY said... @ July 20, 2009 at 12:43 AM

bisakah saya coba???

EATR Robot said... @ July 20, 2009 at 3:05 AM

Lama nggak blogwalking.. nyasar kesini nemu tips oke bgt.
Btw mas Eko bs tlg ajarin aku bikin js yahoo pipes? di tunggu artikelnya nih :)

pendi said... @ July 20, 2009 at 4:31 PM

ew,, keren euy..
btw mberat mberatin page gak tu?

Tipspack said... @ July 20, 2009 at 7:18 PM

@ MOCHAMMAD FATHONNY LESSY,
LAngsung dicoba aja mas... :)

@ EATR Robot,
Hehe... Tar aku pelajarin dulu ya... :D

@ pendi,
Ga berat kok, dicoba aja... kalau mau ngetes, refresh page blogku aja, tar ketauan gemana kok berat atau ga'... :)

Arde said... @ July 20, 2009 at 10:06 PM

Thx ko... atas tipsnya...!
eh...sob emank udah punya hostingan script pribadi yha....?

Tipspack said... @ July 20, 2009 at 10:38 PM

@ Arde,
Wokey dah... Iya, aku dah bikin di Ripway.

Liat aja disini:
http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html

Arde said... @ July 20, 2009 at 11:24 PM

hmm....!
okee...oke...oke....!

eh, aq da pa mo ngasih tau nih....!

btw... ternyata ada cara ampuh juga yha buat naekin rank diBlog ini...
yaitu fitur Top commentatornya tuh....!
ga nahannnn....!
buktinya... aq termakan juga dengan tipu muslihat itu...!
but... asyik juga nyaingin commentator laennya...!

trus... banner yang ada di atas benget tuh keren juga yha....!

Tipspack said... @ July 21, 2009 at 12:19 AM

Whuahaha....!!!
Bagaikan terhipnotis ya sob...???
hehe... Lumayan tu sob, game alternatif kalau bosen maen "NEED FOR SPPED" enak balapan jadi "TOP COMMENTATOR" disini aja... lebih menantang... wakakakak... :D

LA said... @ July 27, 2009 at 12:48 AM

Dengan mem-paste script: http://h1.ripway.com/ades40/slideshowtabview.txt, betapa struktur css blog menjadi teramat panjang. Dynamic Drive membuatnya praktis dengan CUKUP nge-link ke script tersebut.
Saya ngintip di balik layar blog ini javasript-nya (http://www.geocities.com/adestd40/mmenu.js) juga masih pakai punya "ades40", bukan milik Mas Ko sendiri, kenapa? Bukankah lebih enak-aman personal-hosting?!

LA said... @ July 27, 2009 at 12:54 AM

CUKUP nge-link ke script tersebut, artinya dititipin di ripway, googlepages, geocities or lainnya. Kemudian di-link sejajar dengan script: mmenu.js-nya. Jadi lebih simpel dan struktur css tidak menjadi terlalu panjang.

Bukankah ke depan, script2 masih akan terus bertambah seiring fungsi2 script lain yang nantinya akan dipasang lagi entah apa yang dimau..

ballwell said... @ July 29, 2009 at 2:02 PM

thanks bro!!!!

Blog Kesuksesan Hidup said... @ July 29, 2009 at 6:27 PM

Makasih sudah berbagi widget yang sangat menarik ini :)

Blog Kesuksesan Hidup said... @ July 29, 2009 at 6:28 PM

Ditunggu info-info menarik lainnya...
Tetaplah berbagi bro :)

Sukses Selalu...

Blog Kesuksesan Hidup said... @ July 31, 2009 at 6:25 AM

Langsung dicoba nih widgetnya... Mudah-mudahan berhasil ya :)

Blog Kesuksesan Hidup said... @ July 31, 2009 at 6:27 AM

Sukses Selalu...

pembatas said... @ August 7, 2009 at 8:52 AM

ini dia nih yang dah saya cari kemana-mana..hehehehe..

rahimm said... @ August 9, 2009 at 9:30 PM

BLOG ANDA SANGAT BESTLAH, SAYA MESTI IKUT PUNYA.
TIP-TIP YANG BERGUNA. TERIMA KASIH DARI MALAYSIA.

Kontes SEO Aristia Wida Rukmi said... @ August 10, 2009 at 4:10 AM

Scriptnya Error. Well format tidak tituup dengan benar

zedz said... @ August 21, 2009 at 2:53 PM

kok gmbarnya gak muncul ya.....??

Anonymous said... @ February 8, 2010 at 11:18 AM

wah2 ternyata HTML. klo soal HTML mah dah isa aku, aku kira softwarenya yg lbh praktis. klo HTML mah tape dech

= JEO = said... @ August 15, 2010 at 5:34 PM

keren...keren... :) susah-suah gmpang..he

ranu said... @ March 30, 2013 at 1:26 PM

trik nya bagus juga gan , akan saya coba langsung deh trik nya .

Anonymous said... @ April 5, 2013 at 6:28 PM

I hardly comment, but after browsing a great deal
of remarks on "Trik Membuat Slideshow Tabview".
I actually do have a couple of questions for you if you do not mind.

Is it just me or do some of the comments come
across like they are left by brain dead folks? :-P And,
if you are posting on other places, I'd like to keep up with anything fresh you have to post. Could you post a list of every one of all your shared sites like your Facebook page, twitter feed, or linkedin profile?

Here is my site ... get ex back

Post a Comment