Selasa, 30 November 2010

Cara Menghapus Atribusi

Kebanyakan template yang disediakan oleh pihak ketiga memang sudah tidak lagi mencantumkan atribusi blogger. Akan tetapi, jika kita masih menggunakan template bawaan dari blogger maka template tersebut akan secara otomatis terpasang atribusi blogger yang tidak bisa dihilangkan secara manual. Permasalah muncul ketika ada blogger yang masih ingin menggunakan template bawaan blogger tetapi juga ingin menghapus atribusi blogger di templatenya tersebut untuk beberapa alasan.Contoh tampilan atribusi blogger.


Meski tidak dapat dihapus secara manual, tetapi kita masih dapat menghapus atribusi blogger pada template bawaan dengan menambahkan kode untuk menyembunyikan widget atribusi ini melalui editing HTML template secara langsung. Adapun cara untuk menghapus atribusi blogger pada template bawaan blogger adalah sebagai berikut.

1 Masuk ke dalam akun blogger masing-masing.2 Klik rancangan.3 Klik edit HTML.4 Contreng expand template widget.5 Cari kode berikut : 
          ]]></b:skin>
6 Masukan kode berikut di atasnya.

      #Attribution1 {
      height:0px;
      visibility:hidden;
      display:none
      }

 7 Klik simpan dan selesai.

Senin, 29 November 2010

Cara Merubah Huruf Header Widget


Cara Merubah Huruf Header Widget Yang Semua Hurupnya Memakai Huruf Kapital tidak begitu sulit. Berikut langkah-langkahnya :

1.Masuk ke www.blogger.com dengan account yang di milikinya
2.Pilih rancangan (tata letak)
3.Klik Edit HTML
4.Cari kode h2 {  (untuk memudahkan pencarian, gunakan Ctrl+F)

/* Sidebar Content */
#sidebar-wrapper h2 {
font:14px arial,verdana,trebuchet ms;
font-weight:600;
text-align:left;
font-style:normal;
text-transform:uppercase;
line-height:1.3em;
color:#f2f2f2;
text-shadow:1px 1px 1px #222;
margin:-5px -5px 10px -5px;
padding:10px;
}

Atau cari kode berikut ini, karena semua ini tergantung dari template yg sobat pakai:

/* Headings
--------------------------------------
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
text-transform:uppercase;
letter-spacing: .2em
color:$sidebarcolor;
}

5.Hapus kode  text-transform:uppercase;
6.Jangan lupa Simpan Template.
7.Selesai.

Kode text-transform:uppercase; memberikan perintah bahwa tulisan dalam div Heading semua hurufnya harus besar. Dengan menghilangkan kode ini, maka besar kecilnya huruf terserah kita.

Jumat, 26 November 2010

Membuat Dropdown Menu


Berikut saya perjelas langkah-langkahnya !


  • Login ke www.blogger.com menggunakan akun blog anda.
  • Buka menu TEMPLATE, pilih EDIT HTML
  • Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian)
  • Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]></b:skin>



<! -------------mulai---------------->

#DropdownMenu {
    background:#ff6803;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike {
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#FFFFFF;
    color:#ff6803;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#ff6803;
    width: 150px;
    color:#FFFFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#FFFFFF;
    color:#ff6803;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
}

<! -------------selesai---------------->
  • Anda bisa mengganti warna background dan tulisan dari menu yang akan anda buat. Untuk kode #ff6803 itu adalah warna orange, yang menjadi warna background dari menu ini, silahkan anda ganti bila memang perlu. Lalu untuk kode #FFFFFF yang di dalam kotak berwarna putih, itu adalah untuk warna tulisan dalam menu.. Silahkan anda ganti bila memang diperlukan. Bila anda kesulitan untuk menentukan kode warna, silahkan cari disni Kode HTML warna.
  • Bila sudah, silahkan SIMPAN template anda
  • Sekarang kita menuju menu TATA LETAK
  • pilih TAMBAH GADGET/ADD GADGET lalu cari HTML/JAVA SCRIPT
  • Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)


<! -------------mulai---------------->

<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
        <li><a href="#">Menu1</a></li>
        <li>
          <a href="#">Menu2</a>
          <ul>
            <li>
              <a href="#">Sub Menu 2</a>
              <ul>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
            <li><a href="#">Sub Menu 5</a></li>
            <li><a href="#">Sub Menu 6</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </div>
  </div>
<! -------------akhir---------------->



  • Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.
  • Bila sudah klik SIMPAN, dan lihat perubahannya pada blog anda.


Jumat, 19 November 2010

Tambah Gadget di bawah Header


Untuk mengetahuinya, silahkan ikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari kode berikut ini di dalam template anda

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

6. Jika sudah ketemu, silahkan ganti semua kode tersebut dengan kode berikut ini

<b:section class='header' id='header' preferred='yes'>

7. Klik Simpan Template
8. Selesai

Minggu, 31 Oktober 2010

Anti COPAS


Cara Agar Artikel Blog Tidak Bisa Di Copy Paste oleh orang lain adalah sbb:

  1. Login ke Blogger.
  2. Pilih Template/Rancangan.
  3. Klik "Edit HTML".
  4. Centang box "Expand Template Widget".
  5. Cari kode <head> menggunakan CTRL+F.
  6. lalu letakkan kode di bawah ini persis di atas kode  <head>.                                                              
     <SCRIPT type="text/javascript">
        if (typeof document.onselectstart!="undefined") {
        document.onselectstart=new Function ("return false");
        }
        else{
        document.onmousedown=new Function ("return false");
        document.onmouseup=new Function ("return true");
        }
        </SCRIPT> 
  7. Klik "Save Template" dan Selesai.

Auto Hide Navbar


Berikut tips untuk menyembunyikan (Hidden) sementara atau bahasa kerennya Auto Hide Navbar  (Navigation Bar) Blogger/blogspot. Cara kerja Auto hide navbar ini adalah saat pengunjung blog mengarahkan mousenya kebagian atas dari blog kita maka secara otomatis Navbar akan muncul, begitu juga sebaliknya apa bila mouse pengunjung tidak menyentuh bagian atas blog kita maka Navbar akan di sembunyikan (hilang)

Cara pemasangannya adalah :

1.   Login ke blogspot lalu masuk ke menu Layout klik tab Edit HTML ,
2.   Cari kode body { 
3.   Kemudian Letakkan code di bawah ini persis diatas body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha
(Opacity=100, FinishedOpacity=100)}

4.   Simpan Pengaturan dan Lihat hasilnya di blog kita. trik ini ku peroleh dari o-Om

Selamat mencoba…. n happy blogging

Membuat Tabel Di Blogspot

Cara Membuat Tabel Di Blog Blogger

Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:

<table> dan </table>
<tr> dan </tr>
<td> dan </td>  


Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...

YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...

Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

·                     Membuat Tabel 2 Coloum kesamping dan 1 coloum kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Coloum 1 </td>
<td>Coloum 2 </td>
</tr>
</table>  


Dan Hasilnya akan terlihat seperti ini:
Coloum 1
Coloum 2

Jika ingin merubahnya menjadi 3 coloum kesamping dan 1 coloum kebawah anda cukup menambahkan kode <td>Coloum Tambahan atau Coloum 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini :

Coloum 1
Coloum 2
Coloum 3

·                     Membuat Tabel 2 Coloum kesamping dan 2 coloum kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Coloum 1 A </td>
<td>Coloum 1 B </td>
</tr>
<tr>
<td>Coloum 2 A </td>
<td>Coloum 2 B </td>
</tr>
</table>  

Hasilnya Seperti ini:
Coloum 1 A
Coloum 1 B
Coloum 2 A
Coloum 2 B

Jika ingin merubahnya menjadi 3 coloum kesamping dan 2 coloum kebawah anda cukup menambahkan kode <td>Coloum Tambahan 1 atau 2 </td> di antara <tr> dan </tr> pertama dan kedua
Contoh:
<table width="500" border="1">
<tr>
<td>Coloum 1 A</td>
<td>Coloum 2 A</td>
<td>Coloum Tambahan 1</td>
</tr>
<tr>
<td>Coloum 1 B</td>
<td>Coloum 2 B</td>
<td>Coloum Tambahan 2 </td>
</tr>
</table>

Maka hasilya seperti ini :
Coloum 1 A
Coloum 2 A
Coloum Tambahan 1
Coloum 1 B
Coloum 2 B
Coloum Tambahan 2

·                     Membuat Tabel 3 Coloum kesamping dan 3 coloum kebawah. jika ingin membuat tabel 3 coloum kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>
<tr>
<td>Coloum 3 A </td>
<td>Coloum 3 B </td>
<td>Coloum 3 C </td>
</tr>

Hasil kode htmlnya akan seperti ini :
<table width="500" border="1">
<tr>
<td>Coloum 1 A </td>
<td>Coloum 1 B </td>
<td>Coloum 1 C </td>
</tr>
<tr>
<td>Coloum 2 A </td>
<td>Coloum 2 B </td>
<td>Coloum 2 C </td>
</tr>
<tr>
<td>Coloum 3 A </td>
<td>Coloum 3 B </td>
<td>Coloum 3 C </td>
</tr>
</table>

Dan hasil tabelnya akan terlihat seperti ini :
Coloum 1 A
Coloum 1 B
Coloum 1 C
Coloum 2 A
Coloum 2 B
Coloum 2 C
Coloum 3 A
Coloum 3 B
Coloum 3 C

Keterangan :
·                     Pada tulisan yang saya tulis coloum 1, coloum 1A, coloum 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan. 
·                     Sedangkan kode ini.
<table width="500" border="1">
·                     Kode yang saya beri warna biru "500" adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.

Sabtu, 30 Oktober 2010

Menghilangkan Komentar


Menghilangkan Komentar pada postingan tertentu.
1. Login ke akun Blogger sobat
2. Kita menuju edit postingan yang ingin dihilangkan kotak komentarnya
3. Klik Pilihan di pojok kanan bawah, dan muncul menu :

 Pilihan
Komentar pembaca 
 
 
mode tulis 
 
Baris baru 
 


4. Kemudian beri tanda titik pada Radio Button (lingkaran) Jangan bolehkan, sembunyikan yang ada
5. Klik Selesai dan kemudian Publikasikan Postingan tersebut.
6. Lihat Postingan tertentu tersebut.

Kamis, 28 Oktober 2010

Menghilangkan Tulisan "Langgan: Entri (Atom)"

Kadang blog kita ingin terlihat rapi, tentu saja begitu bukan? Ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting adan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya gar lebih rapi.


Blog yang rapi, dengan tampilan yang sederhana, tidak terlau banyak tulisan atau lebar, mungkin sampai ke bawah banget :( Kita akan belajar bagaimana cara menghilangkan tulisan "Langgan: Entri (Atom)". Sehingga blog kita diharapkan bisa lebih rapi lagi, dan menarik pengunjung untuk berlama-lama di blog kita

Cara Menghilangkan Tulisan "Langgan: Entri (Atom)"
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

6. Hapus (delete) kode tersebut.
7. Simpan template jika sudah selesai.