Kamis, 12 April 2012

Navigasi pada blog

Cara Membuat Navigasi Halaman Di Blog Blogger
Seperti panduan untuk blogger yang lainnya, langkah pertama yang harus di lakukan adalah login dulu ke blogger.
Setelah berada di dashboard blogger silakan pergi ke Rancangan/Templat  => terus ke bagian Edit Html.
Cari Kode
]]></b:skin>
Kemudian letakkan kode ini diatasnya
/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
Setelah kode di atas sudah di letakkan di tempat yang benar, sesuai dengan instruksi di atas maka langkah selanjutnya cari kode
</body>
Kemudian letakkan kode ini di atas kode </body> tadi
<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--Page Navigation End -->
Jika semua sudah di letakkan di tempat yang benar silakan simpan dengan cara mengklik tombol simpan atau save.
Nah itulah cara untuk menambahkan navigasi halaman di blogger, jika navigasi halamannya tidak muncul silakan di cek lagi apakah penempatannya sudah benar.

Selamat Mencoba dan semoga berhasil

Ganti Icon Blogger

Mengganti icon blogger dengan gambar-gambar ataupun foto sendiri di addressbar sangat mudah tinggal masukan kode javascrip/HTML


Sebelumnya Gambar yang mau di pasang harus berukuran 24 x 24 pixel up to 32 x 32 pixel di Photoshop dan masukkan ke alamat photobucket.com paham silahkan membuat dulu

Langkah-langkahnya :
1. Loggin ke Blogger.com
2. Pilih rancangan klik tab Edit HTML
3. Cari kode </head>
4. Silahkan copy kode di bawah ini, lalu paste kode diatas kode </head>

<link href=''
http://i1063.photobucket.com/albums/t520/cameratani/th_noprofil.jpg
rel='SHORTCUT ICON'/>

Keterangan : Kode yang berwarna
Hijau ganti dengan kode foto / gambar masing-masing ( kode dari photobucket.com / 4shared.com )

pasang alexa


Alexa Rank / Peringkat Alexa adalah sebuah peringkat yang di buat oleh Alexa.com untuk website atau blog berdasarkan banyaknya trafik atau kunjungan.
Langkah-langkah memasang widget Alexa Rank
Langkah Pertama
1. Klik di sini untuk menuju situs alexa.com


2. Masukan alamat blog anda pada kolom yang terdia. Contoh : lancah2.blogspot.com (tanpa http://), lalu klik tombol “Build Widget”. 
3. Ada 3 ukuran widget yang bisa anda pilih, copy kode yang ada di sampingnya lalu paste pada notpad atau text editor lainnya. Simpan kode tersebut di komputer anda untuk nanti di masukan ke blog.

Langkah Kedua
  1. Silahkan login ke blogger.
  2. Klik Tata Letak.
  3. Klik tab Elemen Halaman.
  4. Klik Tambah Gadget.
  5. Klik tanda Plus (+) di samping tulisan HTML/JavaScript.
  6. Paste kode yang tadi ada di notepad kedalam kolom yang muncul.
  7. Klik tombol Simpan.
  8. Selesai.
Mudah-mudahan dengan di pasangnya widget alexa di blog anda, alexa rank blog anda akan cepat bagus (semakin kecil semakin baik rangkingnya).

Membuat menu header

Membuat  header menu blog
Langkah - langkah membuat menu dibawah header blog adalah :

1. Masuk ke dashboard Blog sobat, lalu ke menu Template >> Edit HTML,  centang ' Expand Template Widget'

2. Cari kode seperti dibawah atau cari yang mirip (CTRL+F , cara cepat untuk mencari kode).
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='x-Demo (Header)' type='Header'>
<b:includable id='main'>

ganti maxwidgets='1' menjadi 2 atau lebih dan showaddelement='yes'>

3. Jika sudah selanjutnya sobat cari kode ]]></b:skin>

4. Hapus kode tersebut dan ganti dengan kode dibawah ini.
a.navigation {
background: #3333ff ;
color: #ffffff ;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

]]></b:skin>

Keterangan :
  • Perhatikan kode yang di cetak tebal, untuk kode merah adalah warna background
  • Kode warna biru adalah warna tulisan
  • Silahkan diganti dengan warna yang sobat inginkan. 

5. Save template lalu klik Elemen Laman atau klik rancangan.


6. kemudian klik tambah gadget >> pilih HTML/JavaScript

7. Copykan kode berikut kedalam kotak tersebut
<a href="http://www.linkanda " class="navigation">HOME</a>
<a href="http://www.alamat.linkcontak " class="navigation">CONTACT</a>
<a href="http://www.masterlinkcom/bkutamu.html " class="navigation">BUKU TAMU</a>
<a href="http://www.masterlinkanda.com/p/link " class="navigation">LINKS</a>

Keterangan : Ganti yang dicetak tebal merah dengan URL menu, dan warna biru adalah nama menu.

8.Simpan atau  SAVE lalu lihat hasilnya..

hilangkan angka label

Menghilangkan Angka Dalam Label dalam blog
Trick Menghilangkan Angka Dalam Label hanya dengan menghapus sedikit kode di dalam kode template.dengan catatan tergantung templatenya
Langkah-langkahnya yaiti:
  1. Sign in ke blogger
  2. Klik Layout
  3. Klik menu Elemen Halaman
  4. Klik tab Edit HTML
  5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget
  6. Cari kode berikut (<data:label.count/>)
  7. Jika and
  8. a sudah menemukan kode yang seperti di atas, silahkan hapus/delete
  9. Klik tombol Simpan Template

icon obeng dan tang

Langsung saja

Langkah-langkah menghilangkan icon obeng dan tang pada blog :
1. Login ke blogger
2. Klik  Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini ]]></b:skin>
5. Copy paste kode berikut persis di atas kode yang tadi : 
 .quickedit{
display:none;
}

6. Klik tombol Simpan template.

menghilangkan navbar


Menyembunyikan Navbar Navbar adalah bagian yang terlihat pada bagian teratas blog. Yang mana pada bagian tersebut terdapat tulisan Berbagi, Laporkan Penyalagunaan, Blog Berikut, Buat Blog dan Masuk. Kita bisa menyembuyikan navbar tersebut dengan auto hide navbar.
Caranya adalah sebagai berikut :

1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang " Expand Template Widget"
5.Cari kode body {
6.Masukkan kode di bawah ini di atas kode kode body { tadi
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

7.Jika sudah klik simpan dan lihat blog

Arahkan mouse pada bagian teratas blog, maka akan muncul navbar yang telah disembunyikan. Apabila mouse di arahkan ke tempat lain, maka navbar akan kembali hilang atau disembunyikan.

Selamat mencoba...