Desember 09, 2011

Membuat Tampilan Homepage Dan Halaman Posting Berbeda

Situseo Blog : Merubah design tampilan homepage berbeda dengan halaman posting, melihat tampilan blog sendiri dengan tampilan yang monoton kadang membosankan, dengan sedikit perubahan akan bisa menghasilkan tampilan yang lebih hidup, perubahan yang dimaksud adalah membuat beda antara tampilan homepage dengan tampilan halaman postingan.

Sebagai contoh kita akan merubah tampilan posisi ruang post, diasumsikan posisi ruang post berada disebelah kanan (default) baik itu pada tampilan halaman homepage maupun pada tampilan halaman posting, untuk membedakan tampilan homepage dengan tampilan halaman posting kita akan merubah posisi ruang post menjadi berada disebelah kiri, dengan kata lain tampilan ruang post berada pada sebelah kanan pada tampilan halaman homepage dan waktu masuk pada halaman posting, tampilan ruang post berada disebelah kiri, sebagai contoh coba masuk ke halaman homepage blog ini.

Untuk menjadikan tampilan tersebut berubah, kita harus mengetahui kode css bagian ruang post yang memberi perintah posisi ruang post tersebut, perhatikan kode css dibawah ini :

#main-wrapper {
float:right;
}

kode tersebut diatas menunjukan bahwa posisi ruang post menunjukan berada disebelah kanan.

#main-wrapper { menunjukan keterangan untuk ruang post, float:right; menunjukan posisi ruang post berada disebelah kanan (default template), mungkin pada template kalian berbeda untuk penamaan #main-wrapper {, kalian sesuaikan saja namanya dengan template yang dipergunakan.

Setelah mengetahui kode css untuk bagian ruang post (seperti contoh diatas), untuk menampilkan posisi ruang post berada disebelah kanan pada halaman homepage dan posisi ruang post berada disebelah kiri pada halaman postingan, kita harus menambahkan kode perintah :

<b:if cond='data:blog.pageType == "item"'>
Widget Kalian Disini
</b:if>

Kode HTML tersebut merupakan kode perintah untuk menampilkan hanya pada halaman postingan, kode perintah html tersebut akan kita tujukan kepada kode css diatas, kode css tidak bisa disatukan secara langsung dengan kode HTML, kita harus merubah kode css tersebut dengan style HTML dengan menambah kode seperi ini :

<style type='text/css'>
Kode CSS
</style>

Setelah mengetahui kode-kode yang akan dipergunakan dan mengetahui kode bagian css yang akan dirubah, langkah selanjutnya adalah meletakan kode-kode tersebut pada tempatnya, kode css yang akan dirubah adalah ini :

#main-wrapper {
float:right;
}

kode tersebut diatas (pada template kalian) copy saja (yang ada pada template utama jangan dirubah), letakan (paste) diantara kode html dan rubah menjadi seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

#main-wrapper {
float:left;
}

</style>
</b:if>

dan letakan diatas kode </head>, save template kalian.

Kalian cukup menambah kode yang diletakan diatas kode </head> saja tanpa merubah kode css lainnya. Secara otomatis biasanya jika ruang post disebelah kanan maka sidebar disebelah kiri, jika kita melakukan perubahan pada ruang post saja (jadi sebelah kiri) maka sidebar akan berubah tempat menjadi sebalah kanan, jika ini tidak berhasil maka kalian harus merubah juga posisi sidebarnya dengan menambahkan kode posisi sidebar seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

#main-wrapper {
float:left;
}
#sidebar-wrapper {
float:right;
}

</style>
</b:if>

Semoga dengan memahami ini, tiap halaman kalian bisa berbeda-beda tampilannya. Cara ini berlaku juga untuk semua bagian css, baik itu header, footer, background, ukuran, warna dll, selain hanya menampilkan pada halaman postingan masih ada cara menampilkan atau menyembunyikan pada halaman-halaman lainnya, untuk mengetahuinya bisa membacanya pada judul Menampilkan dan menyembunyikan widget pada halaman tertentu.

Semoga bermanfaat,

26 Diskusi untuk Membuat Tampilan Homepage Dan Halaman Posting Berbeda

11 Januari 2012 20.26  

gan kode HTML gak sebagian ada yang gak sama dengan yang agan tulis!.


bisa minta pencerahaan gan?

12 Januari 2012 03.14  

@Joy silalahi : setiap template kemungkinan besar berbeda cara pengkodeannya, kode yang saya tulis diatas merupakan kode umum/standar yang biasa dipakai. Jika maksud pertannyaanya adalah untuk mewujudkan tampilan homepage berbeda dengan halaman post, bang Joy hanya menambahkan kode yang harus ditempatkan diatas bagian </head> sedangkan kode css ganti dengan kode #main-wrapper float left atau right tergantung posisi main wrapper template bang Joy. Semoga bisa membantu

29 Januari 2012 01.34  

wewww.... gw interest ne. bisa ya jadi bgt gini :D

2 Februari 2012 21.11  

desain webnya bagus

2 Februari 2012 21.58  

@anggazigas & heri adhi nugraha : thank you

maap, ko gk berfungsi ya di blog ku, seperti yg mas dalang katakan pada joy silalahi, "kode yang saya tulis diatas merupakan kode umum/standar yang biasa dipakai." tpi tetep gk bisa, bisa minta pencerahannya?

*tambahan: maap, tulisannya postingan agan gelap amt ya...saya jadi rada kesulitan buat ngebacanya sama ngikuti tutorialnya...

9 Februari 2012 13.00  

@Syahri Ramadhan Wiraasmara : terima kasih atas koreksinya, tampilanya terlalu gelap ya...nanti saya ubah transparasinya supaya agak jelas (dilayar yang saya pergunakan sudah pas)

langsung ke bahasan : inti dari membedakan tiap halaman post adalah kode yang ditempatkan diatas </head> seangakan kode css adalah kode dari tipa bagian yang akan ditampilkan atau tidak, dalam contoh pada bahasan diatas adalah untuk merubah posisi sidebar pada halaman post dan home page. Apabila Syahri menggunakan kode css yang saya contohkan diatas dan diterspkan di template, sebaiknya dicek dulu apakah kode css-nya ada dalam template Syari dan apakah posisi sidebarnya ada disebelah kiri (default).

wah, kode css yg dicontohkan sma mas dalang k gk ada di template ku...trs bagaimana?

10 Februari 2012 01.48  

@Syahri Ramadhan Wiraasmara : JIka yang dimaksud #main-wrapper { tidak ada coba cari #main { biasanya untuk bagian post diawali dengan main, jika masih tidak ada bisa cari kode bagian sidebar seperti #sidebar { #sidebar { atau #side-wrapper {, syahri bisa memakai kode bagian sidebar untuk merubah posisi antara halamn post dan sidebar berbeda tampilan. karena posisi antara post dan sidebar berdampingan...selamat mencoba

trimakasih infonya gan, ijin praktek gan.

11 Maret 2012 10.37  

thanks man... jadi sering bolak balik sini,coz postingan ini sangat membantu :) btw mampir mampir ya..

7 April 2012 13.52  

thank's infonya sangat membantu, mampir gan www.indoking.blogspot.com

8 April 2012 15.35  

artikelnya sanga nenarik, thank you sebelumnya mas dalang...atas informasinya..izin di praktekkan..

9 April 2012 00.12  

@Klimas TV silahkan ...selamat mencoba

9 April 2012 14.49  

wah ,, backup template dulu.. jaga-jaga sipa tau error.. coz sering salah naruh kode.. ^_^

10 April 2012 02.41  

@Ardianta Scriptkiddie ya, betul untuk melakukan edit pada template sebaiknya lakukan backup terlebih dahulu, untuk menghindari segala kemungkinan kesalahan

13 April 2012 10.41  

makasih masa bagus banget artikelnya nanti saya coba..

20 Mei 2012 14.44  

bingung gan,,, :(

22 Mei 2012 01.13  

@BELAJAR DI DUMAY seru dong kalau bingung...heheheehe...yang penting memahami struktur css tiap bagian pada template, pastinya hal ini jadi mudah...keep try

10 Juni 2012 15.35  

mantab mas dalang.

tapi ..
kalau satu posting tampilan nya beda dari posting yang laen bagaimana mas dalang ? ...

minta pencerahannya mas ...

11 Juni 2012 05.55  

@Irman Kurniawan maksudnya desain tampilan secara keseluruhan? pada dasarnya sama caranya yang penting kita mengetahui stuktur css pada template yang dipakai maka untuk mewujudkannya akan mudah.

pada postingan diatas hanya sebagai contoh dalam memberikan pembeda, untuk bagian-bagian lain bisa mengetahui melalui link pada post paling bawah termasuk didalamnya ada untuk tampilan postingan yang berbeda2.

selamat mencoba

thanks pembasahan yang memudahkan

http://jadikanpinter.blogspot.com/

24 Oktober 2012 01.43  

Keren Design blognya.. Mantap mas dalang.
Sya pengen di pasang cara ini di blog saya tp udah di coba malah gak bisa terus.
mampir kesini mas dalang www.cybermistick.com syp tau nanti bisa ksh aku inspirasi.

22 Januari 2013 13.34  

wah kebetulan yang saya cari nih mas.. praktek dulu ah.. makasih tipsnya mas.. :D

4 Oktober 2013 17.29  

Terimakasih gan, ditunggu ya kunjungan baleknya " http://cidome.blogspot.com/ "

10 Maret 2014 05.29  

gan buat blognya pake apa sich???
kok bisa keren begini???
saya mau belajar juga....
apa aja bahannya???
menurut agan blog saya udah kategori bagus belom sich??? www.bacawebster.com saya masih kelas 3 SMA tolong share ilmunya hehehehehe

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top