Cara Simple Membuat Template Blog 2

Cara Membuat Template Blog Offline

Jika Anda lebih suka membuat template secara offline, maka tutorial di bawah ini saya harap bisa menambah pengetahuan dan memudahkan Anda dalam mengedit template. Ingat ini hanya untuk template Blogger, karena CSS didasarkan dari XML Default dari Blogger.

CSS Outer Wrapper

#outer-wrapper {background:#fff;max-width:1000px;margin:20px auto;padding:20px;overflow:hidden;margin-top:75px;border:1px solid #e0e0e0}

Fungsi dari CSS ini adalah untuk mengatur lebar dari blog yang akan kita buat, bisa dibilang Outer Wrapper adalah CSS Terluar dari sebuah blog.

CSS Content Wrapper

#content-wrapper {background-color:#fff;margin:0 auto;padding:5px 0 0; word-wrap:break-word;}

Jika Outer Wrapper adalah css untuk mengatur 'kulit' terluar blog, maka CSS Content Wrapper ini berada di atasnya, atau bagian untuk mengatur bagian isi blog (header, sidebar, footer).

CSS Header Wrapper

#header-wrapper {width:100%;margin:0 auto;margin-bottom:15px;overflow:hidden;padding:0;}

Untuk mengatur lebar dari header (tempat menaruh judul blog), selain itu juga bisa kita sisipkan CSS untuk mengubah ukuran / font dari H1.

CSS Main Menu Wrapper

#menu-wrapper{background:#363636;height:50px;width:100%;position:relative;padding-left:-20px;padding-right:-20px;}

CSS Menu digunakan untuk mengubah menu navigasi pada blog, di dalam css Main Menu, juga diselipkan CSS untuk mengubah Ol, UL dan Li, karena ktiga elemen tersebut juga bagian dari Navigasi.

CSS Post Wrapper

#post-wrapper {background:transparent;color:#666;float:left;width:70%;max-width:700px;margin:0 0 10px;}

Jika Anda ingin mengubah warna background artikel Blog, maka kita perlu mengedit value dari selector background. Misal jika ingin ganti background warna hitam, maka isi background dengan value #000000.

CSS Comments

#comments {background:#fff;clear:both;margin:10px auto 0;line-height:1em;padding:20px;border:1px solid #e0e0e0;}

CSS Comments berfungsi untuk mengubah tampilan dari Comment Box yang dianggap terlalu sederhana bagi sebagian blogger, solusinya kita bisa mengganti warna, ukuran dengan menambahkan CSS comments.

CSS Search

#search {position:relative;font-size:13px;font-family:'Open Sans',sans-serif;width:auto;height:100%;margin:0 auto;text-align:center;}

CSS Search digunakan untuk mengedit Search Box, jika warna default dari search box adalah putih dengan border hitam, maka kita bisa dengan mudah mengubahnya dengan CSS Search.

CSS Widget

.widget {line-height:1.4em;}

Jika Anda memasang widget di sidebar blog, dan ingin mengubah warna / ukuran dari widget tersebut, maka Anda bisa menggunakan CSS Widget.

CSS Sidebar Wrapper

#sidebar-wrapper {background:transparent;float:right;width:30%;max-width:300px; margin:0 auto;}

Untuk mengatur lebar dari sidebar, kita bisa memanfaatkan CSS Sidebar Wrapper.

CSS Popular Post

.PopularPosts ul li {padding: 10px;border-bottom:1px solid #ddd;position:relative;transition:all 1s ease-out;animation:BounceRate 3s;}

Masih di bagian sidebar, kode CSS diatas untuk mengatur padding, border dan background artikel populer.

CSS Footer

#footer-wrapper {color:#ddd;width:98%;font-size:12px;margin:0 auto;font-weight:400;max-width:1000px;}

Sesuai namanya CSS Footer berfungsi untuk mengedit bagian footer blog, dari mulai font, background, sampai ukuran dari footer tersebut.

Sementara itu saja yang bisa saya jelaskan, semoga penjelasan singkat tentang Cara Membuat Template Blog ini bisa membantu atau mempermudah Anda dalam membuat template blog baru, baik di Wordpressmaupun Blogger.