+62 (0717) 422145 Senin-Jumat: 07.30 - 16.00 WIB
Link Penting UBB

Artikel UBB

Universitas Bangka Belitung's Article
01 Agustus 2008 | 03:39:22 WIB


Membuat menu Vertical dan Horizontal pada Blog


Ditulis Oleh : Admin

A. Menu Horizontal

Ada yang ingin membuat menu horizontal untuk blognya? ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti ini :







Contohnya bisa dilihat disini . Untuk membuatnya ikuti cara berikut ini:

pertama-tama siapkan dulu gambarnya, contohnya seperti ini :



dan



kalo nggak punya gimana? kalo nggak punya pake gambar yang ini juga boleh.




blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif
whiteleft.gifwhiteright.gif






Ok, bahan-bahannya sudah ada, mari kita mulai meraciknya:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.

2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya



/*credits : https://trik-tips.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("https://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background: url("https://
kendhin.890m.com/menu/blackright.gif") no-repeat right top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}




Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;



background: url("https://
kendhin.890m.com/menu/redleft.gif") no-repeat left top;



background: url("https://
kendhin.890m.com/menu/redright.gif") no-repeat right top;



3. Copy script berikut ini



<div id="tabshori">

<ul>

<li><a href="https://trik-tips.blogspot.com"><span>Home</span></a></li>

<li><a href="https://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>

<li><a href="https://trik-tips.blogspot.com"><span>Free Template </span></a></li>

<li><a href="https://trik-tips.blogspot.com"><span>Kamus</span></a></li>

<li><a href="https://trik-tips.blogspot.com"><span>Profile</span></a></li>

</ul>

</div >




4. Ganti https://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).

Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.

5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini

cari kode berikut ini :



<div id="content-wrapper">




caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya



6. Simpan hasil pengeditan.

7. Lihat hasilnya.

8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.

9. Kalo masih belum berhasil juga coba cara ini:

- Cari kode berikut ini :



<b:section class='header' id='header'

maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true'

title='your blog title (Header)' type='Header'/>

</b:section>




terus ganti text yang berwarna hijau sehingga menjadi seperti ini:



<b:section class='header' id='header'

maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false'

title='your blog title (Header)' type='Header'/>

</b:section>




terus di Save



Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, coba drag kebawah dikit, terus simpan dan lihat hasilnya.



hasilnya pasti akan berbeda-beda di setiap template.

kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....


A. Menu Vertical


Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya :


1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kede berikut sebelum kode </head>

<script src='https://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>



3. Setelah itu masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Taruh di dalam Barisan kode CSS.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('https://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('https://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }



Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('https://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('https://blog.superinhost.com/vertical/red.gif');



Pilihan Warna menu vertikal :


blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

black1.gif

black2.gif



4. Kemudian di save.

5. Lalu ke menu "Page Elements"

6. Pilih "Add Page Elements -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="https://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="https://x-template.blogspot.com" >Free Template</a></li>
<li><a href="https://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>



Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tinggal buat lagi kode seperti yg berkedip2 dibawahnya.


Selamat mencoba





Written BY : https://trik-tips.blogspot.com
Trik-Tips Blog

UBB Perspectives

Juga Untuk Periode Berikut

Untuk Periode Berikut

Stereotipe Pendidikan Feminis

Urgensi Perlindungan Hukum Dan Peran Pemerintah Dalam Menangani Pekerja Anak Di Sektor Pertambangan Timah

Isolasi dan Karakterisasi Bakteri Asam Laktat Asal Ikan Mujair (Oreochromis mossambicus) yang Berpotensi Sebagai Probiotik

Pemanfaatan Biomikri dalam Perlindungan Lingkungan: Mengambil Inspirasi dari Alam Untuk Solusi Berkelanjutan

FAKTOR POLA ASUH DALAM TUMBUH KEMBANG ANAK

MEMANFAATKAN POTENSI NUKLIR THORIUM DI KEPULAUAN BANGKA BELITUNG : PELUANG DAN DAMPAK LINGKUNGAN

Pengaruh Sifat Fisika, Kimia Tambang Timah Terhadap Tingkat Kesuburan Tanah di Bangka Belitung

Akuntan dan Jurnalis: Berkolaborasi Dalam Optimalisasi Transparan dan Pertanggungjawaban

Sustainable Tourism Wisata Danau Pading Untuk Generasi Z dan Alpa

Perlunya Revitalisasi Budaya Lokal Nganggung di Bangka Belitung

Semangat PANDAWARA Group: Dari Sungai Kotor hingga Eksis di Media Sosial

Pengaruh Pembangunan Produksi Nuklir pada Wilayah Beriklim Panas

Pendidikan dan Literasi: Mulailah Merubah Dunia Dari Tindakan Sederhana

Mengapa APK Perguruan Tinggi di Babel Rendah ?

Dekonstruksi Cara Pikir Oposisi Biner: Mengapa Perlu?

PENINGKATAN KUALITAS PELAYANAN PUBLIK DENGAN ASAS GOOD GOVERNANCE

UMP Bangka Belitung Naik, Payung Hukum Kesejahteraan Pekerja atau Fatamorgana Belaka?

Membangun Kepercayaan dan Kesadaran Masyarakat Dalam Membayar Pajak Melalui Peningkatan Kualitas Pelayanan Serta Transparansi Alokasi Pajak

Peran Generasi Z di Pemilu 2024

Pemilu Serentak 2024 : Ajang Selebrasi Demokrasi Calon Insan Berdasi

Menelusuri Krisis Literasi Paradigma dan Problematik di Bumi Bangka Belitung

Peran Pemerintah Terhadap Pemenuhan Kebutuhan Protein Hewani Melalui Pemanfaatan Probiotik dalam Sistem Integrasi Sapi dan Kelapa Sawit (Siska)

TIMAH “BERPERI”

Jasa Sewa Pacar: Betulkah Menjadi sebuah Solusi?

Peran Sosial dan Politis Dukun Kampong

Mahasiswa dan Masalah Kesehatan Mental

Analogue Switch-off era baru Industri pertelevisian Indonesia

Di Era Society 50 Mahasiswa Perlu Kompetensi SUYAK

HUT ke-77 Kemerdekaan Republik Indonesia, sudah merdekakah kita?

Pemblokiran PSE, Pembatasan Kebebasan Berinternet?

Jalan Ketiga bagi Sarjana

Pentingnya Pemahaman Moderasi Beragama Pada Mahasiswa di Perguruan Tinggi Umum

SOCIAL MAPPING SEBAGAI SOLUSI TATA KELOLA SUMBER DAYA ALAM

Bisnis Digital dan Transformasi Ekonomi

Merebut Hati Gen Z

Masyarakat Tontonan dan Risiko Jenis Baru

Penelitian MBKM Mahasiswa Biologi

PEREMPUAN DI SEKTOR PERTAMBANGAN TIMAH (Refleksi atas Peringatan Hari Kartini 21 April 2022)

Kiat-kiat Menjadi “Warga Negara Digital” yang Baik di Bulan Ramadhan

PERANG RUSIA VS UKRAINA, NETIZEN INDONESIA HARUS BIJAKSANA

Kunci Utama Memutus Mata Rantai Korupsi

Xerosere* Bangka dan UBB

Pengelolaan Sumber Daya Air yang Berkelanjutan

SI VIS PACEM PARABELLUM, INDONESIA SUDAH SIAP ATAU BELUM?

RELASI MAHA ESA DAN MAHASISWA (Refleksi terhadap Pengantar Mata Kuliah Pendidikan Agama Islam di Perguruan Tinggi Umum)

KONKRETISASI BELA NEGARA SEBAGAI LANGKAH PREVENTIF MENGHADAPI PERANG DUNIA

Memaknai Sikap OPOSISI ORMAWA terhadap Birokrasi Kampus

Timah, Kebimbangan yang Tak akan Usai

Paradigma yang Salah tentang IPK dan Keaktifan Berorganisasi

Hybrid Learning dan Skenario Terbaik

NEGARA HARUS HADIR DALAM PERLINDUNGAN EKOLOGI LINGKUNGAN

Mental, Moral dan Intelektual: Menakar Muatan Visi UBB dalam Perspektif Filsafat Pierre Bourdieu

PEMBELAJARAN TATAP MUKA DAN KESIAPAN

Edukasi Kepemimpinan Milenial versus Disintegrasi

Membangun Kepemimpinan Pendidikan di Bangka Belitung Berbasis 9 Elemen Kewarganegaraan Digital

Menuju Kampus Cerdas, Ini yang Perlu Disiapkan UBB

TI RAJUK SIJUK, DIANTARA KESEMPATAN YANG TERSEDIA

TATAP MUKA

Mengimajinasikan Dunia Setelah Pandemi Usai

MENJAGA(L) LINGKUNGAN HIDUP

STOP KORUPSI !

ILLEGAL MINING TIMAH (DARI HULU SAMPAI HILIR)

KARAKTER SEPERADIK

SELAMAT BEKERJA !!!

ILLEGAL MINING

Pers dan Pesta Demokrasi

PERTAMBANGAN BERWAWASAN LINGKUNGAN

GENERASI (ANTI) KORUPSI

KUDETA HUKUM

Inflasi Menerkam Masyarakat Miskin Semakin Terjepit

NETRALITAS DAN INTEGRITAS PENYELENGGARA PEMILU

Siapa Penjarah dan Perampok Timah ???

Memproduksi Kejahatan

Potret Ekonomi Babel

Dorong Kriminogen

Prinsip Pengelolaan SDA

Prostitusi Online

Menjaga Idealisme dan Kemandirian Pers

JUAL BELI BERITA

POLITIK RAKYAT DAN TANGGUNG JAWAB PEMIMPIN

Penelitian Rumpon Cumi Berhasil di Perairan Tuing, Pulau Bangka

Budidaya Ikan Hias Laut

Gratifikasi, Hati-Hatilah Menerima Sesuatu

KEPUASAN HUKUM

JANGAN SETOR KE APARAT

JAKSA TIPIKOR SEMANGAT TINGGI

Perairan Tuing, Benteng Sumberdaya Perikanan Laut di Kabupaten Bangka

GRAND DESIGN KEPENDUDUKAN (Refleksi Hari Penduduk Dunia)

Berebut Kursi Walikota