| TEMPLATE KEREN Posted: 30 Apr 2012 07:51 AM PDT  Bagi anda yang gemar koleksi template keren, admin EPG Studio bagi informasi untuk mendapatkan template yang mungkin menarik minat anda. Template yang dimaksud merupakan produk dari http://btemplates.com/ yang memiliki koleksi template yang beragam. Disana anda dapat memilih template dengan colums, style, colors dan sidebar yang bervariasi. Sebagai contoh anda dapat memeperhatikan gambar template yang tersedia disana. Silahkan anda klik untuk menuju ke situs asalnya.    Ketiga template diatas hanya merupakan contoh. Untuk tampilan lebih lengkapnya, coba anda kunjungi situs tersebut. Silahkan anda pilih tampilan dari template yang sekiranya cocok untuk blog anda. Selamat mencoba, semoga bermanfaat...  |
| PULL DOWN MENU DENGAN CSS Posted: 30 Apr 2012 05:59 AM PDT  Pull Down Menu dengan Css adalah salah satu cara untuk menghemat tab menu yang tampil pada blog. Hal itu karena pada setiap menu, kita dapat menambah beberapa sub menu yang tampilan tab menu tidak memanjang ke samping tapi kebawah sesuai dengan sub menu yang kita tambahkan. Sebagai contoh, coba anda arahkan mouse pada demo Pull Down Menu dibawah ini : Dari contoh diatas, sekarang anda telah lebih memahami apa itu Pull Down Menu dengan Css. Jika anda berminat untuk menampilkan Pull Down Menu dengan Css pada blog anda, ikuti langkah-langkahnya dibawah ini : - Masuk ke Dasbor blog anda
- Pilih Tata Letak
- Klik Tambah Gadget dimana anda ingin meletakan Pul Down Menu
- Pilih HTML/JavaScript.
- Copy Script dibawah ini kemudian paste pada kolom yang tersedia
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFF00;background: #0000A0;width:100%; border:solid 1px #FFFFFF;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFF00;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #FFFFFF; border-left:solid 1px #FFFFFF;}
.pd_menu_01 ul li a {color: #FFFF00;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFF00;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#FF0080; text-decoration:none; color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#000000; color:#FFFF00;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#000040; text-decoration:none;color:#FF0080;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#FF0080; text-decoration:none;color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#000000; color:#FFFF00;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#000000; color:#FFFF00;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#000040; text-decoration:none;color:#FF0080;} /*Color subcells hovering mode*/
</style> - Script diatas merupakan untuk mengatur tampilan keseluruhan dan belum menampilkan Menu Pull Down.
- Kode warna yang ada pada script diatas dapat anda ganti sesuai keinginan.
- Untuk menampilkan Pull Down Menu, copy script dibawah ini dan paste tepat dibawah kode diatas tadi.
<div class="pd_menu_01 ">
<ul><li><a href="URL/ALAMAT YANG DITUJU">BERANDA</a>
</li></ul>
<ul><li><a href="#">FREE DOWNLOAD</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >FREE MP3</a></li>
<li><a href="URL/ALAMAT TUJUAN" >FREE SOFTWARE</a></li>
</ul>
</li></ul>
<ul><li><a href="#">JEJARING SOSIAL</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >MY FACE BOOK</a></li>
<li><a href="URL/ALAMAT TUJUAN" >TWEETER</a></li>
</ul>
</li></ul>
<ul><li><a href="#">TIPS AND TRIK</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >BLOGGER</a></li>
<li><a href="URL/ALAMAT TUJUAN" >WORDPRESS</a></li>
<li><a href="URL/ALAMAT TUJUAN" >KESEHATAN</a></li>
</ul>
</li></ul>
<ul><li><a href="#">TV ONLINE</a>
<ul>
<li><a href="URL/ALAMAT TUJUAN" >RCTI</a></li>
<li><a href="URL/ALAMAT TUJUAN" >GLOBAL TV</a></li>
<li><a href="URL/ALAMAT TUJUAN" >MNC TV</a></li>
<li><a href="URL/ALAMAT TUJUAN" >METRO TV</a></li>
</ul>
</li></ul>
</div> - Kode kedua diatas merupakan kode untuk menampilkan Pull Down Menu.
- Ganti tulisan yang berwarna kuning dengan nama tampilan dan URL/alamat yang dituju.
- Setelah selesai pengeditan, klik tombol simpan
- Lihat blog anda...
 |
0 komentar:
Posting Komentar