Jumat, 11 Maret 2011

Trik Membuat Menu Tab View

Apa si Menu Tab View?
Yang satu ini yang disebut sebagai Menu tab view, seperti yang berada di halaman blog saya.



Gunanya adalah untuk menghemat tempat di blog anda, menu ini juga bisa mempermudah pengunjung blog anda untuk melihat seluruh content blog anda.

Langsung saja kita mulai cara membuat menu tersebut:
1. Login ke blog anda lalu buka Layout>Edit HTML
2. Lalu cari Script ini:
]]></b:skin>
(Caranya: tekan ctrl+F lalu copy>paste script tersebut di kotak pencarian>ENTER)

3. Lalu Copy>paste script dibawah ini sebelum code ]]></b:skin>



div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif/* Font Menu Utama Atas */
font-weight: 900;
color: #000/* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #A9F5A9/* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #/* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;

4. Tulisan yang berwarna kuning diatas adalah pilihan ukuran kotak tab, warna dan font. Anda bisa mengganti ukuran dan font nya sesuai yang anda inginkan. Kalau anda ingin mengganti warnanya anda bisa mencari warna dan kode warnanya di halaman utama blog saya.

5. Pasang copy>paste code dibawah ini sebelum kode: </head>

<script src='http://tipspackjs.googlecode.com/files/Tabview1.js' type='text/javascript'/>

6. Kemudian SAVE hasil edit tersebut.

7. Kembali ke layout>Add and Arrange Page Elements>Add a gadget>HTML/javascript. 
Tambahkan di tempat yang anda inginkan, kemudian copy>paste script dibawah ini ke gadget tersebut,SAVE.


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 370px;"&gt;
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 370px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script><span style="font-size: 80%"><a href="http://www.tipspack.blogspot.com"></a></span>



KETERANGAN:

* Kode yang berwarna biru adalah ukuran tab menu anda (bisa diganti sesuai ukuran yang anda inginkan)width= lebar, height=tinggi
* Kode yang berwarna Orange adalah judul menu utama nya (diganti sesuai yang anda inginkan)
* Kode berwarna merah adalah isi dari tab anda, ganti tulisan:
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />


Dengan yang anda butuhkan (bisa isi dengan teks, judul posting, link, comment dll.)

contoh hasilnya:


SELAMAT MENCOBA!

Cara Membuat Slideshow Tabview di Blog

Cara Membuat Slideshow Tabview di BlogKali ini saya akan membahas bagaimana membuat Slideshow Tabview. 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 berkedipDibawahnya. 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>

Selamat mencoba

Cara Membuat Scroll Box Berwarna di Blog

  • 1. Loggin ke Bogger
  • 2. pilih: Layout
  • 3. Add a Gadget, pilih HTML/Javascript, Lalu copy>paste code di bawah ini kedalamnya:
<left><div style="border: 3px solid rgb(2551020); padding: 5px; overflow: auto; width: 140px; height: 80px; background-color: rgb(204, 204, 255);">Tambahkan link blog anda disini</div>
KETERANGAN:
  • Angka-angka yang berwarna biru adalah ukuran kotak nya. Anda bisa ganti dan sesuaikan dengan yang anda mau.
  • [ background-color: rgb(204204255) ] yang ini adalah code warna bacground nya.
  • rgb(2551020) yang ini adalah code warna bingkai nya.
  • Anda bisa mengganti warnanya sesuai dengan yang anda suka. Untuk code warnanya, anda bisa melihat DISINI
Cara mengganti warnaya:
Cara Membuat Scroll Box Berwarna di BlogCotohnya jika anda memilih warna hijau seperti yang terlihat di gambar, maka anda masukan code nya seperti ini:
rgb(162255122)

Jika anda tidak ingin menggantinya, default warna scoll box tersebut
seperti yang terlihat diatas.

  • Cara memasukan link nya, anda lihat tulisan: (Tambahkan link blog anda disini ) disitulah anda akan memasukan link nya.
  • Cara memasang link nya:
<a href="http://Tipspack.blogspot.com/">Tipspack</a><br/>


* Ganti URL: yang berwarna merah dengan link blog yang anda pasang.
* Ganti Tulisan yang berwarna hijau, dengan judul/nama blog nya.
  • SELESAI.

SELAMAT MENCOBA!