Jhondris Samloy: DESIGN BLOG

Design Blog berkaitan dengan berbagai bentuk tips trik, hacks serta scipts/codes; baik HTML, CSS, dan Javascript serta beberapa Widgets eksternal lainnya.

Desain blog merupakan salah satu inti blogging yg berhubungan dengan bagaimana membuat tampilan blog lebih personal, unik, professional dan sesuai dengan yg diharapkan oleh seorang Blogger. Oleh karena itu, blog design pada akhirnya harus berhubungan dengan pembelajaran coding yg mau tidak mau dan secara lambat ataupun cepat harus dikuasai oleh sang blogger.

A. TEMPLATE

Template pada blog diibaratkan sebagai OTAK, karena disini semua “kode” tinggal alias saraf-sarafnya. Jika salah mencantumkan kode, maka “Blog” anda akan acak dan selanjutnya mengalami kerusakan pada sistimnya bukan blognya. Bisa diatasi tapi perlu ketelitian tinggi!

Simaklah beberapa pernyataan berikut ini.

Template adalah halaman dimana anda dapat mengatur dan mengubah gaya dari blog anda, pada halaman ini anda dapat mengatur lebar kolom, lebar bagian posting atau lebar sidebar. Anda dapat mengatur kolom menjadi beberapa bagian, anda juga dapat merubah gaya tulisan (font), mengganti warna dan memberi background dengan gambar pada blog anda.

Desainer Template hanya bisa digunakan pada template standar yang ada pada blogger, dan anda dapat menambah dan mengatur gadget. Jika anda menggunakan template anda sendiri / upload template gratisan, maka anda tidak bisa menggunakan fasilitas Desainer Template ini. Template / Tempate : Menu tersebut Untuk mengganti atau mengedit template blog.

Template blog atau Template website itu adalah desain-desain halaman blog atau pun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Template bisa juga anda artikan sebagai tema blog atau tampilan blog. Seperti yang anda lihat saat ini di blog belajar blog dan seo, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template.

Di blogger atau blogspot, anda dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan anda. Jika anda telah mahir membuat template sendiri, anda dapat menggunakan template tersebut untuk blog anda. Namun jika anda masih awam dalam membuat template, pihak blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan keinginan.

Atau anda dapat mendownloadnya secara gratis dari situs yang menyediakan template, salah satu contoh website yang menyediakan template blogger tersebut adalah www.mastemplate.com. Namun jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh menghapus atau menghilangkan credit link dari pembuat template tersebut.

B. MEMBUAT MENU DAN SUBMENU DI BLOG

Untuk blogger pemula. Menu dan sub menu kadang tidak tersedia jika menggunakan template yang disediakan oleh blogger sendiri. Anda perlu menciptakan menu sesuai dengan kebutuhan anda.

Setiap blog memiliki menu dan sub menu. Menu merupakan daftar atau bagian yang dikelompokkan dalam sebuah blog atau web. Sub menu merupakan bagian dari menu. Contoh ini Bernama “Dunia Kesehatan”, Salah satu menunya “Hidup Sehat”, dari menu tersebut terdapat beberapa submenu “PHBS”, “Tips Sehat”, dan Pencegahan Penyakit”.

Ikutilah langkah-langkah berikut ini!

Langkah Pemasangan

Masuk pada menu Dashboard, kemudian klik Daftar Shortcu (Materi Sebelumnya).

- Pilih Template lalu pilih Edit HTML

- Pilih/klik Lanjutkan

- Pilih/klik Expand Template Widget

Cari scrift berikut :

<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'>

Agar lebih mudah, klik saja F3 atau Ctrl + F pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya yang cocok adalah div class='main-outer'>

Setelah dapat, copy paste scrift berikut tepat diatas scrift yang dicari 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>

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

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

PENJELASAN :

a. Cara memasukkan alamat URL : Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

b. Cara menuliskan judul menu atau judul postingan : Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.

c. Cara merubah lebar menu: silakan cari kode : #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi : #cat-nav{background:#156994;width:900px;margin:015px;padding:0;height:35px;}

Angka 900px hanya sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.

d. Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau.

e. Untuk tambah atau kurangi jumlah menu, silakan copi paste atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.

f. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........

A. Mengganti warna background menu: Silakan ganti warna pada baris ketiga yang saya beri warna merah, dengan warna yang anda sukai.

B. Mengganti warna tulisan/huruf, silakan ganti warna pada baris ke-4 yang saya beri warna hijau dengan warna yang anda sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarna ungu dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar .

- Lalu simpanlah/save.

Saran

* Backup dahulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

HASIL DESIGNER MENU DAN SUBMENU BLOG (Lihat gambar berikut ini)

Setelah itu klik “Simpan Template”. Dan selanjutnya Klik “Pratinjau Template”. Maka hasilnya sebagai berikut!!!

Menu dan submenu telah selesai. Maka siap untuk berposting-posting.

Yang belum mengerti bisa mengajukan pertanyaan!!!

Thanks

Jhondris Samloy

Wednesday, March 16, 2016

DESIGN BLOG

No comments:

Post a Comment