Tentunya semua Bloggers tahu bahwa Blogger Navbar muncul secara otomatis pada semua blog yang disediakan oleh Blogger. Nah, kali ini saya akan ngebahas beberapa hack pada Navbar ini. Mungkin Bloggers udah enggak asing lagi dengan hack ini. So just check it out.
1. Navbar dengan hover effect
Dengan hack ini Navbar Blogger akan berganti warna setiap kali kita mengarahkan kursor pada Navbar. Daripada bingung, mendingan langsung aja lihat demonya di topijrami. Kamu tinggal tambahin kode-kode ini kode CSS kamu.#navbar-iframe{opacity:0.2;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:0.5;filter:alpha(Opacity=100, FinishedOpacity=50)}
2. Peek-a-Boo Navbar
Hack ini membuat Navbar menjadi hilang dan akan kembali muncul jika kamu mengarahkan kursor ke bagian paling atas dari blog. Demonya bisa dilihat pada blog ini sendiri. Kamu tinggal tambahin kode-kode ini kode CSS kamu.#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
3. Menghilangkan Navbar
Bagi yang ingin membuat Navbar hilang, mungkin agar lebih terlihat seperti website biasa, inilah triknya. Demonya bisa dilihat di ::FreeROMs::. Kamu tinggal tambahin kode-kode ini kode CSS kamu.#navbar-iframe {
display: none !important;
}
Tadi hanyalah beberapa trik untuk bermain-main dengan Navbar Blogger. Kamu bisa saja memodifikasi kode-kode tadi sesuka kamu. Bisa saja kamu menemukan trik supaya fixed di blog kamu, jadi Navbar bakalan selalu ngikutin kamu terus. Be creative!
Blogger Navbar Hack
3
comments
Percepat Waktu Load Blog
18
comments
Seberapa cepat suatu site untuk dibuka oleh pengunjungnya merupakan hal yang sangatlah penting. Kebayang ga sih, untuk membuka satu halaman saja membutuhkan waktu 15 detik lebih. Mungkin itu masih belum seberapa, bagaimana kalau 30 detik... atau bahkan 1 menit. Bisa-bisa, orangnya keburu pergi saking lamanya.
Oleh karena itu, kali ini saya akan berbagi tips yang dapat mempercepat blog kamu untuk dibuka. Kamu bisa nge-check blog kamu di Web Page Analyzer dan hasil waktunya bisa kamu catat untuk perbandingan nanti.
Lanjut...
1. Menyingkatkan Kode CSS
Gunakan trik ini untuk mempersingkat kode CSS (disebut juga Inline CSS). Trik untuk background properties:{ background: #000 url(image URL) repeat-x top left; }
daripada:background-image: url(image);
Cara ini dapat juga diaplikasikan juga pada margin, border, dan padding. Gunakan:
background-color: #000;
background-repeat: repeat-x;
background-position: top left;}{ margin: 1px 2px 3px 4px; }
daripada:
{margin: [atas] [kanan] [bawah] [kiri];}margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
2. Menyingkatkan Alamat Internal Link
Jika kamu membuat link yang masih dalam satu blog yang sama (link internal), gunakan cara ini:
misalkan saya membuat link navigasi yang merujuk ke homepage blog ini, dimana seharusnya kita menuliskan <a href="http://blogger-holic.blogspot.com/"> , saya bisa menyingkatnya menjadi <a href="/">. Lalu saya ingin membuat link menuju artikel ini. Saya bisa menyingkatnya dengan menulis <a href="/2008/02/percepat-waktu-load-blog.html">. *Trik ini berguna hanya untuk link internal.
3. Mengoptimalkan Kode CSS
Kebanyakan orang terus saja memperindah desain blognya tanpa menghiraukan kode CSS-nya. Tahukah kamu setiap spasi, baik antar kata atau baris, berpengaruh terhadap kecepatan load blog kamu. Nah, kode CSS ini bisa kamu optimalkan dengan Icey’s CSS Compressor. Optimalisasi ini akan menghilangkan spasi-spasi tersebut. Saran saya, supaya memudahkan kamu dalam mengedit kode CSS tersebut, baiknya kamu membuat copy-an nya, terus baru diaplikasikan cara tadi.
4. Gunakan Eksternal CSS dan Script
Dengan meletakkan kode CSS dan Script di luar file HTML blog kamu, kode-kode tersebut hanya akan didownload sekali dan akan disimpan dalam komputer. Bandingkan dengan yang tidak, kode-kode tersebut harus didownload tiap kali kamu membuka halaman blog. Cara ini sangat membantu bagi yang banyak memiliki kode CSS atau Script.
Kamu bisa upload kode CSS atau Script kamu di Google Page Creator. Kamu tinggal upload, kemudian letakkan kode ini di bawah ]]></b:skin>CSS:
<link href='alamatkodecsskamu' rel='stylesheet' type='text/css'/>
Script:
<script src='alamatscriptkamu' type='text/javascript'></script>
5. Kurangi fitur WYSIWYG
Saat kamu sedang mempersiapkan postingan, sering kali kita menggunakan fitur WYSIWYG (What You See Is What You Get) atau mode Compose. Memang fitur ini sangat nyaman untuk digunakan, tetapi sering kali kita menemukan tag-tag yang kosong. Apabila masih ingin menggunakan mode Compose ini, sebelum artikel dipublish, cek dulu adakah tag-tag yang tidak berguna, yg pastiya bakalan ngerepotin :D
6. Kurangi Penggunaan Hal-Hal yang Engga' Perlu
Contohnya musik, video, program flash, gambar, atau widget-widget khusus. Karena hal tersebut butuh waktu lama untuk di-load. Untuk gambar, gunakan format PNG, karena selain kualitas gambar yang tidak kalah dari JPG sekaligus cepat untuk di-load. Jika masih ingin memakai format JPG atau GIF, asal tahu saja, GIF memiliki waktu load yang lebih cepat tetapi kualitas gambar yang kurang. Dan JPG sebaliknya. Selain itu, optimalkan juga gambar PNG, JPG, atau GIF kamu di Online Image Optimizer.
Setelah mengaplikasikan tips tadi, coba ukur kembali kecepatan load blog kamu di Web Page Analyzer, tentunya semakin cepat kan...
Nambahin Ikon Kalender di Sebelah Judul Artikel
2
comments
Nah, ngerti kan sekarang…? Yauda kalau gitu, let’s go to the first step.
Langkah Satu - Penting!
- Masuk the Dashboard > Settings > Formatting
- Ubah Date Header Format dan ubah menjadi format YYYY-MM-DD (2008-01-12)
- Save settings.
Langkah Dua
- Masuk ke Dashboard > Template > Edit HTML.
- Check Expand Widgets Template .
- Cari tag <head> dan paste kode ini di bawah tag tersebut:
<!-- orangevolt calendar widget -->
<script src='http://anniebluesky.googlepages.com/fastinit.js'/>
<script src='http://anniebluesky.googlepages.com/prototype-1.5.0.js'/>
<script src='http://anniebluesky.googlepages.com/orangevolt-calendar.js'/>
<link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->
Langkah Tiga
Lanjut, sekarang tugas kamu cari <data:post.dateHeader/>
dan ganti dengan:
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
Langkah Empat
Dalam CSS Style Sheet (antara <b:skin><![CDATA[/* dan ]]></b:skin> ) tambahin kode ini:
/* Calendar
----------------------------------------------- */
span.cal {
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}
Kode ini bisa kamu edit sesuai keperluan kamu, seperti jenis atau warna font. Hampir selesai, sekarang kamu tinggal upload gambar kamu di Image Host, yang gratis aja, contohnya: ImageShack.
Berikut ini ada beberapa contoh gambar yang bisa digunakan sebagai ikon, kalau mau tinggal download aja.
Silakan didownload. Dan terima kasih pada Annie yang udah nemuin hack ini. N' Selamat nyoba....
Bermain dengan kolom komentar
4
comments
Seperti kita tahu bahwa Blogger menggunakan layanan komentar atom, yang mengharuskan anda untuk membuka window baru, jika ingin memberi komentar pada posting dari blog yang anda kunjungi. Kadangkala, hal ini membuat anda malas untuk memberikan komentar meskipun anda ingin sekali mengomentari postingan blog yang anda kunjungi.
Kutipan paragraf di atas diambil dari blognya Abibakar. Ada bener nya juga sih apa yang om Abi bilang. Dalam hack ini nantinya bakalan muncul form seperti ini di di bawah setiap artikel :
Tentunya ini akan sangat memudahkan bagi pembaca yang ingin meninggalkan komentar. Nah, bagi yg tertarik langsung aja masuk ke blognya Abi. Oia, hack ini ditemukan oleh Jack Supit. Psst, tahu nggak, ternyata Jack Supit itu orang Indonesia lho. Ckckckck, ngga' nyangka ya...
Baca juga: Kolom Komentar Bawah Post Offisial Blogger
Template Paling Kenceng, Neo Template
4
comments
Kalo kamu pengen template yang cuepet kayak kilat, maka NEO dari hackosphere adalah pilihan yang tepat. Kalo isi blog lu butuh kecepatan antar halaman, tidak terlalu peduli dengan desain yang sok artistik, maka NEO ini bisa jadi andalan. Si Ramani alias Hackosphere ini sudah ngulik JSON di template ini, jadi entah gimana jadi cuepet banget.
Gitu deh kata2 yg ada di bikinblogger ttg Neo Template...
Neo template ini ditemukan oleh Ramani... langsung aja kalo ada yg tertarik nyoba buat Neo template ini bisa masuk ke blognya Ramani buat tutorial dalam bhs inggris ato kalo mo yg bhs Indonesia biar g ribet masuk aja ke bikinblogger....
Mo ngeliat hasilnya kaya' apa...? langsung masuk ke blognya Ramani....
Blogroll - Tukeran Link
Anchor Text: Blogger-Holic
URL: http://blogger-holic.blogspot.com/
Bertukar link udah menjadi hal yang biasa dalam dunia per-blog-an. Bagi yang ingin tukeran link, silakan meninggalkan pesan di Shoutbox.
Film n Musik
Film Asia - the latest Asian Movie synopsis
Gudang Musik - free download mp3
Indonesia Top Hits Song - Lirik Lagu Indonesia
Song Lyric - Get Song Lyric
Internet Bisnis
ATM - Auto Teller Machine blog
Popular PTC - Mr. KoEcheL blog
Kesehatan
Kesehatan Gigi - Info Kesehatan Gigi
Olahraga
Football: Just Love The Game - my life and my love for football
Sepakbola dalam Sinema - Sepakbola dalam Sinema
Personal Blog
Antown Holic - Komunikasi - Visual - Sosial
Badak Kalungan Ceret - Badak tanpa cula, bukan tanpa tulang
BAMPERXII - BAMPERXII blog
chasing the pretty rainbow™ - blogna Ghani Arasyid
jodi santoso blog - Indonesian Criminal Justice Reform
Juliana Dewi Kartikawati - My Life My Story
コロチ's Blog - Dakara Sou Saa Yume wo Chikara Ni, Jibun Sekai wa Nan Demo Nai... *ga ngerti
The Aroengbinang Project - Where mind, heart and soul meet
bozzqie blog - Everything Begin from a Dream
Heart & Mind - "Mind" without a "Heart" is just a war.
janganbacablog - janganbacablog
khotib blog - khotib blog
Numero Uno!!! - Perjalanan untuk menjadi yang terbaik
Lupuzz - Lupuzz blog
Pegadaian Diari - ALL ABOUT OF MY LIVE
Qittunblog - blognya Qittun
SevaNova's Blog - Simple Note for Peaceful Mind
Tempatku Berbagi Semua - blognya Dion
zona merah - Zona Komunikasi Visual Modern Bidang Desain Grafis Abad Ini
Blogiologi.com - catatan Abbie belajar blogging
eosBlog2.0 - Blognya firdaus
Indonesianer - exploring the future
Kang Noval - Belajar blog
Link Promo - Tips Promosi | Tukar Link | Blogging Tips | Bisnis Online
O-OM - O-OM blog
ocidbrass - Sarana untuk saling berbagi.
Tips dan Trik Blog - Sharing apa saja tentang BLOG
Tips dan Triks Blogging - Tips dan trik untuk mempercantik blog kamu.
Thinking Out Of The Box - From Newbie To Advance
Technology
Ngenet - Jelajahilah Dunia dgn Jarimu
Sisam Intermedia - Info, Tip & Triks Komputer
Speedy Warez - Free Download Softwares
Lain-Lain
Asal Oesoel - Dunia Dalam Kilasan Sejarah
Love My Cars - karena MOBIL itu BERHARGA
Revarius Opinion - Revarius blog
Riqzmie Creation - Riqzmie blog
Foreign Blog
Great Quotes - Great inspiring quotes from all over the world
In Demand Opinions - Bryan's Opinions
Truth Unedited - Truth Unedited
Feed per Label
4
comments
Terkadang pembaca blog ingin berlangganan hanya pada 1 label tertentu saja... Nah, gimana tuh caranya supaya bisa berlangganan hanya pada 1 label tersebut....? Sebenarnya caranya gampang banget. Kamu cuma harus tahu alamat feed per label blog.
http://blogkamu.blogspot.com/feeds/posts/default/-/namalabel
Ganti blogkamu.blogspot.com dengan alamat blog kamu. Selanjutnya, ganti namalabel dengan nama label yg diinginkan....
Singkat banget kan. that's all deh...
semoga ngebantu :) Read More »
: topi_jrami@yahoo.com
: topi_jrami@hotmail.com
Membuat Recent Post dan Comments
0
comments
Akhirnya saya menemukan cara untuk membuat post/komen terbaru di sidebar dengan mudah. Mau tau gimana caranya, terus baca :
- Recent Posts :
Masuk ke sini. Nantinya akan keluar sebuah halaman baru. Kita akan memakai installer widgetnya Hans. Sebelum ditambahkan ke dalam blog, baiknya kita mengubah settingan widget terlebih dulu.
Ubah 'beautifulbeta' dengan nama blog kamu.
Tentukan jumlah artikel yang akan muncul (default=5)
Kalo mau menunjukkan waktu kapan artikel dibuat, kasih ceklis Show post date (default = checked).Kalo mau disertai dengan ringkasan artikel, kasih ceklis di Show summary (default = checked). Tentuin juga sepanjang apa ringkasannya di Summary size (default = 100 huruf).
Sisanya biarin apa adanya. Kemudian klik 'Costumize' , kalo pengen ngulang dari awal lagi klik 'Reset'. Kalo udah yakin, Klik 'Add Widget to My Blog'. Nantinya bakalan muncul window baru buat milih dimana widget ini akan diinstal. Klik 'add Widget' dan slese deh...
- Recent Comments :
Untuk Recent Comments, ga terlalu beda sama Recent Posts. Pertama blogger harus masuk ke sini Yang nantinya bakalan keluar window baru juga.
Ubah 'beautifulbeta' dengan nama blog kamu.
Tentukan jumlah komentar yang akan muncul (default=5)
Kalo mau nunjukin waktu kapan artikel dibuat, kasih ceklisShow post date (default = checked).
Kalo mau nunjukin judul artikel, kasih ceklis Show posttitle (default = checked).
Tentuin juga sepanjang apa ringkasan komentar di Summary size (default = 100 huruf).
Sisanya biarkan apa adanya. Kemudian klik 'Costumize' , kalo pengen ngulang dari awal lagi klik 'Reset'. Kalo udah yakin, Klik 'Add Widget to My Blog'. Nantinya bakalan muncul window baru buat milih dimana widget ini akan diinstal. Klik 'add Widget' dan slese deh...
Cara alternatif: hanya dengan Gadget Blogger
Cara ini tanpa melibatkan javascript atau script lainnya melainkan hanya dengan menggunakan fitur gadget RSS Feed pada Blogger. Berikut cara2 nya:
1. Pertama-tama, kamu harus menemukan link post feed dan comment feed blog kamu.
http://blogkamu.blogspot.com/feeds/feeds/posts/default
http://blogkamu.blogspot.com/feeds/comments/default
2. Trus, log in ke Blogger
3. klik Layout pada dashboard di bawah judul blog
4. klik Add a page element pada sidebar blog.
5. pilih Feed dan tambahkan ke blog
6. masukkan Posts or Comments feed blog kamu ke Feed URL.
7. ubah setting-an sesuai keinginan, contoh: ‘Title: Recent Posts/Comments’
Asal tahu aja, dengan membuat daftar post and comments ini dapat membantu dalam SEO.
Selamat mencoba.
update:
Psst.. Sekarang di Blogger udah ada gadget post dan komentar terbaru. Cara pasangnya jadi lebih mudah. Tinggal masuk ke Add a Gadget. Di sidebar, masuk ke Featured. Cari aja di situ gadget namanya Recent Posts atau Recent Comments. Sedikit setting sana setting sini dan save.
Buka Link di New Window/Tab
1 comments
Saat kita mengklik link yang terpasang pada widget Link List, biasanya tidak terbuka pada window/tab baru. Solusinya sangatlah mudah.
ikuti langkah2 di bawah ini :
1. masuk ke Layout>Edit HTML
2. check Expand Widget Templates
3. cari kode widget Link List yg akan diedit
4. nah, di widget tsb tambahkan target='_blank' pada tempat seperti di bawah ini :<b:widget id='LinkList2' locked='false' title='friends on www' type='LinkList'>
5. save template.
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a>
</li>
</b:loop>
</div>
</ul>
Hal ini juga berlaku pada kode HTML link (bener ga yah nyebutnya?), tinggal nambahin target='_blank' setelah alamat rujukan.<a href='alamat URL' target='_blank'>
Nah, sekarang tiap link yang diklik akan muncul di window/tab baru.
Semoga bermanfaat.
Membuat Dropdown Menu
2
comments
Drop down menu, disebut juga pulldown menu dapat membuat blog menjadi lebih ringkas. Bagi yang belum tahu Drop down menu itu sperti apa, contohnya seperti di bawah ini:
Membuat Drop down menu tidaklah sulit. Ada cara mudah membuat dropdown menu dalam blogger beta.
Berikut langkah-langkah nya:
Copy kode di bawah ini:
<form name="ddmenu">
<select name="menu" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">Tulisan di Blog ini</option>
<option value="http://alamatlink_artikel1">Nama/Judul Artikel 1</option>
<option value="http://alamatlink_artikel2">Nama/Judul Artikel 2</option>
</select>
</form>
Nah, sekarang tinggal kita kostumisasi kodenya sesuai keinginan. Ubah isi VALUE yang berwarna merah tsb dengan link tujuan. Lalu, jangan lupa sesuaikan Anchor Text-nya juga. Text inilah yang akan membawa ke link yang dituju saat text tsb diklik, sama seperti pada HTML Link. Terus gimana kalo jumlah link-nya mau kita tambah?? Gampang banget. Tambahkan aja kode OPTION sesuai kebutuhan.
Contohnya seperti di bawah ini:
<form name="ddmenu">
<select name="menu" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">contoh drop down menu</option>
<option value="http://blogger-holic.blogspot.com/2009/07/meta-meningkatkan-search-ranking.html">Tingkatkan SERP dengan Meta Tag</option>
<option value="http://blogger-holic.blogspot.com/2009/09/cara-bikin-table-of-content-mudah.html">Cara Bikin Table of Content dengan Mudah</option>
<option value="http://blogger-holic.blogspot.com/2009/09/manfaat-atribut-alt-dan-title.html">Ayo Manfaatkan Atribut ALT dan TITLE</option>
<option value="http://blogger-holic.blogspot.com/2008/08/hack-sistem-halaman-pada-blogger.html">Hack Sistem Navigasi Halaman pada Blogger</option>
</select>
</form>
dan hasilnya:
Sekarang dropdown menu akan menghiasi sidebar blog kamu dan bisa dipindahkan kemanapun kamu mau...
Semoga bermanfaat :D Read More »
Pasang Jam di Halaman Blog
0
comments
Jam bisa digunakan sbg penunjuk waktu atau hanya sbg hiasan halaman blog saja. Salah satu penyedia animasi jam yang populer adalah ClockLink. Animasi jam bisa kita peroleh secara gratis dan tidak perlu mendaftar lagi.
Berikut langkah2 nya :
1. masuk ke ClockLink
2. masuk ke dalam Gallery
3. pilih model jam yg kita inginkan, dan klik View HTML Tag
4. kemudian akan muncul window baru, pilih warna jam di tab Color
5. pilih zona waktu yg diinginkan pd tab Timezone
6. pilih ukuran jam pd Size
7. copy kode yg ada dalam blog dengan menambahkan HTML Element
8. save
selamat mencoba :) Read More »
Preambule
0
comments
(judulnya mantep juga...)
Wew, akhirnya blog ini keluar juga. Sebenarnya saya dari dulu ingin membuat blog yang khusus membahas tentang cara-cara peng-kostumisasi-an Blogger agar blog kita ini (baca: blognya bloggers) dapat tampil lebih sedap dipandang...
Sebelumnya saya juga telah membuat blog tentang ini, hanya saja masih bercampur aduk dengan bahasan yang ga ada kaitanya ma Blogger. Blog saya yang lalu membahas tentang komputer dan handphone, yang dateng dalam bahasa Inggris sementara tutorial Blogger-nya pake bahasa Indonesia (lah, piye toh...?). Oleh karena itu, saya ngedatengin blog ini....
oke, mungkin pada periode awal saya akan memindahkan postingan mengenai tutorial Blogger kemari dari Blog saya yang lalu.
Akhir kata, saya mengucapkan selamat datang di Blogger-Holic yang mungkin masih terdapat banyak kekurangan ini dan...
selamat utak-atik kode...
