Home » All posts

Tutorial bikin menu horizontal di blogger

Posted by Unknown on Saturday, December 3, 2011

Description: Tutorial bikin menu horizontal di blogger Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tutorial bikin menu horizontal di blogger
More about → Tutorial bikin menu horizontal di blogger
at 8:40 PM { Add comments }

Tutorial bikin menu horizontal di blogger

Posted by Unknown

Description: Tutorial bikin menu horizontal di blogger Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tutorial bikin menu horizontal di blogger
More about → Tutorial bikin menu horizontal di blogger
at 8:40 PM { Add comments }

Tutorial bikin menu horizontal di blogger

Posted by Unknown

Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.

Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktek kan.

Ok langsung saja.



Panduan membuat menu horizontal blogger
  1. Login ke dashboard blogger
  2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
  3. Klik Add Gadget / Tambah Gadget.
  4. Pilih/klik opsi HTML/Javascript
  5. Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
  6. Klik Save / Simpan
  7. Selesai
Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:url(pop.png) no-repeat center top; height:35px;}
/* category navigation */
.nav { width:100%;z-index:99; float:left; margin:10px 0 0 0; padding:0px; list-style:none; line-height:1; height:35px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
.nav a { position:relative; color:#999; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { background:none; color:#004276; text-decoration:underline;}
.nav li ul { background:#444; position:absolute;width:172px; margin:0px 0px 0px -2px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }
.nav li ul li {border-bottom:1px solid #333; border-right:none; }
.nav li ul li a { background:#444; width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }
.nav li ul li a:hover { background:#f9f9f9; color:#004276; text-decoration:underline; }
.nav li ul ul { margin:-31px 0px 0px 171px; }
</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>                     
</div>
Keterangan.
ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.
Selamat mencoba dan semoga berhasil Description: Tutorial bikin menu horizontal di blogger Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tutorial bikin menu horizontal di blogger
More about → Tutorial bikin menu horizontal di blogger
at 8:40 PM { Add comments }
Labels:

Cara Mengganti Cursor Blog

Posted by Unknown

Ada yang ingin mengganti cursor (Kursor) blog blogger dengan tampilan cursor yang lain ????

Mungkin teman ingin membuat blog blogger yang teman miliki lebih cantik dengan kursor yang unik, atau yang teman inginkan, misalnya dengan gambar sepertini

atau dengan gambar yang lain.
Yah terserah lah, yang penting sesuai selera.

Jika ia, maka artikel ini perlu teman baca, perhatikan dan praktekkan ke blog atau situsnya.

Disini saya hanya akan menuliskan panduan cara mengganti kursor di blogger saja, heheeee

Panduan Cara Mengganti Cursor Blog Blogger

Langkah Pertama
Seperti biasa, silakan login ke dashboard blogger, kemudian klik Rancangan/Design => terus klik EDIT HTML.

Langkah Kedua
Temukan kode css, seperti ini
body {
background:#xxxxx;
font-size: xxxxx;
font-family: xxxxx;
dst.... 
}
Kode yang terpenting di temukan adalah kode body { background: Jika kode tersebut sudah ditemukan silakan tambahkan kode berikut sebelum tanda
cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78qTx6YpGGu1O8TjCl4d1EMQdtf_M4jlBovP_0NONbTk0b7U8_CV5F77Fhz4-XLg_orWHQwLfgIGxgquVJ7ad5SqtJDLa-1iCvdsBJHbMWPM4TemSuQPs1ixbMJHpGpURzb042xxpC7OL/s1600/jasablogsitus-web-id.gif'),text
Sehingga nanti jadinya seperti ini 
body {
background:#160500;
cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78qTx6YpGGu1O8TjCl4d1EMQdtf_M4jlBovP_0NONbTk0b7U8_CV5F77Fhz4-XLg_orWHQwLfgIGxgquVJ7ad5SqtJDLa-1iCvdsBJHbMWPM4TemSuQPs1ixbMJHpGpURzb042xxpC7OL/s1600/jasablogsitus-web-id.gif'),text;
font-size: xxxxx;
font-family: xxxxx;
dst.... 
}
Jika teman menggunakan semua kode ini maka cursor blog teman akan berubah menjadi gambar daun (seperti gambar di atas)

Jika teman ingin mengganti gambar cursornya dengan gambar yang lain, silakan ganti kode yang saya beri warna  purple dengan link gambar yang teman inginkan

Teman-teman bisa mencari gambar cursor lewat Google dengan mengetikkan kata kunci Free Cursor, Free Cursor For Website, dsb. Atau mau bikin cursor sendiri juga boleh.

Selamat mencoba dan semoga berhasil Description: Cara Mengganti Cursor Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Mengganti Cursor Blog
More about → Cara Mengganti Cursor Blog
at 8:38 PM { Add comments }
Labels:

Buku Tamu

Posted by Unknown

Seperti halnya acara pernikahan lah pengunjung di wajibkan mengisi daftar pengunjung atau buku tamu yang ada di depan gedung atw rumah yang mengadakan pernikahan.. Nah sama halnya seperti blog jika ingin pengunjung mengisi buku tamu maka kita harus sediakan itu di blog kita, tw caranya..??

kalo mo tw ikutin nih caranya:
Langkah 1:
  • Masuk ke http://www.shoutmix.com
  • Pilih Create your Shoutbox Now
  • Isikan data diri pada box yang sudah di sediakan
  • Kemudian centang pada kota I have Read and Agree to the Terms of Service
  • Pilih Continue.
  • Pilihlah salah satu tipe buku tamu yang kita inginkan.. anda 7 pilihan, jika sudah isikan kotak spam yang ada.
  • Jika selesai maka account andapun sudah dibuat.
Langkah 2:
  • Pilih go to control panel now
  • Dibawah terdapat kata get kode klik itu dan anda akan mendapatkan kodenya
  • Copy pastekan kode tersebut ke blog anda dan....!!!
  • Selesai deh..
Mudahkan anda bisa tempatkan buku tamu di blog anda... Description: Buku Tamu Rating: 4.5 Reviewer: Unknown - ItemReviewed: Buku Tamu
More about → Buku Tamu
at 8:31 PM { Add comments }
Labels:

Pasang Hit Counter

Posted by Unknown

Hit Counter merupakan perhitungan seluruh pengunjung yang mengunjungi web/blog kita.. jadi kita akan seberapa banyak pengunjung kita dalam 1 hari, 2 hari, atau seterusnya dengan begitu kita dapat menaikkan traffic kita.. :).

ikuti langkah-langkah nya ya...



  • Buka alamat situs www.bravenet.com
  • Disana anda harus mendaftar dan login ke situs tersebut.
  • Untuk mendapatkan kode tersebut anda harus klik link Hit Counter
  • Setelah itu pilih continue sesudah memilih consinue maka anda akan mendapatkan kode-kode.
  • copykan kode tersebut kedalam blog anda.
untuk mengkopikan kode tersebut anda harus :
  • Login ke blogger.
  • Masuk ke layout dan pilih page element.
  • Pilih HTML/Java Srcipt
  • Copykan kode tersebut kedalam konten yang telah tersedia.
  • dan.......
  • Selesai..
Silahkan coba di blog anda..
Semoga berhasil... Description: Pasang Hit Counter Rating: 4.5 Reviewer: Unknown - ItemReviewed: Pasang Hit Counter
More about → Pasang Hit Counter
at 8:31 PM { Add comments }
Labels:

Efek Warna Pada Link

Posted by Unknown

Efek warna pada link memberikan efek menarik bagi pengunjung sehingga pengunjung penasaran dan mngklik linknya.. dan ini juga bermanfaat sebagai pembeda antara Link dan Tulisan yang bukan link. Mau tau cara membuatnya gini nih..

Caranya mudah hanya dengan mengcopy dan pastekan saja:
sebelum diubah anda silahkan lihat dan cari kode ini pada edit html anda :



a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}


Klo sudah coba bentuk yang pertama yaitu dengan mengganti kode diatas menjadi:



a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
}

-->Bentuk yang Kedua


a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
font-size: 120%;
}


-->Bentuk yang ketiga:


a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
font-family: monospace;
}


-->Bentuk yang keempat


a:link {
color: #0066CC;
text-decoration: none;
}
a:visited {
color: #cc0000;
text-decoration: underline;
}
a:hover {
color: #2D8930;
text-decoration: blink;
}


-->Dan yang terakhir Bentuk yang lima :


a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
font-family: monospace;
font-weight: bold;
font-size: 120%;
background: #ffff66;
text-decoration: blink;
}


Silahkan coba dan jangan lupa untuk Membackup dahulu template anda sebagai langkah jaga-jaga jka terjadi kesalahan yang dapat merusak blog anda nantinya.. Description: Efek Warna Pada Link Rating: 4.5 Reviewer: Unknown - ItemReviewed: Efek Warna Pada Link
More about → Efek Warna Pada Link
at 8:29 PM { Add comments }
Labels: