- Back to Home »
- blog , widget »
- Cara Membuat wadah Link yang ringkas
Posted by : RAYPHOTOWORKS CIKARANG
Kamis, 10 Januari 2013
Langkah membuat Sidebar's Schrolling Menu:
1. Lakukan Login.
2. Masuk ke Elemen Halaman.
3. 'Klik' Tambah Gadget kemudian lanjutkan dengan 'klik' HTML/Java Script.
4. Copy paste kode HTML yang terdapat dalam scrholl bar di bawah ini kedalamnya dan biarkan tanpa judul. Kode HTML berada di bawah contoh link yang berwarna-warni.
* Tutorial Blogger
<div class="Schroll Menu"><div style="
width: 208px;
border: 2px solid #61d701;
padding:0px;
height: 317px;
background:url(http://i37.tinypic.com/4pxse9.jpg);">
<div class="menu"><div style="
border:2px solid #0802fe;
width:188px;
padding:4px;
height:25px; text-align: left;
margin:4px;
font:17px Timees New Roman;
color:#0107ff;
font-weight:bolder;
background-image:url(http://i36.tinypic.com/ou9xjb.gif)
;">
Tutorial Blogger</div></div>
<div class="widget-content"><div style="
border:2px solid #0802fe;
overflow:auto;
width:193px;
padding:2px;
height: 255px;
text-align:left;
margin:4px;
font:12px Times New Roman;
background-image:url(http://i38.tinypic.com/25871n8.gif);
color:red;">
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#ffffff; cursor:help;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#ffffff; cursor:ne-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#ffffff; cursor:nw-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#02fbfe; cursor:pointer;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#02fbfe;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#02fbfe;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:help;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="cursor:ne-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="cursor:nw-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="cursor:pointer;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a <li> <astyle="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:help;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:ne-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:nw-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:pointer;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:help;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#0006fc; cursor:ne-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#FFFF00; cursor:nw-resize;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#FFFF00; cursor:pointer;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#FFFF00;" href="LINK" target="new">Nama Link Menu</a></li>
<li> <a style="color:#FFFF00;" href="LINK" target="new">Nama Link Menu</a></li>
</div></div></div></div>
5. Setelah klik simpan dan melihat hasilnya, selanjutnya nama link menu dan URL link menu bisa anda ganti dengan nama dan alamat milik anda.
6. Yang perlu di rubah untuk disesuaikan dengan template anda adalah :
a. Lebar (width), tinggi (height)
b. Warna background ( disesuaikan dengan warna sidebar).
c. Warna nama link bisa dipilih sesuai selera (sudah dilampirkan bervariasi warna).
d. Backgraund bisa menggunakan gambar yang tersimpan dalam image hosting atau hanya berupa kode warna.
e. Nama menu.
f. URL link menu.
g. Apabila diperlukan perubahan, kode teratas untuk bingkai terluar, bagian tengah untuk judul dan yang terbawah untuk bingkai link dan nama-nama menu.
h. Perubahan-perubahan yang diperlukan harus dilakukan dengan hati-hati, jangan sampai ada kode yang hilang karena akan sangat berpengaruh terhadap hasil akhirnya.