Membuat Friend Link dengan CSS

Membuat friend link dengan menggunakan Full down-Menu yang menggunakan CSS, merupakan menu yang sering di pakai oleh kebanyakan para pembuat website atau pun blog, menu yang saya maksud adalah... [lihat friend link punya saya yang saya simpan di sebelah bawah, yang di mulai dari huruf A sampai Z ] nah menu link tersebut yang saya maksud, jadi untuk para blogger atau pun pengguna blog lain-nya, manfaat dari menu tersebut adalah lebih mudah untuk di akses, coba bandingkan dengan menu link yang biasanya tidak tersimpan menurut abjad, si pemilik link akan sangat kelabakan mencari link-nya sendiri....
nah dengan menu yang menggunakan CSS ini akan lebih mudah dan tentunya akan lebih praktis untuk mempermudah pencarian link yang sudah terpasang..

Anda saya yakin sudah pada tahu, yang namanya CSS pada saat loading page akan mempengaruhi loading page, apalagi jika anda sudah banyak menggunakan CSS... untuk itu yang mau mencoba silahkan di coba.

Langkah-langkahnya sebagai berikut.
1. yang pertama anda login ke blogger.
2. klik tataletak dan klik edit html.
3. Centang kotak kecil expand widget.
4. cari kode </head>
5. kalau sudah ketemu simpan kode CSS di bawah ini tepat sebelum kode </head>

<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #3F3F3F;width:100%; border:solid 1px #808080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Times New Roman, Times, serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color: #FFFFFF;
background-color: #3F3F3F;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #808080; border-left:solid 1px #808080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #3F3F3F;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #3F3F3F; width:1px}
.pd_menu_01 ul li:hover a {background-color:#000000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:15em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #808080; border-bottom: solid 1px #808080; background-color:#804000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#000000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:15em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#804000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:15em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #808080; border-bottom: solid 1px #808080; background-color:#804000; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Silahkan berkreasi sendiri untuk mengubah kode warna di atas.
6. klik simpan.

langkah selanjutnya. anda masuk ke tataletak, tambah gadget, dan pilih html.
kemudian masukan kode di bawah ini. kemudian anda edit sendiri mengikut abjad link teman anda.
ini kode HTML nya.

<div class="pd_menu_01 ">
<ul><li><a href="">Friend Link</a>
</li></ul>

<ul><li><a href="#">A</a>
<ul>
<li><a href="#" class="lastone">A.test</a></li>
</ul>
</li></ul>

<ul><li><a href="#">B</a>
<ul>
<li><a href="#" >B1</a></li>
<li><a href="#" >B2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">C</a>
<ul>
<li><a href="#" >C1</a></li>
<li><a href="#" >C2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">D</a>
<ul>
<li><a href="#" >D1</a></li>
<li><a href="#" >D2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">E</a>
<ul>
<li><a href="#" >E1</a></li>
<li><a href="#" >E2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">F</a>
<ul>
<li><a href="#" >F1</a></li>
<li><a href="#" >F2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">G</a>
<ul>
<li><a href="#" >G1</a></li>
<li><a href="#" >G2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">H</a>
<ul>
<li><a href="#" >H1</a></li>
<li><a href="#" >H2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">I</a>
<ul>
<li><a href="http://www.muksin.com/" >Informasi peternakan ayam</a></li>
<li><a href="#" >I2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">J</a>
<ul>
<li><a href="#" >J1</a></li>
<li><a href="#" >J2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">K</a>
<ul>
<li><a href="#" >K1</a></li>
<li><a href="#" >K2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">L</a>
<ul>
<li><a href="#" >L1</a></li>
<li><a href="#" >L2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">N</a>
<ul>
<li><a href="#" >N1</a></li>
<li><a href="#" >N2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">M</a>
<ul>
<li><a href="#" >M1</a></li>
<li><a href="#" >M2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">O</a>
<ul>
<li><a href="#" >O1</a></li>
<li><a href="#" >O2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">P</a>
<ul>
<li><a href="#" >P1</a></li>
<li><a href="#" >P2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Q</a>
<ul>
<li><a href="#" >Q1</a></li>
<li><a href="#" >Q2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">R</a>
<ul>
<li><a href="#" >R1</a></li>
<li><a href="#" >R2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">S</a>
<ul>
<li><a href="#" >S1</a></li>
<li><a href="#" >S2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">T</a>
<ul>
<li><a href="#" >T1</a></li>
<li><a href="#" >T2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">U</a>
<ul>
<li><a href="#" >U1</a></li>
<li><a href="#" >U2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">V</a>
<ul>
<li><a href="#" >V1</a></li>
<li><a href="#" >V2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">W</a>
<ul>
<li><a href="#" >W1</a></li>
<li><a href="#" >W2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">X</a>
<ul>
<li><a href="#" >X1</a></li>
<li><a href="#" >X2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Y</a>
<ul>
<li><a href="#" >Y1</a></li>
<li><a href="#" >Y2</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Z</a>
<ul>
<li><a href="#" >Z1</a></li>
<li><a href="#" >Z2</a></li>
</ul>
</li></ul>

</div>

Klik simpan,
selesai
semoga bisa membantu.
salam

Posted in: INFO BLOG BUILDING