CARA MEMBUAT MENU VERTIKAL DI BLOGGER

Usep Suryana 25 Jul 2013 2 comments

Cara Membuat Menu Vertikal Di Blogspot

Cara Membuat Menu Vertikal Di Blogspot | Iseng gak ada ide buat bikin posting hari ini, jadi saya langsung menuju blognya Bloggertrix dan sempat menemukan satu artikel tentang cara membuat menu vertikal keren untuk blogger , dan setelah saya teliti ternyata menu vertikal ini cukup elegan dan bagus. dan cocok untuk di pasang yang template blognya ada 2 sampe 3 kolom. kalau untuk scriptnya saya rasa tidak akan membuat blog jadi LOLA (Loading Lama) karna script css-nya tidak banyak, Untuk demo saya hanya bisa berikan gambarannya di bawah ini :
 Apa yang anda pikirkan setelah melihat demo nya, penasaran untuk segera memasangnya silahkan ikuti langkah di bawah ini.
CARA MEMBUAT MENU VERTIKAL DI BLOGGER
1. Login Blogger
2. Pilih Tabs "Rancangan"
3. Pilih "Edit HMTL" -> Cek "Expand Widget Template"
4. Cari Kode ]]></b:skin> Kemudian Letakkan kode di bawah ini TEPAT di Atas kode ]]></b:skin>


/* Start Menu Vertikal*/

*{
 list-style:none;
 margin:0px;
 padding:0px;
}

#menu4 {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #D76100;
 border-size: 0px;
 border-width: 0px;
 }

#menu4 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 }

#menu4 li a:link, #menu4 li a:visited {
 color: #9E3C02;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3DgcsmHxIq02CKW0q44ixNGso3VEzufvgmaCtueZEUcVW_kTlHy4FxvG_ntwUPhCzNWQdbRv55v-wf4rty9UFqVbGTM4hnJYh8_hekw-JevZUipYKSqlJ0GmihsXun50PQLttna2vRE/s1600/menu4.gif);
 padding: 8px 0px 0px 30px;
 }

#menu4 li a:hover {
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3DgcsmHxIq02CKW0q44ixNGso3VEzufvgmaCtueZEUcVW_kTlHy4FxvG_ntwUPhCzNWQdbRv55v-wf4rty9UFqVbGTM4hnJYh8_hekw-JevZUipYKSqlJ0GmihsXun50PQLttna2vRE/s1600/menu4.gif) 0 -32px;
 padding: 8px 0 0 30px;
 }

#menu4 li a:active {
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3DgcsmHxIq02CKW0q44ixNGso3VEzufvgmaCtueZEUcVW_kTlHy4FxvG_ntwUPhCzNWQdbRv55v-wf4rty9UFqVbGTM4hnJYh8_hekw-JevZUipYKSqlJ0GmihsXun50PQLttna2vRE/s1600/menu4.gif) 0 -64px;
 padding: 8px 0 0 30px;
 }
/* End Menu Vertikal*/

5. Klik "Simpan Template"
* Sekarang tinggal Membuat Widget JavaScriptnya
6. Pilih Tabs "Tata Letak" -> Klik "Tambah Gadget"
7. Cari dan Pilih "HTML/JavaScript"
8. Kemudian Masukkan kode di bawah ini pada widget JavaScript

<div id="menu4">
 <ul>
   <li><a href="#1" title="Home">Home</a></li>
   <li><a href="#2" title="About">About</a></li>
   <li><a href="#3" title="Services">Services</a></li>
   <li><a href="#4" title="Portfolio">Portfolio</a></li>
   <li><a href="#5" title="Store">Download</a></li>
 </ul>
</div>
 
Perhatian (Yang Boleh Di Ganti) :
- Ganti Kode #1 sampai #5 dengan URL / Link yang ingin di tuju
- Ganti Kode Warna hijau dengan Judul Link
- Ganti Kode Warna Merah dengan Judul Link

9. Klik "Simpan"

Nah Gampang kan, nah bagi anda yang minat buat bikin menu vertikal ini, tunggu apalagi silahkan terapkan di blog anda. semoga bermanfaat


Sumber :  http://zamaprilio.blogspot.com/2013/02/cara-membuat-menu-vertikal-di-blogspot.html

Artikel Terkait

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
thumbnail Judul: CARA MEMBUAT MENU VERTIKAL DI BLOGGER
| Twitter | Facebook Page
Published :25 Jul 2013 Jam 14.18
Rating: 4.5 Reviewer: 7
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.

Pin It

Silahkan tentukan pilihan komentar anda!



atau

2 komentar:

Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih

Pasang Iklan

Pengikut

Blogger Copast
Designed by Bamz
Untuk SEO lebih lanjut kunjungi
Trik SEO terbaru

Statistik

Page Rank
blogger-copast.blogspot.com Webutation

ping fast  my blog, website, or RSS feed for Free Blog Directory & Search engine blog search directory Personal Blogs - Blog Rankings Technology Blogs Blog Directory My Zimbio My Ping in TotalPing.com I ♥ Validator GeoURL Blogger Copast Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Personal - Top Blogs Philippines Blog Search: The Source for Blogs
Link Centre Directory and Search Engine
Active Search Results blogger-copast.blogspot.com trustrank blogger-copast.blogspot.com Real PageRank

http://blogger-copast.blogspot.com$3,065$3,065How much is yours?

Waudit score SEO Reports for blogger-copast.blogspot.com Top SEO Sites Blogarama - The Blog Directory IndoUrl - indonesian directory, webmaster friendly
blogger-copast.blogspot.com CoolSocial.net Badge
dirbit.com free search engine submission Link Exchange with BLOGGER COPAST how to create a website AskDirectory.com - FREE Web Directory Blog Directory Blog Search Links Exchange Blog Directory | Submit to Directories and Promote your Blogs Frety Webengine bloggercopast's Profile on Ping.sg  Ping Url ping.sg - the community meta blog for singapore bloggers blogger-copast.blogspot.com-Google pagerank and Worth Personal Blogs
Online Marketing
Feedage Grade B rated
eXTReMe Tracker
Amfibi Web Search & Directory Sistema Enlaces Reciprocos Search Engine Submission and Marketing Services ExactSeek: Relevant Web Search waplog
blognation.com
Submit Blog Directory Situs Monitor Backlinks Site Meter

Enter your email address:

Delivered by FeedBurner