MENGHILANGKAN NAVBAR

---

---

M

enghilangkan navbar merupakan salah satu keinginan banyak para blogger. Mungkin para blogger ingin blognya terlihat seperti yang lain tanpa ada navbar diatasnya.Hal ini bisa saja dilakukan tapi ada yang perlu di perhatikan.

Sebenarnya google menyediakan nasbar ini gunanya untuk mempermudah login ke blogger atau sebagai jalan untuk melihat blog lain.Bisa juga untuk menandai blog yang melanggar TOS seperti mengandung SARA atau pornografi untuk dilaporkan ke pihak blogger.

Sebelum menghilangkan pikirkan terlebih dahulu,sebab resiko yang di tanggung cukup berat juga yaitu akan di tutupnya account kita di blogger. Sayangkan...?! Walaupun sekarang ada isu yang berkembang bahwa pihak blogger memperbolehkan tanpa resiko apapun. Keputusan ada ditangan sobat. Jika menurut sobat navbar itu tidak mengganggu dan menguntungkan biarkan saja nampak di atas.Tapi jika sobat masih ingin menghilangkan mungkin ini cara yang bisa sobat gunakan,tapi resiko ditanggung sendiri ya...!

• Login ke blog sobat

• Klik tata letak (Layout)

• Klik edit HTML

• Carikode ]]></b:skin>

• Letakkan kode berikut diatasnya #navbar{display:none }

• Hingga hasil kodenya sebagai berikut:
  #navbar{display:none
  }
  ]]></b:skin>
  

• Klik simpan template

• Lihat hasilnya

• selesai

Jika mau memunculkan lagi tinggal hapus kodenya.

MEMBUAT READ MORE VERSI BARU

J

enis read more ini kita beri judul read more versi baru karena telah ada versi read more sebelumnya. Jika ingin tahu versi sebelumnya coba sobat lihat disini.

Meskipun jenis read more versi ini agak berbeda dengan versi sebelumnya,akan tetapi kegunaannya sama.
Kalau Versi sebelumnya kita harus menunggu beberapa saat untuk membuka,tapi dengan read more versi baru ini sobat tinggal klik tidak begitu lama lanjutan halaman postingan akan terbuka. Sobat tinggal pilih yang mana tergantung selera.

Untuk membuat read more ini kita harus menambahkan beberapa kode pada kode template yang sobat miliki.

Kode apa saja yang harus ditambahkan lihat langkah-langkah dibawah ini:

1.Login di blogger dengan id sobat.
2.Pilih tata letak.
3.Klik edit HTML.
4.Download template lengkap terlebih dahulu.
5.Beri tanda centang pada Expand template widget.
6.Cari kode <head/> kemudian letakkan kode di bawah ini tepat diatasnya.Hingga
hasil kodenya seperti ini:


<script type='text/javascript' src='http://sites.google.com/site/darmasites/javascript/Readmore.js'/>


<head/>

Untuk diketahui bahwa kode yang berwarna merah adalah kode tambahan,sedang yang hitam adalah kode asli.

7.Cari kode <div class=post-body' atau <p><data:post.body/></p>

Tambahkan kode dibawah ini hingga hasilnya seperti berikut:

<div class='post-body' expr:id='"post"+data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;} </style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclik='"javascript:showFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>[+/-] selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclik='"javascript:hideFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")
</script>
</b:if>
<div style='clear: both;'/> <!--clear for photos floats-->
</div>
</div>

....rest of template code ....

8.Klik simpan.
9.Setelah tersimpan klik pengaturan.
10.pilih menu format.
11.Masukkan kode dibawah ini pada kotak kosong yang bertuliskan Template posting.

<span id="fullpost">

</span>

12.Klik tombol simpan setting.
13.Selesai.

Cara posting pastikan pada Edit HTML jangan pilih Compose,maka akan nampak kode dibawah:

<span id="fullpost">



</span>

Cara meletakkan artikel:

Disini tempat meletak artikel yang akan ditampilkan pada awal posting

<span id="fullpost">

Disini tempat meletakkan artikel kelanjutannya atau seluruhnya

</span>


Jika ingin tanpa read more tinggal hapus kodenya saja.

Moga berhasil !

MENAMBAH DAN MEMBAGI ELEMEN HEADER MENJADI BEBERAPA KOLOM

Di sini saya ingin berbagi untuk sobat yang ingin membagi elemen header menjadi beberapa kolom. Sobat bisa menaruh daftar isi,iklan,link atau apa saja yang sobat suka. Jika satu kolom header yang tersedia dirasa masih kurang cukup untuk menambahnya sobat bisa ikuti beberapa langkah dibawah ini:

Disini kita akan coba menambah 4 kolom dibawah header yang nanti hasilnya akan terdapat 1 kolom penuh(100%) dan 4 kolom dari hasil pembagian (25% x 4). Selanjutnya kita masih bisa menambahkan lagi menjadi beberapa kolom.

Langkah-langkahnya:

1. Login ke blog sobat pilih tata letak kemudian klik edit html.
2. Jangan kasih tanda centang pada expand template widget.
3. Cari kode ]]></b:skin> dan letahkan kode dibawah ini diatasnya.

Hingga hasilnya seperti kode dibawah ini:

#under_header{
float:left;
width:100%;
}
#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
]]></b:skin>
4. Kemudian cari kode:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
&ltb:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>

5. Jika sudah ketemu letakkan kode dibawah ini tepat dibawahnya hingga hasilnya sbb:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
<b:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>


<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

6. SIMPAN TEMPLATE kemudian klik tata letak. Jika yang nampak seperti pada gambar dibawah ini berarti kerja sobat sudah betul.



















Jika sobat ingin menambahkan lagi kolom yang sejajar dengan elemen tadi,sobat tinggal menambah(sisipkan)kode pada poin 3 dan 5.

Yang perlu sobat perhatikan pada poin 3 pada kode terkhir harus pada posisi right:

#under_header5{
float:right;
width:25%;
}

Tapi jika sobat ingin menambahkan beberapa kolom dibawahnya sobat perlu menambah kode dibawahnya lagi.

Ini adalah penambahan beberapa kolom dibawahnya:

#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:left;
width:33.33%;
}
#under_header7{
float:right;
width:33.33%;
}
#under_header8{
float:left;
width:50%;
}
#under_header9{
float:right;
width:50%;
}
#under_header10{
float:left;
width:100%;
}

Tambahkan juga kode pada poin 4 #under_header{ dengan menambah urutan angka-angka kodenya


<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>

<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>

<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>

<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>

<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>

<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>

Gambar dari Hasil penempatan kode-kode diatas:

MEMBUAT TEXT BERJALAN ATAU MARQUEE

---

---

M

ungkin ada sobat yang berminat memasang text berjalan atau marquee pada blognya. Saya ingin berbagi sama sobat yg belum tahu saja.Bagi yang sudah tahu silahkan bernostalgia. Text berjalan ini dalam bahasa HTML biasa disebut dengan marquee atau bahasa jawanya Markun. He..he..! "maaf pak markun bercanda." Bahasa apaan tu..? yang jelas Ingrislah.

Tag yang kita gunakan adalah:

<marquee>text yang kita inginkan</marquee>

text yang kita inginkan

Ini standart marquee agar berjalan dari kanan ke kiri.Kemudian kita bisa mengembangkannya dengan menambah beberapa astribut:

BGCOLOR=warna
DIRECTION=Mengatur arah gerakan (left,right,up.down)
BEHAVIOR=karakter gerakan (scrol,slide,alternate)
scrol(teks bergerak berputar)
slide(teks bergerak sekali lalu berhenti)
alternate(teks bergerak dari kiri ke kanan lalu balik)
TETLE=pesan muncul saat mouse berada di atas teks
SCROLLAMOUNT=mengatur kecepatan gerakan
SCROLLDELAY=mengatur tenggang waktu
LOOP=mengatur jumlah

Sekarang langsung saja kita pratekkan:

Dari arah kiri ke kanan

<marquee direction="right" >dari kiri ke kanan</marquee>

dari kiri kekanan

Arah bolak-balik

<marquee behavior="alternate" >arah bolak balik</marquee>

arah bolak-balik

Dari kanan ke kiri dengan kecepatan "15"

<marquee direction="right" scrollamount="15" >dari kanan ke kiri dengan kecepatan 15</marquee>

dari kanan kekiri

Arahkan mouse text berhenti

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkan mouse teks berhenti</marquee>

arahkan mouse text berhenti

Jika ingin turun atau naik tinggal ganti direction="down" atau "up"

<marquee direction="down" width="100%" height="100">dari atas ke bawah</marquee>

dari atas ke bawah

Dengan latar belakang warna

<marquee width="50%" bgcolor="orange">dari kanan ke kiri</marquee>


dari kanan ke kiri


<div align="left"> <span style="font- family:georgia;"<>marquee scrollamount="3" behavior="alternate" width="70%" bgcolor="red">dengan warna</marquee></span></div>

dengan warna

Dengan gambar atau foto

<marquee scrollamount="3" scrolldelay="10" width="50%" height="10%"><img src="http://picasion.com/pic12/001e4f5663e28f41208c938e9c7da3cf.gif" /></div></marquee>





Silahkan dicoba