#under_header{ margin:10px 0; padding:1%; width:98%; }

Minggu, 15 Juli 2012

Membuat Menu Vertical


Modifikasi Menu Vertical
 contoh seperti di bawah ini :

kode script nya :
<div id="content-wrapper">
<div class="sidebar" id="left-sidebar-wrapper">
<div class="sidebar1 section" id="sidebar1">
<div class="widget HTML" id="HTML2">
<h2 class="title">
<br /><img border="0" src="http://i919.photobucket.com/albums/ad35/misawahyudi/Animasi%20Bloggers/DaftarPosting.jpg" style="display: block; margin: 0pt auto; text-align: center;" /></h2>
<div class="widget-content">
<style type="text/css">
.daftar_posting{list-style:none;margin-left:-40px;font-family:Droid Serif;font-size:11px;color:lime;text-align:left;}
.daftar_posting a{color:yellow;border-top:1px dotted blue;border-bottom:1px dotted blue;background:transparent url(http://i919.photobucket.com/albums/ad35/misawahyudi/Animasi%20Bloggers/Arah.gif) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:red;}
</style>
<style type="text/css">
.ToArDafPost_CommBox, .ToArDafPost_CommBox-cumulus, .Label .widget-content {background:#000) bottom center repeat;-o-transition:all 2s ease-in;-moz-transition: all 2s ease-in;-webkit-transition:all 2s ease-in;}
.ToArDafPost_CommBox-cumulus {opacity: 0.2;filter:alpha(opacity=20);}
.Label .widget-content {margin: 20px auto;width: 400px;height: 250px;overflow: auto; opacity: 0.2;filter:alpha(opacity=20);}                               
.ToArDafPost_CommBox { overflow:auto;height:200px; padding:15px 10px 10px 0;opacity:0.1;}               
.ToArDafPost_CommBox:hover, .ToArDafPost_CommBox-cumulus:hover, .Label .widget-content:hover{opacity:1.0; filter:alpha(opacity=100);}
.ToArDafPost_CommBox a{color:#cb5d03;font-size:12px;font-weight:bold;text-decoration:none;}
.ToArDafPost_CommBox a:hover{text-decoration:underline;color:#33FF00;font-style:normal;}
</style>
<br />
<div class="ToArDafPost_CommBox-cumulus">
<div style="background: none repeat scroll 0% 0% rgb(51, 51, 51); border: 1px solid rgb(255, 255, 255); margin: 2px -10px; padding: 4px;">
<div style="background: none repeat scroll 0% 0% rgb(17, 17, 17); border: 2px solid rgb(68, 68, 68); height: 450px; overflow: auto; padding: 4px; width: 240px;">
<div style="width: 800px;">
<script language="javascript" src="http://yourjavascript.com/0181211318/daftarPosting.js">
</script><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LtOzn-wiDio3V0T5L_4IgKFe7cn31Q3oVCCH5RhefTGemE4PyZfC1cNws9SA7fzvJdBbg6G9mk4plAahjfobpQBjcCsckyqVvL-OICF-f4XhWxxOlGti0dO90X67do6oBRRg4XRVM-M/s1600/coollogo_com-249567191.gif" imageanchor="0" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LtOzn-wiDio3V0T5L_4IgKFe7cn31Q3oVCCH5RhefTGemE4PyZfC1cNws9SA7fzvJdBbg6G9mk4plAahjfobpQBjcCsckyqVvL-OICF-f4XhWxxOlGti0dO90X67do6oBRRg4XRVM-M/s1600/coollogo_com-249567191.gif" /></a>
<br />
<ol class="daftar_posting">
<li><a href="http://toar--tangkere.blogspot.com/2012/07/penganiayaan.html">Membuat Menu Vertical</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/mivo-tv.html">Mivo-tv</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/mendisable-klik-kanan-dengan.html">Mendisable-klik-kanan-dengan</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/mendisable-klik-kanan-pd-gambar-di-blog.html">Mendisable-klik-kanan-pd-gambar-di-blog</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuka-blog-anti-klik-kanan.html">Membuka blog anti klik kanan</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/cara-memasang-revolver-maps-di-blog.html">Memasang revolver maps di blog</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/klik-kanan.html">Menonaktifkan klik kanan pada blog</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/cara-membuat-foto-gambar-berputar-di.html">Membuat foto/gambar berputar di kubus</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/generator-membuat-foto-gambar-berputar.html">Generator membuat foto/gambar berputar</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/menambah-add-gadgets-diatas-header_13.html">Memasang widget berdampingan</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/classseparator-styleclear-both-text_123.html">Gambar Hipnotis</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/blog-post_11.html">Gambar Animasi 1</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/classseparator-styleclear-both-text_13.html">Gambar Animasi 2</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/gambar-animasi-3.html">Gambar Animasi 3</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/mengganti-logo-blog-dengan-foto.html">Mengganti-logo-blog-dengan-foto</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-judul-blog-berjalan.html">Membuat-judul-blog-berjalan</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-teks-mengikuti-gerakan-kursor.html">Membuat-teks-mengikuti-gerakan-kursor</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-tombol-suka.html">Membuat-tombol-suka</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/macam-macam-marque.html">Macam-macam-marque</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/var-birdspritehttp2.html">Burung Twitter terbang di blog</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/3-widget-animated-twitter-follow.html">3-widget-animated-twitter-follow</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-menu-icon-zommer.html">Membuat-menu-icon-zommer</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-scroll-teks-halaman.html">Membuat-scroll-teks-halaman.html</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/blog-post.html">Membuat Readmore</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/tempatkan-kode-di-bawah-ini-di-kolom.html">Memasang hewan peliharaan di blog</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/contoh-tulisan-berkedip-selamat-datang.html">Membuat tulisan berkedip</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/kegunaan-dan-manfaat-menu-tabel-ialah.html">Membuat tabel</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-menu-dropdown.html">Membuat-menu-dropdown</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-title-bar-berjalan.html">membuat-title-bar-berjalan</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/kode-kode-dasar-html.html">Kode-kode-dasar-html</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/trotoartoartrotoar.html">Membuat Tulisan dengan efek Matrix</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-link-mengeluarkan-bintang.html">Membuat-link-mengeluarkan-bintang.html</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/berikut-langkah-langkahnya-loginlah.html">Membuat link seperti Pelangi</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/membuat-gambar-bergerak-di-pojok-blog.html">Membuat-gambar-bergerak-di-pojok-blog</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/classseparator-styleclear-both-text.html">Zodiak</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/mengubah-background-blog-dengan-gambar.html">Mengubah-background-blog-dengan-gambar sendiri</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/contoh-penulisan-kode-warna.html">Tabel Kode Warna</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/menambah-add-gadgets-diatas-header.html">Menambah-add-gadgets-diatas-header</a></li>
<li><a href="http://toar--tangkere.blogspot.com/2012/07/menyembunyikan-postingan-blog.html">Menyembunyikan-postingan-blog</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
caranya :
-  Copy kode diatas
-  masuk akun blog
-  pilih Desain
-  pilih Tata Letak
-  klik Add gadget
-  pilih Html/javascript
   Paste kode diatas, simpan dan Lihat blog
   ....selesai....

NB : 
    Tulisan warna Ungu :
                          height: 450px  ---Tinggi Tabel
                          width: 240px  ---Lebar Tabel
                          width: 800px  ---Lebar Halaman Tulisan dlm Tabel
                                               Bisa di atur sesuai keinginan kita.
              warna Merah :
        contoh :    http://toar--tangkere.blogspot.com/2012/07/penganiayaan.html
                     ---  ganti dengan Url tujuan anda.
              warna Biru :
        contoh :   Membuat Menu Vertical
                    --- ganti sesuai dengan judul Url anda.
              warna hijau :        contoh :<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LtOzn-wiDio3V0T5L_4IgKFe7cn31Q3oVCCH5RhefTGemE4PyZfC1cNws9SA7fzvJdBbg6G9mk4plAahjfobpQBjcCsckyqVvL-OICF-f4XhWxxOlGti0dO90X67do6oBRRg4XRVM-M/s1600/coollogo_com-249567191.gif" imageanchor="0" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LtOzn-wiDio3V0T5L_4IgKFe7cn31Q3oVCCH5RhefTGemE4PyZfC1cNws9SA7fzvJdBbg6G9mk4plAahjfobpQBjcCsckyqVvL-OICF-f4XhWxxOlGti0dO90X67do6oBRRg4XRVM-M/s1600/coollogo_com-249567191.gif" /></a>

                        ----******----

Tidak ada komentar:

Posting Komentar