Ada yang belum tahu TabView? waduh pak Kemana aja Hari gini gitu!.. Hehe.. :D fiss.. ni ScreenShoot nya :



Waduh, Mirip punyaku ya.. :D hehe..

Biasanya di Setiap Blog kan Cuma ada Satu Tu TabView ya, Sejauh ini dan sepengetahuan saya si kalo besok-besok gak taulah, mungkin karena sudah baca coretan ini atau apa jadi banyak bermunculan Kembar-Kembar yang lain :D hehe..


Begini, Yang Pertama Harus anda lakukan adalah Membuat TabView untuk yang pertama kali, Caranya dapat anda Baca DISINI.

Pastikan TabView Pertama yang anda buat itu Sukses, karena selanjutnya kita akan sedikit BerExperimen.. :D.

Langkah selanjutnya adalah membuat Tab Yang Kedua :

Lakukan Hal yang sama Seperti Pada Proses Pertama ! tetapi PERHATIKAN

Langkah Selanjutnya Pada tahap berikutnya yaitu CLONING Script .js nya.. Perhatikan gambar berikut ini :




Di situ ada tulisan : http://superinhost.com/trikblog/tabview.js , << color="blue">http://aleydoank18.googlepages.com/alim.js ,, script itu sudah saya modifikasi, JIka mau tahu cara modifikasinya Begini ni, Tapi jika tidak mau tahu.. YOi,, Lewat saja.. langsung langkah selanjutnya !!


Copy Link itu dan Paste di NewTab lalu Script ini akan muncul! STOP Tenang.. Santai Bos.. Baca dengan Teliti

function TabView Id, id)
{
var TabView = document.getElementById(TabView Id);

// ----- Tabs -----

var Tabs = TabView .firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript: tabview _switch('"+TabView Id+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView .firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview _switch(TabView Id, id) { tabview _aux(TabView Id, id); }

function tabview _initialize(TabView Id) { tabview _aux(TabView Id, 1); }

Waduh, Kok aku jadi pusing ya lihat script ini,, :D

Lihat Tulisan berwarna Merah yang bertuliskan tabview !! Tugas Anda selanjutnya adalah Menambahkan angka 2 di belakangnnya sehingga Menjadi tabview2 ,, Sudah selesai?

Oke Kita Lanjut, Oh iya, Jika anda membuka script ini dengan Notepad Lakukan Penyimpanan dengan extensi .js pada fileName dan pada SaveAsType Ganti Jadi All Files.

Selanjutnya Lakukan UploadFile .js Tersebut, Saran saya lakukan Upload di Google Page Creator Copy link anda dan Paste Disana (di atas tadi).

Atau Jika tidak sempat, Anda boleh menggunakan URL ini Untuk Mengganti Url Script diatas : http://aleydoank18.googlepages.com/alim.js Tentunya sudah di modifikasi :D

Setelah itu Penyetelan pada CSS anda :

Copy - Paste

div.TabView2 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView2 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: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView2 div.Tabs a:hover, div.TabView2 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView2 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView2 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Letakkan sebelum Kode ]]></b:skin> atau tepat dibawah Kode CSS TabView yang pertama anda buat tadi.

Lalu SIMPAN

Selanjutnya Pada widget HTML Anda

<form action=" tabview2 .html" method="get">
<div class=" TabView2 " id=" TabView2 ">

<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; 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">
tabview2 _initialize(' TabView2 ');
</script>

Lagi Lagi Perhatikan Tulisan Berwarna Merah Pastikan itu Dengan Benar.. Copy Paste Script ini ke Widget HTML Anda.

Selesai

---

Tertarik dengan Artikel-artikel dari aLI

Masukkan E-mailmu disini :

Diimport dari: HERA

Print this post
Sincerely,
Padhang Bulan
Learn more »

Baru Punya satu Menu Tabview? Di sini ada 5 loh.. .
Dengan script yang sudah dimodifikasi, siap pasang.
Tinggal copy-paste!



Artikel ini diinspirasikan oleh salah satu sahabat blogger, yaitu http://hera-ku.blogspot.com dengan tujuan untuk mempermudah sahabat blogger lain untuk memasang lebih dari satu menu tabview. Langsung saja saya kasih script nya. Yang belum tau cara membuat menu tabview, bisa lihat DI SINI, untuk cara pemasanganya dan pengeditanya. Disini saya hanya akan memberikan Tabvview 2-5 dengan script yang sudah dimodifikasi dan siap pasang.

TABVIEW 2

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://h1.ripway.com/tipspack/tabview2.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView2 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView2 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: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView2 div.Tabs a:hover, div.TabView2 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView2 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView2 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview2.html" method="get">
<div class="TabView2" id="TabView2">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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">
tabview2_initialize('TabView2');
</script>

TABVIEW 3

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://h1.ripway.com/tipspack/tabview3.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView3 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView3 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: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView3 div.Tabs a:hover, div.TabView3 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView3 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView3 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView3 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview3.html" method="get">
<div class="TabView3" id="TabView3">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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">
tabview3_initialize('TabView3');
</script>

TABVIEW 4

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://h1.ripway.com/tipspack/tabview4.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView4 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView5 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: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView6 div.Tabs a:hover, div.TabView4 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView4 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView4 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView4 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview4.html" method="get">
<div class="TabView4" id="TabView4">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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">
tabview4_initialize('TabView4');
</script>
<script type="text/javascript">
tabview3_initialize('TabView3');
</script>

TABVIEW 5

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://h1.ripway.com/tipspack/tabview5.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView5 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView5 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: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView5 div.Tabs a:hover, div.TabView5 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView5 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView5 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView5 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview5.html" method="get">
<div class="TabView5" id="TabView5">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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">
tabview5_initialize('TabView5');
</script>
span style="color: rgb(255, 0, 0);" >

MAU PASANG LEBIH DARI 5?
COBALAH SEDIKIT KREATIF UTAK-ATIK SCRIPT, JANGAN KAYAK LELA YANG CUMA NGIMPORT! :))

Diimport dari: Mas Eko

Print this post
Sincerely,
Padhang Bulan

Learn more »

Apa sich Menu Tab View? Yang satu ini yang disebut sebagai Tab View Menu, 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 di bawah ini sebelum code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 121px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #FF8000; /* 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: #FFFFFF; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1C1C1C; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FF8000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #3B240B; /* 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://www.geocities.com/rum_marewa/tabview_marewa.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%">Widget by <a href="http://www.tipspack.blogspot.com">Tipspack </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 kuning 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!

Diimport dari: Eko Kristianto

Print this post
Sincerely,
Padhang Bulan

Learn more »

Mungkin ini seri terakhir dari accordion menu yang saya import dari Cahaya Biru. Seorang yang tidak menampilkan profil dirinya, tapi blognya canggih dan bagus.

BABAK KEENAM.
Menaruh Blog Archive
1. Sign in ke Blogger
2. Pilih Tab Layout | Add Page element
3. Pilih Add Gadget
4. Pilih Blog Archive
5. Save

Menaruh Label
1. Pilih Add Gadget
2. Pilih Label
3. Save

BABAK KETUJUH:
Memodifikasi HTML Label dan Blog Archive, di Tab EDIT HTML

0. Sign in di Blogger
1. Pilih Tab Edit HTML
2. Centang expand widget template
3. Cari kode HTML berikut ini:

<div id='ArchiveList'>

4. Di atasnya ada kode berikut ini:

<div class='widget-content'>

5. Taruhlah kode ini dibawah <div class='widget-content'>, yang kedap-kedip itu:

<div class='applemenu'>
<div class='silverheader'><a href='http://padhangbulan.blogspot.com'>Arsip Blog</a></div>
<div class='submenu'>


Jadi susunannya seperti ini:

<div class='widget-content'>
<div class='applemenu2'>
<div class='silverheader'><a href='http://padhangbulan.blogspot.com'>Arsip Blog</a></div>
<div class='submenu'>
<div id='ArchiveList'>

Selanjutnya..
6. Di bawah kode <div id='ArchiveList'>, yang kedap-kedip itu, ada kode berikut ini:

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>

7. Selanjutnya, letakkan kode ini di bawah: div, warna merah cetak tebal, yang kedap-kedip itu:

</div>
</div>

Jadi, keseluruhan susunannya seperti ini:

<div class='widget-content'>
<div class='applemenu2'>
<div class='silverheader'><a href='http://analisis-fiqih.blogspot.com'>Arsip Blog</a></div>
<div class='submenu'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</div>
</div>

8. Save Template
Bentuknya harus seperti itu.

Memodifikasi Label di Edit HTML

1. Cari kode HTML berikut ini:

<ul><b:loop values='data:labels' var='label'>

2. Di atasnya ada kode ini:

<div class='widget-content'>

3. Taruhlah kode berikut ini di bawah <div class='widget-content'> itu:

<div class='applemenu'>
<div class='silverheader'><a href='http://analisis-fiqih.blogspot.com'> LABEL </a></div>
<div class='submenu'>

4. Setelah ditaruh, maka di bawahnya ada kode ini:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>undefined<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>

5. Taruhlah kode berikut ini di atas kode div yang kedap-kedip itu:

</div>
</div>

Keterangan; Setelah ditaruh, maka secara keseluruhan, bentuknya seperti dibawah ini:

<div class='widget-content'>
<div class='applemenu'>
<div class='silverheader'><a href='http://analisis-fiqih.blogspot.com'>Kategori Artikel </a></div>
<div class='submenu'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>undefined<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</div>
</div>

6. Save Template, selesai..

Print this post
Sincerely,
Padhang Bulan
Learn more »

Tulisan ini adalah lanjutan dari membuat Apple Menu gaya Accordion sebelumnya. Jika belum baca tulisan yang pertama, klik di sini. Tulisan ini hadir karena permintaan mbak Cebong Ipiet. Di komentar yang lalu, Mbak Cipiet meminta cara bagaimana menaruh kode HTML Apple Menu di sidebar.

Tapi, kelihatannya, jika pembahasan langsung menuju modifikasi HTML-nya, tanpa menunjukkan perubahan CSS-nya, itu nanti akan terasa kurang gamblang bagi pembaca lain. Padahal, kita berusaha membuat sejelas-jelasnya. Hasilnya, nanti, akan muncul Apple Menu dengan ukuran "lebar" dan "tinggi" yang berbeda di dalam Blog.


Selanjutnya, ini adalah langkah-langkah memodifikasi CSS beserta kode HTML dan memasang di Blogger.

BABAK KETIGA: Mengedit CSS MENU

1. Lihat Kode CSS berikut ini:

/*ddaccordion Apple Menu Mouse Over
----------------------------------------------- */
.applemenu {
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}

.applemenu div.silverheader a{
background: black url(http://koleksipicture.googlepages.com/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(http://koleksipicture.googlepages.com/silvergradientover.gif);
color: white;
}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

2. Copy kode CSS di atas di notepad atau editing software yang lainnya
3. Ubah simbol .applemenu dengan --> .applemenu02
(gampangnya, cari semua kata applemenu itu. Kemudian, ganti dengan applemenu02)
4. Ganti ukuran lebar dan tingginya, sesukamu. Lebih sempit/lebar atau lebih tinggi/pendek.

(Misalnya: jika ukuran lebar sidebar = 350px, maka saran kami lebar menu ke-1 lebih sedikit = 340px)
(Misalnya: jika sub ukuran sub sidebar = 160px, maka saran kami lebar menu ke-2 lebih sedikit = 150px). Ini dilakukan untuk antisipasi saja. Yang penting, keduanya ada beda ukuran lebar.

5. Setelah modifikasi dilakukan, itu harus di-copy semuanya
6. Kemudian, taruhlah kode CSS baru, yang udah dimodifikasi itu, di atasnya ]]></b:skin>
Jadi, ada dua CSS accordion. "Applemenu" dan "Applemenu02"
7. Save Template

BABAK KEEMPAT: Memodifikasi HTML untuk Apple Menu Ke-2:

1. Perhatiin kode HTML berikut ini:

<div class="applemenu02"> <!--- Pembuka applemenu02--->

<div class="silverheader">
<a href="http://www.analisis-fiqih.blogspot.com">Coba Menu 01</a>
</div>
<div class="submenu">
Some random content here<br />
</div>

<div class="silverheader">
<a href="http://www.blogumulus.blogspot.com"> Coba Menu 05 </a>
</div>
<div class="submenu">
Di sini ISI TULISAN MU / KODE HMTL / JAVASRIPT
(Some random content here)<br />
</div>

</div> <!-- Penutup applemenu02 -->

Keterangan:

0. Yang kedap-kedip, udah dijelaskan di seri pertama
1. Selanjutnya, apa bedanya kode HTML ini dengan kode yang pertama lalu? Inilah bedanya

<div class="applemenu">

<div class="applemenu02">

Tulisan Warna Merah adalah kode HTML pembuka dari Menu ke-1. Sedangkan, Tulisan Warna Coklat adalah kode HTML pembuka dari Menu ke-2.
Kode HTML dari menu yang kedua menggunakan class="applemenu02" sesuai dengan modifikasi CSS-nya. Ya, itulah bedanya, tambahan simbol "02". :)

BABAK KELIMA: Memasang kode HTML di BLOGGER (CARA UMUM)
1. sign in ke BLogger yaa... :)
2. pilih ke TATA LETAK / LAYOUT
3. Pilih Add Gadget
4. Pilih Edit HTML
5. Taruh kode HTML Menu pertama yang sesuai ukuran sidebar di kotak. Terus, Save...
6. Pilih add gadget lagi
6. Begitu pula, taruh Kode HTML Menu kedua, yang telah diedit, di kotak. Terus, save.
7. Save lalu lihat hasilnya
Keterangan:

Jika morat-marit, itu karena ukurannya tidak sesuai. Pindah dengan cara "drag and drop" sesuai sidebar di Page Element

Print this post
Sincerely,
Padhang Bulan

Learn more »

Sebenarnya, jika kita luangkan waktu pergi ke DynmicDrive.com, maka kita akan dapati 'hampir' segala accessories yang kita butuhkan untuk mendandani blog. Terutama bagi yang punya blog pesolek. Seperti apple menu ini. Semula, Lela kira script-nya asli bikinan Cahaya Biru. Ternyata berasal dari DynamicDrive.

Ne contoh-demonya, arahkan mouse kamu ke menu.. .

Padhang Bulan

Tidak seperti para blogger senior dengan segala keahliannya, Lela cuma "bloggirl" penggemar mereka.

Diary Lela

Sekarang ini, pemerintah sedang gencar menyosialisasikan pendidikan gratis, sampai-sampai Bambang Sudibjo selaku menteri pendidikan harus terjun langsung.

Blogumulus

Flickr Photostream, ternyata ga' begitu bersih tampilannya. Kayaknya, juga bikin berat loading blog. Tapi.., entahlah.

Blue Jeans

Some random content here

Coba Menu 05

Some random content here

Taruh Script Java ini di bawah: <head>

<script src='http://mendandaniblog.googlepages.com/jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://mendandaniblog.googlepages.com/ddaccordion.js' type='text/javascript'/>
<script src='http://mendandaniblog.googlepages.com/initapplemenu.js' type='text/javascript'/>

Keterangan:

Script itu memang agak banyak, jadi agak berat. Na.., setelah itu, cari kode:

]]></b:skin>

Kemudian, taruhlah kode CSS berikut ini di atas: ]]></b:skin>

/*ddaccordion Apple Menu Mouse Over
----------------------------------------------- */
.applemenu {
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}

.applemenu div.silverheader a{
background: black url(http://koleksipicture.googlepages.com/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(http://koleksipicture.googlepages.com/silvergradientover.gif);
color: white;
}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

Keterangan:

1. Tulisan Warna Merah (kedap-kedip) = ukuran lebar .
2. Tulisan warna biru (kedap-kedip)= ukuran tinggi.
Kita bisa menyesuaikan ukurannya semau kita. Tapi, jangan lupa, di belakangnya harus ada simbol "px". Misalnya: 100px, 200px, atau 330px, 173px dst.

Masukkan kode HTML berikut ini kedalam gadget Edit HTML/javascript itu:

<div class="applemenu">

<div class="silverheader">
<a href="http://padhangbulan.blogspot.com">Coba Menu 01</a>
</div>
<div class="submenu">
Some random content here<br />
</div>

<div class="silverheader">
<a href="http://elbudur.blogspot.com/">
Coba Menu 02</a>
</div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
</div>

<div class="silverheader">
<a href="http://blogumulus.blogspot.com">
Coba Menu 03</a>
</div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
</div>

<div class="silverheader">
<a href="http://lailatul-budur.blogspot.com">
Coba Menu 04</a></div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>

<div class="silverheader">
<a href="http://padhangbulan.blogspot.com"> Coba Menu 05 </a>
</div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
</div>

</div>

Keterangan

A. Please, lihat kode HTML yang berwarna biru dan tulisan kedap kedip tuh.

Tulisan warna ungu (kedap-kedip) = Link. Kamu boleh biarkan saja, atau ubah dengan link sesukamu

Tulisan warna coklat (kedap-kedip) = Judul yang tampil di halaman blog kita. Gantilah dengan nama judulmu sendiri, sesukamu

Tulisan warna hitam (kedap-kedip)= isi dari menu. Isilah dengan tulisan atau kode HTML/Javascript yang kamu inginkan. Itu bisa widget, kode adsense, dan sebagainya

B. Kode HTML yang berwarna merah adalah kode pembuka dan penutup menu. Awas, jangan sampai ilang ya..
Pembuka -->> <div class="applemenu">
Di sini adalah area menaruh menu tambahan
Penutup -->> </div>

C. Jika ingin menambah menu, copy dan paste seluruh kode yang berwarna biru itu. Taro' di area dalam kode HTML yang merah. Trus, ganti semua tulisan yang kedap-kedip tuh.

Save/simpan, selesai. Coba lihat hasilnya..
Cahaya Biru benar-benar kasih Lela pelajaran yang hebat. Cahaya Biru juga Lela import entry blog-nya secara utuh. Terima kasih, Cahaya Biru..

Print this post
Sincerely,
Padhang Bulan

Learn more »