Memanipulasi Ukuran Elemen

Biasanya yang menggunakan trik Manipulasi Ukuran Elemen itu adalah para blogger yang biasa membuat template magazine seperti para blogger tersohor yaitu kang rohman yang terkenal dengan template magazine-nya. Hampir semua template magazine kalau sobat semua perhatikan maka pada elemen postingan di halaman depan dengan di halaman saat membaca itu berbeda ukuran. Trik inilah yang menjadi salah satu rahasia dari template magazine tersebut dan menjadi template yang berbeda dari template jenis/kategori manapun. Sekarang saya akan menjelaskan bagaimana hal itu bisa terjadi? dan bagaimana cara untuk menerapkan ke template sobat?

Sebenarnya memanipulasi ukuran elemen post tersebut hanya memainkan kode css dan sedikit bantuan dari kode html, yang tepatnya kode css pada property width yang di rubah nilainya, nah kalau untuk kode HTMLnya kita bermain lagi dengan HTML pada postingan sebelumnya mengenai menukar posisi elemen yaitu HTML b:if. Sekarang bagaimana cara penerapannya di template kita? oke lihat penjelasan di bawah ini.

Sekarang saya asumsikan sobat berada pada halaman Edit HTML, nah agar tidak jadi kerusakan pada template sobat, alangkah baiknya sobat backup dahulu templatenya agara tidak terjadi hal yang di inginkan. Oiya disini saya akan memberikan contoh pada elemen post pada template minima dari blogger. Pada template minima blogger yag mengatur ukuran elemen post adalah Main-Wrapper jadi kita copy terlebih dahulu css pada main-wrapper ke tempat editor atau ke notepad aja deh biar gampang, jadi hasil copy css main-wrapper kurang lebih seperti di bawah ini.

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Nah sekarang css-nya sudah lalu apalagi y? oiya HTML sekarang, untuk htmlnya bisa sobat ambil dari postingan sebelumnya atau ambil aja HTML di bawah ini

<style type='text/css'>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Disini tempat untuk menaruh kode css

</b:if>

</style>

HTML b:if diatas menunjukan pada halaman index (home, search, dan archive), jadi pada halaman tersebut elemen post kita manipulasi ukurannya. Nah sekarang kita gabungkan css yang tadi sudah di copy dengan HTML di atas, tempat untuk menaruh kode cssnya sudah saya beri tanda dengan tulisan, kurang lebih hasilnya menjadi seperti di bawah ini.

<style type='text/css'>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

</b:if>

</style>

setelah menggabungkannya maka kita rubah saja nilai dari property width pada css itu, yang tadinya 410px menjadi ukuran yang sobat inginkan, misalnya 210px maka hasilnya menjadi seperti di bawah ini.

<style type='text/css'>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

#main-wrapper {

width: 210px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

</b:if>

</style>

nah kalau sobat sudah merubahnya maka sekarang tinggal kita taruh saja ke template sobat, tepatnya di bawah kode ]]></b:skin> atau di atas kode </head> juga bisa. setelah itu tinggal sobat simpan deh dan melihat hasilnya, oiya di atas hanya contoh kecil dari memanipulasi elemen, sobat bisa saja memanipulasi elemen yang lain. Sekian dari saya Termia kasih ^_^

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg