Desember 2012 | Alaskandang Features ™

Hasil Sembunyikan Post Footer Di Bawah Read More

Sembunyikan Post Footer Di Bawah Read More - Setelah membaca tentang sembunyikan post footer di bawah read more, tentunya teman-teman blogger ingin mengetahui hasilnya dan berikut screen shot hasil dari sembunyikan post footer

Hasil sembunyikan post footer di bawah read more
Sebelum

Sesudah

Hasil tampilan di single post atau dalam artikel

Jika template teman-teman blogger masih menampilkan post footer di bawah read more di halaman utama dan ingin menyembunyikan atau memasukkannya ke dalam read more, silahkan baca caranya di artikel Sembunyikan Post Footer Di Bawah Read More

sembunyikan post footer

2 Read More

Sembunyikan Post Footer Di Bawah Read More

Sembunyikan Post Footer Di Bawah Read More - Beberapa template blogspot yang menggunakan read more masih ada yang menampilkan elemen post footer sehingga tampilan blog pada halaman depan terasa kurang enak dipandang, dan kalau template sudah terpasang read more maka semua elemen sudah harus 'terbungkus' oleh read more tersebut.

Contoh elemen post footer di bawah read more yang masih tampil di halaman depan blog dan belum 'terbungkus' oleh read more

Lalu bagaimana sembunyikan post footer di bawah read more seperti yang ada di gambar atas?
Cara sembunyikan post footer di bawah read more

Sebelumnya teman-teman blogger harus login ke akun blogger terlebih dahulu
Lakukan cara berikut secara berurutan :
- Pilih Template >> Edit HTML >> Lanjutkan >> Centang Expand Template Widget >> Tekan Ctrl + F pada keyboard
Cari kode <div class='post-footer'> melalui kolom pencarian yang ada di bagian kiri bawah
Tambahkan kode <b:if cond='data:blog.pageType == "item"'> diatas <div class='post-footer'>
Tambahkan kode penutup </b:if> dibawah kode penutup <div class='post-footer'>. Hati-hati jangan salah meletakkan kode penutupnya karena kebanyakan teman-teman blogger mengalami kesalahan disini
Hasil kode lengkapnya seperti berikut
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer'>
.....
dibagian ini mengandung kode
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>
.....
</div>
</b:if>
</div>
</b:includable>
Jika teman-teman blogger ragu dalam menambahkan/meletakkan kode penutupnya, silahkan pratinjau template terlebih dahulu. Jika tidak ada error, silahkan simpan.

Saya kira mudah kok untuk menghilangkan atau sembunyikan kode post footer di bawah read more dan memasukkannya ke dalam read more.

sembunyikan post footer

3 Read More

Cara Membuat Kolom Widget Bawah Header

Kolom Widget Bawah Header - Pada beberapa template blog biasanya tidak disertai dengan kolom widget bawah header dan secara umum hanya tersedia kolom untuk menu page horizontal yang secara otomatis akan bertambah jika kita memasangnya melalui widget bawaan blogger, seperti contoh berikut ini

Namun beberapa teman blogger termasuk saya hampir jarang menggunakan menu page horizontal tersebut dan lebih membuat menu horizontal sendiri seperti yang tertampil dalam blog ini

Sebelum membuat menu page tersebut, sebelumnya harus disediakan kolom widget di bawah header dan pada artikel ini saya akan menjelaskan cara mudah menambah dan membuat kolom widget di bawah header sehingga dengan kolom widget di bawah header tambahan ini akan berfungsi sebagai tempat menaruh menu page horizontal. Sebenarnya tidak hanya page menu, apapun yang ingin diletakkan di bawah header, bisa menggunakan kolom widget di bawah header ini.

Berikut cara mudah menambah dan membuat kolom widget di bawah header :
Login ke akun blogspot teman blogger
Pada halaman depan blogspot, pilih Template >> Edit HTML >> Lanjutkan

Setelah mengklik tombol Lanjutkan maka akan muncul halaman kode html template blogspot yang teman-teman blogger gunakan. Di halaman kode html inilah teman-teman blogger bisa mengedit seluruh tampilan blog yang diinginkan. Namun, untuk mengedit kode-kode yang ada diperlukan pengetahuan dasar mengenai kode-kode html. Berikut tampilan halaman kode html blogspot
Masih di halaman kode html, klik Expand Template Widget. Seperti gambar berikut ini

Setelah itu, tekan tombol Ctrl + F di keyboard secara bersamaan sehingga muncul, kolom pencarian di bagian bawah halaman kode html. Seperti gambar berikut

Pada kolom pencarian tersebut, ketikkan seperti ini ]]></b:skin> tidak perlu tekan enter karena hasilnya akan langsung terlihat seperti gambar berikut

Selanjutnya, tambahkan kode berikut diatas atau sebelum ]]></b:skin>
#bawahheader{
float:left;
width:100%;
}

Lalu, cari kode berikut
<div id='header-wrapper'> tapi karena beberapa template memiliki kode yang tidak sama maka jika kode <div id='header-wrapper'> tidak ditemukan maka carilah kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Scroll ke bawah sehingga ditemukan kode penutup dari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> yaitu </b:section>

Kode lengkapnya seperti berikut:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Alaskandang Features ™ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
.................
.................
</b:section>
</div>

Tambahkan kode berikut dibawah kode penutup <div id='header-wrapper'> yaitu </div>
<div id='bawahheader'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Kalau sudah ditambahkan maka hasilnya akan seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Alaskandang Features ™ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
.................
.................
</b:section>
</div>
<div id='bawahheader'>
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Jika sudah, jangan langsung disimpan tapi lihat dulu hasil previewnya dengan cara klik Pratinjau. Jika tidak ada perubahan dari tampilan blog setelah menambah kolom widget bawah header, silahkan di simpan klik Simpan Template

Untuk melihat hasilnya, silahkan lihat dibagian Tata Letak, seperti terlihat pada gambar berikut

Dan kolom widget bawah header sudah selessai di buat! Demikian cara membuat kolom widget bawah header, kalau membaca artikel ini memang terlalu ribut eh ribet tapi untuk lebih ringkasnya silahkan baca di Menambah dan Membuat Satu Kolom Widget Bawah Header

menambah widget bawah header

0 Read More

Menambah dan Membuat Satu Kolom Widget Bawah Header

Membuat satu kolom widget bawah header telah banyak dibahas oleh blogger-blogger tanah air dan artikel ini merupakan ringkasan dari Cara Membuat Kolom Widget Bawah Header yang telah saya bahas sebelumnya secara lengkap dan membingungkan :)

Dan berikut cara Menambah dan Membuat Satu Kolom Widget Bawah Header

Login ke blog sobat
Pilih Template >> Edit HTML >> Lanjutkan
Centang Expand Template Widget
Tekan Ctrl + F pada keyboard
Cari kode ]]></b:skin>
Tambahkan kode berikut diatas ]]></b:skin> sehingga tanpilannya akan seperti ini
#bawahheader{
float:left;
width:100%;
}
]]></b:skin>
Lalu cari kode <div id='header-wrapper'>
Kode lengkapnya seperti ini
<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> =====> kode penutup <div id='header-wrapper'>
Tambahkan kode
<div id='bawahheader'>
<b:section class='header' id='bawahheader' preferred='yes'/>
</div>
di bawah </div>
Sehingga hasilnya seperti berikut ini
<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='bawahheader'>
<b:section class='header' id='bawahheader' preferred='yes'/>
</div>

Selesai. Silahkan pratinjau terlebih dahulu, jika tidak ada error dalam Menambah dan Membuat Satu Kolom Widget Bawah Header, klik simpan template

satu kolom

1 Read More

Cara Membuat Tabel dan Macam Tabel

Cara Membuat Tabel - Pada artikel sebelumnya Macam Macam Cara Membuat Tabel, teman-teman blogger telah mengetahui secara sederhana cara membuat tabel di blog. Dan pada artikel lanjutan ini, juga akan dibahas mengenai cara membuat tabel dan macam macam tabel yang tentunya sangat berbeda dengan tabel yang telah ada pada artikel sebelumnya.

Dan berikut macam macam tabel yang bisa teman-teman aplikasikan ke blog teman sekalian dan untuk membuatnya silahkan klik tombol buka kode cara membuat tabel, dan salin kodenya kedalam postingan blog teman sekalian

**Tabel 1.0 Cara Membuat Tabel**
No.	Nama	Alamat
1.	Tuan A	Blogger Probolinggo
2.	Tuan B	Blogger Madura
3.	Tuan C	Blogger Jawa

**Tabel 1.1 Daftar Anggota Keluarga**
Kepala Keluarga	Anggota Keluarga	Usia	Alamat	Status	Pendidikan	Foto
Sahroni	Hj. Fatimah	90 Tahun	Alaskandang	Nenek	-	-
	Erna	46 Tahun	Alaskandang	Ibu	SMP	-
	Ana Sri Wahyuni	28 Tahun	Alaskandang	Isteri	Diploma III	-
	ME Shidqii RD	4 Tahun	Alaskandang	Anak	PAUD	-

Jika dalam kode cara membuat tabel terdapat link gambar, silahkan ganti link tersebut dengan link gambar yang teman-teman blogger inginkan. Semoga artikel cara membuat tabel dan macam macam tabel ini memberikan manfaat.

tabel

0 Read More

Macam Macam Cara Membuat Tabel

Macam Macam Cara Membuat Tabel - Secara umum pembahasan mengenai cara membuat tabel di blog sudah banyak di bahas oleh teman-teman blogger semua, namun pada kali ini saya juga akan mengulas cara membuat tabel secara lengkap mengenai macam macam tabel dan bagaimana cara membuat tabel dengan berbagai bentuk dan jenis tabel yang kita inginkan dan kita buat di blog.

Secara umum, macam macam cara membuat tabel hanya sebatas tabel seperti yang kita ketahui selama ini, seperti tampilan berikut ini:

Contoh Tabel Rata Kiri

Contoh Tabel Rata Tengah

Contoh Tabel Rata Kanan

Dan berikut macam macam tabel yang bisa teman-teman aplikasikan ke blog teman sekalian dan untuk membuatnya silahkan klik tombol buka kode cara membuat tabel, dan salin kodenya kedalam postingan blog teman sekalian

No.	Nama	Alamat	Keterangan
1.	Tuan A	Blogger	Tidak Jelas
2.	Tuan B	Blogger	Tidak Jelas
3.	Tuan C	Blogger	Tidak Jelas

No.	Nama	Alamat	Keterangan
1.	Tuan A	Blogger	Tidak Jelas
2.	Tuan B	Blogger	Tidak Jelas
3.	Tuan C	Blogger	Tidak Jelas

**Tabel 1.0 Cara Membuat Tabel**
No.	Nama	Alamat	Keterangan
1.	Tuan A	Blogger	Tidak Jelas
2.	Tuan B	Blogger	Tidak Jelas
3.	Tuan C	Blogger	Tidak Jelas

No.	Nama	Alamat	Keterangan
1.	Tuan A	Blogger	Tidak Jelas
2.	Tuan B	Blogger	Tidak Jelas
3.	Tuan C	Blogger	Tidak Jelas

No.	Nama	Alamat	Keterangan
1.	Tuan A	Blogger	Tidak Jelas
2.	Tuan B	Blogger	Tidak Jelas
3.	Tuan C	Blogger	Tidak Jelas

**Tabel 1.0 Cara Membuat Tabel**
No.	Nama	Alamat	Keterangan
1.	Tuan A	Blogger	Tidak Jelas
2.	Tuan B	Blogger	Tidak Jelas
3.	Tuan C	Blogger	Tidak Jelas

Untuk tabel yang berisi gambar atau macam macam tabel dan cara membuat tabel dengan gambar dan berbagai bentuk yang akan dipasang di blog silahkan lanjutkan membaca di artikel bagian dua ini, cara membuat tabel dan macam tabel yang masih berhubungan dengan artikel Macam Macam Cara Membuat Tabel

tabel

1 Read More