20 April 2014
Ketika Anda membuat sebuah blog baru dengan memanfaatkan desain dari template standar yang telah disediakan oleh Blogger, maka bagian yang dapat dipastikan ada pada halaman yang dihasilkan oleh penggunaan template tersebut adalah navbar. Secara default navbar standar yang diberikan oleh Blogger berisikan beberapa fasilitas, diantaranya yaitu fasilitas untuk melakukan penelusuran, berbagi ke Google+, melihat blog lain yang terdaftar di Blogger, membuat entri atau blog baru, dan beberapa fasilitas penting lain seperti yang tampak pada gambar di atas.
Melanjutkan ulasan dalam artikel sebelumnya tentang cara mudah belajar merancang desain dan membuat template blog sendiri, maka dalam artikel ini akan saya ulas dan kita pelajari tentang cara memasang serta menambahkah navbar baru ke dalam rancangan template uji coba yang sebelumnya telah Anda buat.
Terdapat beberapa langkah yang perlu Anda lakukan. Akan tetapi untuk mempermudah proses pengerjaan, maka beberapa langkah diantaranya saya sederhanakan agar Anda pun lebih mudah dalam memahami serta mempraktikannya.
Pertama, buka template Anda melalui Edit HTML.
Kedua, hapus kode <body> sampai dengan </body> dan kemudian salin rangkaian kode di bawah ini untuk menggantikannya.
<body><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'></b:widget></b:section><header></header><b:section class='main' id='main' showaddelement='no'/><aside></aside><footer><macro:include id='pref' name='sections'></macro:include></footer></body><macro:includable id='sections' var='col'><b:section mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/></macro:includable>
Sehingga rangkaian kode yang terdapat dalam template pada akhirnya akan menjadi seperti di bawah ini.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><b:skin><![CDATA[]]></b:skin></head><body><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'></b:widget></b:section><header></header><b:section class='main' id='main' showaddelement='no'/><aside></aside><footer><macro:include id='pref' name='sections'></macro:include></footer></body><macro:includable id='sections' var='col'><b:section mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/></macro:includable></html>
Ketiga, lakukan pratinjau dan atau kemudian simpan template Anda.
Perhatikan bahwa dalam rangkaian kode yang baru tersebut terdapat beberapa bagian yang sengaja saya tambahkan sekalian karena bagian tersebut nantinya akan berguna pada tahap perancangan template yang berikutnya. Dalam hal ini bagian tambahan yang dimaksud yaitu <header>…</header>, <aside>…</aside>, dan <footer>…</footer>.
Selanjutnya perhatikan pula bahwa setelah template disimpan dan kemudian kemudian editor template ditutup, maka bila editor template dibuka kembali Anda akan melihat adanya beberapa rangkaian kode baru didalamnya. Jangan kaget bila Anda melihat adanya rangkaian kode baru tersebut, karena rangkaian kode itu memang ditambahkan secara otomatis oleh Blogger ke dalam template.
Sementara itu untuk hasil dari penerapan teknik di atas adalah seperti yang dapat Anda lihat pada halaman blog demo ini.
Namun demikian apabila nantinya Anda kurang cocok dengan model navbar standar seperti itu dan kemudian ingin menggantinya dengan model navbar tersendiri seperti yang saat ini cukup populer dipakai oleh para blogger, maka Anda dapat menggantinya dengan model navbar baru sesuai dengan yang Anda inginkan. Dalam hal ini sebagai contoh misalnya adalah model navbar seperti yang terpasang pada blog ini.
Apabila Anda ingin mengganti model navbar menjadi seperti yang terpasang pada blog ini, maka terdapat 2 (dua) teknik yang dapat Anda pakai, yaitu 1) teknik membuat tab menu horizontal seperti navbar di atas header halaman blog, dan 2) teknik membuat menu tab keren pada blog dengan sub menu pull down dan ujung sudut melengkung. Akan tetapi bila Anda mengalami kendala atau kesulitan dalam penerapannya, maka silakan ajukan pertanyaan dengan cara mengeposkan komentar dalam artikel ini.
Ragam Tumbuhan 
Unik & Langka 
Aneka Buah 
Produk Sederhana 
Karya Seni 
Tempat Wisata 
Ragam Kegiatan 
Aneka Bunga 
Hewan & Serangga
Terdapat 10 komentar pada artikel ini ▶
menurut saya navbar bawaan google itu agak merusak pemandangan :D biasanya saya sembunyiin aja, trus pake navbar buatan :v, di tunggu update selanjutnya om
@Alan Tirta Sebagian blogger memang berpendapat seperti itu Sob. Termasuk saya sendiri juga menyembunyikan model navbar bawaan karena kurang cocok bila saya tampilkan pada blog dengan desain seperti ini.
Oleh sebab itulah dalam ulasan di atas juga saya sampaikan sekalian bahwa apabila pengguna kurang cocok dengan pemakaian navbar bawaan, maka yang bersangkutan dapat menggantinya dengan model yang baru seperti yang saya contohkan di atas atau model lain sesuai dengan yang dikehendakinya.
mantap kang, dari kemarin saya muter cari langkah2 buat template sendiri :D ditunggu kelanjutannya kang :D
@Bang Azen Terimakasih Bang. Kedepannya saya hanya berharap agar semua ulasan atau artikel yang saya terbitkan di blog ini dapat bermanfaat bagi para blogger serta dapat menambah pengetahuan serta wawasan bagi mereka (siapapun) yang membacanya. :)
mantap yah, tapi mumet saya kalau pelajari.. hahahha
oh ya, ada referensi tidak untuk templete Wordpress yang gampang editannya tanpa masuk ke css??
@Andie Shinigami Terimakasih Sob. Awalnya bisa jadi memang bikin mumet Sob. Tapi lama-lama kalau sudah terbiasa rasanya asik juga kok.
Oh ya, mengenai template Wordpress, kebetulan saya malah kurang tahu Sob. Sebab selama ini saya lebih senang berkutat dengan template Blogger.
referensi yang bagus gan mantap tutorial nya.
memang kalo newbie seperti saya ini agak puyeng - puyeng tapi asik gitu
:)kalo begitu navbar yg sebelum nya saya baut, eh saya buat itu akan hilang dong gan...!!apa akan jadi ganda alias 2 navbar.
makasih"
@Loader Computer Artikel ini merupakan salah satu bagian yang tak terpisahkan dari step by step tutorial merancang dan membuat template, Sob. Sehingga agar lebih jelas ada baiknya bagi Sobat untuk mempelajari artikel sebelumnya (step #1) serta artikel berikutnya (step #3, step #4, dan seterusnya).
bagai mana cara membuat blog seperti agan?
@gismania mamuju Kalau diceritakan caranya panjang Sob. Namun begitu bila Sobat benar-benar ingin mengetahuinya, maka dapat Sobat pelajari melalui berbagai macam artikel yang pernah saya terbitkan di blog ini. Sebab sebagian artikel yang saya terbitkan di blog ini sebenarnya juga menyajikan ulasan tentang proses pembuatannya mulai dari awal hingga sekarang ini.