Hari ini saya bingung mengutak atik halaman depan blogger, teman saya toko mei minta dibuatkan halaman muka blog yang terlihat image friendly. Dia ingin konsumen langsung melihat banyak gambar thumbnail dengan previewnya dengan cara membagi postingan di halaman utama menjadi 2 kolom berjajar dan kebawah.
Saya mencari referensi dengan melihat blog yang berbahasa indonesia maupun yang berbahasa inggris yang membahas tentang tutorial desain. Tapi tidak kunjung menemukannya. Akhirnya saya terinspirasi oleh top navigasi saya sendiri yaitu memanfaatkan fungsi list (ul li).
Secara logika, wadah konten postingan kita yang biasanya template desainer memberi tag css #main-wrapper, memiliki lebar yang telah di tentukan. Misalnya #main-wrapper{width:615px;}, berarti lebar konten postingan kita adalah 615 pixel.
Dengan hal itu jika kita ingin membagi postingan kita dengan 2 kolom memakai tag list (ul li) maka lebar <li> harus setengah dari lebar konten (#main-wrapper), dikurangi lebar margin dan padding.
Misal, konten kita memiliki padding 10px dan margin 10px maka, lebar <li> seharusnya (615px-10px-10px dibagi 2).
Nah dengan logika itu kemudian saya menemukan cara seperti berikut.
Membagi postingan halaman utama blogger menjadi 2 kolom
1. Ketahuikode css konten bawaan template. kali ini saya memakai template dari http://newbloggerthemes.com/.
#main-wrapper{width:615px;float:left;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;}
Keterangan :
kode css bawaan template anda bisa saja berbeda dengan yang saya pakai, jadi silahkan mengexplore sendiri kode - kode anda. Hitung - hitung nambah pengetahuan tentang apa yang telah kita buat sendiri :-).
2. Menambahkan tag css sebagai berikut tepat di atas ]]</b:skin>
#pembagi-content ul{
float:left;margin:10px 0 0 -30px;list-style:none;}#pembagi-content li{float:left;margin:10px;padding:10px;border:1px solid #DB1079;width:250px;background: #ffffff;text-align: justify;radius:20px;}
Keterangan :
lebar konten pembagi adalah 250px dengan pertimbangan padding dan margin yang tercetak biru 10px.
3. Menambahkan tag css <ul> dan <li> kedalam tag postingan, cari didalam html editor blogger (layout->edit html) kode berikut <b:loop values='data:posts' var='post'> dab rangkaian dibawahnya. Kemudian tambahkan tag css #pembagi-content dan tag <ul> diatasnya dan tambahkan tag <li> dibawahnya. terakhir tambahkan </li> sebelum </b:loop> dan </ul></div> setelahnya. perhatikan kode dibawah ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='pembagi-content'><ul><b:loop values='data:posts' var='post'><li><b:if cond='data:post.isDateStart'><b:if cond='data:post.isFirstPost == "false"'></div></div></b:if></b:if><b:if cond='data:post.isDateStart'><div class="date-outer"></b:if><b:if cond='data:post.dateHeader'><h2 class='date-header'><span><data:post.dateHeader/></span></h2></b:if><b:if cond='data:post.isDateStart'><div class="date-posts"></b:if><div class='post-outer'><b:include data='post' name='post'/><b:if cond='data:blog.pageType == "static_page"'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if><b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if></div><b:if cond='data:post.includeAd'><b:if cond='data:post.isFirstPost'><data:defaultAdEnd/><b:else/><data:adEnd/></b:if><div class='inline-ad'><data:adCode/></div><data:adStart/></b:if></li></b:loop></ul></div></b:if>
Keterangan :
<b:if cond='data:blog.url == data:blog.homepageUrl'> Hanya menampilkan pembagian konten dihalaman utama. konten di halaman selain halaman utama akan hilang. untuk menampilkannya kembali, tambahkan kode yang sama dibawahnya dengan sedikit modifikasi.
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'><b:if cond='data:post.isFirstPost == "false"'></div></div></b:if></b:if><b:if cond='data:post.isDateStart'><div class="date-outer"></b:if><b:if cond='data:post.dateHeader'><h2 class='date-header'><span><data:post.dateHeader/></span></h2></b:if><b:if cond='data:post.isDateStart'><div class="date-posts"></b:if><div class='post-outer'><b:include data='post' name='post'/><b:if cond='data:blog.pageType == "static_page"'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if><b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if></div><b:if cond='data:post.includeAd'><b:if cond='data:post.isFirstPost'><data:defaultAdEnd/><b:else/><data:adEnd/></b:if><div class='inline-ad'><data:adCode/></div><data:adStart/></b:if></b:loop></b:if>
Keterangan :
Kode yang tercetak biru diatas telah diganti dengan <b:if cond='data:blog.pageType == "item"'> yang artinya untuk menampilkan konten pada semua halaman selain halaman utama. Dan semua kode yang bertanda merah telah dihapus, dengan maksud mengembalikan tampilan konten satu kolom untuk selain halaman utama.
Sampai disini dulu tulisan saya friends, mungkin sedikit sulit dimengerti dan penulisan kode nya sedikit semrawut hehe. Saya masih terus belajar untuk memaksimalkan pengertian tentang semua yang ada di blogger.
