Membuat widget scroll sidebar

Sering kali kita menemukan blog yang menampilkan widget dengan navigasi scroll, istilahnya scroll box. Widget ini memiliki penggulung di sebelah kanan dan kadang juga di sebelah bawah berisi teks link, tulisan biasa, dsb. Tujuannya tentu saja selain untuk mempercantik blog juga agar pembaca atau pengunjung lebih mudah mengeksplorasi konten blog.



Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box

Adapun cara membuat scroll box ini adalah dengan menggunakan script di bawah ini.
Code
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #FFFFFF;">
ISI KONTEN WIDGET
</div>
Keterangan:
  • ISI KONTEN WIDGET ini diganti dengan teks, link atau script yang Anda inginkan.
  • overflow:auto; penggulung tampil setelah isi scroll box telah melebihi batas tinggi atau lebar default sidebar template.
  • width:100%px; lebar widget scroll box
  • height:200px; tinggi scroll box
  • padding:10px; jarak antara tulisan di dalam scroll box dengan garis tepi scroll box
  • border:1px solid #FFFFFF; ketebalan dan kode warna garis scroll box.
  • Semua nilai di atas bisa dirubah sesuai kebutuhan.
Contoh:
Kita ingin menampilkan seluruh arsip blog pada widget ini. Isikan kode berikut pada Gadget HTML/Javascript :
Code
<div style="overflow:auto; width:100%px; height:300px; padding:10px; border:1px solid #FFFFFF;">
<script src="http://kerahledrek.googlecode.com/files/bloggermonthlysitemap.js">
</script><script src="http://kerahledrek.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>
Note : Ganti URL yang berwarna merah dengan URL blog sobat dan lihat hasilnya.
Selamat mencoba, semangat dan salam blogger.
selengkapnya » Membuat widget scroll sidebar

Tutorial membuat template blogger

Ebook ini merupakan kumpulan artikel dari seorang blogger yang sengaja saya publish dalam bentuk PDF file. Dari banyak tutorial di internet mengenai cara membuat template blogger, artikel ini menurut hemat saya paling sistematis dan lengkap. Materi dan penjelasannya cukup mendasar dan sederhana sehingga mudah difahami terutama bagi para blogger pemula. Di dalamnya juga terangkum materi yang bisa langsung sobat praktekkan dari tahap awal sampai selesai pembuatan template blogger.

Sebelumnya saya ucapkan terima kasih banyak pada agan Usup (demikian saya memanggilnya) yang telah memposting artikel tersebut dan mengizinkan saya untuk mempublishnya di blog ini.

Bagi sobat blogger yang merasa tertarik silahkan download artikelnya di sini (PDF) atau disini (Notepad), atau juga bisa mengunjungi websitenya langsung disini.

Note :
Hati-hati dalam mengkopy paste kode-kode dari document PDF di atas karena tidak jarang nomor halaman dokumennya juga ikut tercopy.

Selamat belajar semoga bermanfa'at, semangat dan salam blogger.
selengkapnya » Tutorial membuat template blogger

Mempercepat loading page blog

Adakalanya loading page template blog kita melambat setelah melakukan beberapa modifikasi. Hal itu mungkin tidak terlalu terasa apabila koneksi internet kita cukup kencang, akan tetapi bagi memiliki koneksi internet standar hal itu cukup menggangu terutama saat melakukan proses editing. Selain itu kecepatan loading page sebuah blog juga berpengaruh terhadap SEO. Ada banyak situs yang menyediakan layanan untuk mengukur kecepatan loading page, salah satu yang sering saya kunjungi adalah Tools.pingdom.com atau bisa juga ke Google PageSpeed. Berikut beberapa cara yang bisa dilakukan untuk mempercepat loading page diantaranya :

1. Kurangi gadget yang tidak perlu terutama yang menggunakan javascript.
Source code gadget yang menggunakan javascript url nya berakhiran .js atau terletak di antara tag pembuka <script> dan </script>. Template yang banyak menggunakan javascript memang terlihat lebih indah dan dinamis akan tetapi semakin banyak dan rumit tingkat javascript maka loading page akan semakin berat, lihat saja semacam tampilan gmail atau yahoo dan coba bandingkan dengan kecepatan loading page saya he he. Saran saya hanya gunakan gadget javascript yang memang benar-benar sobat butuhkan. Akan tetapi jika sobat ingin tetap mempertahankan script tersebut, sebagai alternatif bisa mengkompressnya, untuk panduan bisa dilihat disini.

2. Hindari memposting gambar yang tidak penting.
Gambar sangat berguna untuk ilustrasi, tapi semakin banyak gambar semakin berat load pagenya. Istilahnya BWK a.k.a bandwidth killer :D. Jadi gunakan gambar seperlunya saja.

3. Compress kode CSS dan HTML template blog sobat.
Saya kira cara di atas tidak bisa dianggap sepele. Selain membutuhkan ketelitian juga beresiko blog sobat acak-acakan kalau salah he he. Akan tetapi pengaruhnya relatif stabil terhadap loading page. Saya pernah mengkompress kode HTML template dan ternyata tingkat kompresinya sampai 20% padahal template yang saya gunakan relatif ringan. Untuk melakukannya sebagai alternatif silahkan sobat baca panduannya di sini.

Kalau ketiga cara di atas masih tidak berfungsi, belilah paket internet koneksi dewa he he just kidding.
Selamat mencoba, semangat dan salam blogger.
selengkapnya » Mempercepat loading page blog

Cara compress CSS dan HTML template blog

Saya kira tidak sedikit para blogger yang menggunakan cara ini dilihat dari segi manfa’atnya. Sebagaimana kita ketahui mengkompresi CSS dan HTML memiliki pengaruh yang signifikan untuk mempercepat loading page. Untuk keamanan sebelum melakukan kompresi disarankan back up dulu template blog sobat.

Langsung saja caranya sebagai berikut :
A.    Kompresi CSS
  • Kode CSS Blogger secara umum terletak di antara tag pembuka <b:skin> dan tag penutup ]]></b:skin> serta syntax yang ditandai dengan kurung kurawal {}
  • Copy kode yang terletak di antara kedua tag tersebut lalu paste di situs ini dan dapatkan hasil kompresinya. (Note: Tag pembuka dan penutupnya tidak perlu dibawa-bawa :p)
  • Setelah itu copy kode yang dihasilkan lalu paste kembali tepat di posisi semula pada template blog sobat.
  • Preview dulu, jika dirasa cukup lanjut ke tahap berikutnya.
B.    Kompresi HTML
  • Kode HTML Blogger secara umum terletak di antara tag pembuka <body> dan tag penutup </body>
  • Seperti langkah pertama, copy kode yang terletak di antara kedua tag di atas lalu paste di situs ini.
  • Copy kode yang dihasilkan lalu paste kembali tepat di posisi semula pada template blog sobat.
  • Preview dulu, jika tidak ada masalah save template.
Rasakan bedanya he he, untuk mengetahui hasilnya sobat bisa mengukur kecepatan load page sebelum dan sesudah kompresi di sini. Sebagai contoh ini hasil test ping situs saya :


Selamat mencoba, semangat dan salam blogger.
selengkapnya » Cara compress CSS dan HTML template blog

Membuat Contact Form Blogger

Contact form sangat berguna untuk sarana komunikasi via email. Contoh contact form yang saya gunakan bisa dilihat di sini. Ada banyak penyedia layanan ini dari mulai yang gratisan sampai berbayar. Tapi kali ini seperti biasa saya cuma membahas yang gratisan saja he he, di antaranya :
Code
www.123contactform.com
www.emailmeform.com
www.kontactr.com
www.mycontactform.com
www.formspring.com
  • Silahkan sobat pilih contact form yang disukai dari situs-situs di atas, dan dalam proses registrasi sesuaikan kode yang nanti diberikan dengan flatform blog sobat misalnya blogger, wordpress dan lain-lain.
  • Untuk penempatannya contact form nya akan diberikan banyak pilihan, berupa bentuk link HTML saja, atau ada tambahan script dan kode CSS tertentu untuk ditempatkan di halaman statis ataupun halaman posting baru.
  • Copy kode yang diberikan dan tempatkan sesuai pilihan sobat.
  • Sebelum kode itu di tempatkan, pastikan sobat mempostingnya dalam mode Edit HTML.

Selamat mencoba dan salam blogger.
selengkapnya » Membuat Contact Form Blogger

Memahami nama dan ukuran elemen blog

Bagi blogger pemula seperti saya :D, mengetahui ukuran panjang dan lebar template blog merupakan hal yang cukup membingungkan. Hal ini karena begitu banyaknya kode HTML yang termuat dalam template blog.

Tidak jarang waktu kita terbuang percuma hanya untuk mencari kode HTML yang menunjukan ukuran bagian template yang tidak juga ditemukan. Selain itu, jika kode HTML ini lama tidak ditemukan juga akan membuat kita merasa kesal dan bosan bukan? Nah, untuk itu berikut uraiannya.

Untuk nama elemen blog, gambar penjelasannya di bawah ini :

Untuk mengetahui ukuran panjang dan lebar elemen langkahnya seperti ini :
  • Klik rancangan.
  • Klik edit HTML.
  • Klik expand template widget.
  • Cari kode HTML berikut ini.
(hanya contoh, cari kode HTML yang dicetak biru)

Mengetahui ukuran lebar keseluruhan template.
#outer-wrapper{
margin:20px auto;
padding:0 10px;
text-align:justify;
width:900px;
}

Mengetahui ukuran header.
#header-wrapper{
height:119px;
width:900px;
}

Mengetahui ukuran sidebar.
#sidebar-wrapper{
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Mengetahui ukuran main kolom.
#main-wrapper{
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}

Keterangan:
Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian kode HTML.
Width merupakan ukuran lebar, sedangkan height merupakan ukuran tinggi.

Kode CSS di atas biasanya tidak berubah pada template default blogger, akan tetapi pada template tertentu nama elemennya tidak tepat seperti itu tapi biasanya mirip-mirip lah :D. Setelah mengetahui kode HTML dan fungsinya, maka proses editing ukuran template blog kita menjadi lebih mudah. Hemat waktu dan tidak membuat jenuh. Ingatlah untuk selalu memback up template terlebih dahulu untuk keamanan, terkecuali bagi yang sudah mahir.

Selamat mencoba dan salam blogger.

Disadur dari sumber.
selengkapnya » Memahami nama dan ukuran elemen blog

Membuat sudut blog melengkung

Untuk membuat sedikit variasi terkadang kita ingin membuat sudut blog melengkung, setelah saya tanya-tanya si mbah ternyata caranya sangat mudah. Kita hanya perlu menambahkan sedikit kode CSS. OK langsung saja kita uraikan sedikit penjelasan di bawah :
  • -moz-border-radius => kode ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
  • -moz-border-radius-bottomright => kode ini membuat garis melengkung kanan bawah saja
  • -moz-border-radius-bottomleft => kode ini di gunakan untuk membuat garis kiri bawah melengkung saja
  • -moz-border-radius-topright => kode ini untuk garis melengkung kanan atas saja
  • -moz-border-radius-topleft => kode ini untuk garis melengkung bagian kiri atas saja
Cara memasangnya adalah sebagai berikut ini:
  1. Seperti biasa masuk ke dasbor blogger anda >> rancangan >> edit HTML >> centang Expand Template Widget
  2. Silahkan sobat masukkan kode yang telah saya utarakan di atas, di bagian-bagian mana saja sobat ingin membuat lengkungannya. Sobat harus menambahkan nilai pada ujung kode tersebut, ini untuk menentukan seberapa besar derajat lengkungan sudut yang kita mau.
  3. Contohnya peletakkannya seperti berikut:
#footer{
-moz-border-radius-bottomright:10px;
background:#FF00FF;
}
Nah hasilnya kurang lebih seperti gambar di bawah ini.

Untuk selanjutnya silahkan sobat berkreasi sendiri :D
Selamat mencoba dan salam blogger.

Disadur dari sumber
selengkapnya » Membuat sudut blog melengkung

Membuat tombol share Facebook, Twitter dan Google +

Tombol share facebook, twitter dan google plus pada blog sangat berguna untuk mempermudah publikasi postingan kita pada website terkait. Secara default blogger sudah menyediakan fasilitas ini, namun beberapa template seperti yang saat ini saya gunakan memerlukan modifikasi lagi untuk menampilkan tombol-tombol tersebut.

Cara menambahkannya silahkan sobat copykan kode di dibawah ini :
Code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/>
</div>
</b:if>
Kemudian tempatkan kode di atas pada posisi atau elemen blog yang sobat inginkan. Sebagai chloe saja, biasanya code ini sering ditempatkan pada bagian / di bawah kode :

<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<!--disini-->

Update :
Cara terbaru yang lebih ringan bisa sobat baca disini. Selamat mencoba dan salam blogger.
selengkapnya » Membuat tombol share Facebook, Twitter dan Google +

Membuat gadget footer blog

Ada kalanya template yang kita pakai tidak memiliki gadget footer sehingga kita harus memodifikasinya sendiri, tidak seperti template bawaan blogger yang bisa kita tambahkan langsung melalui menu layout pada perancang template. Untuk menambah gadget footer pada template eksternal berikut langkahnya :

1. Copy kode CSS di bawah ini :
#footer-column-divide {clear:both;}
.footer-column {padding: 10px;}
2. Login ke blogger >> Template >> Edit HTML >> Backup template sebelumnya (disarankan)
3. Centang Expand Template Widget kemudian cari (ctrl+f) kode ]]></b:skin> dan tempatkan kode tadi tepat di atasnya.
4. Kemudian cari kode yang mirip ini :
<div id='footer-wrapper'> atau kode <div class='footer-outer'> atau tulisan seperti ini :

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>

dan tempatkan 4 kode script sesuai pilihan di bawah ini tepat di bawah kode footer tersebut. 
(Note: Kalau masih tidak ketemu kemungkinan template sobat memiliki struktur coding yang berbeda, tapi jangan patah semangat fokuskan saja pencarian pada kata footer. Pasti ketemu :D)

Selanjutnya inilah code nya, sesuai kebutuhan :
Kode untuk 1 kolom gadget :
<div id='footer-column-divide'>
<div id='footer' style='width: 100%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col0' preferred='yes' style='float:left;'>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
</b:section>
</div></div>

Kode untuk 2 kolom gadget :
<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

Kode untuk 3 kolom gadget :
<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Kode untuk 4 kolom gadget :
<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Selamat mencoba dan salam blogger.
Disadur dari sumber
selengkapnya » Membuat gadget footer blog

Gaya judul blog

Untuk membuat judul blog dengan gaya teks tertentu sangat mudah, tapi teks judul blog itu biasanya nanti akan berformat gif. Contoh paling simplenya mungkin seperti ini :
Agar gambar itu nanti tidak tumpang tindih dengan judul teks aslinya sebaiknya teks judul blog sebelumnya disembunyikan dulu. Untuk menyembunyikan teks judul blog silahkan baca dulu di sini. Akan tetapi bagi yang merasa tidak bermasalah dengan teks judul aslinya lewati saja.

Ada beberapa situs online yang menyediakan konversi logo untuk judul blog, berikut diantaranya :
www.cooltext.com
www.textspace.net
www.flamingtext.com
www.simwebsol.com
www.logomatik.net
www.thelogoshop.info

Silahkan kunjungi situs di atas, ambil code atau url nya dan tempatkan di blog sobat. Akan tetapi saya lebih menyarankan agar gambar tersebut disimpan dulu di komputer sobat sehingga nanti di upload di blogger saja agar lebih aman.

Selamat mencoba dan salam blogger.
selengkapnya » Gaya judul blog

Menyembunyikan judul blog

Ada beberapa blogger termasuk saya yang sengaja ingin menyembunyikan judul blog dan menggantinya dengan gambar hasil editan. Bagi sobat yang tertarik untuk mencobanya langkahnya sebagai berikut :

Masuk menu Layout -> Edit HTML lalu cari code yang mirip seperti ini :
#header h1{
dan seterusnya....
dan seterusnya ;
}

lalu tambahkan Code Css visibility:hidden; sebelum kurung kurawal diatas, sehingga kurang lebih menjadi seperti dibawah :
#header h1{
dan seterusnya....
dan seterusnya ;
visibility:hidden;
}

Selamat mencoba dan salam blogger

selengkapnya » Menyembunyikan judul blog

Membuat spoiler pada postingan blog

Spoiler berguna untuk menghemat tampilan posting dan biasanya dipakai di beberapa forum2 besar internet di Indonesia. Bisa juga untuk menempatkan kode yang kita posting. Untuk menggunakannya sobat harus memposting blog nya dalam flatform edit HTML. Berikut kodenya :
<div style="margin: 5px;">
<div style="margin-bottom: 2px;">
<span style="font-weight: bold;">Code</span>
<input onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText
= ''; this.value = 'Hide'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 2px;">
<div style="display: none;">
TAMBAHKAN DISINI KODE YANG INGIN ANDA SEMBUNYIKAN
</div>
</div>
</div>
Hasilnya seperti ini :
Code
Cendol dong gan :D

Selamat mencoba dan salam blogger.
selengkapnya » Membuat spoiler pada postingan blog

Membuat horizontal navbar menu dropdown

Secara default sebenarnya blogger sudah menyediakan fitur untuk menambah halaman (static page) pada dashboard apabila sobat blogger ingin menampilkan menu navigasi secara horizontal, akan tetapi disana tidak ada fasilitas untuk membuat menu dropdown. Oleh karena itu para blogger biasanya menambahkan beberapa kode CSS dan HTML untuk melakukan modifikasi.


Untuk membuat navbar horizontal yang menampilkan menu dropdown seperti di atas berikut langkahnya :
1. Silahkan copy kode CSS di bawah ini:
Code
/* MENU NAV */
#nav-element{width:980px; margin:0; padding:0px 0 0px 0; float:center}
#nav{background:#424242; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;}
#nav-left{float:left; display:inline; width:790px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:160px; padding-top:3px; padding-right:15px}
#nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold}
#nav li{list-style:none;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;}
#nav ul li a.current, #nav ul li a.current:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;}, #nav ul li a.current:hover{color:#fff; background-color:#000; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
#nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;text-decoration:none}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;}
#nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;}
#nav li{float:left;padding:0}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
#nav li ul a{width:156px;margin-bottom:2px;}
#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}
2. Login ke dashboard blogger sobat -> rancangan -> edit HTML (disarankan back up dulu template yang digunakan)
3. Tekan Ctrl + F cari kode ]]></b:skin> dan paste kode tadi tepat di atasnya, saya asumsikan sobat masih menggunakan template default dari blogger.
4. Selanjutnya copy kode di bawah ini :
Code
<div id='nav'>
<ul>
   
<li><a href='Ganti dengan url blog atau posting sobat'><strong>Menu</strong></a></li>
   
<li><a href='#'><strong>Menu</strong></a></li>
    <li><a href='#'><strong>Menu</strong></a></li>
    <li><a href='#'><strong>Menu</strong></a></li>
   <li><a href='#'><strong>Menu</strong></a></li>
  <li><a href='#'><strong>Menu</strong></a></li>
    <li><a href='#'><strong>Menu &#187;</strong></a>
    <ul><li><a href='
#'><strong>Menu</strong></a></li>
        <li><a href='
#'><strong>Menu &#187;</strong></a>
        <ul><li><a href='
#'><strong>Menu</strong></a></li>
            <li><a href='
#'><strong>Menu</strong></a></li>
            <li><a href='
#'><strong>Menu</strong></a></li></ul>
        </li>
        <li><a href='
#'><strong>Menu</strong></a></li></ul>
    </li>
    <li><a href='
#'><blink><strong>Menu</strong></blink></a></li>
</ul>

<script language='javascript'>setPage()</script></div>
5. Masuk ke layout >> tambah gadget >> HTML/Javasript >> copykan kode html di atas dan tempatkan pada posisi yang diinginkan. (Catatan : pastikan elemen header sudah terbuka untuk tambah gadget)
6. Kode yang berwarna biru (#) ganti dengan url blog atau posting sobat, dan yang berwarna merah (Menu) dengan nama atau judul kategori posting.
7. Preview dulu, apabila dirasa cukup simpan template sobat.
8. Selamat Mencoba dan salam blogger.
selengkapnya » Membuat horizontal navbar menu dropdown

Menyembunyikan navbar blogger

Untuk menyembunyikan navbar default blogger, langkahnya sebagai berikut :
  • Login ke dashboard blogger -> Rancangan -> Edit HTML
  • Cari kode ]]></b:skin>
  • Copykan kode di bawah ini tepat diatas kode tadi.

      #navbar {
      height:0;
      visibility:hidden;
      display:none;
      }


      Jadinya Seperti ini :
      #navbar {
      height:0;
      visibility:hidden;
      display:none;
      }
      ]]></b:skin>

      Selamat mencoba dan salam blogger.
      selengkapnya » Menyembunyikan navbar blogger

      Membuat dropdown list di sidebar

      Membuat dropdown list seperti tampak pada gambar di samping ini sangatlah mudah, selain bisa digunakan untuk menghemat tampilan page juga sangat baik dipakai untuk menyusun link partner atau kategori tertentu yang ingin kita tampilkan dari posting kita di blog.

      Caranya seperti berikut :
      1. Silahkan copy kode di bawah ini :
      <center><form><select name="menu" onchange="window.open  
      (this.options[this.selectedIndex].value,'_blank') "size=1 name=menu> 
      <option value="#" />- JUDUL LIST
      <option value="URL LIST" />NAMA LIST 
      <option value="URL LIST" />NAMA LIST
      <option value="URL LIST" />NAMA LIST
      </select></form></center>
      2. Login ke blogger -> rancangan -> elemen laman -> tambah gadget (sidebar) -> tambah HTML/Javascript
      3. Paste kode di atas.
      4. Silahkan sobat rubah sendiri Judul List, Url List dan Nama List sesuai keinginan.
      5. Selamat mencoba dan salam blogger.
      selengkapnya » Membuat dropdown list di sidebar

      Membuat daftar isi blog dengan mudah

      Daftar isi blog sangat berpengaruh pada kemudahan para pengunjung sebuah blog untuk menjelajahi artikel-artikel yang ada di blog tersebut. Untuk membuat daftar isi atau sitemap blog ada beberapa cara, diantaranya dengan cara masuk ke konfigurasi webmaster atau menggunakan script.

      Cara yang lebih mudah menurut saya adalah dengan menggunakan script, karena tidak perlu menunggu konfirmasi sitemap kita terindeks oleh google yang prosesnya relatif lama. Akan tetapi kelemahan script semacam ini bagi beberapa template biasanya kurang cocok diterapkan di halaman statis atau page baru di blog, melainkan pada halaman posting saja. Contohnya seperti disini.

      Langsung saja, buka entri baru di tab posting blog sobat, pilih flatform edit HTML dan masukkan kode di bawah ini:
      <script src="http://kerahledrek.googlecode.com/files/bloggermonthlysitemap.js">
      </script><script src="http://NAMA-BLOG-SOBAT.BLOGSPOT.COM/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>
      Kemudian silahkan sobat ganti teks yang berwarna merah di atas dengan nama blog sobat. Script di atas menampilkan posting berdasarkan bulan, untuk menampilkan posting berdasarkan kategori scriptnya di bawah ini :
      <script src="kerahledrek.googlecode.com/files/bloggerlabelsitemap.js"></script><script src="http://URL-BLOG-ANDA/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
      Dirangkum dari berbagai sumber, selamat mencoba dan salam blogger. 
      selengkapnya » Membuat daftar isi blog dengan mudah

      Memposting kode HTML di blog

      Dengan tujuan agar pembacaan post bisa lebih fokus, para blogger biasanya memposting kode HTML di dalam sebuah tabel. Tidak jarang atribut2 teks tertentu juga diberi warna. Untuk pewarnaan relatif tidak terlalu sulit karena blogger.com sudah menyediakan editor teks untuk itu.

      Dalam posting ini akan dijelaskan bagaimana menyisipkan kode HTML atau CSS di dalam tabel. Langkahnya sebagai berikut :
      1. Login ke Dashboard Blogger -> Rancangan -> Edit HTML
      2. Untuk keamanan back up dulu template blog sobat
      3. Pada edit HTML cari kode ]]></b:skin>
      4. Letakkan kode CSS di bawah ini tepat di atasnya.
      .codeview {
      margin : 15px 15px 15px 35px;
      padding : 10px;
      clear : both;
      font-size:normal;
      list-style-type : none;
      font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
      background: url("http://1.bp.blogspot.com/-Ki_3OOm2fok/TzhrohORfaI/AAAAAAAAHCk/TJgd3WqHdBc/s1600/codeicon.gif") no-repeat scroll bottom right #E0E0E0;
      border-top : 1px solid #eeeeee;
      border-right : 2px solid #cccccc;
      border-bottom : 2px solid #cccccc;
      border-left : 1px solid #eeeeee;
      }
      .codeview li {
      font-size : 13px;
      line-height : 24px;
      color : #333333;
      font-weight : normal;
      margin : 0;
      padding : 0;
      }
      5. Preview dulu, jika tidak ada masalah simpan template.
      6. Selanjutnya jika sobat mau memposting kode html tambahkan kode yang saya bold merah di bawah dan tempatkan kode html sobat yang mau diposting pada kode berwarna biru ini :
      <div class="codeview">
      <!-- Simpan Kode HTML nya disini -->
      </div>
      7. Untuk merubah warna background kotak kode nya silahkan sobat ganti nilai yang saya bold warna hijau di atas.

      Update: Jika sobat tidak mau ribet dengan cara di atas sobat bisa menggunakan tombol quote (tanda kutip) pada editor blogger.

      8. Selamat mencoba dan salam blogger.
      selengkapnya » Memposting kode HTML di blog

      Membuat chat room di blog

      Ada banyak program chat yang bisa digunakan di blog, baik yang berbayar ataupun gratisan.  Tapi pada posting kali ini saya cuma mau share yang gratisan. Saya sendiri pernah menggunakan program chat dari 99widgets.com dan chatroll.com,  karena dua aplikasi itu menurut saya cukup sederhana dan comfortable. Akan tetapi saya hanya akan membahas chatroll.com karena pada saat posting ini dibuat hanya itu yang saya gunakan di blog.
      1. Sign up ke chatroll.com, nanti ada pilihan mau menggunakan akun facebook atau akun baru di chatroll, pilih akun chatroll saja.
      2. Isi form registrasi, setelah selesai klik I Accept kemudian klik Create a new live event
      3. Pada form isian → Name your live event, isi nama even chat yg akan ditampilkan, kalo mau isikan chat room saja (nama even akan tampil sebagai title chat), install.
      4. Pilih flatform blog sobat, blogger, wordpress, joomla,  dll.
      5. Nanti ada pilihan apakah mau menampilkan widget chat di sidebar atau di posting, pilih sesuai keinginan. Kalau saya lebih memilih di sidebar karena ingin ditampilkan di homepage.
      6. Copy embed kode nya sesuai pilihan, lalu paste pada widget HTML di sidebar atau posting blog sobat.
      7. Selamat mencoba dan salam blogger
      selengkapnya » Membuat chat room di blog

      Membuat kotak pencarian pada navigasi bar

      Tutorial ini akan menunjukkan cara untuk menambahkan Kotak Google Custom Search ke bar navigasi horizontal, seperti apa yang Sobat lihat di blog ini. Google Custom Search memungkinkan sobat untuk mencari kata atau artikel di blog atau website pilihan sobat.



      Langkah 1. Buat mesin pencarian kustom Sobat
      1. Setelah login seperti biasa masuklah ke Google Custom Search untuk membuat mesin pencarian kustom.
      2. Jika Sobat memiliki akun Adsense Sobat juga dapat menggunakan Adsense Custom Search, jika tidak lewati saja.
      3. Masuk ke konfigurasi mesin pencari dan dapatkan kode untuk kotak pencarian.
      4. Carilah ID mesin pencari yang unik dalam kode. Seharusnya terlihat seperti ini: 006442729066804501157:setkk2xdqoi atau ini: partner-pub-4409155635154980:sle4d0smh1fr Kita hanya akan mengambil nomor tersebut pada ID ini, sisa kode lain abaikan saja.
      Langkah 2. Buat kotak pencarian
      Ini adalah kode untuk kotak pencarian:
      <!-- Google custom search box Start -->
      <div class='cse' style='color:#000000;align:right;float:right;margin:1px 4px 4px 4px ;'>
      <form action='http://www.google.com/cse' id='cse-search-box' target='_blank'>
      <input name='cx' type='hidden' value='ID PENCARIAN SOBAT SENDIRI'/>
      <input name='q' size='20' type='text'/>
      <input name='ie' type='hidden' value='ISO-8859-1'/>
      <input name='sa' type='submit' value='Search'/>
      </form>
      <script src='http://www.google.com/cse/brand?form=cse-search-box&amp;lang=id' type='text/javascript'/>
      </div>
      <!-- Google custom search box End -->
      Ganti teks yang saya bold pada atribut value dalam baris 4 dengan ID mesin pencari yang unik yang sobat punya dari Langkah 1.3. Sobat juga dapat mengubah lebar kotak teks pencarian dengan mengubah nilai nominal yang terletak setelah atribut size pada baris 5 kode di atas.

      Langkah 3. Tambahkan kotak pencarian ke menu bar
      1. Login ke akun Blogger Sobat.
      2. Pergi ke Dashboard> Desain> Edit HTML.
      3. Untuk keamanan back up terlebih dahulu template Sobat .
      4. Centang Expand Template Widget kotak centang di sebelah kanan atas jendela HTML.
      5. Ini adalah langkah yang paling penting dan cukup sulit karena tiap template blog memiliki penulisan dan penempatan posisi kode html yang bervariasi. Akan tetapi template yang sudah memiliki navigasi horizontal bar akan terdapat kode seperti di bawah ini :
      <div id='nav'>
      <ul>
          <li><a href='#'>Menu</a></li>
                 <ul><li><a href='#'>Menu</a>
                         <li><a href='#'>Menu</a></li></ul>
          <li><a href='#'>Menu</a></li>
          <li><a href='#'>Menu</a></li>
      </ul>
      </div>
      Perhatikan susunan kode yang saya bold di atas, tempatkan kode pencarian kustom setelah kode </ul> yang terletak paling dekat dengan kode </div>, mengapa yang paling dekat?  Karena bisa jadi terdapat lebih dari satu kode </ul> dalam rangkaian kode html navbar blog sobat sebagaimana saya contohkan di atas. Jadinya seperti ini :
      <div id='nav'>
      <ul>
          <li><a href='#'>Menu</a></li>
                 <ul><li><a href='#'>Menu</a>
                         <li><a href='#'>Menu</a></li></ul>
          <li><a href='#'>Menu</a></li>
          <li><a href='#'>Menu</a></li>
      </ul>
      <!-- Google custom search box Start -->
      <div class='cse' style='color:#000000;align:right;float:right;margin:1px 4px 4px 4px ;'>
      <form action='http://www.google.com/cse' id='cse-search-box' target='_blank'>
      <input name='cx' type='hidden' value='ID PENCARIAN SOBAT SENDIRI'/>
      <input name='q' size='20' type='text'/>
      <input name='ie' type='hidden' value='ISO-8859-1'/>
      <input name='sa' type='submit' value='Search'/>
      </form>
      <script src='http://www.google.com/cse/brand?form=cse-search-box&amp;lang=id' type='text/javascript'/>
      </div>
      <!-- Google custom search box End -->
      </div>
      Langkah 4. Preview dulu sebelum disimpan.
      Langkah 5. Cara lain yang lebih mudah bisa sobat baca disini.
      Selamat mencoba dan salam blogger.

      selengkapnya » Membuat kotak pencarian pada navigasi bar

      Memasang Google Chat Di Blog

      Google Chat atau sering disebut GTalk merupakan aplikasi milik Google yang digunakan untuk chatting, sebagaimana aplikasi sejenis lainnya seperti Yahoo Messenger (Yahoo), Windows Live Messenger (Microsoft) dan lain-lain. GTalk selain biasa diinstall di komputer juga cukup simple digunakan untuk mempercantik blog sobat.

      Apabila dipasang di blog, kelebihan aplikasi ini yaitu pengguna yang ingin melakukan chatting dengan admin tidak perlu login terlebih dahulu ke akun google. Mereka akan tampil sebagai Guest.

      Bagi sobat yang ingin memasang GTalk di blog langkahnya sebagai berikut :
      1. Silahkan login terlebih dahulu ke akun google atau gmail sobat lalu ambil kode script GTalk disini
      2. Copy Paste dan tambahkan kode script tadi di Gadget HTML Blog sobat
      Setelah terpasang maka pada proses chattingnya nanti akan tampil di di windows baru dengan ukuran default. Semoga bermanfa'at.

       
      selengkapnya » Memasang Google Chat Di Blog

      Statistik