Cara Membuat Template Blogger Sendiri Part 2 - Deny Listianto

March 25, 2018

Cara Membuat Template Blogger Sendiri Part 2

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
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo