Membuat menu drop down blog

Membuat Drop Down Menu Di Atas / Di Bawah Header Blog - Menu dropdown atau bisa diartikan submenu adalah tipe menu yang memiliki cabang secara vertikal. Udah pasang Tab Menu Diatas Header Blog ??? Biar tambah nyaman lagi, pasang ini juga .....
   1. Masuk ke Dashboard Blog
   2. Klik Template
   3. Pilih Edit HTML
   4. Cari kode ]]></b:skin> (Tekan CTRL + F untuk memudahkan pencarian)
   5. Copy kode berikut, lalu paste diatas kode ]]></b:skin>

#navbar {display:none}
#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCgk7M-qIbm-Gi0j-vrRQG6C_VMxUosXeyhbvRcRlLltxNbq71oY7QuyFtNCdXw4D_RyLVQZNYCLXy_ZAJb_F-qSDxmomlM66OJ_Yuo6Pli6ua5Ok7t5-wJ6Af3ug5VAoLpn4PH4Vpsc/s1600/menubar.png) repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;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/AVvXsEidEdP_zZBuTlQ8pRT52e9pZ-PQ4bfrW_Hz7PPHjHSwa8IC1B74tTeQnBe-C7NEk2C45YY8E2WCPNdts4ynShEq0qWaAIDEruMBWnN7xyDGgOu4-dR3O9JgooF9lItkKsKDCnxpfYvBB7s/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}

Keterangan :
         - Kode berwarna kuning adalah lebar tab, silahkan sesuaikan dengan lebar
            header blog kamu

   6. Silahkan cari kode berikut :

• <header>   : Menempatkan menu diatas nama blog (Header)

• </header> : Menempatkan menu dibawah nama blog (Header)
  

   7. Copy kode berikut, lalu paste diatas kode <header> atau dibawah kode
       </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='URL Tujuan' target='new'>HOME</a></li>
<li><a href='URL Tujuan' target='new'>Menu 1</a></li>
<li><a href='URL Tujuan' target='new'>Menu 2</a></li>
<li><a class='trigger'>Menu 3</a>
<ul>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 3.1</a></li>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 3.2</a></li>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 3.3</a></li>
</ul>
</li>
<li><a href='URL Tujuan' target='new'>Menu 4</a></li>
<li><a class='trigger'>Menu 5</a>
<ul>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 5.1</a></li>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 5.2</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://demo-completed.blogspot.co.id/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://demo-completed.blogspot.co.id/'/>
<input id='search-box' name='q' size='25' style='background: #EEEDED; border: 1px solid #000000 ' type='text'/>
<input id='search-btn' type='submit' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan :
         - Kode berwarna pink adalah judul pada tab menu
         - Kode berwarna hijau adalah URL tujuan
         - Kode berwarna aqua adalah kolom pencarian, ganti dengan URL Blog kamu

   8. Klik Pratinjau terlebih dahulu jika masih ragu
   9. Jika sudah yakin, klik Save / Simpan
   10. Selesai

Silahkan kreasikan karyamu ^_^ Perlu ketelitian yang sangat jeli dan pasti juga kesabaran yang memadai.

source : http://www.sindikat19.com/2016/06/membuat-drop-down-menu-diatas-dibawah.html

Baca Selengkapnya »

Belajar Cara Edit Template Blogger Supaya Keren

Mengedit Template yang ada di Blogspot memang saya akui bukan pekerjaan yang mudah, dimana kita tidak diberi ruang yang bebas dalam melakukan pengeditan. Walaupun tidak seluasa saat kita Membuat Website, namun jangan khawatir dengan kreatifitas yang Anda miliki, kita bisa 'menembus' batasan tersebut.

Baik. tanpa perlu berlama-lama, sekarang langsung saja kita mulai pembahasan Cara Edit Template Blogger milik Anda supaya menjadi lebih keren.

Catatan : Disini saya akan mengedit Template Sederhana bawaan Blogger yang ada di urutan 1.

Alasan utama saya memilih Template ini adalah karena Ringan dan cukup Mudah jika kita ingin mengedit seluruh bagian Template, karena sudah tersedia comment dari pihak Blogger untuk memudahkan kita mengenali setiap bagian dari kode xml template tersebut.

Contoh comment :

•  /* Content ------------ */ ( menandakan kode kode css yang ada dibawahnya untuk mengatur tampilan isi )

• /* Header ------------*/ ( menandakan kode kode css yang ada dibawahnya untuk mengatur tampilan atas template, seperti misalnya judul blog )

Lalu kapan kita mulai mengedit Template Blogspotnya ? sebentar, dalam mengedit sebuah tampilan sebuah blog, kita tidak wajib untuk terjun langsung kedalam sourcenya. Yang pastinya itu akan berisi ribuan kode CSS, JS, dan HTML yang akan membuat Anda dan saya bingung 7 keliling.

Lalu apa solasinya, *eh solusinya ? mudah saja kita bisa menggunakan beberapa Tool yang sudah dibundling oleh Browser kita, misal di Chrome ada Developer Tool, dan di Mozilla juga ada tool bernama Web Developer, keduanya memiliki fungsi yang sama tentunya. (namun saya lebih memilih punyanya Chrome karena lebih simple tampilannya).

Langkah Mengedit Template Blogger Supaya Keren

Saya ingatkan sekali lagi, untuk alatnya saya menggunakan Chrome Developer Tool dan untuk bahannya saya menggunakan Template Sederhana Blogger.

1. Menghilangkan Navigasi Bar Template

   
   Langkah awal kita akan merombak tampilan depan, yang jadi masalah ada Navigasi Bar yang (menurut saya) sedikit membingungkan kita saat ingin melakukan pengeditan template. Untuk itu kita akan menghilangkannya.
   
   Caranya, klik kanan dimana saja, lalu pilih Inspect Element. Selanjutnya kita akan sedikit bermain-main dengan alat yang mempunyai ikon kaca pembesar atau sering disebut selector.
   
   
   
   
   Sekarang arahkan kursor Anda tepat dipojok kiri bawah Navigasi Bar tersebut (intinya hingga semua tertutupi dengan warna biru), contoh seperti gambar dibawah ini.
   
   
   
   
   Lalu lihat sebelah kanan bawah layar Anda, tulisan Matched CSS Rules, lalu tambahkan kode 'display: none;' tanpa tanda kutip. Cara menambahkannya klik pada simbol '}' lalu tinggal Anda ketikkan perintah 'display: none;' dan lenyap sudah Navigasi Bar tersebut.
   
   Catatan : Untuk menghilangkan Navigasi Bar tersebut sebenarnya ada dua cara, yaitu dengan visibility: hidden dan display: none. Bedanya, kalau hidden itu hanya menyembunyikan, sementara none itu benar-benar menghilangkan. Jika masih bingung silahkan Anda coba, dan lihat perbedaanya.
   
   

2. Mangganti Warna Background Template

   
   Cara kedua ini bisa dibilang yang paling penting ya, karena jika salah dalam memadukan warna, bisa jadi pengunjung akan kabur. Dan langkah untuk Mengganti Warna Template ini sama saja seperti waktu kita ingin menghilangkan Navigasi Bar tadi.
   
   Pertama tentu klik dulu kaca pembesarnya, lalu arahkan ke tempat yang ingin Anda ganti Backgroundnya, contoh saya ingin mengganti warna background hanya dibagian sisi kanan dan sisi kiri, maka akan saya arahkan ke sebelah kiri template. Lalu saya ingin mengubahnya menjadi warna abu-abu muda, ya tinggal saya tambahkan kode css 'backgorund-color: #f2f2f2'.
   
   Lihat gambar dibawah ini agar tidak bingung.
   
   
   
   
   

3. Menambahkan Border Pada Sisi Template Tertentu

   
   Yah, sekali lagi tak jauh beda dengan 2 Cara diatas, seperti biasa Anda arahkan dahulu pada bagian yang ingin Anda tebali dengan garis (border).
   
   Contoh saya ingin memberi border pada pembatas sisi kiri dan kanan, caranya tinnggal saya tambahkan 'border: 1px solid gainsboro;' ini merupakan selektor bertingkat ya, jadi border akan berwarna abu-abu (gainsboro mirip gray).], memiliki garis yang padat (tidak putus-putus) dan mmemiliki ketebalan 1px.
   
   Hasilnya seperti gambar dibawah ini.
   
   
   
   
   Lanjut semisal kita ingin menambahkan ruang diatas judul, semisal untuk penempatan iklan. Caranya cukup kita tambahkan 'div' dibawah class='content-cap-top cap-top' Lalu edit css divnya dengan value :
   
   

   border: 1px solid gainsboro;
   height: 40px;
   background-color: #FDF5F5;
   border-bottom: 0;
   padding-top: 20px;
   font-size: 20px;
   text-align: center;

   
   Alasan saya menuliskan 'border-bottom: 0' adalah untuk menghilangkan garis yang bertumpuk antara div yang kita buat dengan content-inner.
   
   Dan hasil akhir akan seperti gambar dibawah ini.
   
   
   

Cukup mudah bukan Tutorial Pertama Edit Template Blogger kali ini. Nah, untuk Tutorial Mengedit Template selanjutnya kita akan fokus pada pengeditan Sidebar dan tapilan Artikel. Selengkapnya bisa Anda baca di Belajar Cara Edit Template Blogger Supaya Keren Part 2.

Akhir kata saya ucapkan terimakasih dan selamat Belajar.

source : http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html

Baca Selengkapnya »