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
Sembunyikan Post Footer Di Bawah Read More

Sesudah
Sembunyikan Post Footer Di Bawah Read More

Hasil tampilan di single post atau dalam artikel
Sembunyikan Post Footer Di Bawah Read More

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

1 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

Sembunyikan Post Footer Di Bawah 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
  1. Sebelumnya teman-teman blogger harus login ke akun blogger terlebih dahulu
  2. Lakukan cara berikut secara berurutan :
    • Pilih Template >> Edit HTML >> Lanjutkan >> Centang Expand Template Widget >> Tekan Ctrl + F pada keyboard
  3. Cari kode <div class='post-footer'> melalui kolom pencarian yang ada di bagian kiri bawah
  4. Tambahkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> diatas <div class='post-footer'>
  5. 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
  6. Hasil kode lengkapnya seperti berikut
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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>
  7. 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.


2 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

Membuat Kolom Bawah Header

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 
Kolom Widget Bawah Header

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
Cara Membuat Kolom Bawah Header

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

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

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

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>
Membuat Widget Bawah Header

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
Kolom Widget Bawah Header

Untuk melihat hasilnya, silahkan lihat dibagian Tata Letak, seperti terlihat pada gambar berikut
Kolom Widget Bawah HeaderA

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
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 :)

Membuat Satu Kolom Bawah Header

Dan berikut cara Menambah dan Membuat Satu Kolom Widget Bawah Header
  1. Login ke blog sobat
  2. Pilih Template >> Edit HTML >> Lanjutkan
  3. Centang Expand Template Widget
  4. Tekan Ctrl + F pada keyboard
  5. Cari kode ]]></b:skin>
  6. Tambahkan kode berikut diatas ]]></b:skin> sehingga tanpilannya akan seperti ini
    #bawahheader{
    float:left;
    width:100%;
    }

    ]]></b:skin>
  7. 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'>
  8. Tambahkan kode
    <div id='bawahheader'>
    <b:section class='header' id='bawahheader' preferred='yes'/>
    </div>

    di bawah </div>
  9. 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
0 Read More

Cara Membuat Tabel dan Macam Tabel


Cara Membuat 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 Keterangan Foto
1. Tuan A Blogger Probolinggocara membuat tabel
2. Tuan B Blogger Maduracara membuat tabel
3. Tuan C Blogger Jawacara membuat tabel

<table border="1" style="width: 400px;"><tbody> </tbody><caption align="top"><b>Tabel 1.0 Cara Membuat Tabel</b></caption> <tbody>
<tr align="center" bgcolor="blueviolet"><th>No.</th> <th>Nama</th> <th>Alamat</th> <th>Keterangan Foto</th></tr>
<tr align="center"><td>1.</td> <td>Tuan A</td> <td>Blogger Probolinggo</td><td><img alt="cara membuat tabel" border="0" height="50" src="http://2.bp.blogspot.com/-ScAQ3h832XE/UL2Fry-qVUI/AAAAAAAAAio/eKipsQAjb4Y/s1600/membuat+tabel.png" title="cara membuat tabel" width="50" /></td></tr>
<tr align="center"><td>2.</td> <td>Tuan B</td> <td>Blogger Madura</td><td><img alt="cara membuat tabel" border="0" height="50" src="http://2.bp.blogspot.com/-ScAQ3h832XE/UL2Fry-qVUI/AAAAAAAAAio/eKipsQAjb4Y/s1600/membuat+tabel.png" title="cara membuat tabel" width="50" /></td></tr>
<tr align="center"><td>3.</td> <td>Tuan C</td> <td>Blogger Jawa</td><td><img alt="cara membuat tabel" border="0" height="50" src="http://2.bp.blogspot.com/-ScAQ3h832XE/UL2Fry-qVUI/AAAAAAAAAio/eKipsQAjb4Y/s1600/membuat+tabel.png" title="cara membuat tabel" width="50" /></td></tr>
</tbody></table>

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 -

<table border="1" style="width: 550px;"><tbody> </tbody><caption align="top"><b>Tabel 1.1 Daftar Anggota Keluarga</b></caption> <tbody>
<tr align="center" bgcolor="deepskyblue"> <td><b>Kepala Keluarga</b></td> <td><b>Anggota Keluarga</b></td> <td><b>Usia</b></td> <td><b>Alamat</b></td> <td><b>Status</b></td> <td><b>Pendidikan</b></td> <td><b>Foto</b></td></tr>
</tbody><tbody>
<tr> <td align="center" rowspan="4"><span style="color: #cc0000;"><b>Sahroni</b></span></td> <td><span style="color: #0b5394;"><b>Hj. Fatimah</b></span></td> <td>90 Tahun</td> <td>Alaskandang</td> <td>Nenek</td> <td>- </td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>Erna</b></span></td> <td>46 Tahun</td> <td>Alaskandang</td> <td>Ibu</td> <td>SMP</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>Ana Sri Wahyuni</b></span></td> <td>28 Tahun</td> <td>Alaskandang</td> <td>Isteri</td> <td>Diploma III</td> <td>- </td></tr>
<tr><td><span style="color: #0b5394;"><b>ME Shidqii RD</b></span></td> <td>4 Tahun</td> <td>Alaskandang</td> <td>Anak</td> <td>PAUD</td> <td>- </td></tr>
</tbody></table>


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.


0 Read More

Macam Macam Cara Membuat Tabel


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 BloggerTidak Jelas
2. Tuan B BloggerTidak Jelas
3. Tuan C BloggerTidak Jelas

<table width="400" border="1"><tbody>
<tr align="center"><th>No.</th> <th>Nama</th> <th>Alamat</th> <th>Keterangan</th> <th>Klik Cara Membuat Tabel</th></tr>
<tr align="center"><td>1.</td> <td>Tuan A</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center"><td>2.</td> <td>Tuan B</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center"><td>3.</td> <td>Tuan C</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
</tbody></table>

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

<table width="400" border="5"><tbody>
<tr align="center"><th>No.</th> <th>Nama</th> <th>Alamat</th> <th>Keterangan</th> <th>Klik Cara Membuat Tabel</th></tr>
<tr align="center"><td>1.</td> <td>Tuan A</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center"><td>2.</td> <td>Tuan B</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center"><td>3.</td> <td>Tuan C</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
</tbody></table>

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

<table width="400" border="1"><tbody>
<caption align="top"><b>Tabel 1.0 Cara Membuat Tabel</b></caption>
<tr align="center" bgcolor="blueviolet"><th>No.</th> <th>Nama</th> <th>Alamat</th> <th>Keterangan</th></tr>
<tr align="center"><td>1.</td> <td>Tuan A</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center"><td>2.</td> <td>Tuan B</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center"><td>3.</td> <td>Tuan C</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
</tbody></table>

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

<table width="400" border="1"><tbody>
<tr align="center" bgcolor="blueviolet"><th>No.</th> <th>Nama</th> <th>Alamat</th> <th>Keterangan</th> <th>Klik Cara Membuat Tabel</th></tr>
<tr align="center" bgcolor="chartreuse"><td>1.</td> <td>Tuan A</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center" bgcolor="coral"><td>2.</td> <td>Tuan B</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center" bgcolor="deeppink"><td>3.</td> <td>Tuan C</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
</tbody></table>

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

<table width="400" border="1"><tbody>
<tr align="center" bgcolor="blueviolet"><th>No.</th> <th bgcolor="chartreuse">Nama</th> <th bgcolor="coral">Alamat</th> <th bgcolor="deeppink">Keterangan</th></tr>
<tr align="center" bgcolor="blueviolet"><td>1.</td> <td bgcolor="chartreuse">Tuan A</td> <td bgcolor="coral">Blogger</td><td bgcolor="deeppink">Tidak Jelas</td></tr>
<tr align="center" bgcolor="blueviolet"><td>2.</td> <td bgcolor="chartreuse">Tuan B</td> <td bgcolor="coral">Blogger</td><td bgcolor="deeppink">Tidak Jelas</td></tr>
<tr align="center" bgcolor="blueviolet"><td>3.</td> <td bgcolor="chartreuse">Tuan C</td> <td bgcolor="coral">Blogger</td><td bgcolor="deeppink">Tidak Jelas</td></tr>
</tbody></table>

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

<table border="1" style="width: 400px;"><tbody> </tbody><caption align="top"><b>Tabel 1.0 Cara Membuat Tabel</b></caption> <tbody>
<tr align="center" bgcolor="blueviolet"><th>No.</th> <th>Nama</th> <th>Alamat</th> <th>Keterangan</th></tr>
<tr align="center" bgcolor="chartreuse"><td>1.</td> <td>Tuan A</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center" bgcolor="coral"><td>2.</td> <td>Tuan B</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
<tr align="center" bgcolor="deeppink"><td>3.</td> <td>Tuan C</td> <td>Blogger</td><td>Tidak Jelas</td></tr>
</tbody></table>


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

0 Read More