adsense link 728px X 15px

Tuesday, July 6, 2010, 

Setelah cukup lama tidak aktif di dunia blogging, akhirnya baru sekarang bisa posting lagi. Akhir-akhir ini saya disibukkan oleh aktifitas keseharian saya. Sebagai postingan pertama saya setelah sekian lama istirahat dari dunia blogging saya akan memberikan sebuah tutorial tentang membuat vertical menu dengan efek show hide. Tutorial ini saya pelajari dari Antonio Lupeti, mungkin sudah tidak asing lagi bagi anda dengan blogger yang saya maksud. Live demonya silakan anda lihat DI SINI. bagi anda yang berminat untuk membuatnya silakan ikuti langkah-langkah di bawah ini.


STEP 1

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari kode berikut

    </head>

    Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.

    <style type="text/css">
    /* --- button --- */
    .button{
    background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;
    color:#FFFFFF;
    clear:both;
    display:block;
    float:left;
    font-size:13px;
    font-weight:bold;
    height:31px;
    line-height:31px;
    width:auto;
    margin-right:30px;
    }
    a.button {
    text-decoration:none;
    }
    .button span {
    background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;
    display:block;
    height:31px;
    line-height:31px;
    padding-left:10px;
    padding-right:8px;
    margin-right:20px;
    }
    /* --- vertical menu --- */
    .v-menu{
    border:solid 1px #7F9FBF;
    width:200px;
    clear:both;
    }
    ul.v-menu, .v-menu li{
    padding:0;
    margin:0;
    list-style:none;
    }
    ul.v-menu{
    clear:both;
    margin-top:6px;
    padding:6px 10px;
    }
    .v-menu li a{
    color:#555555;
    font-weight:bold;
    display:block;
    border-top:solid 1px #DEDEDE;
    padding:4px;
    text-decoration:none;
    }
    .v-menu li a:hover{
    color:#999999;
    }
    </style>
    <script type="text/javascript">
    function showElement(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else {
    myLayer.style.display="none";
    }
    }
    </script>
  5. Klik Simpan

STEP 2

  1. Setelah template anda tersimpan, Klik Rancangan
  2. Pada menu Elemen Halaman, pilih Tambah Widget sesuai dengan letak yang anda inginkan
  3. Setelah terbuka halaman tambah widget pilih penambahan HTML/JavaScript
  4. Pada halaman Konfigurasi HTML/JavaScript beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.

    <a href="#" class="button" onclick="javascript:showElement ('v-menu')">
    <span>ClickHere</span></a>
    <ul id="v-menu" class="v-menu" style="display: none;">
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    <li><a href="http://URL ANDA">TEXT ANDA</a></li>
    </ul>

    Keterangan :
    * Pada list item (<li><a href="http://URL ANDA">TEXT ANDA</a></li>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.
  5. Klik Simpan

     Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya yang ini. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....







25 Comments:

hendro-prayitno said...  on  July 6, 2010 at 7:34 AM

seperti acordion tapi beda..mantap sob..

arfi said...  on  July 6, 2010 at 4:23 PM

wah.. panjang juga caranya.. secara masih bingung dengan HTML.. tapi bagus juga untuk mempermak blog,,

rizal said...  on  July 6, 2010 at 8:44 PM

mantap nih, saya pake yang bawaan dari perancang template blogger..
thank

mixedfresh said...  on  July 6, 2010 at 9:26 PM

boleh juga nih, tak pelajari dulu caranya sob, thanks infonya

Umy Diary said...  on  July 6, 2010 at 9:38 PM

panjang ni caranya ~x(

nice post,,,

met pagi,,

umy mampir ni

om rame said...  on  July 7, 2010 at 6:01 AM

boLeh...boLeh...boLeh. keren biar tampiLan Lebih minimaLis, terima kasih atas sharenya.

ariefborneo said...  on  July 8, 2010 at 4:10 AM

Mantap sob ilmu nya...thnxs dah berbagi

puisi sang gitaris said...  on  July 10, 2010 at 8:56 AM

wah mantap nih blog ane belum ada menunya,tapi harus di isi satu persatu ya linknya

Harits Mugni N said...  on  July 10, 2010 at 8:49 PM

Wah begitu yah mas, nanti saya coba deh praktekin.
Makasih yah mas buat infonya.

Salam kenal yah mas.

om rame said...  on  July 11, 2010 at 9:39 AM

kunjungan dipenghujung akhir pekan, untuk menyongsong hari esok yang penuh tantangan. saLam sukses untuk aktifitas bLogging dan di dunia nyata.

Koko Bota said...  on  July 12, 2010 at 1:29 AM

Lama Tak Berkunjung ke sini makin hebat aja nich bos........nice posting..:)

Koko Bota said...  on  July 12, 2010 at 1:30 AM

sukses trus kawanku.....:)

Wibisono Arisan Blackberry said...  on  July 12, 2010 at 11:36 PM

Artikel yang menarik sekali, semoga sukses selalu dan saya tunggu kunjungannya di website saya.thx salam persahabatan

Amdhas said...  on  July 12, 2010 at 11:52 PM

oia sob daha ada demonya..
tenag sob aku juga masih belajar, aku punya tehnik baru tapi belum di posting..pokonya tehniknya lucu sob tapi syaratnya harus template html5,css3 kalau ngga ga bisa sob,,aku bingung mau postinbgnya soalnya cuma aku kayanya yang pake ama coen..deconstructioncode

Suara Petualang said...  on  July 14, 2010 at 10:16 PM

nice info....
thanks udah share...salam

om rame said...  on  July 15, 2010 at 6:03 AM

sambiL mempraktekan nih, semoga berhasiL.

DO said...  on  July 17, 2010 at 8:19 AM

wah, MANTAB

Disedot ya, jgn lupa kunjungan baliknya ya

http://do-all-share.blogspot.com/

Memorabilia said...  on  July 20, 2010 at 7:28 AM

trims buat sharingnya.. trik ini bisa menambah kreatifitas ;)

om rame said...  on  July 20, 2010 at 9:19 AM

seperti biasa berkunjung, dan menunggu tutor terbarunya om mazda. seLamat istirahat yah om, saLam sehat seLaLu.

admin said...  on  August 16, 2010 at 6:45 AM

mat malam mas....infonya bagus,tapi lagi gak mood utak atik template neh

dendy said...  on  August 19, 2010 at 7:31 AM

=))mAntab broww,,tanhks sOb ats info'a,,, !! ad yg bru gA brow slain page element,,? =)) =))

LINGGARS.COM said...  on  November 18, 2010 at 8:34 PM

Mas,bisa diaplikasikan di wordpress aa tidak,kayaknya mantab nih...

webgila.com said...  on  February 7, 2011 at 9:22 AM

wooww... bener2 bagus nih sharenya,,,^^

ijin nyoba dl ya boss... ;D...

TuanMudaKalsel.Com said...  on  March 27, 2011 at 11:38 AM

Saya udah pake yang horizontal, tapi vertikal bagus juga, cuma bingung mau ditaruh dimana, heheeee...

Salam kenal, moga sukses....

Adam Pramuja said...  on  July 19, 2012 at 5:26 AM

Makasih om..

Tutorial ini akan saya save di blog saya dangan mencantumkan lank sampean..

Salam..

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers