Cara Membuat Slideshow Tabview di Blog

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 " Expand Widget Templates"

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59zYtEtNXJCQmY2cxyk8lG3pvW01YS7lvSoERaGHQjEJBM65uIc0ouPOIUYvGeiu3cunMOH78wt1nagNpA0npDK1mgQK8t3gD1PwPE1NmCCLZjWQUxDB7hFXanlug8f9gKu5sc5m51Q/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jeSnuWB8yL1ikHj5Xs2Q82m-_Gr5US0jIgpNCwFt6rf9Qk-ZkcDDKEga0YnEhikHIQrqphSkJnywugIDKOjecY7Xo6UKIXuLQ_OJ5FEWBoQGJmGDyHLy_kOrfeutO4Qg3-a6OHuZ8A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wu1UmuelKH_Xjdkzc6Z11HKpi3UpzQ6BFw648f5OVyjmry9QZPGeW-mmtCI0dK_LBOL2ma_C-UZ8YwzZOkOnDAYOsblqi7Xr70oV_e-TybZ23md5vwOtEERgsIQCXMemQsMppYJdZQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgozW3yEQ2qd3EufZMxf3ruDPH2an2aIj0QUCXs09FKgmRqjFacHu76EOkkBK1gGl-QhFazu7bLGPXHSO1jDLJsPQ_DurZK0Sv78u1DuDNAu_j9JPfEb94c4AbgazUJMs5UjWNvdnLrxg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcysEmQGs7K7i02WUfY0Kfpv124ry2ftARZ1-ESEMP8v7GHdj8c_LOSeVSGYT6ZrRPi6h4ozf47o-zuI1_rKOXecg0-5uJfsFIbOoyrH7Bv1qTgEZtic7CAbsbSqeDOkZGASv9iicXSw/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