Mungkin anda masih ingat postingan saya sebelumnya yakni cara membuat menu horizontal dengan sub menu vertikal atau anda bisa melihat kembali postingannya klik disini, tapi sayang postingan itu tidak bisa support semua browser dan hanya bisa dengan baik melalui browser mozilla firefox tapi untuk kali ini saya sudah mencoba dengan support mozilla Firefox, IE, Chrome dan Opera. Anda boleh menjajalnya blog MGM ini dengan semua browser karena saya sudah menggunakan menu horizontal with drop down atau menu horizontal dengan sub menu vertikal ini seperti screenshot diatas. Untuk memulai tutorial memasang menu horizontal drop down menu ini silahkan perhatikan berikut ini :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut (tekan ctrl+F) : ]]></b:skin> kemudian simpan kode berikut sebelum kode ]]></b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}


.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #151515;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: #DF0101; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

Langkah selanjutnya sisipkan kode berikut sebelum kode </head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://mastergomaster.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src=' http://emoticmastergomaster.googlecode.com/files/jquery_slide.js ' type='text/javascript'/>

Setelah kode diatas anda sisipkan dengan baik pada template tahap selanjutnya silahkan copy kode script drop down menu horizontal berikut dan masuk ke Dashboard ► LAYOUT ► ADD a GADGET ► HTML/JavaScript ► SAVE.

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://www.mastergomaster.com/2009/08/about-me.html'>About Us</a></li>
<li><a href='http://www.mastergomaster.com/2009/04/contact-mgm-via-email.html'>Contact Us</a></li>
<li><a href='http://www.mastergomaster.com/2009/02/table-of-content.html'>Blog Archive</a></li>
<li><a href='/'>Software</a>
<ul>
<li><a href='http://www.mastergomaster.com/search/label/anti%20virus'>Anti Virus</a></li>
<li><a href='http://www.mastergomaster.com/search/label/multimedia'>Multimedia</a></li>
<li><a href='http://www.mastergomaster.com/search/label/web%20browser'>Web Browser</a></li>
</ul>
</li>
<li><a href='/'>Blog Tutorial</a>
<ul>
<li><a href='/'>Wordpress</a></li>
<li><a href='/'>Blogspot</a>
<ul>
<li><a href='/'>1</a></li>
<li><a href='/'>2</a></li>
<li><a href='/'>3</a>
<ul>
<li><a href='/'>1</a></li>
<li><a href='/'>2</a></li>
<li><a href='/'>3</a></li>
<li><a href='/'>4</a></li>
</ul>
</li>
<li><a href='/'>4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://www.mastergomaster.com/search/label/domain'>Domain</a></li>
<li><a href='http://www.mastergomaster.com/search/label/get%20money'>Get Money</a></li>
<li><a href='http://www.mastergomaster.com/2010/02/kode-warna-html.html'>HTML Colour Code</a></li>
<li><a href='http://www.mastergomaster.com/2010/04/mendapatkan-pagerank-tinggi-dalam-waktu.html'>(S.E.O)</a></li>
<li><a href='http://www.mastergomaster.com/2009/08/cek-kecepatan-blog-dan-berat-websitemu.html'>Web Tools</a></li>
<li><a href='http://www.mastergomaster.com/search/label/widget'>Widget</a></li>
</ul>
<br style="clear: left" />
</div>

kemudian geser dan tempatkan seperti gambar berikut :

Pada tahap akhir silahkan ganti link postingan MGM dengan postingan anda, terima kasih dan semoga artikel membuat menu horizontal dengan drop down menu ini bermanfaat untuk anda semua.

sumber : http://mastergomaster.blogspot.com/2010/05/membuat-code-script-menu-horizontal.html

Properti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dll. Dalam penerapannya Properti CSS margin, kita dapat menententukan nilainya dalam satu properti atau satu baris kode css sehingga lebih ringkas. Tetapi Properti CSS margin juga dapat ditulis secara masing - masing antara bagian kanan, kiri, atas, dan bawah.

Lebih jelasnya,silahkan anda perhatikan penulisan berikut :

Contoh A

Contoh B


Anda lihat posisi teks dibawah ini : 

Contoh C


Anda lihat posisi teks dibawah ini :

Contoh D



Catatan : Untuk satuan nilai kita bisa menggunakan satuan " cm, px, em, atau %"

Ok...., Silahkan anda bisa coba mengganti nilai ukurannya sesuka anda, agar terlihatperbedaan hasilnya. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

caranya gampang sekali bung...

langsung tanpa basa-basi yg basi lagi...

ini dia scripnya 

<center><div><div style="margin: 15px;">
<div style="margin-bottom: 2px;"
class="bigfont"><input style="margin: 0px;
padding: 0px; width: 110px;
" value="LIAT" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display != '')
{ this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'UDAH'; } else {
this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = '';
this.value = 'LIAT'; }" type="button"/>
</div>
<div style="border: 0px inset ;
margin: 0px; padding: 0px;" class="alt2">
<div style="display: none;">

PASANG SCRIPT/TULISAN ANDA DISINI

</div></div></div></div>

</center>

Ket :

• Ganti angka yang tercetak BIRU sesuai kebutuhan, semakin  gede angkanya, semakin panjang tombolnya.
• Ganti kata yang tercetak MERAH sesuai kebutuhan, misalnya "SHOW" n "HIDE" apa "TAMPILKAN" n "SEMBUNYIKAN" suka-suka elu lah.
• Isi dengan tulisan atau gambar atau video atau script yg laennya
• Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.
• Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

gampangkan...selamat menjoba...

Kali ini tutorial dan software akan menyajikan tutorial modifikasi dari tutorial sebelum ini.. jika pada sebelumnya kategori otomatis dengan thumbnail nya dengan tulisan.. namus sekarang hanya thumbnailnya saja.. dan thumbnailnya berderet kesamping


Berikut adalah langkah-langkahnya :

Langkah pertama

•     Login ke blogger dengan ID anda.
•     Klik Rancangan.
•     rancangan
•     Klik tab Edit HTML.

    Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
    Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>

    /*** Labels Thumbs ***/
    img.label_thumb{
    float:left;
    border:1px solid #ccc;
    width:85px;
    height:70px;
    margin-right:10px;
    margin-bottom:10px;
    }

    Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head>

    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
    else thumburl='';}
    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
    if(i!=(numposts-1))
    document.write('');}
    document.write('</div>');}
    //]]>
    </script>

    Klik tombol SIMPAN TEMPLATE.
    Langkah pertama selesai.

Langkah kedua

•     Klik tab Rancangan.
•     rancangan
•     Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
•     elemen laman
•     Klik Tambah Gadget untuk menambahkan gadget baru.
•     tambah gadget
•     Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
•     html javascript

    Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna hijau dengan nama kategori yang di inginkan.

    <script type='text/javascript'>var numposts = 6;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/namalabelmu?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

     script label
    Klik tombol SIMPAN
    Langkah kedua Selesai.

Jika anda ingin menambahkan widget lain untuk nama kategori yang lain, anda hanya melakukan hal yang sama dengan urutan Langkah Kedua.

Untuk pengaturan custom seperti mengubah ukuran thumbnail, border dan lainnya, anda dapat mengubah pengaturan di bagian CSS, silahkan kreasikan sendiri :

/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

Untuk mengatur jumlah thumbnail yang ingin tampil anda tinggal mengubah angka 6 dengan nilai angka yang lain.



<script type='text/javascript'>var numposts = 6;</script>

Manampilkan kategori hanya thumbnail, mungkin cocok untuk blog yang bersifat gallery template, gallery photo dan sejenisnya.

Sumber: http://kolom-tutorial.blogspot.com/

Hmm... akhirnya selesai juga neh pesanan bung bayu lebond dengan alamat di http://bayulebond.blogspot.com/ atas permintaan postingan cara membuat menu horizontal dengan sub menu vertikal-nya, Maaf ya bung baru aku post hari ini artikelnya ! saya ucapkan semoga bisa anda pergunakan tutorial ini. Bagi yang belum tahu gambarannya seperti apa maksud menu horizontal ini berikut dibawah ini screenshot-nya, apabila ingin memperbesar gambarnya klik pada gambar tersebut ya !

untuk langkah-langkah membuat menu horizontal with drop down perhatikan berikut dibawah ini  :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut (tekan ctrl+F) : ]]></b:skin> kemudian simpan kode berikut diatas kode]]></b:skin>

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #F2F2F2;
width: 100%;
background: #151515
repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #F2F2F2;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #F2F2F2;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: #DF0101
repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #6E6E6E;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #151515;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #848484;
}

Simpan kode berikut dibawah kode ]]></b:skin>

<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>

Simpan kode berikut diatas kode <div id='content-wrapper'> atau dibawah kode </header>

<div class='chromestyle' id='chromemenu'>

<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Menu1</a></li>
<li><a href='#' rel='dropmenu2'>Menu2</a></li>
<li><a href='#' rel='dropmenu3'>Menu3</a></li>
<li><a href='#' rel='dropmenu4'>Menu4</a></li>
<li><a href='#' rel='dropmenu5'>Menu5</a></li>
<li><a href='#' rel='dropmenu6'>Menu6</a></li>
<li><a href='#' rel='dropmenu7'>Menu7</a></li>
<li><a href='#' rel='dropmenu8'>Menu8</a></li>
</ul>
</div>

<!--code sub menu vertikal -->
<div class='dropmenudiv' id='dropmenu1'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>


<!--code sub menu vertikal2 -->
<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

Langkah terakhir lakukan dengan menelan tombol save template. Terima kasih atas atas perhatiannya dan semoga trik membuat menu horizontal ini bermanfaat dan jika ingin memasang menu horizontal dengan drop down support all browser klik disini

Rekan2 Blogger ... Kali ini saya akan menulis dan belajar ( khususnya saya sendiri ) untuk membuat fungsi Read more / Baca selanjuynya adalah fungsi pemenggalan pada suatu paragraf yang sering kita lihat di kebanyakan blog yang sangat berguna untuk mengurangi tampilan awal pada suatu blog, sehingga tidak terlalu memakan tempat.

Trik untuk membuatnya sangatlah mudah, langsung saja y saya akan menuliskan caranya dan ikuti langkah2 berikut :

Setting kode HTML :

1. Masuk ke Account blogger sobat.
2. Pilih Tata Letak => Edit HTML.
3. Silahkan save dulu template tersebut, ini untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
4. Klik / Beri tanda centang Tulisan "expand widget template" yang ada diatas kanan kolom edit HTML. ( Tunggu beberapa saat ketika proses sedang berlangsung )
5. Lalu Cari Kode :

Atau kode dibawah ini ( Sama saja )


6. Hapus kode diatas lalu ganti dengan kode dibawah ini.


7. Klik tombol simpan dan selesai

Setting Format :

1. Klik Pengaturan.
2. Klik Format.
3. Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi tesxt area kosong tersebut dengan kode di bawah ini :


4. Klik tombol Simpan Pengaturan

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.

Cara posting artikel :

1. Klik menu Posting.
2. Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :


3. Tuliskan artikel yang ingin tampak didepan / tidak disembunyikan pada blog sebelum kode dibawah ini :


4. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode ( Tulis kode dibawah ini pada bagian paling bawah postingan ) :


5. Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING.
6. Klik tulisan Lihat Blog (di jendela baru) untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas.

Mudah2an dapat membantu, kususnya bagi para rekan2 blogger yang masih pemula seperti saya. Jika rekan2 yang gagal mempraktekkan cara ini, anda jangan khawatir untuk mengembalikanya seperti semula sangat mudah asal anda punya backup data yang di simpan. Anda tinggal copas aja kode yang anda backup tadi dan pastekan di kolom edit HTML. Selesai ...