Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 

Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjkwzVzbQXVIvg3euVTXmsM4lgW2YAq0hgBOvK1Uz7odh0ZIAzxS_PKpKwvjt72rOHJRlj_wgj3v_OnE_NK6N_B5xflDB07o0ASuwvoIhKCbQCckYT4iUL2DgLeuFIrSMeYR5ZysGXME/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVdceamP2izxusVATAOGi7mc9gXm-TNxWfqh57Q3EbDkryWrSTWmGPHCaKSmWt7Pr2BlQ7PYi_SXNLLkhWxYEE83C9uwK9_M2SMOTjBZZkT2uqXysq9F1k9TSK7IKo1cJR-rMHRrEvQF8/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya sobat blogger cari kode berikut:

• <header>  : untuk menempatkan menu di atas nama blog
• </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT8OKMgExZXLPnIOOIwbsrPXAvPOy64p_oHp9fSIPaD-YoO00WQ-gtMc0F0hVSI32bxGJzubH6P-mSwZYwMZBdh5QKgr40hqh9sUeFL11mMwPsvZ3F2f2hszCvDjRcVjQjATyunggh2LM/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='https://plus.google.com/116785805222366574106/posts' target='new'>Profil</a></li>
<li><a class='trigger'>Tutorial</a>
<ul>
<li><a href='http://komputeratb.blogspot.com/'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://blogatb.blogspot.com/'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://adobemcatb.blogspot.com/'>Adobe Master Collection</a></li>
<li class='hr'/>
</ul>
<li><a class='trigger'>News</a>
<ul>
<li><a href='https://plus.google.com/u/0/116785805222366574106/posts'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://lokalnewsatb.blogspot.com/'>Local</a></li>
<li><a href='http://nasionalatb.blogspot.com/'>Nasional - Internasional</a></li>
</ul>
</li>
<li><a href='http://sportatb.blogspot.com/' target='new'>Sport</a></li>
<li><a href='http://tvonlinek9atb.blogspot.com/'>TV online</a></li>
<li><a href='http://technologyatb.blogspot.com/' target='new'>Technology</a></li>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://otomotifatb.blogspot.com/'>Otomotif</a></li>
<li><a href='http://wisatabudayaatb.blogspot.com/'>Wisata Budaya</a></li>
<li class='hr'/>
<li><a href='http://kulineratb.blogspot.com/'>Kuliner</a></li>
<li class='hr'/>
<li><a href='http://cerpenatb.blogspot.com/'>Drama - Cerpen</a></li>
<li class='hr'/>
<li><a href='http://musicaatbk9.blogspot.com/'>Music</a></li>
<li class='hr'/>
<li><a href='http://selebatb.blogspot.com/'>Seleb</a></li>
<li class='hr'/>
<li><a href='http://gameatb.blogspot.com/'>Game</a></li>
<li class='hr'/>
<li><a href='http://healtatb.blogspot.com/'>Healt</a></li>
<li class='hr'/>
<li><a href='http://atbceritarakyat.blogspot.com/'>Cerita Rakyat</a></li>
<li class='hr'/>
<li><a href='http://softwareprogramatb.blogspot.com/'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://kelompok9atb.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://kelompok9atb.blogspot.com/'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV4FKuUriCq1WafinmC18A2FdRWoR0uWmmef4OX1gDd0CgJNkIvwAYnSMYFRxAcmfXxksts156YwIA2ZFcGf8DX9p9_Fb0cMHynWhjoH8bArNEim6cF2qTwtIO49zxwUI2YcBAlEnwjZk/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5hY36c3FTeo3F8XfUOy83Hb8VFido6DJ0KboqAQs9zgWZlj2qQLlSx6gzIx3zJU0W_mOTWWGbaiPUsRkVc8pAOLqX5I_EniW6pzxI_nsY9EmSTZgVzUQ9HdevwVxzBCm8hy0POdT-N8/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.

Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Read More

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu

Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.

menu navigasi horizontal bercabang

Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,

Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

add menu navigasi

    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
   
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul>
                    <li><a href='#'>Sub Menu 1</a></li>
                    <li><a href='#'>Sub Menu 2</a></li>
                    <li><a href='#'>Sub Menu 3</a>
                   <ul>
                    <li><a href='#'>Sub Sub Menu 1</a></li>
                    <li><a href='#'>Sub Sub Menu 2</a></li>
                    <li><a href='#'>Sub Sub Menu 3</a></li>
                  </ul>
                  </li>
                  </ul>             </li>

          </ul>
        </div>

Pengaturan dan modifikasi;

1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE

2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru 

                  <ul>
                    <li><a href='#'>Sub Sub Menu 1</a></li>
                    <li><a href='#'>Sub Sub Menu 2</a></li>
                    <li><a href='#'>Sub Sub Menu 3</a></li>
                  </ul>

bisa juga sobat tambahkan di item menu lainnya jika ingin.

3.  Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .

4.  Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.


Oke saya kira sudah cukup jelas dan mudah, untuk live  demo silahkan buka di sini

Selamat mencoba.  

Update:

Buat sobat yang bermasalah saat memasang di elemen header cari kode berikut ini (warna merah):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Sample Blog (Header)' type='Header'>
<b:includable id='main'>

ganti 1 menjadi 3 no menjadi yes sehingga menjadi seperti ini. 

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Setelah itu pindahkan kode HTML/javascriptnya diatas atau di bawah elemen header.

Read More

Cara Membuat Read More Otomatis

Pada posting sebelumnya saya telah membuat artikel tentang bagaimana cara membuat read more pada postingan blog. Membuat read more sederhana pada saat menulis artikel adalah dengan cara mengklik ikon read more yang berbentuk seperti "kertas sobek" setelah pointer mouse ditempatkan pada kalimat yang dikehendaki. 

Dengan cara ini tentunya dilakukan secara manual, sehingga kita harus melakukannya setiap menulis artikel. bagi sebagian blogger hal ini tidak masalah selama dia ingat untuk mengklik ikon read more tersebut. Namun jika kita lupa, tentu saja kita harus mengedit kembali postingan yang telah dipublikasikasikan sebelumnya. Dalam ngeblog tentu saja kita ingin sesuatu yang praktis, ringkas dan otomatis, begitu pula dalam hal membuat artikel agar read more terpasang secara otomatis.

Jika sobat ingin tau bagaimana cara memasang read more otomatis, mari kita sama-sama menyimak tutorial berikut ini.

1. Langkah pertama masuk ke akun blogger.
2. Pastikan sobat sudah membackup template sobat.
3. Buka dasbor blog > Template/edit HTML> centang expland template widget.
4. Cari kode <data:post.body/>

kemudian ganti dengan kode di bawah ini;

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Jika ada lebih dari 1 (satu) kode <data:post.body/> , pilih yang pertama. 


4. Untuk tampilan di blognya silakan masukkan kode css di bawah ini, tepat diatas kode ]]></b:skin>

thumb img {float: left; margin: 0 10px 5px 0;}

Klik pratinjau dan Simpan template.

Read More