CARA MEMASANG MENU BAR ATAU MENU UTAMA DI BAHAGIAN TERATAS HALAMAN BLOG ANDA

Cara memasang menu bar atau menu utama di bahagian teratas halaman blog anda

Agar blog kita lebih nyaman untuk dikunjungi oleh orang banyak dan juga lebih menarik untuk dilihat,maka salah satunya adalah dengan Cara memasang menu bar atau menu utama di bahagian teratas halaman blog anda.

Contohnya seperti gambar dibawah ini :

Nah sekarang langsung  aja ke pokok permasalahanya

1.    Masuk ke menu settingan blog anda

2.   Klik template blog , lalu klik edit html

3.   Cari kode <div class='main-outer'> atau <div id='main-wrapper'> <div id='main'> ( berlainan menurut template blog anda )

4.   Untuk mempermudah pencarian klik ctrl + f atau f3 , lalu tulis atau copy paste <div class='main-outer'> atau <div id='main-wrapper'> <div id='main'> kedalam kotak pencarian

5.   Jika sudah ketemu, copy dan paste / simpan kode yang berada di bawah ini, tepat diatas kode yang  ada diatas tadi :

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

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

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

(((<div class='main-outer'> )))         ini contoh, jangan disimpan

6.   Sehingga menjadi kode seperti di bawah ini :

     

Catatan yang perlu di perhatikan pada kode dibawah ini adalah :

1. Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link arsib blog, label (katagori), entri populer yang ada pada blog anda atau bisa juga link/url blog orang lain.

2.   Ganti Tulisan warna biru dengan nama atau judul menu dan sub menu yang anda inginkan.

3.   Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan. 

7.   Kemudian klik simpan template.

    Selamat mencoba....? ( insya ALLAH mudah-mudahan berhasil ).

CARA MEMASANG KOLOM ATAU KOTAK ENTRI POPULAR ( POPULAR POSTS )

Cara memasang kolom atau kotak entri popular ( popular posts )

Agar blog kita lebih nyaman untuk dikunjungi oleh orang banyak dan juga lebih menarik untuk dilihat,maka salah satunya adalah dengan cara membuat kolom atau kotak entri popular ( popular posts ) agar tidak memanjang kebawah,yaitu dengan menjadikan kolom atau kotak entri popular   (popular posts )  supaya pendek .

Pertama anda buat dulu Widget entri popular ( popular posts )  dan kemudian baru anda masuk ke menu template blog anda dengan cara :

1.    Masuk ke menu settingan blog anda

2.   Klik template blog , lalu klik edit html

3.   Cari kode <div class='widget-content popular-posts'>

4.   Untuk mempermudah pencarian klik ctrl + f atau f3 , lalu tulis atau copy paste <div class='widget-content popular-posts'> kedalam kotak pencarian

5.   Jika sudah ketemu, Simpan kode di bawah ini tepat di bawah kode <div class='widget-content popular-posts'>

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #5F04B4;'>

6.   Sehingga menjadi kode seperti di bawah ini

  <b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>

    <b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div class='widget-content popular-posts'>

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #5F04B4;'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='data:showThumbnails == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            </div>

            <div style='clear: both;'/>

          <b:else/>

            <!-- (4) Show snippets and thumbnails -->

            <div class='item-content'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

              <div class='item-snippet'><data:post.snippet/></div>

            </div>

            <div style='clear: both;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</div>

</b:includable>

Dan beri kode penutupnya yaitu kode </div> pada baris yang ke 2 , sehingga kode </div> nya menjadi 2 baris di atas kode </b:includable>

7.   Kemudian klik simpan template

Catatan yang perlu di perhatikan pada kode dibawah ini adalah :

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #5F04B4;'>

1.    Kode height: 300px adalah untuk membuat tingginya kotak atau kolom entri popular ( popular posts ) .

2.   Kode  5F04B4adalah untuk membuat warna kotak atau kolom entri popular ( popular posts ).

3.   Silahkan anda download kode warna di link di bawah ini .

DOWNLOAD DISINI

http://ngeblog07.blogspot.com/2013/04/kumpulan-kode-warna-html-lengkap.html

HASILNYA SEPERTI GAMBAR INI

                                                                        PENULIS ( DESAINS ) TGK. ABANG

                                

CARA MEMASANG KOLOM ATAU KOTAK LABEL ( KATEGORI DLL )

Cara memasang kolom atau kotak label ( kategori dll )

Agar blog kita lebih nyaman untuk dikunjungi oleh orang banyak dan juga lebih menarik untuk dilihat,maka salah satunya adalah dengan cara membuat kolom atau kotak label ( kategori dll ) agar tidak memanjang kebawah,yaitu dengan menjadikan kolom atau kotak  label ( kategori dll )  supaya pendek .

Pertama anda buat dulu Widget label ( kategorinya dll )  dan kemudian baru anda masuk ke menu template blog anda dengan cara :

1.    Masuk ke menu settingan blog anda

2.   Klik template blog , lalu klik edit html

3.   Cari kode <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

4.   Untuk memper mudah pencarian klik ctrl + f atau f3 , lalu tulis atau copy paste <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> kedalam kotak pencarian

5.   Jika sudah ketemu, Simpan kode di bawah ini tepat di bawah kode <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: #FF0080;'>

6.   Sehingga menjadi kode seperti di bawah ini

 <b:section-contents id='sidebar-left-1'>

  <b:widget id='Label1' locked='false' title='KATEGORI' type='Label'>

    <b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: #FF0080;'>

    <b:if cond='data:display == &quot;list&quot;'>

      <ul>

      <b:loop values='data:labels' var='label'>

        <li>

          <b:if cond='data:blog.url == data:label.url'>

            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>

          <b:else/>

            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

          </b:if>

          <b:if cond='data:showFreqNumbers'>

            <span dir='ltr'>(<data:label.count/>)</span>

          </b:if>

        </li>

      </b:loop>

      </ul>

    <b:else/>

      <b:loop values='data:labels' var='label'>

        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

          <b:if cond='data:blog.url == data:label.url'>

            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>

          <b:else/>

            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

          </b:if>

          <b:if cond='data:showFreqNumbers'>

            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>

          </b:if>

        </span>

      </b:loop>

    </b:if>

    <b:include name='quickedit'/>

  </div>

  </div>

</b:includable>

Dan beri kode penutupnya yaitu kode </div> pada baris yang ke 2 , sehingga kode </div> nya menjadi 2 baris di atas kode </b:includable>

7.   Kemudian klik simpan template

Catatan yang perlu di perhatikan pada kode dibawah ini adalah :

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: #FF0080;'>

1.    Kode height: 250px adalah untuk membuat tingginya kotak atau kolom label ( kategori dll )
 .

2.   Kode FF0080 adalah untuk membuat warna kotak atau kolom label ( kategori dll )
 .

3.   Silahkan anda download kode warna di link di bawah ini .

DOWNLOAD DISINI

http://ngeblog07.blogspot.com/2013/04/kumpulan-kode-warna-html-lengkap.html

HASIL SEPERTI GAMBAR INI

                                                       PENULIS ( DESAINS ) TGK. ABANG