blm prnh dibaca cara memasang sub menu diblog

8/16/2019 Blm Prnh Dibaca Cara Memasang Sub Menu Diblog

1/16

Jika anda memperhatikan tampilan blog jadipintar.com, lihatlah sederetan

kotak berwarna biru dengan tulisan berwarna putih berisi daftar menu

seperti; SALAM I DO'A, SHALAT I PUASA I MATI I WARIS I KIAMAT, dll,

(tampilan sebelum ini, yang sekarang lihat model 2 di bawah-red ) lalu jika

kursor disentuhkan, akan tergulung layar yang memuat sekian banyak judulartikel, Itulah yang disebut dengan Menu dan Su!Menu ar.

Menu dan Sub-menu ar sangat dibutuhkan guna men!ari informasi

berdasarkan pada kategori atau sub menu " Memberi sub menu bar juga

membuat Semua judul artikel bisa ditampilkan di layar dalam satu tatapan

mata; blog kita tampak lebih ilmiah, teratur, dan simpel"

#ika anda berminat memasangnya di blog, artinya anda orang yang berfikir

sistimatis dan menyukai keteraturan"Selamat men!oba"

Lan"#a$ Pema%an"an

- $lik De%ain

- %ilih Temp&ate lalu pilih dit HTML

- %ilih&klik Lanjut#an

- %ilih&klik (pand Temp&ate Wid"et

'ari scrift berikut

)di* c&a%%+'main!outer' atau

)di* id+'main!-rapper' atau

)di* id+'main'

gar lebih mudah, klik saja / pada keyboard lalu pilh salah satu s!rift diatas"

erdasarkan pengalaman saya setelah membolak balik informasi di

www"google"!om maka yang !o!ok adalah

di* c&a%%+'main!outer'

isa jadi beda dengan template yang lain*

Setelah dapat, copa% s!rift berikut tepat diata% s!rift yang di!ari tadi

+style

& -- Menu .ori/ontal 0 Sub Menu-- &

1!at-na 3ba!kground1456778;margin9 45p:;padding9;height5p:;<

1!at-na a 3 !olor1eee; te:t-de!orationnone; te:t-shadow 1948= 9p: 4p:

9p:;border-right4p: solid 1456778;<1!at-na ahoer 3 !olor1fff; <

1!at-na lihoer 3 ba!kground1999; <

1!at-na a span 3 font-family>erdana, ?enea, sans-serif; font-si/e44p:;

font-stylenormal; font-weight899; !olor1fff; te:t-shadownone;<

1!at-na "na-des!ription 3 displayblo!k; <

1!at-na ahoer span 3 !olor1fff;


2/16

1se!na, 1se!na ul 3 positionrelatie; /-inde:499; margin9; padding9;

list-stylenone; line-height4; ba!kground19d5e==; <

1se!na a 3 font-family?eorgia, @Aimes Bew Coman@, Aimes, serif; font-

styleitali!; font-weightD99; font-si/e48p:; displayblo!k; /-inde:499;

padding9 45p:; line-height5p:; te:t-de!orationnone;<

1se!na li 3 floatleft; width auto; height5p:;<1se!na li ul 3 position absolute; left -777em; width 299p:; top5p:<

1se!na li ul li 3 height9p:; border-top4p: solid 1fff; <

1se!na li ul li a 3 font-family>erdana, ?enea, sans-serif; width4=9p:; line-

height9p:; padding9 49p:; font-si/e44p:; font-stylenormal; font-

weight899; !olor1eee; <

1se!na li ul ul 3 margin -9p: 9 9 4=9p:; <

1se!na lihoer ul ul, 1se!na lihoer ul ul ul, 1se!na li"sfhoer ul ul,

1se!na li"sfhoer ul ul ul 3 left-777em; <

1se!na lihoer ul, 1se!na li lihoer ul, 1se!na li li lihoer ul, 1se!na

li"sfhoer ul, 1se!na li li"sfhoer ul, 1se!na li li li"sfhoer ul 3 left auto; <1se!na lihoer,1se!na li"hoer 3 positionstati!; <

1!at-na 1se!na 3width499E;margin9 auto;<

+&style

+di idFG!at-naG

+ul !lassFGflG idFGse!naG

+li+a hrefFG1Geranda+&a+&li

+li+a hrefFG1GMenu 4+&a+&li

+li+a hrefFG1GMenu 2+&a

+ul idFGsub-!ustom-naG

+li+a hrefFG1GSub Menu2 a+&a+&li+li+a hrefFG1GSub Menu2 b+&a+&li

+&ul

+&li

+li+a hrefFG1GMenu+&a

+ul idFGsub-!ustom-naG

+li+a hrefFG1GSub Menua+&a+&li

+li+a hrefFG1GSub Menub +&a+&li

+&ul

+&li

+li+a hrefFG1GMenu8+&a+ul idFGsub-!ustom-naG

+li+a hrefFG1GSub Menu8a+&a+&li

+li+a hrefFG1GSub Menu8b +&a+&li

+&ul

+&li

+li+a hrefFG1GMenu5+&a+&li

+&ul


3/16

+&di

P01LASA0 2

3. 4ara mema%u##an a&amat URL2

?anti tanda 5 (warna biru) dengan &in#6ur& yang anda inginkan" isa jadi linkposting atau label (katagori) yang ada pada blog anda"

2" 4ara menu&i%#an judu& menu atau judu& po%tin"an2

?anti Aulisan -arna iru dengan nama menu dan nama %u menu yang anda

inginkan"

" 4ara merua$ &ear menu silakan !ari kode

1!at-na 3ba!kground1456778;margin9 45p:;padding9;height5p:;< ---

baris ke-" $emudian tambahkan kode (width799p:) di antara 3 dan


4/16

H48" 1se!na a 3 font-family?eorgia, @Time% 0e- Roman@, Aimes, serif;

font-

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar "

- Jalu simpanlah&%a*e"

Saran ac# up dulu template anda sebelum merubah&menambah s!rift diatas, agar

bisa dimanfaatkan kembali jika ada masalah dengan penambahan sr!ritf diatas"

Kntuk menghilangkan tampilan tampilan dobel dengan Jaman Ktama,

- Maka ikutilah saran berikut

- Masuk ke Menu Laman

- Jalu pilih tampi&an $a&aman dengan memilih @ jan"an tampian@

! Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan s!rift

yang kita ketikkan tadi"

log sudah bisa dipublikasikan"""

pabila melalui !ara yang kami bagikan ini belum berhasil, !oba sahabat ulangi

lagi dengan sabar" jika berkali-kali memang tidak bisa, sahabat bisa

berkonsultasi melalui komentar di bagian bawah ini"

Tip% Mema%an" Su Menu Di Tata Leta#6Side =ar =&o"

Setelah tutorial di atas memasang menu dan sub menu pada halaman artikel,

kali ini masih tetap memasang menu dan subnya, tapi di sisi luar halaman

postingan (side bar), !aranya

4" Masuk ke da%or &o""er anda

2" %ilih Tata Leta# atau Jay Lut

" $lik Add >ad"et & Aambah ?adget

8" %ilih HTML61A?AS4RIPT"

(iarkan kolom judul nama gadget kosong, lalu !opy paste kode di bawah ini

ke kolom .AMJ yang tersedia)

+di idF@Ci!kyMenu@

+di idF@Ci!kybo:@

+ul idF@pun!h@

+li+a hrefF@[email protected]+&a+&li

+li

+a hrefF@1@Sample %age+&a

+ul

+li


5/16

+a hrefF@1@Sub %age 14+&a

+ul

+li+a hrefF@1@Sub Sub %age 14+&a+&li

+li+a hrefF@1@Sub Sub %age 12+&a+&li

+li+a hrefF@1@Sub Sub %age 1+&a+&li +&ul

+&li

+li+a hrefF@1@Sub %age 12+&a+&li




+&ul

+&li

+li+a hrefF@1@Sample %ost+&a+&li

+li+a hrefF@1@log %age+&a+&li

+&ul

+&di

+&di

dit semua nama menu sesuai keinginan anda" #angan lupa mengganti tanda 1

dengan alamat KCJ yang anda inginkan

5" $lik Sa*e6Simpan

tur posisi gadget drop down menu hori/ontal ini di tempat yang anda inginkan,

lalu klik tombol SIM%B SAJB di bagian kanan atas layar"

#ika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat

sebuah hori/ontal drop down menu di tempat yang anda inginkan"

Kntuk Menambah Item di dalam drop down menu hori/ontal ini sangatlah

mudah

Silahkan !ari pada bagian akhir ada kode seperti ini


+&ul

Aepat di bagian atas +&ul bisa disisipkan menu baru, dan akan terlihat sepertidi bawah ini


+li+a hrefF@JIB$ CK@A$S CK+&a+&li

+&ul

#ika menu tambahan lebih dari satu akan terlihat seperti di bawah ini



6/16

+li+a hrefF@JIB$ CK 4@A$S CK 4+&a+&li


+li+a hrefF@JIB$ CK n@A$S CK n+&a+&li

+&ul

#ika salah satu menu tambahan mempunyai sub menu, maka perhatikan

kode +&li menu tersebut yang diturunkan untuk membuka ruang baru bagi

sub menu di dalam menu tersebut



+li+a hrefF@JIB$ CK 2@A$S CK 2+&a

+li+a hrefF@JIB$ CK SK MBK 4@SK MBK 4+&a+&li

+li+a hrefF@JIB$ CK SK MBK 2@SK MBK 2+&a+&li

+&li

+li+a hrefF@JIB$ CK n@A$S CK n+&a+&li

Mode& #e!@.

(terpasang di jadipintar"!om saat ini)

Ini adalah model drop down bertingkat yang bisa mengakomodir anatara menu

dan submenu kemudian sub submenu dst" terserah kebutuhan; juga bisa saja

hanya memasang menu saja (label) untuk lebih simpelnya" Kntuk !ontoh

silakan lihat di bagian atas blog ini"

Skripnya adalah

+style

1menu

3

width 499E;

margin 9;

padding 49p: 9 9 9;

list-style none;ba!kground 1999999;

ba!kground -mo/-linear-gradient(1888, 1999999);

ba!kground -webkit-gradient(linear,left bottom,left top,!olor-stop(4,

1444),!olor-stop(4, 1888));

ba!kground -webkit-linear-gradient(1888, 1444);

ba!kground -o-linear-gradient(1888, 1444);


7/16

ba!kground -ms-linear-gradient(1888, 1444);

ba!kground linear-gradient(1888, 1444);

-mo/-border-radius 59p:;

border-radius 59p:;

-mo/-bo:-shadow 9 2p: 9p: 17!7!7!;-webkit-bo:-shadow 9 2p: 9p: 17!7!7!;

bo:-shadow 9 2p: 9p: 17!7!7!;

<

1menu li

3

float left;

padding 9 9 49p: 9;

position relatie;

line-height 9;

<

1menu a

3

float left;

height 25p:;

padding 9 25p:;

!olor 1777;

te:t-transform upper!ase;

font bold 42p:&25p: rial, .eleti!a;

te:t-de!oration none;

te:t-shadow 9 4p: 9 1999;

<

1menu lihoer a

3

!olor 1fafafa;

<

html 1menu li ahoer & I6 &3

!olor 1fafafa;

<

1menu lihoer ul

3

display blo!k;


8/16

<

& Sub-menu &

1menu ul

3

list-style none;margin 9;

padding 9;

display none;

position absolute;

top 5p:;

left 9;

/-inde: 77777;

ba!kground 1888;

ba!kground -mo/-linear-gradient(1888, 1444);

ba!kground -webkit-gradient(linear,left bottom,left top,!olor-stop(9,

1444),!olor-stop(4, 1888));

ba!kground -webkit-linear-gradient(1888, 1444);

ba!kground -o-linear-gradient(1888, 1444);

ba!kground -ms-linear-gradient(1888, 1444);

ba!kground linear-gradient(1888, 1444);

-mo/-bo:-shadow 9 9 2p: rgba(255,255,255,"5);

-webkit-bo:-shadow 9 9 2p: rgba(255,255,255,"5);

bo:-shadow 9 9 2p: rgba(255,255,255,"5);

-mo/-border-radius 5p:;

border-radius 2p:;

<

1menu ul ul

3

top 9;

left 459p:;

<1menu ul li

3

float none;

margin 9;

padding 9;

display blo!k;


9/16

-mo/-bo:-shadow 9 4p: 9 1444444, 9 2p: 9 1DDDDDD;

-webkit-bo:-shadow 9 4p: 9 1444444, 9 2p: 9 1DDDDDD;

bo:-shadow 9 4p: 9 1444444, 9 2p: 9 1DDDDDD;

<

1menu ul lilast-!hild3

-mo/-bo:-shadow none;

-webkit-bo:-shadow none;

bo:-shadow none;

<

1menu ul a

3

padding 49p:;

height 49p:;

width 49p:;

height auto;

line-height 4;

display blo!k;

white-spa!e nowrap;

float none;

te:t-transform none;

<

html 1menu ul a & I6 &

3

height 49p:;

<

first-!hild0html 1menu ul a & ID &

3

height 49p:;

<

1menu ul ahoer3

ba!kground 194=6ba;

ba!kground -mo/-linear-gradient(198a!e!, 194=6ba);

ba!kground -webkit-gradient(linear, left top, left bottom, from(198a!e!),

to(194=6ba));

ba!kground -webkit-linear-gradient(198a!e!, 194=6ba);


10/16

ba!kground -o-linear-gradient(198a!e!, 194=6ba);

ba!kground -ms-linear-gradient(198a!e!, 194=6ba);

ba!kground linear-gradient(198a!e!, 194=6ba);

<

1menu ul lifirst-!hild a3

-mo/-border-radius 5p: 5p: 9 9;

border-radius 5p: 5p: 9 9;

<

1menu ul lifirst-!hild aafter

3

!ontent GG;

position absolute;

left 9p:;

top -=p:;

width 9;

height 9;

border-left 5p: solid transparent;

border-right 5p: solid transparent;

border-bottom =p: solid 1888;

<

1menu ul ul lifirst-!hild aafter

3

left -=p:;

top 42p:;

width 9;

height 9;

border-left 9;

border-bottom 5p: solid transparent;

border-top 5p: solid transparent;

border-right =p: solid 1888;<

1menu ul lifirst-!hild ahoerafter

3

border-bottom-!olor 198a!e!;

<

1menu ul ul lifirst-!hild ahoerafter


11/16

3

border-right-!olor 198a!e!;

border-bottom-!olor transparent;

<

1menu ul lilast-!hild a

3

-mo/-border-radius 9 9 5p: 5p:;

border-radius 9 9 5p: 5p:;

<

& 'lear floated elements &

1menuafter

3

isibility hidden;

display blo!k;

font-si/e 9;

!ontent @ @;

!lear both;

height 9;

<

html 1menu 3 /oom 4; < & I6 &

first-!hild0html 1menu 3 /oom 4; < & ID &

+&style

+ul idF@menu@

+li+a hrefFG&G.ome+&a+&li

+li+a hrefFGhttp&&namablog"blogspot"!om&G relFGnofollowG

targetFGNblankGOrop menu+&a

+ul

+li+a hrefFGhttp&&namablog"blogspot"!om &G relFGdofollowG

targetFGNblankGMenu 4+&a+&li

+li+a hrefFGhttp&&namablog"blogspot"!om &G relFGdofollowGtargetFGNblankGMenu 2+&a+&li


targetFGNblankGMenu +&a+&li




12/16



+&ul

+&li

+li+a hrefFGhttp&&namablog"blogspot"!om &G relFGnofollowGtargetFGNblankGOrop menu 2+&a

+ul






targetFGNblankGMenu +&a

+ul


targetFGNblankGMenu "4+&a+&li



+li+a hrefFGhttp&&namablog"blogspot"!omG relFGdofollowG

targetFGNblankGMenu "+&a+&li



+&ul

+&li





+&ul

+&li

+li+a hrefFGhttp&&namablog"blogspot"!om &G relFGnofollowGtargetFGNblankGOrop menu +&a

+ul






13/16


targetFGNblankGMenu +&a+&li



+li+a hrefFGhttp&&namablog"blogspot"!om &G relFGdofollowGtargetFGNblankGMenu 5+&a+&li

+&ul+&li+&ul

$eterangan

4" Silakan ganti tulisan berwarna merah namablog"blogspot"!om dengan KCJ

alamat blog anda"

2" Skrip ini bisa dipasang di side bar (luar artikel) atau pun di dalam artikel"

- Kntuk di sede bar, seperti bisa anda ke edit blogger- Aata letak - Aambah

?adget, dst"

- Kntuk di dalam artikel, anda mesti ke Aemplate-dit .AMJ dst", dan agar

bisa terpasang di bagian paling atas blog, silakan !opas skrip ini di atas

kode )6$ead"

PertanBaan TeranBa# Untu# Materi Ini

3. >anti Warna ac#"round

ldy Madani2= Pebruari 2948 4="

Tanya:

?imana 'ara ?anti Qarna a!kground arnya R

Jawab:

?ampang, pada skrip baris ke- ada tulisan """"""1456778

gantilah kode warna ba!kground tersebut dengan kode warna sesuai selera

anda" Oaftar kode warnanya silakan klik di sini"

Selamat berkreasi"

@. Mema%u##an Arti#e& #e Su menu

oby"422 Maret 2948 29"DTanya:

gan !ara agar postingan kita ada di submenu gimana !aranya

Jawab:

'ara mengisi url, masuklah dari JL??C, lalu pilih %LS, klik OIACIA$B,

lalu pada judul artikel yang akan kita masukkan klik JI.A" 'opy alamat url

yang tampak di atas, lalu pastekan ke kolom submenu

http://www.jadipintar.com/2013/12/Cara-Mengganti-Warna-Background-Gambar-Tulisan-dan-Garis-Di-Blog.htmlhttp://www.jadipintar.com/2013/12/Cara-Mengganti-Warna-Background-Gambar-Tulisan-dan-Garis-Di-Blog.html


14/16

Semoga bisa dipahami"

/. 4ara Mema%an" Su menu

Iwhante endi45 Maret 2948 4"2D

Tanya:Maksih ilmunya ?an

?an ane dah buat menunya, tp gk bsa buat submnunya" Arus !ara biar submnu

tadi mngrah ke postingan trntu gmna yaR

Jawab:

%ada skript yang memuat @Menu 4, Menu 2 dll, rubahlah kode G1G dengan

alamat KCJ postingan yang akan dipasang, kata @Menu 4@ rubah dengan judul

yang ingin ditampilkan di layar"

G1G F lamat KCJ postingan yang akan ditampilkan (sub menu)

@Menu 4, Menu 2 """"""F #udul postingan yang akan ditampilkan di layar"

4" 'ara memasang @G1G@ (KCJs)

- Masuk dari dasbor (jangan !opy-paste alamat KCJ dari homepage)

- %ada judul postingan yang ingin kita pasang klik @lihat@

- kan tampil alamat KCl-nya di kotak pen!arian atas, lalu @!opy@

- %aste-kan pada posisi G1G di skript

2"'ara memasang @Menu 4, Menu 2""""" @, anda tinggal tulis judul yang ingin

ditampilkan dari postingan tersebut, terserah apa yang sesuai dengan judul

saja" Misalnya @!ara membuat blog keren@, @%engertian log Oofollow@, atau apa

saja terserah"

?ampang kan R

SJMA MB'L"


15/16

panah hitam di seluruh sisi kiri kotak, untuk membuka semua kode yang

tersembunyi)"

- 'opy seluruh isi skrip, paste-kan ke Boteped

#ika proses anda mengalami gangguan, anda akan bisa kembali ke tampilan

semula dengan !opas skrip yang di simpan di notepad tadi"Semoga menjadi paham"

:. Men"atur Lear =ac#"round Menu dan judu&nBa

Tanya:

kah 29Jgend2 September 2948 44"4D

Byang masih blon berhasil, !oba terus dan jangan takut salah asal kita inget

@%ratinjau@ dulu

Semangaaaat"""""

oh iye gan ane udah hampir berhasil tinggal dikit lagi, ane punya 2 pertanyaan

4" S!ript yang mana nyang buat ngatur lebar a!k ground menu arR

itu lho blo!k warna biru klo dr !ontoh yg agan kasih diatas ane udah !oba ganti

beberapa s!ript

yang menurut ane mengatur soal ukuran tapi masih gagal"

makasih banyak gan, ane doain tambah ganteng"""" ))

2" pakah kita bisa mengatur %anjang pendeknya te:t @nama@ Menu atau Sub

MenuR

Soalnye Sub menu nyang mo ane buat lumayan panjang, udah ane !oba tp

begitu ane

%ratinjau Ae:tnya kepotong gan""""

Jawab:

4" Sudah saya tambahkan di artikel atas, silakan lihat @%enjelasan@ poin "

2" isa di!oba, skrip baris ke-4=, @width@ nya ditambah jadi 99 p: atau lebih

terserah ente, kasih tahu kalau berhasil ya R

Jain kali jangan pakai memuji, anda orang ke 2"999 yang ndoain begitu"

;. 4ara Men"#&a%i9i#a%i Su MenuTanya:

de Cahmat26 Boember 2948 47"49

?an gmna !aranya nulis di menu atau submenuR tp bukan link ya, kalau link

saya tau" !ontohnya di blog punya agan ada menu salat, puasa dll" nah kan pas

di klik langsung ke halaman tuliasan blog agan" Aks

Jawab:


16/16

$lasifikasikan artikel anda berdasrkan label, nama pada menu hakikatnya

adalah nama label, sehingga ketika anda klik menu @T@, maka akan ditampilkan

semua artikel dari label @T@ tersebut, di!oba lagi ya, anda pasti bisa"

. 4ara Mema%u##an URLTanya:

surya adi saputraD September 2948 47"2=

trima kasih mas berhasil,,, oya mas kalo yang tanda 1 kan di ganti Krl menu

atau sub menu, itu !aranya gimana ya mas saya kurang paham, trima kasih,,

Jawab:

- uka @Oasbor blogger@

- klik @%os@ lalu klik @diterbitkan@

- %ilih artikel yang mau di masukkan KClsnya, klik @lihat@, nanti di kotak

pen!arian bagian atas (sear!h bar) alamat KCJ nya akan tampil" lok laku !opy"

- .apus tanda 1 ganti dengan alamat KCJ tadi (paste)"

yo bergabung menjadi %B?.PJ J-UKCGB dalam grup whatsapp" Info dan

pendaftaran untuk ikhwan klik MUSHA 3 dan untuk akhawat klik MUSHAAH

3

Semoga Bermanfaat
http://www.jadipintar.com/2015/11/MUSHAF-1-komunitas-penghafal-al-quran-mandiri-khusus-laki-laki.htmlhttp://www.jadipintar.com/2015/11/MUSHAFAH-1-majelis-hafalan-al-quran-mandiri-dan-diskusi-khusus-muslimah-akhawat.htmlhttp://www.jadipintar.com/2015/11/MUSHAFAH-1-majelis-hafalan-al-quran-mandiri-dan-diskusi-khusus-muslimah-akhawat.htmlhttp://www.jadipintar.com/2015/11/MUSHAF-1-komunitas-penghafal-al-quran-mandiri-khusus-laki-laki.htmlhttp://www.jadipintar.com/2015/11/MUSHAFAH-1-majelis-hafalan-al-quran-mandiri-dan-diskusi-khusus-muslimah-akhawat.htmlhttp://www.jadipintar.com/2015/11/MUSHAFAH-1-majelis-hafalan-al-quran-mandiri-dan-diskusi-khusus-muslimah-akhawat.html

blm prnh dibaca cara memasang sub menu diblog

Documents