Membuat Blog Lebih Menarik
Lagi lagi saya menulis tentang masalah ngeblog , blog adalah syuatu hasil karya pribadi yang mungkin bisa disaksikan oleh ratusan sampai ribuan orang setiap harinya.Membuat blog lebih menarik tentunya juga menjadi salah satu keinginan owner dari blog tersebut, apalagi kalau bukan dibilang lebih profesional.Ngeblog itu tidak mudah, butuh usaha seperti mempelajari tentang CSS dan juga HTML bahkan jika ada yang advance bisa juga mencakup PHP, koding koding yang membingunngkan terkadang membuat pemiliknya menjadi bertambah pusing,semua itu perlu dipelajari agar blog yang dimiliki bisa tampil lebih menarik dan membuat pengunjung terkagum kagum.Bagi saya sendiri blog yang menarik adalah blog yang mudah untuk di load atau dibuka, selain itu saya juga lebih tertarik jika blog tersebut tidak menambahkan widget yang rumit dan sering kali tidak bermanfaat bagi para pengunjungnya.Widget yang biasa penting bagi pengunjung agar menarik untuk di klik adalah recent post, recent comment dan juga top post, ketiganya sering kali menambah page view dari blog kita
Pemilihan template blog juga sangat diperlukan agar kita tidak salah memilih template yang loadingnya lama karena besarnya CSS dan gambar yang terkandung didalamnya, cukup pilih template yang sesuai dengan kepribadian anda dan jangan sampai blog anda membuat pengunjung marah karena sangat lambat.Saya sendiri lebih suka menggunakan template yang minim gambar contohnya seperti minimalis.
Monday, December 28, 2009
Membuat Menu Navigasi Dengan Sub-Menu
Bahasa | English
Hari ini saya akan membahas bagaimana membuat menu navigasi dengan sub-menu seperti contoh di bawah ini. Silakan anda gerakkan mouse anda pada contoh menu navigasi di bawah ini. Pada menu Blogger Template terdapat 3 sub-menu yaitu 2, 3, dan 4 Column. Dengan menu navigasi seperti di atas blog anda akan terlihat lebih menarik bukan? Selain itu tentunya bagi si pemilik blog juga lebih mudah meng-organisir konten dari blognya. Begitupun sebaliknya buat pengunjung blog anda, menu seperti ini mempermudah pengunjung dalam meng-eksplor isi blog anda. Anda bisa juga melihat live demo di sini.
Pada saat saya surfing, saya menemukan beberapa menu navigasi dengan sub-menu. Ada yang menggunakan javascript dengan tampilan dan efek yang sangat menarik, namun saya tidak akan membahasnya kali ini, mungkin di lain waktu saya akan posting tentang hal ini. Yang sekarang akan saya bahas adalah cara yang paling mudah dan tidak menggunakan javascript.
Nah, langsung aja ya masuk ke penjelasan bagaimana caranya memasang menu ini di blog anda. Seperti biasa anda perlu login ke www.blogger.com dan langsung menuju ke Edit HTML. Jangan lupa back-up dulu template anda. Setelah itu ikutilah langkah-langkah di bawah ini:
- Carilah kode ]]></b:skin>
- Setelah menemukan kode di atas, letakkan kode di bawah ini di atas kode tersebut. Kode berwarna merah adalah lebar dari menu navigasi, rubahlah nilai px agar sesuai dengan lebar blog anda.#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
- Sebelum melanjutkan ke langkah berikutnya, anda perlu menentukan posisi menu navigasi yang diinginkan. Biasanya menu navigasi diletakkan di atas header atau di bawah header. Misalkan anda ingin memasangnya di atas header, maka anda harus mencari kode <div id='header-wrapper'>
- Lalu letakkan kode di bawah ini persis di atas kode tadi <div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://allfreetips4u.blogspot.com'>Home</a> </li>
<li><a href='#'>Blogger Template</a>
<ul>
<li><a href='http://allfreetips4u.blogspot.com/search/label/2 column'>2 Column</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/3 column'>3 Column</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>
<li><a href='#'>Blogging Trick</a> </li>
<li><a href='#'>Forum</a>
<ul>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>
</ul> </li> </ul>
</div> </div> - Sekarang anda perlu mengganti beberapa kode di atas agar sesuai dengan keinginan anda. Kode warna biru adalah url-link dan kode warna merah adalah anchor-text atau titel menu yang terkait dengan url-link tadi. Sebagai contoh menu Home. Anda menginginkan apabila menu ini diklik maka akan membawa anda kepada halaman utama dari blog anda, maka dari itu rubahlah url-linknya dengan url blog anda. Berikutnya, menu Blogger Template. Anda ingin apabila menu ini diklik maka akan membawa atau menampilkan posting-posting yang mempunyai label blogger template. Maka, rubahlah linknya menjadi http://namabloganda.blogspot.com/search/label/blogger template.
- Anda bisa menambah menu maupun sub-menu dengan menambahkan kode seperti di atas. Sebaliknya anda pun bisa menghilangkan menu dan sub-menu yang tidak anda inginkan dengan menghapus kode di atas yang tidak diinginkan.
- Setelah itu jangan lupa untuk menyimpan pekerjaan anda dan lihatlah hasilnya di blog anda.
- Jika anda berhasil, tentunya blog anda akan terlihat lebih menarik.
Selasa, 20 Januari 2009
Cara Bikin Banner
Bagi sobat-sobat blogger mungkin sudah lihai dalam memodifikasi blognya. Tapi buat newbie newbie mungkin masih awam dalam hal ini. Disini saya mau jelaskan tentang cara membuat banner di blog supaya bisa diklik, supaya lebih keren dan temen temen lainnya bisa langsung copas aja. Ada beberapa macam situs layanan membuat banner gratis, salah satunya dan yang sering saya gunakan adalah cooltext.com karena sangat mudah sekali. Oke langsung aja ya langkah langkah cara membuat banner supaya bisa diklik, sebagai berikut:1.Kunjungi cooltext.com
2.Pilih contoh contoh banner lalu klik
3.Pada kolom Logo Text ganti dengan judul blog anda
4.Pada kolom Text Size ganti ukuran textnya sesuai keinginan anda
5.Pada Text Color ganti warna textnya sesuai keinginan anda
6.Background Image silahkan jika anda ingin menggantinya
7.kalo sudah selsai semua klik "render logo"
8.lalu klik "download image"
9.Simpan di PC anda
10.Lalu buka http://www.photobucket.com
11.daftar dulu klo sudah langsung login
12.Lalu klik "album & upload" lalu "choose file" pilih "from my computer" lalu pilih banner anda tadi
13. kalo proses upload sudah selsai arahkan mousenya ke gambar banner tadi lalu copy script yang ada di kolom HTML CODE ke notepad menjadi 2
14.tambahkan code ini <textarea cols="20" name="textarea"> sebelum kode banner anda yang ke 2 ke notepad tadi
15.lalu tambahkan kode ini </textarea> setelah kode banner anda yang ke 2 ke notepad tadi
kayak gini contohnya
CODE BANNER ANDA <textarea cols="20" name="textarea">CODE BANNER ANDA</textarea>
Setelah itu copy semua kode yang ada di notepad tadi lalu simpan di blog anda
Untuk blogspot anda masuk ke "LAYOUT"---->"ADD GADGETS"---->"HTML / Java Script" lalu SAVE. Selsai ;)
UPDATE!
Supaya banner jika diklik bisa langsung ke alamat situs maka, ganti URL pertama menjadi URL blog anda. CODE BANNER ANDA kan ada 2, misal : CODE BANNER ANDA (<a href="http://s385.photobucket.com/albums/oo293/tyo041084/?action=view¤t=globe.gif" target="_blank"><img src="http://i385.photobucket.com/albums/oo293/tyo041084/globe.gif" border="0" alt="globe"></a>) <textarea cols="20" name="textarea">CODE BANNER ANDA (<a href="http://s385.photobucket.com/albums/oo293/tyo041084/?action=view¤t=globe.gif" target="_blank"><img src="http://i385.photobucket.com/albums/oo293/tyo041084/globe.gif" border="0" alt="globe"></a>) </textarea>
Huruf yg dicetak tebal adalah CODE BANNER ANDA
Huruf yg berwarna merah adalah URL gambar anda. Ganti warna kode yg berwarna merah ini menjadi URL situs anda, misalnya: http://www.feryfadly.com
Nanti jadinya akan seperti ini
