Tips Blogging : Cara Memasang Kalender di Blog

Bagi anda para blogger yang mau memasang kalender pada blognya, agar para pengunjung blog anda bisa  mengetahui tanggal pada hari tersebut, biasanya kalender ini digunakan untuk menambah hiasan di blognya masing-masing.

Kemudian bagaimana cara memasang kalender di blog..?
Caranya sangat mudah, mari kita baca di bawah ini :

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, dengan menampilkan kalender-kalender yang menarik untuk di lihat.

Sebagai contoh :

http://www.free-blog-content.com.

Di dalam situs ini kalender yang di sediakan sangat beragam. hanya dengan mengklik kategori yang ada untuk memilih bentuk kalender yang anda inginkan untuk dipasang di blog anda, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada blog anda dengan cara sebagai berikut :

1. Sign in blog anda di blogger.com


2. Klik menu Tata Letak


3. Klik menu Elemen Halaman


4. Klik tulisan Tambah Gadget


5. pilih tulisan HTML/JavaScript


6. Copy kode kalender tersebut kemudian paste pada kolom yang di sediakan


7. Klik tombol SIMPAN


8. Selesai. kemudian lihat perubahan blog.

Jika sudah berhasil, salah satu contoh gambar kalender yang di sediakan akan tampak seperti contoh dibawah ini :




Adapun bagi anda yang ingin memasang widget kalender Hijriah, salah satu situs yang menyediakan widget tersebut adalah http://hijriah.jentayu.com. Bentuk kalendernya seperti dibawah ini :

Jika anda ingin memasang widget kalender hijriah seperti diatas ada tinggal mengunjungi situs penyedia tersebut. atau jika anda ingin lebih cepat, copy kode dibawah ini :



<script src="http://hijriah.jentayu.com/hijriah.php?color=7"> </script>

Ganti tulisan 7 dengan warna yang anda inginkan dibawah ini :

1 akan menjadi warna cokelat
2 akan menjadi warna kuning
3 akan menjadi warna ungu
4 akan menjadi warna biru
5 akan menjadi warna hijau
6 akan menjadi warna abu-abu
7 akan menjadi warna merah

Untuk langkah-langkah pemasangannya sama persis seperti diatas,

Semoga Bermanfaat..

Tips blogging :Cara Membuat Drop Down Menu Di Blog

Tujuan untuk membuat menu dropdown ini di blog adalah selain mempermudah para pengunjung untuk mencari artikel yang di cari juga menjadikan tampilan blog terlihat profesional. Cara pemasangannya pun tidak begitu susah karena tinggal menambahkan code drop down menu ke template dan widget.

Sudah siap untuk mengetahui bagaimana caranya ? Sekarang kita masuk ke tata cara membuat drop menu di blogspot ini. Langkah pertama adalah masuk ke template lalu pilih edit HTML, setelah itu cari kode ]]></b:skin> untuk mempermudah pencarian bisa menggunakan CTRL+F atau F3. Setelah ketemu masukkan kode berikut tepat di atas kode tersebut. 

menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Arial", Arial;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#FFFFFF;

height:35px;

list-style:none;

margin:0;

padding:0;

font-size:14px;

font-weight:bold;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#FFFFFF url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

Setelah kode tersebut di masukkan, lalu klik save atau simpan tergantung bahasa yang di gunakan. Sebagai catatan, kode yang di tebalkan adalah kode warna yang bisa di ganti sesuai tampilan blog masing-masing. 

Apa kah sudah selesai tugasnya ? Belum kok, sekarang masuk ke tata letak lalu klik tambah gadget. Setelah itu pilih HTML/Java Script dan masukkan kode berikut :

<div class="menu">
<ul>
<li><a href="Link">Home</a></li>
<li><a href="Link">Nama Menu1</a>
<ul>
<li><a href="Link">Nama SubMenu1</a></li>
<li><a href="Link">Nama SubMenu1</a></li>
<li><a href="Link">Nama SubMenu1</a></li>
</ul>
</li>
<li><a href="Link">Nama Menu2</a>
<ul>
<li><a href="Link">Nama SubMenu2</a></li>
<li><a href="Link">Nama SubMenu2</a></li>
</ul>
</li>
<li><a href="Link">Nama Menu3</a>
<li><a href="Link">Nama Menu4</a>
</li></li></ul>
</div>

Setelah selesai klik simpan dan drop down menu telah muncul di tampilan blog. Sekarang blog yang di miliki telah terlihat seperti blog yang profesional.

Catatan :

1. Ganti tulisan Link dengan link yang di inginkan

2. Ganti Nama Menu dan Nama SubMenu dengan nama yang di inginkan

3. Jumlah Menu dan SubMenu yang ingin di tampilkan tidak terbatas, tergantung selera masing-masing.

Semoga berhasil mencobanya...

Memahami Fungsi-Fungsi Dalam menu Setting Blog

Sebagai blogger pemula kadangkala kita akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkan blog kita dengan maksimal.

Pada postingan ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting. Supaya teman-teman bisa lebih mudah untuk mengoptimalkan blognya.

1. Menu Settings -> Basic

• Blog Tools: untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)
• Title: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)
• Description: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog
• Add your blog to our listing: untuk mengatur apakah blog anda mau ditampilkan pada menu blogger seperti blogger play dan next blog atau tidak
• Let search engines find your blog: Untuk mengatur apakah blog anda mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak
• Show quick editing on your blog: untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog
• Show email post links: untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email
• Adult Content: untuk menentukan apakah blog kita mengandung konten porno atau tidak
• Select Post Editor: untuk memilih jenis post editor yang ingin anda gunakan
• Enable Transliteration: untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.

2. Menu Setting -> Publishing

• Custom domain: Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll
• Blogspot Address: Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)
• Word Verification: kode verifikasi

3. Menu Setting -> Formatting

• Show at most: untuk menentukan jumlah postingan yang mau ditampil pada halaman blog
• Date Header Format: Untuk menentukan format tanggal yang mau ditampilkan diatas judul posting
• Archive Index Date Format: untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar
• Timestamp Format: untuk menentukan format waktu yang mau ditampilkan pada postingan
• Time Zone: untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia
• Language: untuk memilih bahasa yang mau digunakan
• Convert link breaks: untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan Yes saja.
• Show Title Field: untuk menampilkan judul postingan. Jika pilih No maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja
• Show Link Field: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih No saja
• Enable Float Alignment: untuk mengaktifkan fungsi penjajaran pada text dan gambar
• Post Template: untuk mengisi teks yang mau ditampilkan pada kotak posting

4. Menu Setting -> Comments

• Comments: untuk menampilkan kotak komentar
• Who Can Comment: untuk menentukan siapa yang boleh memberi komentar
• Comment Form Placement: untuk menentukan dimana letak kotak komentar
• Comments default for posts: untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak
• Backlinks: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak
• Backlinks default for posts: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak
• Comments Timestamp Format: untuk memilih format waktu yang mau ditampilkan pada kotak komentar
• Comment Form Message: untuk menampilkan pesan singkat diatas kotak komentar
• Comment Moderation: untuk menyaring komentar yang masuk sebelum diposting
• Show word verification for comments: untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam
• Show profile images on comment: untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger
• Comment Notification Email: untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar

5. Menu Settings -> Archiving

• Archive Frequently: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan
• Enable Post Pages: mengaktifkan halaman posting untuk setiap artikel

6. Menu Settings -> Site Feed

• Allow Blog Feed: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email
• Post Feed Redirect URL: untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongin aja
• Post Feed Footer: untuk mengisi teks tambahan pada feed

7. Menu Settings -> Email & Mobile

• Blogsend Address: untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.
• Email posting address: untuk menentukan alamat email blogger yang Anda inginkan. Supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.
• Mobile Devices: Untuk memposting artikel ke blog anda via MMS atau SMS dari hp anda. Cara register dan penggunaanya baca disini

8. Menu Settings -> OpenID

• OpenId: Secara ringkas, openId semacam identitas anda di internet. Dengan openid anda bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID baca disini aja ya

9. Menu Setting -> Permissions

• Blog Authors: memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite
• Blog Readers: untuk mengatur siapa yang bisa membaca artikel blog Anda

Demikianlah penjelasan dari masing-masing fungsi yang bisa diatur pada blog Anda. Semogauda jelas

Tips Blogging : Cara Mengganti Header Template Pada Blogger

Supaya blog Anda terlihat rapi, good look, unik atau beda dari yang lain. Maka Anda harus mengganti tampilan blog Anda.

Ada banyak cara untuk melakukannya. Misalnya dengan mengganti template yang dibuat oleh pihak ketiga tapi rata-rata template tersebut sudah ada yang menggunakannya.

Terkecuali Anda membuat template sendiri namun cara ini memerlukan waktu yang lama dan tidak mudah untuk membuat sebuah template yang bagus. Jadi salah satu cara yang paling mudah dan efektif adalah mengganti header pada template.

Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Jadi mengganti header merupakan cara yang paling tepat.

Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting enak dilihat. Jika anda ingin menggunakan gambar sebagai header tetapi tidak bisa membuatnya. Jangan khawatir, karena saat ini ada banyak situs yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti: 100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.

Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery

2. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.

3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info.

Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini

4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.

5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.

7. klik Return to the front page of free Web Page Headers.

8. Lalu klik Login untuk mendowload gambar header.

9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:

1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketik "header-wrapper" lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya #header-wrapper { background: url } no-repeat; width:980px; height:100px;

Width adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Design->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.


7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian "Placement". Pilih Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.

9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

Catatan:
Tidak semua template bisa dipasang gambar. Ada yang menggunakan teks saja. Jadi pilihlah template sesuai kebutuhan.

Selamat mencoba.

Tisp Cara Memasang Efek Salju di Blog

Anda ingin turun salju pada blog anda agar terlihat lebih hidup dan cool ?

Untuk memasang efek salju, caranya sangat mudah, langsung cek TKP:

1. Buka blogger. Masuk ke menu Design -> Page Elements

2. Klik Add a Gadgets -> HTML/Javascript

3. Masukkan script berikut kedalam kotak

<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

4. Tekan Save. Selesai


Tidak sulit bukan? Kalau tidak mau repot ya gunakan saja cara dibawah ini

1. klik tombol Tambahkan Efek Salju Pada Blog dibawah ini

2. Pilih blog yang ingin anda pasang efek salju lalu klik Add Widget
3. Selesai.

Selamat mencoba...

Tips Blogging : Cara Mengubah Tampilan Kursor Blog

Biasanya tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Selamat mengkreasi blog anda :)

Tips Cara Membuat Widget Space Iklan Banner

Posting kali ini saya akan memberitahu cara membuat widget space iklan banner atau bisa juga disebut kotak iklan, kalian bisa melihat contohnya pada gambar disamping, maanfaat blog yang memiliki space iklan banner adalah bisa mendapatkan pemasukan berupa uang yang didapat dari para advertiser pemasang iklan, setidaknya blog kalian memiliki Page Rank dan visitor yang lumayan banyak agar para advertiser pemasang iklan tertarik untuk memasang iklan di blog kalian, di blog saya ini memang belum memasang space iklan karena template yang saya gunakan tidak mendukung untuk memasang space iklan, saya rasa kalian mungkin bisa memakai fasilitas ini untuk menaruh foto,banner sendiri dan lain sebagainya. masing-masing setiap banner ukurannya hanya 125x125.

Langsung saja kalian lakukan tahap-tahap dibawah ini untuk membuat widget space iklan banner :

Masuk pada halaman Edit HTML di blogger kalian, lalu cari kode ]]></b:skin> dan letakkan kode CSS berikut tepat di atas kode ]]></b:skin>

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

Kalau sudah, jangan lupa untuk di save, selanjutnya pilih Elemen Halaman dan Tambah Gadget lalu pilih HTML/Javascript dan masukkan kode berikut :

<div id="Box-Banner-ads">
<a target="_blank" href="http://blessed4blessing.blogspot.com"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://blessed4blessing.blogspot.com"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://blessed4blessing.blogspot.com"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
<a target="_blank" href="http://blessed4blessing.blogspot.com"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
</div>

Untuk kode yang berwarna pink kalian ganti sesuai dengan alamat url iklan banner yang ingin kalian pasang dan untuk yang berwarna biru adalah url gambar iklan,

Selamat mencoba..........

Membuat Submenu Navbar Horizontal

Bagaimana cara membuat sub menu seperti yang ada di blog ini dan ini.

Mungkin yang di maksud adalah menu Touch Down (mendarat), atau yang biasa disebut sebagai submenu navbar horisontal. sesuai dengan namanya 'mendarat' yakni menu ini akan bekerja ketika pointer mouse melintas diatas link tersebut. Yang menampilkan daftar-daftar link yang lain ke bawah.Tutorial ini kelanjutan dari cara membuat sub menu link yang erat kaitannya dg tutorial ini, karena menu touch down biasanya di letakan pada sub menu. Manfaat submenu navbar ber-horizontal ini yakni untuk menghemat ruang pada blog, sama halnya menu multi kolom yang di ciptakan untuk menghemat ruang pada blog, namun sayang menu touch down dan menu multi kolom hanya bekerja ketika di akses lewat komputer, jika diakses lewat ponsel maka tidak bisa bekerja. Tapi bagi yang ingin mencoba silahkan ikuti tutorial berikut : 

• Pertama login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Backup template lengkap dulu dg mendownload template lengkap.
  
• Tandai kotak kecil pada Expand Widget Template
  
• Kemudian tempatkan kode CSS berikut di atas kode ]]></b:skin>
  

• #SubNavbar{background:#bb0000; width:960px; height:32px; color:#fff; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border:1px solid #fff;} #SubNavbarleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; margin:0; padding:0;} #touch{margin:0; padding:0;} #touch ul{float:left; list-style:none; margin:0; padding:0;} #touch li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #touch li a, #touch li a:link, #touch li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #touch li li a:hover, #touch li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;} #touch li{float:left; padding:0;} #touch li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #touch li ul a{width:140px;} #touch li ul ul{margin:-24px 0 0 170px;} #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul{left:-999em;} #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul{left:auto;} #touch li:hover, #touch li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} ..topleft {width: 304px; float: left; margin: 0; padding:0;} ..topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} ..topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

• Kemudian tambahkan kode HTML berikut di bawah kode <div id='header'> atau jika menu ini akan di tampilkan di atas konten seperti contoh demo yang di sebutkan di atas info.blogtegal.com maka kode HTML berikut di tempatkan tepat diatas <div id='content-wrapper'>
  

• <div id='outlet'>
  <div id='SubNavbar'>
  <div id='SubNavbarleft'>
  <ul id='touch'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>WebHosting »</a>
  <ul><li><a href='http://hostgator.blogtegal.com'>Hostgator</a></li>
  <li><a href='http://www.blogtegal.com/2012/03/cara-membeli-hosting-hostgator.html'>Cara Membeli</a></li>
  </ul></li>
  <li><a href='#'>Tutorial Blog »</a>
  <ul><li><a href='http://www.blogtegal.com/2011/05/tutorial-membuat-menu-touch-down.html'>Menu TouchDown</a></li>
  <li><a href='http://www.blogtegal.com/2011/04/membuat-link-otomatis-pada-blog.html'>Link otomatis</a></li>
  <li><a href='http://www.blogtegal.com/2011/04/membuat-link-label-secara-manual.html'>Label Manual</a></li>
  </ul></li>
  <li><a href='#'>Tutorial SEO »</a>
  <ul><li><a href='http://www.blogtegal.com/2010/11/trik-menjadikan-blog-seo-friendly.html'>Trik Blog SEO</a></li>
  <li><a href='http://www.blogtegal.com/2011/01/mengubah-gambar-menjadi-seo-friendly.html'>Gambar SEO</a></li>
  <li><a href='http://www.blogtegal.com/2011/01/membuat-meta-tag-seo-friendly.html'>Meta Tag SEO</a></li>
  </ul></li>
  <li><a href='#'>Profile »</a>
  <ul><li><a href='http://facebook.com/ora.kober'>My Facebook</a></li>
  <li><a href='http://twitter.com/blogtegal'>My Twitter</a></li>
  </ul></li></div>
  <div id='search'>
  <form action='/search/' id='searchform' method='get' style='display:inline;'>
  <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
  <input class='btn' type='submit' value='Search'/>
  </form>
  </div></div></div>

• Terakhir SAVE TEMPLATE

Keterangan:

1. Untuk teks yang berwarna hijau merupakan judul menu anchor text yang tampil sebelum pointer mouse melintas.
   
2. Untuk teks yang berwarna ungu merupakan submenu / subnavbar anchor text yang akan tampil setelah pointer mouse melintas di atas menu.
   
3. Untuk teks yang berwarna orange merupakan kode mesin pencari, mau di terapkan atau tidak terserah ente hehe.

Silahkan dicoba, untuk tampilan dan bentuk warna bisa di sesuaikan seleramu.

Cara Membuat Menu Drop Down Blogroll Pada Blogspot

Bagi anda yang ingin membuat Menu Drop Down Blogroll sobat bisa ikuti langkah berikut :
1. Pertama copy paste code berikut

<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Keterangan
Text yangn berwara merah adalah link. ganti text1 dan 2 tersebut dengan link kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus kamu ganti.

Contoh Seperti Ini :

<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://Maduraportal.blogspot.com/"> Madura Portal News </option>
<option value="http://sanatengah.blogspot.com/"> Petotu Ngeblog </option>
</select>

Cara Memasukkan Codenya Sebagai Berikut :
1. Login
2. klik Tata Letak atau Layout
3. Klik Tambah Elemen atau Add Element
4. Klik HTML / JAVASCRIPT
5. Copy dan paste kode di atas
6. Klik Simpan/Save.
7. Sudah selesai

Cara Membuat Menu Tab View di Blog

Banyak widget yang harus di tampilkan di sidebar blog, tapi karena tempat tidak mencukupi akhirnya tidak dipasang. Untuk mengatasi semua itu kita bisa memakai cara dengan cara membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.

Berikut cara membuat menu tab view di blog:
1. Masuk blogger >> rancangan >> edit html >> centang expand template widget
2. cari kode ]]></b:skin>
3. copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).

4. Selanjutnya cari kode </head>kemudian pastekan kode script di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

5. Kemudian Simpan / Save Template.
6. Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript
7. Copy kode di bawah ini di dalam box atau kotak HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget lainnya.. Sampai disini selesai tidaklah begitu sulit cara menambah menu tab view di blog, hanya membutuhkan kesabaran sedikit saja :D. Pengen blog sobat lebih cantik? Beri juga navigasi nomor halaman di blog. Berikut cara membuat navigasi nomor halaman di blog.

Silahkan di coba semoga berhasil.

Sumber: http://www.antigaptek.com/2011/07/cara-membuat-menu-tab-view.html

Cara membuat menu vertikal di Blog

Berikut Langkah-langkahnya :

1. Logn in ke blogger sobat

2. Pilih tab ==> Design ==> Edit HTML

3. Kemudian sobat cari kode ini ==> ]]></b:skin>

4. Copy kode dibawah ini dan pastekan di atas kode ===> ]]></b:skin>

1. <!--VERTICAL-MENU-STARTS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  
2. #verticalmenu  
3. border-bottom-width: 0;  
4. }  
5. #verticalmenu ul{  
6. margin: 0;  
7. padding: 0;  
8. font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;  
9. }  
10. #verticalmenu a{  
11. display: block;  
12. padding: 3px 0;  
13. padding-left: 9px;  
14. width: 200px;  
15. text-decoration: none;  
16. color: #fff;  
17. border-right:1px solid #000000;  
18. background-color: #2175bc;  
19. border-bottom: 1px solid #90bade;  
20. border-left: 7px solid #1958b7;  
21. }  
22. #verticalmenu a:hover {  
23. background-color: #2586d7;  
24. border-left: 12px solid #1c64d1;  
25. width: 195px;  
26. }  
27. #verticalmenu div.menutitle{  
28. color: white;  
29. border-bottom: 1px solid #053E66;  
30. padding: 5px 3px 5px 13px;  
31. background-color: black;  
32. width: 201px;  
33. font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;  
34. }  
35. <!--VERTICAL-MENU-STOPS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  

5. Setelah selesai simpan Template

6. Lalu klik page Element ==> Add Gadget ==> pilih HTML/Java Script

7. Copy kode di bawah ini dan pasteka di dalam gadget tersebut

view plainprint?

1. <!--VERTICAL-MENU-STARTS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  
2. <div id="verticalmenu">  
3. <div class="menutitle">Library</div>  
4. <ul>  
5. <a href="http://trikdantutorialblog.blogspot.com/">Home</a>  
6. <a href="...your link...">tab 2a</a>  
7. <a href="...your link...">tab 3a</a>  
8. <a href="...your link...">tab 4a</a>  
9. <a href="...your link...">tab 5a</a>  
10. <a href="...your link...">Contact me</a>  
11. </ul>  
12. <div class="menutitle">All about Blogs</div>  
13. <ul>  
14. <a href="...your link...">tab 1b</a>  
15. <a href="...your link...">tab 2b</a>  
16. </ul>  
17. <div class="menutitle">Blogger</div>  
18. <ul>  
19. <a href="...your link...">tab 1c</a>  
20. <a href="...your link...">tab 2c</a>  
21. <a href="...your link...">tab 3c</a>  
22. <a href="...your link...">tab 4c</a>  
23. </ul>  
24. </div>  
25. <a href='http://trikdantutorialblog.blogspot.com/2012/02/cara-membuat-menu-vertikal-sederhana.html' title='Get This Menu!'>Get This Menu!</a>  
26. <!--VERTICAL-MENU-STOPS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  

8. Setelah selesai simpan deh...

9. Selesai..

Selamat Mencoba