Membuat Navigasi Menu Full Color di Blog

Membuat Navigasi Menu Full Color di Blog – setelah beberapa waktu lalu membaca komentar dari Bang Ancis maka timbul dalam pikiran untuk membagikan menu navigasi ini kepada siapapun yang ingin mencobanya dan mohon maaf Bang Ancis baru sekarang saya baru bisa share tutorial ini. Sebetulnya pada hari itu juga sudah langsung jadi namun apa daya seperti yang sudah saya katakan pada komentar sebelumnya. Untuk membagikan tutorial ini saya nunggu postingan yang sudah saya jadwalkan sebelumnya, harap di maklumi. Oke sekarang kembali ke inti tutorial, bagaimana cara untuk membuat navigasi menu full color di blog? Untuk membuat navigasi menu supaya menjadi full color atau warna-warni sebenarnya tidak susah. Membuat navigasi menu dengan warna yang berbeda-beda di setiap link menu sama saja khalayak membuat navigasi menu pada umumnya, hanya saja untuk membuat navigasi menu menjadi full color kita perlu menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Namun biarpun begitu saya rasa hasilnya juga tidak cukup mengecewakan karena navigasi menu ini juga lumayan serasi di terapkan ke template blog, apalagi jika menggunakan template Metro UI. Untuk lebih jelasnya, berikut tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog.

1. Login ke akun blogger.
2. Langsung menuju Template klik Edit HTML.
3. Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin> kemudian Simpan template.

.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; } ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; } ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; } ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; } ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; } ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; } ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; } ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; } ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; } ul.navfullcolor li ul li a:hover { background: #FF8000; } .green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;} .yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;} .red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;} .purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;} .blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}

4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.
5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.

 

<div class='navmenu'> <ul class='navfullcolor'> <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li> <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 1</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 2</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 3</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='purple'>Menu 4</a> <ul> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li> <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li> </ul> </li> <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 5</a></li> <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 6</a></li> <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 7</a></li> </ul> </div>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.

• Home
• Menu 1
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4
  • Sub Menu 5
• Menu 2
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4
• Menu 3
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 4
  • Sub Menu 1
  • Sub Menu 2

Apabila bagi yang masih kesulitan dalam melakukan Edit HTML template, bisa langsung memasukan seluruh kode diatas ke dalam widget HTML/Javascript agar lebih mudah. Caranya seperti di bawah ini:

<style type="text/css" scoped>

Taruh CSS yang terdapat pada point 3 disini

</style>

Taruh HTML yang terdapat pada point 5 disini

Kemudian Simpan.

Demikian tutorial untuk Cara Membuat Navigasi Menu Full Color di Blog, lakukan yang mana yang lebih mudah. Akhir kata hanya bisa saya sampaikan untuk sedikit motivasi “Not an error when you try and then fail. The only mistake is when you do not dare try for fear of failure”. Sekian dan keep blogging!

Disalisn dari sumber Artikel : Mas-andes.blogspot.com

Baca Selengkapnya »

CSS, Membuat Background dan Border Shadow Pada Sidebar Blog

Membuat Background dan Border Shadow Pada Sidebar Blog – merupakan cara sederhana untuk membuat border pada sidebar blog.
Kenapa saya posting mengenai cara Membuat Border Shadow Pada Sidebar Blog ini, karena pada tahap awal setiap template blog bawaan asli dari blogger/default blogger memang sudah tersedia sidebar, akan tetapi masih belum memiliki border maupun background. Dengan adanya hal ini maka untuk meminimalisir sahabat blogger yang mungkin ingin membuat border pada sidebar blog maka bisa dengan mudah menggunakan tutorial ini. Pada judul widget juga sudah sedikit saya modifikasi sehingga saat judul widget tersebut tersentuh mouse atau hover maka akan menampilkan teks efek 3D. Sedangkan untuk penerapannya kedalam blog, maka berikut adalah tutorial cara Membuat Border Shadow Pada Sidebar Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.main-inner .sidebar .widget h2 { margin-top: 0px; margin-bottom: 1px; margin-left-value: 0px; margin-right-value: 0px; padding: 3px 3px; color: #00ff00 !important; text-align: center; border: 1px solid #666666; border-radius: 4px; box-shadow: 1px 1px 6px 1px #7f7fff; background: #000000; font: bold 25px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; } .main-inner .sidebar .widget h2:hover { text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000, 4px 4px #ff0000, 5px 5px #ff0000, 6px 6px #ff0000; } .main-inner .sidebar .widget-content { margin: 0px; padding: 2px 2px; text-align: justify; text-decoration: none; border: 1px solid #674ea7; border-radius: 4px; box-shadow: 1px 1px 6px 1px #7f7fff; background: #f2f2f2; } .main-inner .widget #ArchiveList { margin: 0px; } .main-inner .widget ul, .main-inner .widget li, .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li { margin: 0px; padding: 2px; list-style: none;

Keterangan:

• Untuk merubah warna background judul widget silahkan ganti tulisan berwarna merah dengan dengan warna lain yang di inginkan.
• Untuk merubah warna font judul widget silahkan ganti tulisan berwarna biru dengan warna lain yang di inginkan.
• Untuk merubah warna font judul widget silahkan ganti tulisan berwarna ungu dengan warna lain yang di inginkan.
• Untuk merubah warna background konten widget silahkan ganti tulisan berwarna orange dengan warna lain yang di inginkan.
• Untuk merubah warna border dan efek menyala silahkan ganti tulisan berwarna hijau dengan warna lain yang di inginkan.

3. Klik Terapkan ke Blog

Disalin dari Artikel : Mas-andes.blogspot.com

Baca Selengkapnya »