Cara Membuat Template Blogger Sendiri Part 2

Tutorial Cara Membuat Template Blogger Sendiri Part 1, Memasang Main Wrapper dan juga Sidebar.
Kali ini saya akan melanjutkan Tutorial Cara Membuat Template Blogger Sendiri Part 1 yang sebelumnya sudah saya pulikasikan sekarang kita lanjutkan dengan Tutorial Memasang Main Wrapper dan juga Sidebar.

Cara Membuat Template Blogger Sendiri Part 2

Ok, langsung saja praktekan tutorial dibawah ini.

Cara Membuat Template Blogger Sendiri Part 2


Pertama, kita buat terlebih dahulu kode CSSnya agar terlihat tamvan nantinya, Gunakan kode berikut jika ingin lebih Praktis dan letakan sebelum kode ]]></b:skin> atau </style>.

CSS untuk Main Wrapper
/* Main Wrapper */
#main-wrapper{float:left;width:65.5%;overflow:hidden}

CSS untuk Siebar Wrapper
/* Sidebar Wrapper */
#sidebar-wrapper{float:right;width:34.5%;overflow:hidden}
#sidebar{padding:0 0 0 12px}
.sidebar h2,.sidebar h3{font-weight:700;overflow:hidden;position:relative;color:#222;padding:10px 0;margin:0 0 10px 0;text-transform:uppercase;display:block;border-bottom:1px solid rgba(0,0,0,0.05);letter-spacing:.5px;font-size:17px}

Kedua, pasang kode HTML Main Wrapper untuk memanggi kode CSS Main Wrapper yang telah kita buat.

1. Pasang Kode dibawah ini diatas<b:section class='main' id='main'> atau dibawah <div id='wrapper'>.

<aside id='main-wrapper'>

2. Pasang Kode dibawah ini diatas</div> penutup dari kode <div id='wrapper'> atau dibawah </b:section> penutup dari kode <b:section class='main' id='main'>.

</aside>

Ketiga, pasang kode HTML Sidebar Wrapper untuk memanggil kode CSS Sidebar Wrapper yang telah kita buat.

Pasang Kode dibawah ini di atas</div> penutup dari kode <div id='wrapper'> atau dibawah </aside> penutup dari kode <aside id='main-wrapper'>.

<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</aside>

Nah, Kalau sudah simpan template dan coba buat satu widget, caranya : buka menu Tata letak lalu buat widget di gadget sidebar setelah itu save dan lihat hasilnya.


Sampai disini dulu ya kita lanjutkan di Part berikutnya, sekian semoga bermanfaat.Deny Listianto
Haloo, Selamat datang Sobat Coder, Selamat Belajar.

Posting Komentar