MEMBUAT MENU ROUNDED CORNER

Posted by Rumah Tahfidz Belakang Padang at 04.24

Langkah Pembuatan:

1. Donwnload menu Css3 for Windows disini
2. Ekstrak file download tadi.
3. Instal di windows anda.
4. setelah selesai, buka aplikasinya.
- pertama, tentukan jenis menu yg diinginkan pada kotak sebelah kiri,
tersedia berbagai jenis dan mode vertikal atau horizontalnya.
- klik menu yg anda pilih, ganti tulisan menjadi HOME, { defaultnya item 1}
dengan mengubahnya di menu kotak bawah. kemudian isi url nya ,
ubah warna tulisan, background, hower pada kotak sebelah kiri.
- tambahkan lagi menu dengan menekan tombol "+" di bar menu atas.
- jika menambahkan ikon. klik ikon dan pilih ikon yang disuka.
- setelah pengubahan selesai, klik PUBLISH
5. Saat anda mengklik Publish, secara otomatis Html akan tersimpan, dan preview
akan ditampilkan oleh Browser,
KET: saat membuat menu ini, sebaiknya dalam keadaan terkoneksi dengan Internet.
6. Buka File yang tersimpan.
file terbagi menjadi 2:
file 1 : web Mode atau HTML Web.
file 2 : Folder ( folder ini berisi Ikon dan Notepad)

7. Untuk mendapatkan kode HTML caranya adalah : klik kanan mouse file 1. dan pilih open with Nonepad. Coppy Code tersebut.

8. Untuk mendapatkan kode CSS nya adalah : buka file 2. dan open Notepad tersebut.
copy teks tersebut, sebagai kode css nya. simpan!!

PENERAPAN PADA BLOG

Anda sudah mendapatkan Code HTML dan CSS nya:
contoh Kode HTML dapat dilihat dibawah ini:
KOde HTML:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0085)file:///C:/Documents%20and%20Settings/R.Prast/My%20Documents/Menu%20Protonica3.3.html -->

   
   


<ul id="css3menu1" class="topmenu">
    <li class="topmenu"><a href="http://protonicatv.blogspot.com/" title="HOME" style="height:16px;line-height:16px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACyklEQVR42q2TW0iTYRjH/9/37aRbnk9r6BKciolmiHiKRC8KoUwsA/NCMIjQG4swK40uioSKghK6kEnSjZGapDdmYibp1E1zmzp1zTkPO4mbblN3+JoKg5CCqOfy5ff8ngPvQ+Afg/ivAnm1oGFAzX1gsXKgN7hxhEmA5X1n0gB1ANMUQVy8oZhqPyTYqI/Mbxrk9ohyY9lHdzz41GUGj3SDTRKg9ijyAPa6VkgSGdcm5Ms+wUZDZGifgjE0xxYmlFXEwL5kh6zNCrNWD7Y/BW/CvsAXNNoqJfLLPoG8Kqq1VRlRXlGdCP/IALisDui/bkPZuwAG0wnK2wJB/jo7SaO07Iv8HaG9JagSD3NeZpYcR2q2ANtO0luRgG3egpkPq7DpdWBxGCCpvT3QoD00bA4PTDtkV41EWUQ0n40tH7eHxt97nF7jYXJ5JMXwYgQ8djvUH3UwyVRgUC643TTc3mQ7xw+u8LC574r18y9GZDP7I/S8Ludn5AiU5tX1oO1tF8KjhWD5kTBIVzDZMgqa5UQgnwNTcAy4/CDEC+iBlEvNeb4dLEluihhMv1GbSROoV03AzQyDMC0bPG4Ilr/JQHM8eG69gE5bJq77d6DqmHRIUPgm1ydYHasVkSz/Mdu6NsCikcJhdyEk8TQE8Sdg005hfcuBAvVDGJ08iPmvkLwzJqt8NJwuVWg8+wLtSK0oIDhAvmlQs0zzUqyu7UJ4Mg/CpDRs6qZhtNjwzFiC0jApSM34dKN4sn5q3tRuMpvpfcGT+yXs0IjouqwkRq1T18txOJwIEuWDH5cKi24WlMcC+6Zzt7VD1dTSvdio0S2vHfqJdbfv8nJysjp50BbQpn7EJsRAmJiCjaVZ9A2qhsXt6jvdn6X9f7yF4qJz7DhRcrHRaAi0mmf1V0pPXZXJVKNv30ue/tAubf31NRaeyY9STi+YNdpF5++Yn62qMCBYN60YAAAAAElFTkSuQmCC" alt="HOME" />HOME</a></li>
    <li class="topmenu"><a href="http://protonicatv.blogspot.com/search/label/Tv%20dan%20Elektronika" title="TELEVISI" style="height:16px;line-height:16px;">TELEVISI</a></li>
    <li class="topmenu"><a href="http://protonicatv.blogspot.com/2011/02/150-tips-dan-trik-mempercepat-kinerja.html" target="_self" title="COMPUTER" style="height:16px;line-height:16px;">COMPUTER</a></li>
    <li class="topmenu"><a href="file:///C:/Documents%20and%20Settings/R.Prast/My%20Documents/Menu%20Protonica3.3.html#" title="MOBILE HP" style="height:16px;line-height:16px;">MOBILE HP</a></li>
    <li class="topmenu"><a href="file:///C:/Documents%20and%20Settings/R.Prast/My%20Documents/Menu%20Protonica3.3.html#" title="JARINGAN" style="height:16px;line-height:16px;">JARINGAN</a></li>
    <li class="topmenu"><a href="file:///C:/Documents%20and%20Settings/R.Prast/My%20Documents/Menu%20Protonica3.3.html#" title="TIPS BLOGGER" style="height:16px;line-height:16px;">BLOGGER</a></li>
    <li class="topmenu"><a href="http://www.facebook.com/roshoprasetyo" target="_blank" title="FACEBOOK" style="height:16px;line-height:16px;">FACEBOOK</a></li>
    <li class="topmenu"><a href="http://www.blogger.com/profile/02535293399233491827" target="_self" title="PROFIL" style="height:16px;line-height:16px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACsElEQVR42oXTW0iTURwA8P932bf7Ur/NyTa10lgpolm5KQXLGCH4IpVEvVhWTKSHwixJDKsHsws9CCL4YAgWZWQY5iWMbqY+VBhdVHSmSXlLl7rtu52v44Pg0PQP53AO58+P/7kRsCJs0dEaiiRzRFHMRgjtw03gBaFxcWHhOs/zPlgjiJUT1hh5TSbIUlkGQLgjAYGCIoDjuNs+n69oQ6AsJ+UGbbIW8whAzVDQ3TcCrz6PgiQKH/1+f5osy+K6QN/dY/eTXHuPglINwPvhRdsb5C5+SDJKpl/guRQMBNcHqk92bk1J3o/PAQJ/fsOP0XFU0dBFNvWMtnPBYBZOQesC3ZWH2qNibG5AIl7A+6dpKK/rnKtp+ZKHl59ueAYdF1215uiofIpWgFKjhalfk/B17OeF/KreW/CfCAEeFTqdUSZDuzbMoJcIFYwPfgfKVfD6b1JexXE79XxD4MqDqp3pKnMz9a3J6p/wgk6jgMmMyxCWeADvKtA8Nsud86SxQ2sC559cZZ3b8t/FWiz22ZY7sKn/sUwkHyaCu05BhEELsoxgwscNDk9z2R4HO7AKuNRcX7Q7Nufm0MQsJMOIbKVn5C46ldRodRCpp4HVK4HCecMzXOvkgpBd4GClEKDs2duXi36za25+HrLiTTCvMoB32geSJAKJX+V2qx7izDrwCwgNTAX3eBzGDyHAmboeb4BXbpYFHhJZNQgGA4gSAgkhEER8/RjJsBshQsdAr3fudFGmrTYESC8pORKuOVitUCtYi4EBo8UIoiDhChCISAYOj1O3hENiTBg0dY3UVOTu8Ky6BceJewkqvaYwLiE212gKNy5VgJ8vRpYAEeLNWplEqO/T0HRl/VlnwypgOdylrTZGqUhlGNpOkmQm/pzxgiA2ipzQgYB431buDizn/gOvUyogeqRq+QAAAABJRU5ErkJggg==" alt="PROFIL" />PROFIL</a></li>   
</ul>


<p style="display:none"><a href="http://css3menu.com/">Drop Down Menu Using CSS Css3Menu.com</a></p>
</!doctype>

dan contoh Kode CSS nya sperti Ini:
ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;background-color:#8b4f1e;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGAwdHAW7Qd8AAABBSURBVCjPY/j//38OEwMDwxcmBgaGf3CCAQuLWIn/RKr7RxV1xOodJWAEw////3eMBgQNiX+ExRDc/yQb8I90xQB9Wi9VuNA5IgAAAABJRU5ErkJggg==");background-repeat:repeat;border-width:1px;border-style:solid;border-color:#B4B4B4;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;padding:0;background-color:#1609aa;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAH0CAYAAAD11uftAAAAAXNSR0IArs4c6QAAAF5JREFUaN7t1CESwCAQA8DA8P/3FnX1HWQFMItcByFpVVX5nJ7FORpHknn/NeH/3+bxIPoO1RAKDlpvaATUEEoT2k+ohlDfoTQNNVRDqIZQmtB6C07fob57T2i9N8UXjqAda7laRHkAAAAASUVORK5CYII=");border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li:hover{
    position:relative;}
ul#css3menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#css3menu1{
    padding:6px 6px 6px 0;display:block;font-size:0;float:left;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
    margin:0 0 0 6px;}
ul#css3menu1 ul>li{
    margin:6px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#0000ff;cursor:pointer;}
ul#css3menu1 ul li{
    float:none;margin:0;}
ul#css3menu1 ul a{
    text-align:left;}
ul#css3menu1 li:hover>a{
    background-color:#c37924;border-color:#F8F8F8;border-style:solid;font:12px Arial;color:#ffffff;text-decoration:none;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{
    display:none;}
ul#css3menu1 li:hover > a img.def{
    display:none;}
ul#css3menu1 li:hover > a img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.over{
    display:inline;}
ul#css3menu1 li a.pressed img.def{
    display:none;}
ul#css3menu1 a{
    padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;color:#0000ff;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-color:#c37924;border-style:solid;border-color:#F8F8F8;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
    height:16px;background-color:;background-image:none;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:transparent;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#000000;text-decoration:none;text-shadow:0 1px 1px #000000;line-height:16px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
    background-color:#666666;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGAwdHAW7Qd8AAABBSURBVCjPY/j//38OEwMDwxcmBgaGf3CCAQuLWIn/RKr7RxV1xOodJWAEw////3eMBgQNiX+ExRDc/yQb8I90xQB9Wi9VuNA5IgAAAABJRU5ErkJggg==");background-position:0 100%;border-style:solid;border-color:#F8F8F8;font:bold 13px Arial;color:#ff0000;text-decoration:none;text-shadow:0 1px 0 #FFFFFF;line-height:16px;}
Okey ..kita terapkan langsung aja di blog:
1. Login Blog anda
2. Tuju Rancangan / Desain
3. Pilih Edit HTML.
    - don't forget : Back Up dulu ya dengan mengklik Full Download Templete.
    - Beri tanda Centang, pada Expand widget Templete
4. Cari kode ]]><skin  dengan cara tekan tombol CTRL + F pada keyboard ( untuk Mozilla atau Google
    Chrome) agar mudah mencarinya.
5. paste Kode Css tersebut diatas Kode ]]><skin
6. Simpan Templete dengan menekan tombol simpan templete / save templete.

Kode CSS sudah tersimpan.
selanjutnya adalah menerapkan kode HTML nya
1. pilih edit Element / edit laman
2. klik add gadget / tambah gadget
3. pilih HTML/Java scrypt pada jendela pilihan.
4. paste kode Html yang anda simpan di kotak konfigurasi Java script tersebut.
5. save dan lihat blog

Pemasangan Menu Ronded Corner Telah Usai..semoga bermanfaat.

catatan : untuk Templete tertentu terkadang tidak tersedia kotak widget di bawah Header, sehingga jika ingin memasang dengan mode Horizontal, perlu menambahkan kotak laman / gadget baru agar dapat memasukkan kode Html tersebut. Untuk mengetahui cara menambah kotak halaman dibawah kotak Header ataupun diatasnya, silahkan anda baca   disini
Labels:

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
© Buah Iman Dan Islam | Designed by r050prast | On : PROTONICA TV