membuat halaman beranda ( homepage )

sudahkah anda membuat homepage / halaman beranda berbeda dengan halaman postingan .. lalu bagaimana aturan CSS nya .. ?

yups .. Tutorial kita hari ini yaitu membuat Homepage / halaman beranda blog berbeda letaknya , bentuk dan bahkan anda juga dapat merubah warna backgroundnya sekalian ,atau jika berkenan silahkan melihat artikel mengenai penampilan beberapa halaman post / artikel blog sedikit berbeda  silahkan baca disini Tips membuat halaman Post / Artikel berbeda .
Baiklah , tips merubah halaman beranda ini kita  ini yaitu menggunakan widget di sidebar blog anda . entah itu di kiri atau di bilah kanan halaman post . yang pertama anda harus buat aturan css untuk widget yang akan di jadikan halaman home yang berupa kata sambutan , kata pembuka atau anda juga dapat mengisi widget - widget yang ingin anda tampilkan di halaman home tadi .
seperti berikut ini aturan cssnya :

.homepage_mastony{margin:0;padding:10px;position:relative;width:280px;top:15px;left:-280px;float:none;text-shadow:-1px 1px 1px #fff;border:1px solid white;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;display:none;visibility:hidden;background:#C7DCD8;}

Note : untuk kode css berwarna hijau anda sesuaikan dengan template atau layout anda masing - masing sedangkan left:-280px; posisi widget di geser dari kanan ke kiri untuk merubah dari kiri ke kanan hapus tanda kurang ( - ) seadangkan top:15px; posisi widget di geser dari atas ke bawah silahkan sesuaikan nilai value nya .

kode diletakkan di atas kode ]]></b:skin> pada pada template anda .
jika sudah anda perlu membuat kata - kata sambutan / pembuka di dalam widget anda .

1. pilh template --> tata letak --> tambah gadget
2. kemudian ketikkan kata -kata anda disitu dengan metode html sebagai berikut ini

<div class="homepage_mastony">halaman utama atau homepage anda halaman utama atau homepage anda halaman utama atau homepage anda    halaman utama atau homepage anda  halaman utama atau homepage anda </div>

mengatur ulang letak widget

anda juga dapat merubah letak widget - widget anda yang semula berada di kanan menjadi ke kiri atau sebaliknya yang ingin di tampilkan di halaman utama ( HOMEPAGE ) contoh widget milik blognya mastony yang ber title Artikel Terbaru dan Populer Post dengan id Feed1,PopularPosts1 maka kita harus buat aturan css ulang untuk widget tersebut .

seperti di atas gambar id widgetnya , maka kita meletakkan ulang kode css untuk id widget tersebut seperti ini #Feed1,#PopularPosts1{atur disini kode cssnya } .
sebelumnya cari dulu kode seperti ini .

 ]]></b:template-skin> jika sudah tambahkan kode seperti ini tepat di bawah / sesudah kode  ]]></b:template-skin> tadi .

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>#HTML3,#HTML9,.comments ,#HTML6,.blog-pager,.post-footer,h3.post-title,.sidebar h2,.post-body{display:none;height:0;padding:0;visibility:hidden;}#Feed1 {width:210px;position:relative;right:675px;top:50px;display:block;margin:0;}
#PopularPosts1{width:210px;position:relative;right:675px;top:0px;display:block;margin:0;}#PopularPosts1,#Feed1,#Followers1,#HTML2{text-shadow:-1px 1px 1px #fff;background:#C7DCD8;border:1px solid white;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;box-shadow:-10px 10px 0px #4E736D,-20px 20px 25px #444444;-o-box-shadow:-10px 10px 0px #4E736D,-20px 20px 25px #444444;-moz-box-shadow:-10px 10px 0px #4E736D,-20px 20px 25px #444444;-webkit-box-shadow:-10px 10px 0px #4E736D,-20px 20px 25px #444444;}
}
.homepage_mastony
{display:block;visibility:visible;}
</style>
</b:if>

.homepage_mastony pemanggilan ulang karna kita pada aturan css sebelumnya kita mengatur display:none;visibility:hidden; yang kita ubah menjadi display:block;visibility:visible;

<b:if cond='data:blog.url == data:blog.homepageUrl'> .disini content... ... </b:if> untuk mencegah agar tidak nampak ketika di halaman postingan / artikel blog .

sedangkan #HTML3,#HTML9,.comments ,#HTML6,.blog-pager,.post-footer,h3.post-title,.sidebar h2,.post-body{display:none;height:0;padding:0;visibility:hidden;} adalah untuk mencegah widget - widget anda yang tidak ingin di perlihatkan ketika di homepage .

jika sudah klik preview / pratinjau cek secara berkala agar nantinya hasilnya bagus . jika letaknya iingin anda atur ulang ganti kode left: atau top: pada aturan css .homepage_mastony #Feed1,#PopularPosts1 diatas hanyalah sebagai contohnya saja selanjutnya anda bisa berexperimen sendiri menurut insting .
untuk border radius anda bisa baca selengkapnya di sini sudut lengkung ROUNDED CORNER atau jika anda membutuhkan cara memberi background blog anda bisa simak disini Merubah warna background blog .
dari sini tutorial membuat halamam beranda / Homepage selesai dan apabila artikelnya kurang jelas anda bisa tanya di kotak komentar . dan saya ucapkan ... GOOD LUCK!!!