Tulisan ini adalah Seri Ketiga, seri lanjutan cara membuat Apple Menu. Sebelum membaca seri ketiga ini, kami sarankan membaca seri ke-1 dulu, atau klik disini. Karena, tulisan pertama adalah yang paling penting.

Seri ketiga ini hadir atas permintaan Mbak Cipiet, di kotak komentar Seri Ke-2. Berdasarkan komentar lalu, Mbak Cipiet ini minta bagaimana membingkai Widget Label dan Arsip, miliknya Blogger, dengan memakai Apple Menu.

Demonya lihat di samping, yaaa........

Selanjutnya, ini adalah langkah-langkah membingkai Widget Label dan Arsip, milik Blogger, dengan Apple Menu.

BABAK KEENAM. Menaruh Label dan Archive

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. Harus sudah sign in di Blogger yaaa....
1. Pilih Tab Edit HTML
2. centang expand widget template
3. cari kode HTML berikut ini:


<div id='ArchiveList'>



4. diatasnya, ada kode berikut ini:


<div class='widget-content'>



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


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



Keterangan; Jadi 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'>



Bagaimana, paham kan...!! Awas, kalo ga paham......heheheh.:) 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, taruhlah Kode berikut ini, dibawahnya div, warna merah cetak tebal, yang kedap-kedip itu:


</div>
</div>



Keterangan; Jadi, keseluruhan bentuknya adalah seperti berikut 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-mu

Bentuknya harus seperti itu lho. Awas kalo ga sama, kulapor Polisi POLSEKTA Kenjeran Surabaya Timur lho.... HAHAHAH.... bercanda...

Memodifikasi Label di Edit HTML
1. cari kode HTML berikut ini:


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



2. diatasnya, ada kode berikut ini:


<div class='widget-content'>



3. Taruhlah Kode berikut ini, dibawahnya <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 dibawahnya ada kode berikut 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 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. Lalu Save Template-mu


Wes, bagaimana hasilnya...!!!!! wes bagus... atau tambah sakit-sakitan. Nek (bahasa jawa: kalau) masih sakit-sakitan dibawa ke RSI Kecamatan Wonokromo Surabaya lho..... :). Dari Kenjeran, Naik Mikrolet line F, warna coklat kekuningan... wekekekekek......


11 comments:

  1. Cebong Ipiet  

    26 Desember 2008 18.42

    wekekekekkeke demi dirikuh
    haduuuh
    sampe hurupnya font 24pixel...ampuuuun
    makasiiiii
    hennah yg sebelumnya pan emg di coba kek gitu
    tpi ngga dikasih div div an makanya xml nya error g ada penutup nya
    makasiiiii di bookmarks...
    mo naek lyn WK menuju wilangun trus minggat menyang bojonegoro maneh

    matur nuwun

  2. Cahaya Biru  

    26 Desember 2008 23.25

    @Cipiet; tenang aja mbak cipiet. Itu bukan tanda marah... kok. Tadi, tanganku mau cepat-cepat. Jadinya, ya begitu....

    pegele wes rodo' ilang. Iki tandane dapat pahala.:)

  3. Cahaya Biru  

    27 Desember 2008 11.44

    TESTING,,,, TESTING,,,,

  4. Cahaya Biru  

    27 Desember 2008 11.53

    TESTInG,,,,TESTIng Comments

  5. qimpol08  

    27 Desember 2008 12.18

    Mas belum ditest, satu, satu dulu ya , habis new bie coba pinda profesi (masi gampang puyeng), kalau mau ngisi di daftar posting dalam menu accr seri 1 gimana ya,

  6. Cahaya Biru  

    27 Desember 2008 12.57

    maksud qimpol08, memasukkan accordion menu ke dalam widget text dan post template??

    kalo itu maksudnya, mas qimpol harus merapatkan seluruh kode HTML-nya. Kode HTML itu, Jangan sampai ada spasi.

    :)

  7. project  

    27 Desember 2008 17.20

    oh yang ini juga mo saya tanya tapi dah keburu ditanya ma ipiet, hehe... (ngaku-ngaku mode on) soalnya kan klo arsip gak bisa di copast, thank's dah buat aya...

  8. Project  

    31 Desember 2008 13.41

    aya, ada PR dari saya

  9. Benlahmen  

    3 Januari 2009 13.08

    Pelangiii...disebrang renjana aku berdiri...pelangi oh pelangi sekarang diriku yg gaptek. Theme yang aku bikin ancur-ancuran gara2 css yang eror ya terpaksa deh masih yang lama.

    PS: sekarang blog ini loadingnya cepet under 30kb pake opera mini. Wekekek...siap-siap kedepan ada proyek bersama. Hubungi saya kalo minat kerjasama (yg pasti tak ajak kalo jadi) mesti penasaran to?

  10. Cahaya Biru  

    3 Januari 2009 16.30

    @Benlahmen; lho, senang juga dengan musik Boomerang yaa.... :). Heheheh....

    Btw, proyek apa mr. benlah?

  11. Rouftracal  

    17 Juni 2009 01.37

    Ane kirim salam ja. dari pada budek,,, aslinya sih pingin buat link tautan, yang ada gambarnya, "masukkan kode ini di blogmu" kok sampe sini.
    ya dari pada terus-terusan budek ane pamit dulu ah.....
    makasih aja.

Posting Komentar

Template Copyright 2009 and Designed By Cahaya Biru