Sidebar Berpindah dan Menghilang

Tidak terasa, tadi malam puasa ramadhan kita telah memasuki hari ke 21. Ini tentu menjadi kesempatan kita untuk berlomba-lomba dalam beribadah dan menambah  kebaikan, dengan penuh harap mendapatkan malam yang lebih baik dari seribu bulan. Kali ini saya membahas topik yang cukup serius dan membingungkan, saya sendiri juga masih bingung *loh. Tapi supaya ilmu tidak langsung menguap seperti air maka mem-postingnya di blog ini. Walaupun saya juga sering tidak berhasil dalam otak-atik kode html, tapi bagi saya kegagalan membuat diri kita menjadi maju dan semakin baik kedepannya.

Coba sobat liat sidebar blog forantum ini (sidebar adalah kolom di samping kanan dan kiri area postingan atau tempat widget di samping postingan). Sobat pasti bertanya-tanya kenapa tampilan antara homepage dan postingan berbeda, sidebar kirinya bisa hilang, berpindah dan berubah?. Nah trik dibawah ini adalah yang saya gunakan. Tentu digabungkan dengan trik sebelumnya yaitu Widget tidak tampil di homepage dan Widget hanya tampil di homepage. Intinya kita hanya menggunakan kode html IF atau JIKA.

Untuk Membuat Sidebar Berpindah:
Tambahkan css berikut ini di atas ]]></b:skin>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    #main-wrapper{float:left;}
    #sidebar-wrapper{float:right;}
    </b:if>

Penting: kode #main-wrapper dan #sidebar-wrapper berbeda-beda pada setiap template, jadi tolong disesuaikan.

Yang berwarna merah adalah menunjukkan posisi dari area postingan dan area sidebar Anda. Baris pertama script menunjukkan sarat bahwa css tersebut hanya dipanggil untuk halaman postingan.


Membuat Sidebar Menghilang
Agar sidebar menghilang kita tinggal mengganti sedikit kode yang ada di tengah menjadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    #main-wrapper{float:left;}
    #sidebar-wrapper{

display: none !important;

    </b:if>

Penting: kode #main-wrapper dan #sidebar-wrapper berbeda-beda pada setiap template, jadi tolong disesuaikan.

Semoga bermanfaat....

Sumber: Mas Doyok I Themasdoyok.com

Membuat Footer 3 Kolom dengan Background

Setelah mencari-cari tutorial membuat footer 3 kolom dengan background di google akhirnya saya menemukannya. ternyata sekarang cukup sulit untuk menemukan tutorial yang tepat di google, selain dikarenakan maraknya blog auto content juga di karenakan banyak blogger yang menembak keyword demi kepentingan pribadi. Saya menemukan beberapa tutorial membuat footer tiga kolom di google tapi hanya beberapa yang dapat di praktekkan dan yang lainnya bermasalah. Beberapa masalah itu adalah sebagai berikut:

• 1. Bukannya tiga kolom, tetapi footer 3 baris. Haha, buatnya 3 kolom, kok jadinya 3 baris. Saya sampe bingung, apalagi saya belum ahli dengan kode CSS template blogger.
• 2. Warna atau tampilan background tidak dapat diganti. Inilah yang mendorong saya untuk mencari tutorial membuat footer 3 kolom dengan background di google, karena tutorial saya tentang menambah footer 3 kolom yang dahulu backgroundnya tidak dapat diganti.
• 3. Template tidak dapat disimpan karena Error. Tapi akhirnya bisa, fyuh....

Setelah belajar CSS blogger template , akhirnya saya sedikit mengerti cara membuat footer 3 kolom dengan background di blogspot dan jadi juga footer 3 kolom blog forantum ini. Walaupun saya belum mengerti benar, berikut ini cara Membuat Footer 3 Kolom dengan Background di blogspot:

• 1. Login ke blogger dan masuk ke Dasbor.
• 2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")
• 3. Cari kode ]]></b:skin>
• 4. Letakkan kode CSS berikut ini diatas ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}

• 5. Cari kode <b:section class='footer' id='footer'>  dan ganti dengan kode pengganti di bawah ini:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>

• 6. Apabila tidak ada kode yang saya maksud, letakkan kode pangganti diatas kode <!-- end content-wrapper -->
• 7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.
• 8. Lalu simpan....

Maaf ya tutorial ini agak membingungkan, karena saya sendiri bingung, hehehe. Yang penting sobat belajar saja mempelajari kode-kodenya, semoga berhasil aja ya....

Membuat Halaman Penuh Tanpa Sidebar

Sesuai janji saya, saya akan membahas cara membuat halaman penuh tanpa sidebar. Bagi yang belum tahu, silakan lihat contohnya di submit artikel anda di forum antum. Sebenarnnya cara nya sangat mudah, akan tetapi itu apabila kita bisa memahaminya dan mengetahui kode-kode CSS di template kita. Coba kita memakai logika, apabila halaman penuh tanpa sidebar maka sidebar tidak akan di tampilkan, dan area postingan juga harus diperluas.

Cara Menghilangkan Pesan Pencarian Blogger

Jika anda melakukan pencarian di blog, baik itu melalui mesin pencari yang di pasang pada blog tersebut atau melalui label ataupun arsip blog, maka biasanya di atas halaman pencarian akan muncul pesan seperti ini :

Rupanya ada blogger yang tidak suka dengan kehadiran pesan ini dan menanyakan ke kang Rohman, apakah pesan ini bisa di hilangkan atau tidak? jawabannya tentu saja bisa, dan sangat mudah sekali. anda cukup menambahkan sedikit kode pada style sheet CSS anda. Kodenya seperti ini :

Cara Menghilangkan Tulisan "Subscribe To Post (Atom)" di Blog

Biasanya pada template blogger akan terdapat tulisan subscribe to: post(atom) atau berlangganan : post(atom) yang terletak dibawah postingan. Tulisan ini berfungsi sebagai feed dari blog anda. Tujuannya agar pengunjung bisa dengan mudah menemukan alamat feed anda. Tetapi jika anda sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari tulisan ini sudah tidak terlalu penting lagi.

Menghilangkan Icon Obeng dan Tang / Quick Edit di Blog

Bagi para Blogger, pasti pernah melihat icon berbentuk tang dan obeng / quick edit pada template Anda. Yang tampilannya seperti disamping.

Nah, itu bisa jadi sangat bermanfaat karena berfungsi sebagai tombol quick edit. Tetapi bisa jadi sangat mengganggu karena kita tidak bisa melihat bagaimana tampilan blog kita saat kita tidak login yang semestinya karena adanya obeng dan tang yang muncul hanya saat kita login.

Blog Hack: Menghilangkan Judul Blog dan Deskripsi Blog

Judul blog sangat penting karena berperan sebagai keyword di mesin pencari. Tetatpi kadang judul blog terlihat kurang menarik. Kita tidak bisa menghapusnya, yang kita lakukan adalah menyembunyikannya. Begitu juga untuk deskripsi blog.

Nah, bagi yang ingin menghilangkannya caranya adalah sebagai berikut:

Menghilangkan Blog Title
1. Login ke blogger
2. Tata Letak - EDIT HTML
3. Cari kode berikut #header h1 { atau kalau tidak ada kodenya .header h1 {
4. Nah sebelum penutup } tambahkan kode berwarna biru berikut:

Hasil Pencarian Hanya Menampilkan Judul Posting

Untuk berbagai pertimbangan, seperti agar lebih ringkas dan lebih simpel dalam menampilkan hasil pencarian, beberapa blogger memilih hanya menampilkan judulnya saja. Nah, yang belum mengetahui caranya langsung saja ikuti tutor di bawah ini:

(Eh, untuk contohnya coba anda cari artikel di forantum menggunakan tools pencari yang ada di sidebar bagian kanan, widget yang paling atas. Nah...yang tampil hanya judulnya saja kan)

1. Login ke blogger
2. Menuju Tata Letak - Edit HTML
3. Centang Expand Widget Templates
4. Cari kode berikut

Mengganti Tulisan Newer Post , Older Post dan Home dengan Gambar

Coba lihat ke bahwah Blog mu, nah... disitukan ada tulisan Newer post, Older post dan Home di bawah Postingan tuch. Atau dengan tulisan : Postingan lebih baru, Rumah / halaman muka, Postingan lama. Nah.... Tulisan itu dapat diganti dengan tulisan yang kamu mau, atau... bahkan dengan gambar. Gimana,,,, MAU??!!

Contoh yang bergambar bisa dilihat di blog percobaan saya di http://jeblogand.blogspot.com/

OK mulai beraksi, jangan banyak basa-basi:

ket: Carilah kode HTML dengan mengKLIK "F3" pada keyboard, lalu masukan kode yang hendak dicari.

Menghilangkan Judul Blog Di Header

Judul blog berguna untuk memberi informasi tentang blog kita dan sangat penting dalam search engine.. tapi jika di blogger judul blog tampak di header dan jika kita membuat background header yang kita buat sedemikian unik, bagus dan keren menurut kita akan mengganggu pemandangan background header kita...

Nah pada pembicaraan kali ini Saya akan membuat suatu tutorial sederhana untuk menghilangkan judul blog di header namun tidak hilang judul blog kita sebenarnya hanya saja tidak tampak pada header. Yupzz kemaren saya udah pernah buat tutorial sederhana mengenai cara menghilangkan Tanggal posting tapi sekarang saya membuat tutorial cara menghilangkan Judul Blog di header... oke langsung saja

Masuk menu Layout kemudian masuk Edit HTML kemudian cari Code di blog Anda yang mirip seperti dibawah

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

nahh seperti halnya menghilangkan tanggal posting kita tambahkan Code Css visibility:hidden; Kedalam Css Diatas Sehingga kurang lebih menjadi seperti dibawah

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

Jika Sudah Simpan pengaturanya....

sekian semoga bermanfaat.. jangan lupa isi komentar key.

(Sumber : http://tutorial-jitu.blogspot.com)

Cara Menambah Footer 3 Kolom di Blogger

Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer (letaknya di bawah, karena foot itu artinya kaki..hehehe) tiga kolom, seperti blog ini. Nah, bagaimana cara menambah footer 3 kolom di Blogger atau Blogspot? Bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna.
Oke, langsung saja ke tutorialnya:

1. Masuk Layout, Edit HTML, beri centang (jangan lupa back up dulu buat jaga-jaga).

2. Cari kode: <div id="footer-wrapper">
Ket: pada beberapa template kodenya: footer atau footer-section.

3. Geser ke bawah (biasanya dua baris ke bawah) sampai ketemu kode: </div>

4. Tambahkan kode berikut ini di bawahnya:

<div id="footer">
<div id="footer2" style="margin: 0pt; width: 30%; float: left; text-align: left;">
<b:section class="footer-column" id="col1" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer3" style="margin: 0pt; width: 40%; float: left; text-align: left;">
<b:section class="footer-column" id="col2" preferred="yes" style="float: left;">
</b:section></div>
<div id="footer4" style="margin: 0pt; width: 30%; float: right; text-align: left;">
<b:section class="footer-column" id="col3" preferred="yes" style="float: right;">
</b:section></div>
<div style="clear: both;">
<p>
</p><hr align="center" color="#5d5d54" width="90%"><p></p>
<div id="footer-bottom" style="padding: 10px; text-align: center;">
<b:section class="footer" id="col-bottom" preferred="yes">
</b:section>
</div>
<div style="clear: both;">
</div>

5. Simpan, lalu klik Layout dan lihat hasilnya: akan muncul tiga kolom di bawah (bagian footer).

Apabila muncul galat, wakakaka....tenang. Kembalikan template dengan back up template yang telah kita buat dan ulangi semua tahap. tapi coba dengan jangan centang expand widget template.

Semoga barhasil...

( Sumber : http://wawanwae.blogspot.com )

Menghilangkan Tanggal Posting

Saat ini saya akan memberikan sedikit cara blogger hack, khususnya cara menghilangkan tanggal posting. Sebenarnya, tanggal posting berguna untuk memberi informasi kapan postingan anda diterbitkan. Akan tetapi apabila anda merasa terganggu oleh tanggal postingan ini atau anda ingin merahasiakan kapan postingan anda diterbitkan kepada pengunjung, ini adalah solusi yang tepat untuk anda.

1. Masuk menu Layout kemudian masuk Edit HTML dan cari code yang mirip seperti ini di Blog Anda:

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
}

2. nah jika sudah ketemu tambahkan code Css visibility:hidden; kedalam Css diatas sehingga menjadi seperti:

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
visibility:hidden;
}

3. Simpan.

(Sumber : http://tutorial-jitu.blogspot.com)

Membuat Block Berwarna

Sekarang saya akan membahas bagaimana cara untuk membuat teks yang diblock menjadi berwarna. Sehingga teks yang diblock akan terlihat indah. Sebagai contoh, coba block tulisan diblock saya. Nah, tulisan yang tadinya berwarna putih berubah warna menjadi merah...apik thow. Tapi efek block berwarna hanya dapat dirasakan apabila kita menggunakan browser Mozilla Firefox.
Apabila anda tertarik, silakan mengikuti dengan seksama artikel ini. Cara untuk membuatnya adalah sebagai berikut:

1. Masuklah ke halaman edit HTML.

2. Taruh kode dibawah ini diatas kode ]]></b:skin> (untuk mempermudah pencarian gunakan tombol Ctrl+F.

::-moz-selection {
background: none;
color: #90EE90;
}

3. Okey....slesai lalu Simpan.

Ket:

*kode background: none adalah warna dari background, apabila ingin menggantinya gunakan kode warna. Kode warna dapat dilihat disini.

*color: #90EE90 adalah warna teks yang telah di block, apabila ingin menggantinya gunakan kode warna. Kode warna dapat dilihat disini.