Blog Deniededen

Flamboyan68 - Para blogger dalam setiap aktivitas blogging pastinya selalu menyempatkan diri untuk mengevaluasi perfomance/tampilan template blognya. Apa yang kurang atau yang harus di tambah  perfomance blog dengan harapan supaya para visitor betah untuk berlama-lama dan lebih penting lagi adalah memberikan kemudahan kepada visitor untuk mengeksplore semua artikel blog kita. Salah satunya adalah tampilan menu bar dengan style dropdown yang merupakan salah satu opsi baik apabila sobat menginginkan tampilan semua halaman blog di lihat dengan mudah oleh visitor.

Dan pada kesempatan jumat pagi yang cerah ini saya akan berbagi artikel dengan sobat blogger tentang Cara Mudah Membuat Menu Bar Dropdown Di Blog. Di bawah ini ada cara dan langkah yang bisa sobat ikuti apabila sobat akan bereksperimen, silahkan sobat simak dan harapan saya semoga bermanfaat :

#menubar{

border-bottom:4px solid #ff0000;

width:1025px;

height:32px;

background:#000000;

float:center;

margin-bottom:3px;

}

#menubar ul{

float:left;

margin:0;

padding:0;

}

#menubar li{

float:left;

list-style:none;

margin:0;

padding:0;

}

#menubar li a, #menubar li a:link{

float:left;

padding:8px 12px;

color:#fff;

text-decoration:none;

font-size:13px;

font-weight:bold;

}

#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {

background: #ff0000;

color: #fff;

text-decoration:none;

}

#menubar li li a, #menubar li li a:link, #menubar li li a:visited{

font-size: 12px;

background: #ff0000;

color: #fff;

text-decoration:none;

width: 150px;

padding: 0px 10px;

line-height:30px;

}

#menubar li li a:hover, #menubar li li a:active {

background: #000000;

color: #ffffff;

}

#menubar li ul{

z-index:9999;

position:absolute;

left:-999em;

height:auto;

width:170px;

margin-top:32px;

border:1px solid ##ff0000;

}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{

left:auto

}

#menubar li:hover, #menubar li.sfhover{

position:static

}       

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/sitemap_10.html'>Sitemap</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/blog.html'>Tutorial Blog</a>

<ul>

<li><a href='http://flamboyan68.blogspot.com/2013/06/seo-friendly.html'>SEO</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/artikel-computer.html'>Computer</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/health.html'>Health</a></li>

</ul></li>

</ul>

</div>

• Silahkan sobat sesuaikan kode warna garis pada bawah menu bar #ff0000, lebar menu bar: 1025px, warna latar/background menu bar #000000.
• Sobat ganti tulisan warna biru yaitu nama menu bar sesuai dengan selera sobat.
• Ganti link warna merah dengan link sobat.
• selebihnya silahkan sobat modifikasi sendiri sesuai selera

Demikian ulasan saya mengenai Cara Mudah Membuat Menu Bar Dropdown Di Blog, selamaat mencoba dan semoga bermanfaat.

happy blogging.............................

Para visitor dapat melihat tampilan iklan di setiap postingan artikel, dan secara otomatis dapat membantu  proses pemasaran iklan yang sedang tayang di blog kita. Para visitor yang tertarik dengan iklan dapat langsung meng_klik iklan di halaman artikel tersebut.

Bagi sobat yang ingin memasang script iklan ini dapat mengikuti cara dan langkah di bawah ini :

1. Login / masuk ke akun blogger sobat.
2. Klik template > edit HTML
3. Kemudian sobat cari kode <data:post.body/> gunakan Ctrl + F untuk mempermudah pencarian kode
4. Setelah ketemu copy kode di bawah ini dan paste/letakankan di atas <data:post.body/>

Untuk menghindari terjadinya kesalahan/error sebaiknya kode iklan tersebut di parse terlebih dahulu di Di sini

Keterangan :

- Warna merah adalah posisi iklan yang akan ditempatkan

- Warna biru kode iklan

Hasilnya akan terlihat seperti ini :

Selamat mencoba dan semoga bermanfaat. Happy blogging.................

Source