Tips dan Trik Blogger

Menu bar dengan Widget Link List

Masih Manual Buat Menu, Pada Blog... Duh Ribet deh Mesti Buka HTML kalau mau Nambah atau nge-hapus menu di tambah lagi Bikin Pusing deh bagi yang Gak ngerti HTML :D nah... Gampang kok tenang aja Dunia Blogger selalu menampilkan Hal baru untuk teman-teman semuanya tentunya. Jangan lupa Langganan atau Follow jika ingin mendapatkan artikel lainnya secara UPtoDate :) Pembahasan kali ini Adalah Membuat Menu dengan Widget Link List (Modifikasi WLL Versi 2) Karena Sebelumnya Modifikasi WLL /Widget Link List Untuk Link Teman/ Blogroll Bagi yang Ingin Melihat Videonya di Sini [Contoh Linkbar]

Silahkan Lihat aja dulu yah Gambar di Atas dengan cara klik kanan dan view Image, yang di bawah gambar dunia blogger, itu adalah tampilan Link List saat akan menambahkan atau menghapus Menu, Cukup Simpel kan.

Silahkan Masuk Ke Edit HTML dan Expand Widget Template, supaya lebih cepat silahkan klik link di samping: http://draft.blogger.com/html?blogID=1112329461817557155&tpl=true  /* ganti ID dengan ID blog masing Masing */ secara otomatis anda akan di bawa ke Edit HTML dan plus sudah di centang Expand Widget :/* ini hanya cara saya untuk efektifitas saat editing, cara lainnya ada di sini */ Jangan Pusing yah :d soalnya Agak Banyak Tutorialnya :)

Langkah Pertama Seperti biasa yang pertama pasti cari kode :D Cari kode di bawah ini:

<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>

Jika sudah ketemu silahkan Copy Kode di bawah ini:

</div>
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList10' locked='true' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>

dan letakan Persis di Bawah kode Sebelumnya. Lanjut Pada Tahap ke Dua yaitu Menambahkan kode CSS supaya Link yang tadinya ke bawah menjadi kesamping dan animasi lainnya :) silahkan Copy paste Kode di bawah ini dan Letakan persis di Atas kode ]]></b:skin>



Silahkan Pasang yah Jika Sudah Nih Satu Lagi, Langkah ke Tiga Ini di Buat Untuk Mempermudah Saat Ingin mengganti Warna background, Text, maupun Border. Sekarang Cari Deh Variable definitions biasanya kodenya sperti ini:

<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#EBFFED">


dan seterusnya sperti itu biasanya :d itung aja ada berapa :D Nah Sekarang Pasang Kode di Bawah ini dan Letakan di Atas kode yang tadi :)



Silahkan Simpan Hasil Kerjanya nanti saya koreksi :D kalo berhasil dapet 10 yah :d  /*obsesi guru mode on*/

Sayang jika Ilmu hanya Sekedar Copy Paste, Belajarlah berexperient, Kegagalan menunjukan suatu langkah besar Keberhasilan. :)

Menamabhkan Atau Menghapus Menu: Untuk menambahkan Link/Menu atau menghapusnya, Caranya Mudah Cukup Login Ke Blogger dan Pilih Layout, Selanjutnya Cari yang ada bacaannya Link List dan Klik Edit atau Buka Blog Kemudian Cari yang ada Gambar Toolsnya lihat gambar :) Jika Sudah Silahkan Edit dan Caranya sudah di bahas pada artikel sebelumnya :)
Tutorial Ini Bersumber dari Template Blogger karya http://www.ourblogtemplates.com/ Untuk Memudah kan Teman teman Semua :d
20 Komentar untuk "Menu bar dengan Widget Link List"

yuuuuhhuiiiiiii........
pertamaxxxxxxxx aku kantongi..nech

Dibaca dulu baru di terapin ... baca dulu ya bos ... ~x( kagak ngerti2

kok pinter banget sih!!! wah jadi iri... :-o anni3 liat profil... owww... udah kuliah!!! Q masih SMA!!! (nggak ada hubunganya ya?? 8-})

===== @ Indung: Silahakan Boz... Pelajari, Mungkin agak Susah dikit.. Untuk Penjelasan dan Permasalahannya Saya Berikan Pada Artikel Berikutnya...

==== @ Subagya: Silahkan Pelajari, Sapa Tau Dapet yang Baru... :D Pasti Lebih Asik Kan....?

==== @ Gratisan: Silahkan Baca kemudian Pahami, jangan Takut Untuk mencoba hal baru...

==== @ Anni3: De Kuliah Baru Masuk Sekitar 2 Mingguan, dan Lagian Ilmu Blogger itu Di dapatkan Bukan dari Kuliah Cantik... ;)) Tapi Sejau Mana kita Ingin mengerti dan Mencari Hal baru.. itu bagi Saya Coba Aja banyak Kan yang Baru di Sini... =)) Sayang Jika Ilmu Hanya Sekedar Copy Paste Tanpa kita Tahu Ilmu itu dan Mengembangkannya: Asal Kita Mau belajar Pasti Bisa kok... b-(

keren... ih ni mas ade selalu bikin singkatan2 dehh... contohnya DB (dunia blogger)wwl (widget link list( ;))

keren euy tutorialnya..
o ya, mau ngucapin :
Andai jemari tak kuasa berjabat, setidaknya kata masih dapat terungkap. Dengan segala kerendahan hati, Memohon maaf atas khilaf dan dosa. Selamat idul fitri 1429 H.

Salam

mymoen

DB tuh khn low nggak salah yang di RAVE:D
tukeran link mas

eh... izin copas kode ya... :D
baik deh!!! :D

waaah,template isnaini yg html ada gak bos?

Ikutan oi.., belajar .....!

kok saya gak bisa mulu yach?

walaAaAaaaa....h k0` musSSingn0...............

mahendra aku dah bikin menu tapi kok g bisa jalan.gmn cr br bs dipake..pgnx dari tiap menu tersebut aku isi dengan tulisanku ndiri. plz bntu.. makasie

wah bingung juga nich

aduwh.....lumayan ribet y.....
ajarin dunkz,,,,baru belajar ngblog nich......

Makasih atas informasinya gan :)

oh gtu ya . .
thank ya, ntar aku coba deh

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top