Cara Membuat Halaman Homepage Statis di Blogspot

Setelah browsing kesana-kemari akhirnya blogoonline dapat juga informasi mengenai Cara Membuat Halaman Homepage Statis di Blogspot sesuai yang dimaksud. Lalu bagaimana yang dimaksud oleh blogoonline..? Belum banyak blog yang menjelaskan mengenai topik blogging yang satu ini, jadi agak susah mencarinya. Dan setelah ketemu ternyata tidak sesuai yang dimaksud. Begini, beberapa blog menjelaskan tentang Cara Membuat Halaman Homepage Statis di Blogspot namun hasilnya, url di homepage tersebut tidak tampil sebagai url utama melainkan url dari page/ halaman statis.

Agak aneh rasanya bila tetap dipaksakan url tersebut, meskipun secara tampilan sudah benar. Beberapa lagi memberikan tips tentang cara membuat homepage dari artikel di blogspot, bukan itu juga yang blogoonline cari. Lalu bagaimana yang blogoonline cari..? Kok, semua bukan..? Yang blogoonline cari dari Cara Membuat Halaman Homepage Statis di Blogspot yaitu halaman tersebut benar-benar statis selamanya tanpa setting tanggal yang di majukan dan url dari homepage-nya adalah benar url homepage, bukan url page/ halaman.

Misalnya, blogoonline ingin membuat halaman selamat datang. Maka url-nya seperti berikut :

http://blogoonline.blogspot.com/

bukan seperti ini :

http://blogoonline.blogspot.com/p/selamat-datang.html

Dari contoh url diatas, mudah-mudahan anda tahu maksud saya ya.. Untuk lebih menjelaskan pemaparan artikel ini, silahkan anda lihat demo dari cara membuat halaman homepage statis di blogspot.

Demo

Oke, lalu bagaimana cara membuatnya..? Berikut langkah-langkah Cara Membuat Halaman Homepage Statis di Blogspot :

1.  Masuk ke halaman edit HTML dari template anda
2.  Cari kode yang kurang lebih seperti ini :

    <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>

3.  Diatas kode tersebut, letakkan kode berikut :

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <b:section class='main' id='homepage'></b:section>
    <b:else/>

4.  Dan, tepat dibawahnya tutup dengan kode ini : </b:if>
5.  Sehingga penampakkannya akan seperti ini :

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <b:section class='main' id='homepage'></b:section>
    <b:else/>
      <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
      </b:section>
    </b:if>
6.    Simpan template.

Langkah-langkah ini sebenarnya hanya untuk menduplikasi elemen <b:section> dimana satu elemen akan tampil hanya dihalaman muka, sementara elemen yang satu lagi tampil selain di halaman muka.

Sekarang masuk ke halaman Layout/ Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, dan digantikan oleh widget baru seperti berikut ini :

cara membuat halaman homepage statis di blogspot
Di widget inilah, anda bisa menggunakan html/ javascript untuk membuat widget yang hanya akan ditampilkan dihalaman muka saja. Widget bisa ucapan selamat datang atau hal-hal lain yang anda perlukan.

Blogoonline sudah membuat format untuk bisa anda pakai di widget html/ javascript sebagai ucapan selamat datang,

<div style="-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid black; font-size: 14px; margin: 5px 5px; padding: 20px; text-align: justify;"><img height="150px" src="http://3.bp.blogspot.com/-nxq8_kRo9sg/U7LORqSpyGI/AAAAAAAAAb4/y_nLoFFBG7s/s1600/Selamat+Datang.jpg" style="float: left; margin: 0 12px 4px 0;" width="250px" />Ketik Tulisan Anda disini</div>

Keterangan :
-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; = untuk membuat sudut melengkung pada border.
border: 1px solid black; = untuk membuat ukuran border, solid (garis utuh/ tidak putus-putus), serta warna border.
font-size: 14px; = ukuran huruf/ font.
margin: 5px 5px; = jarak kotak border bagian kiri dan atas, jika ingin menambah bagian kanan dan bawah tambah lagi 2 ukuran disebelahnya.
padding: 20px; = untuk mengatur jarak antara text dengan garis border.
text-align: justify; = untuk mengatur text agar rata kanan-kiri, jika ingin rata kiri saja gunakan left, jika ingin rata kanan saja gunakan right dan jika ingin rata tengah gunakan center.
Img src="url_gambar" = untuk mengambil gambar, gunakan posting untuk memasukkan gambar, lalu ambil alamat url-nya, sementara postingannya jadikan draft saja atau disimpan tanpa dipublikasikan.
style="float: left; margin: 0 12px 4px 0;" = mengatur agar posisi gambar ada disebelah kiri dari text yang akan ditulis, dan memberikan jarak antara text dan gambar, 12 untuk sebelah kanan gambar dan 4 untuk bagian bawah gambar.
height="150px" width="250px" = untuk mengatur ukuran tinggi dan lebar gambar sesuai keinginan anda.

Demikian artikel tentang Cara Membuat Halaman Homepage Statis di Blogspot. Semoga artikel ini bermanfaat. Baca juga artikel mengenai cara membuat menu kontak di blogspot.

Artikel Terkait dengan Tutorial Blogging

Bekti Nugroho G.S
Blog Oonline Updated at: 07.12

Tidak ada komentar:

Poskan Komentar

Silahkan Berkomentar dengan :

1. Bahasa Indonesia yang baik dan benar
2. Tutur bahasa yang sopan dan santun
3. Tidak mencantumkan alamat url apalagi link aktif
4. Sesuai isi artikel ( bukan sekedarnya )

Maaf, komentar akan saya hapus jika tidak sesuai dengan peraturan diatas.

Mohon maaf juga apabila komentar tidak muncul segera, dikarenakan tidak selalu online dan kesibukan offline lainnya. Terima kasih atas perhatian dan pengertiannya.


About | Contact | Privacy Policy | Arsip
Copyright © 2014- Blog Oonline - Powered by Blogger