Cara Membuat Menu Bar di Blog


YIS - Sangat Banyak blogger yang memberikan tutorial membuat menu bar pada bagian header blogspot. Namun bagi Anda yang kurang paham atau pemula dalam dunia blog, tidak perlu khawatir, karena menu bar tersebut bisa dengan mudah dibuat tanpa harus merubah HTML. Disini, saya akan membagikan kode menu bar yang lagi saya pakai ini untuk blog Anda dan memodifikasinya sesuai dengan template yang Anda pakai saat ini. Berikut adalah bagaimana caranya membuat menu bar di blog Anda.

Tutorial :


1. Masuk ke menu Template - Edit HTML
2. Cari kode ]]></b:skin> dan salin lalu tempelkan tepat diatas kode tersebut.

/* Menu by Yogi Irhandi Simamora*/

#YISmenu{background:#c0392b;width:100%;overflow:hidden;margin-bottom:16px;font-family:Federant}
#YISmenu ul{color:white;margin:0px;padding:0px;text-align:center}
#YISmenu li{display:inline-block;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;transition:all .6s ease-in-out;float:left}
#YISmenu a{display:block;padding:8px 15px 8px 15px;text-decoration:none;font-family: 'Stalinist One', cursive;text-transform:uppercase;text-align:center;font-size:12px;font-weight:200;color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out}
#YISmenu a:hover{text-decoration:none;text-shadow:0px 0px 5px #c0392b;margin-top:-5px}
#YISmenu img{margin:-5px}
#search{float:right;margin-right:-22px}
#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-HuhU2j6GrwtitqWsu_YSvuoh09KgjScWWSmafktScQT4XlNgZGljY8OQFllKyMehKmUyR1hBrB-yB_aF8d-iJW1HzY3Yynl0PoYZylHoRGl0k6vpi_tbb8GBNTs6xtnEAaAk2nU98Y/s1600/cari.png) no-repeat 10px 6px #e74c3c;float:right;width:1px;color:white;letter-spacing:-0.5px;font:16px 'Electrolize';font-variant:small-caps;margin:0;padding:8px 15px 8px 50px;overflow:hidden;border:0;border-radius:1px;-moz-transition:all 0.1s ease 0s;-webkit-transition:all 900ms ease-out;-moz-transition:all 900ms ease-out;-ms-transition:all 900ms ease-out;-o-transition:all 900ms ease-out;transition:all 900ms ease-out;}
#search input[type="text"]:focus{background:#e74c3c;width:300px;padding:8px 10px 8px 10px;}

Keterangan : sesaikan kode background, color, dan yang lainnya dengan template Anda.

3. Kemudian salin dan tempelkan kode berikut tepat di atas salah satu kode <div id='content-wrapper'> atau <div id='main-wrapper'> atau <div id='main-outer'> atau <div id='main'>

<!-- menus START -->

<div id='YISmenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Homepage'><img src='http://shababsa7.net/images/PageImage-515435-3918738-home_icon.png' width='20px' height='20px'/></a></li>
<li><a href='http://yogismr.blogspot.co.id/p/about.html' title='About Me'>About</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/contact.html' title='Contact'>Contact</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/pasang-iklan.html' title='Pasang Iklan Termurah!'>Pasang Iklan</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/yis-privacy-police.html' title='Privacy Police'>Privacy Police</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/sitemap.html' title='Sitemap'>Sitemap</a></li>
<form action='/search' id='search' method='get'><input name='q' placeholder='search something here..' size='15' type='text'/></form>
</ul>
</div>

5. Ganti alamat blog yogismr.blogspot.com dengan alamat blog, label, atauapun alamat halaman Anda.
6.Modifikasi nama menu, ataupun  yang lainnya dengan memadukan kode dan design template Anda.
7. Simpan Template dan Selesai.


Begitulah cara memasang menu bar di blog, dan jika ada yang tidak dimengerti ataupun yang ingin Anda tanyakan, tinggalkan komentar Anda di bawah ini dan saya akan secepatnya membalas pertanyaan ataupun komentar Anda. Terima kasih :)

Cara Menghilangkan Navbar Blog



YIS - Navbar Blog atau biasa disebut Blogger Navigation Bar adalah sebuah alat navigasi yang berbentuk Frame dan berisi beberapa menu dan mempunyai kegunaan masing-masing. fungsi-fungsi pada navbar blog sangat membantu kita dalam ngeblog di blogger.

Namu, sebelum navbar dihapus, ada muncul 1 pertanyaan. Haruskah navar blog dihapus?. Untuk menjawab pertanyaan tersebut menurut YIS ada 3 alasan, yaitu pertama adalah sangat mengganggu, kedua adalah dapat membuat design yang kita buat jadi tidak terlalu mengesankan lagi, dan yang ketiga adalah blog akan terasa semakin ringan.

Jika merasa terganggu dengan penampakan widget navbar blog ini dan ingin membuat design Anda terlihat lebih bagus dan pastinya semakin ringan, maka cara menghapus, menghilangkan, dan menyembunyikannya adalah sebagai berikut.

Cara 1 :

1. Masuk ke menu Template - Edit HTML
2. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatasnya.

#navbar-iframe{display:none !important;}
#navbar, #navbar-iframe{height:0px;visibility:hidden;display:none}

3. Simpan Template dan Selesai.

Cara 2 :

1. Masuk ke menu Tata Letak/Layout - Klik edit pada bagian widget navbar
2. Klik off pada pilihan yang paling bawah.
3. Simpan/Save dan selesai.

Cara 3 :

1. Masuk ke menu Template - Edit HTML
2. Cari kode <b:widget='id='Navbar' locked='true' title='Navbar' type='Navbar'> 3. Hapus kode tersebut hingga kode </b:widget>
4. Simpan Template dan selesai.

Itu saja dari saya tentang bagaimana cara menghilangkan, menyimbunyikan, dan menghapus navbar dari blog. Bila ada pertanyaan atau yang tidak dimengerti, silahkan tinggalkan komentar Anda dan saya akan secepatnya menjawab pertanyaan Anda. Terima kasih :)

Kumpulan Gambar PNG Anime

Assalamualaikum Wr. Wb.

     PNG, yaitu gambar/photo yang banyak digunakan oleh Photo's Editor karena latar belakang/background dari gambar tersebut transparan. Oke, jika sobat tidak sabar Yuk~ cek tkp ^o^)~

  1. Death Note
     
  2. Naruto
     
  3. Yu - Gi - Oh!
     
  4. Air Gear
     
  5. Detective Conan
     
  6. Dragon Ball
     
  7. Eyeshield 21
     
  8. Gundam
     
  9. One Piece
     
  10. Bleach

     Saya rasa cukup segitu saja, jika ada tambahan tinggal komentar dibawah ini. Sampai jumpa di postingan berikutnya ^o^)~


Wassalamualaikum Wr. Wb.

Memasang Menu Vertikal Hover Style Keren Di Blog

Assalamualaikum Wr. Wb.

     Setelah saya kemarin membagikan Software Glary Utilities Versi Terbaru,maka kali ini saya akan membagikan sebuah Tutorial Blog, yaitu Memasang Menu Vertikal Hover Style Keren Di Blog. Oke, berikut sedikit mengenai Menu Vertikal Hover Style.

Mengenai Menu Vertikal Hover Style

     Menu vertikal ini mempunyai keunikan tersendiri dengan adanya hover aktif ketika mouse bersentuhan dengan widget tersebut. Disamping itu menu vertikal dengan hover style ini ditampilkan dengan beberapa warna, sehingga membuat tampilannya lebih menarik. Tak usah panjang lebar dan sekarang mari kita bahas cara pasang Menu Vertikal Hover Style di blogspot. Berikut Langkah - Langkahnya :

Cara Memasang Menu Vertikal Hover Style Di Blog :

  • Tentunya sobat harus login ke aku Blogger :D
  • Pilih Blog yang akan di isi Menu ini
  • Pilih Tata Letak
  • Klik Add a Gadget atau Tambahkan Gadget
  • Setelah itu Masukkan Kode berikut ke dalamnya
Ctrl + C Untuk Meng Copy

Keterangan :

  • Silahkan ubah Username atau ID Anda sesuai dengan data data Sobat :)

     Sekian Tutorial Blog yang saya bagikan kepada para sobat sekalian ^o^)~ semoga Tutorial ini bermanfaat bagi anda semua ;) Sampai jumpa kembali ^o^)~

Wassalamualaikum Wr. Wb.
 
- ©2013 - 2016 Yogi Irhandi Simamora V.3 -