Most Recent

Cara membuat menu Slide Show Tab View


Sebagian besar pemilik blog pasti ingin melihat blognya elegan, dan tampak cantik jadi di artikel ini saya akan merika tentang cara membuat tab view, tapi bukan tab view yang hanya diam saja, tetapi tab view yg bisa berganti-ganti gambar atau dalam bahasa inggrisnya disebut, slide show.

Artikel anda juga akan langsung terlihat slide show di tab view itu, saya mendapatkan tips ini dari blognya KR (Kang Rohman), dan disini saya akan mengulasnya kembali dengan sedikit pengubahan. Nah apakah anda sudah siap untuk menjalankan cara saya ini, jika siap saya akan tunjukkan caranya.

Cara,

1. Masuk ke halaman dasbor blog anda,

2. Klik Tata Letak,

3. Lalu pilih tab Edit HTML,

4. Lalu copy paste, code dibawah ini, di atas kode ]]></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;

}

}

5. Setelah itu Download dulu script ini, lalu copy paste di atas code </head>,

6. Lalu simpan hasil pekerjaan anda.

7. Setelah itu klik tab Elemen Halaman,

8. Pilih tambah Gadget,

9. Lalu pilih gadget HTML/JavaScript,

10. Lalu copy paste code dibawah ini, di kolom yang telah disediakan,

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



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



</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="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAsPJu_My_KcbLVQbftivqIYT-8Tk44qDAnxNUH0JmjVCLSGqlbiB-dapx9zv6YdvBaG_Dc_vmgTeXdAfYOK63YO40y541hzS5tzvlaieD_Wme5K3SiqZoNp2d4M-e5q_EYo5PxFfuxo/?imgmax=800" height="152" title="obamabush"/></a>



<p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>

U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]

</div>



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

<a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoodoWLDsPq0ju2zQxJ_bMRmeVQUdFMEhfrQCKlu087gnA36QKLwdXGtTAqxbX7B3Ty04RurH-lUqWd4X9LRLR_y7iTDD5-_qQg3DchpGpqFJ-n4yaHgfUi11_PWxwEBt9UwTiKtXQt-4/?imgmax=800" height="152" title="beyone"/></a>

<p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p>



Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]

</div>



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

<a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNlXWxtNAfqaWHdRvPNRDr_yEtijys3wnrDnoVuX1fNEIMvkqE09H5_xvXQgqBThtd-V4GX57Ylp9BsrdzTwwFrZFNBbS6in5Nzejsa0Ea7svI2usSUf3MGhAjBDLVtsys6jeGchOkTOQ/?imgmax=800" height="152" title="Guns N 'Roses"/></a>

<p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>



After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]

</div>



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

<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">

<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkuownq-jUpBY-GWgsvhgPJbaBsDhUou4YQUXxSgXORr-LzpBSY4dW-zHCXlkTdZPaE9OcVAvNBVsCxElOk_oMa-tN-zNlfT3_qv5xqdo0opNiUN99gKZCHkIfItE8MAEdHXHB9kftx8A/?imgmax=800" height="152" title="ipod"/></a>

<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p>



Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]

</div> </div>



<script type="text/javascript">



var mypets=new ddtabcontent("pettabs")

mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init(2000)



</script>

11. Lalu simpan hasil pekerjaan anda.

Catatan,

Code yang berwarna merah, adalah angka tinggi dari widget itu, jika anda ingin mengubahnya bisa saja, misalnya dari 350 menjadi 400.

Code yang berwarna hijau, adalah waktu perpindahan dari satu tab ke tab yang lainya, jika anda ingin menggantinya bisa saja, contoh 2000 menjadi 2100. Semakin besar nilainya maka waktu pndah tab akan semakin lama pindahnya.

http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html, adalah alamat artikel, anda bisa ganti dengan alamat artikel blo anda.

Dan code diatas merupakan code milik kang rohman, jadi aturlah sesuai dengan artikel anda, jika ada yang kurang jelas bisa anda tanyakan disini, saya akan bantu sesuai dengan kemampuan saya. Salam blogger.




Cara membuat menu Slide Show Tab View Cara membuat menu Slide Show Tab View Reviewed by Sueca Arimbawa on 18.57 Rating: 5

14 komentar:

  1. Tutorial yang bermanfaat. Akan lebih nyaman jika format postingannya dirapikan sehingga lebih enak dibaca.

    Salam ukhuwah

    BalasHapus
  2. mantap ilmunya sob, menambah cantik blog kita neh

    BalasHapus
  3. wah...gue belum lama bikin blok neh...,bermanfaat jg ini biar ga gaptek2 amat gue,tapi akunya pa yah...???yg terlalu pinter,jd ga mudeng terus he..he..

    BalasHapus
  4. bagus tuh slide shownya, bisa dipakai kayaknya

    BalasHapus
  5. Wahh . .. mantep kang bisa buat slide show di tab view segala . . oke deh :-*

    BalasHapus
  6. Tutorial yang mantab. Saya juga pakai tapi caranya berbeda

    BalasHapus
  7. Tampil di tab view? belum banyak yang pakai begituan Kang. Jadi nilai lebih tersendiri. Q jg blum pakai

    BalasHapus
  8. kalo pake slide show, kadang blog jadi lambat sob... tapi makasih ya infonya.

    BalasHapus
  9. Keren banget

    http://isnahidaken.blogspot.com

    BalasHapus

Berkomentarlah sesuka hati anda, keluarkanlah unek-unek anda tentang isi artikel blog saya ini. tapi jangan sepaming, berkata kotor, dll yang berhubungan dengan kekerasan dan pelecehan. "SALAM BLOGGER INDONESIA"

Blogger yang baik, adalah blogger yang berkomentar baik"

Flickr Widget

Diberdayakan oleh Blogger.