Menu bar dengan Widget Link List

Oleh Ade Sanusi

9.28.2008

Bagikan :

Tweet

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>

/* --- LINKBAR -- Tips Trik Blogger oleh http://dunia-blogger.blogspot.com */ #linkbar { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; position: relative; background: $warnaBackgroundLinkbar; border: 1px solid $warnaBorderUtamaLinkbar; } #linkbar ul { margin: 0px 0px 0px 0px; padding: 5px 5px 7px 5px; text-align: left; list-style-type:none; } #linkbar li { display: inline; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #linkbar h2 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; display: none; visibility: hidden; } #linkbar a { clear: both; margin: 0px -4px 0px 0px; padding: 3px 20px 3px 20px; width:100%; text-decoration:none; font: $jenisHurufLinkbar; color: $warnaTextLinkbar; border-right: 1px solid $warnaPembatasLinkbar; } #linkbar a:hover { color: $warnaTextLinkbarHover; background: $backgroundHoverLinkbar; }

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 :)

<Variable name="warnaBorderUtamaLinkbar" description="Warna Border Utama Linkbar" type="color" default="#C94093" value="#EBFFED"> <Variable name="warnaBackgroundLinkbar" description="Warna background Likbar" type="color" default="#C94093" value="#000000"> <Variable name="warnaPembatasLinkbar" description="Warna Pembatas Antar Link" type="color" default="#9D1961" value="#00FF00"> <Variable name="warnaTextLinkbar" description="Warna text untuk Linkbar" type="color" default="#ffffff" value="#ffffff"> <Variable name="backgroundHoverLinkbar" description="Warna Background Saat Cursor di Arahkan" type="color" default="#ffffff" value="#ffffff"> <Variable name="warnaTextLinkbarHover" description="Warna Teks Linkbar saat di arahkan cursor" type="color" default="#9D1961" value="#ff0000"> <Variable name="jenisHurufLinkbar" description="Jenis Huruf untuk Linkbar" type="font" default="normal normal 77% Verdana, sans-serif" value="normal bold 74% Arial, sans-serif">

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

Tag : Tips and Trik, Unik, Widget