Kembali lagi di pelajaran tutorial blogspot..pada kesempatan kali ini saya akan membagi informasi tentang bagaimana caranya membagi slide menjadi dua..postingan ini saya share dari http://saungweb.blogspot.com/search/label/Tutorial
Utak-atik yang saya lakukan itu, tentu setelah tanya sama oom google n mampir ke sobat2, saya implementasikan dengan langkah2 sbb. :
- Masuk / login ke Dashboard , pilih Layout --> Edit HTML
- Klik Download Full Template, ini penting sebagai backup, kalau2 nanti malah jadi gak karuan
- Kemudian cari kode ini ]]>
- Copy kode dibawah ini kemudian simpan diatas kode ]]> tadi.#lsidebar-wrapper {
float: left;
margin:0 10px 0 5px;
padding:0;
width:150px;
display:inline;
}.lsidebar {
line-height: 1.5em;
}.lsidebar .widget {
background: #FFFFFF;
float:left;
width: 140px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}#rsidebar-wrapper {
float: right;
margin-right:10px;
padding:0;
width:140px;
}.rsidebar {
line-height: 1.5em;
}.rsidebar .widget {
background: #FFFFFF;
float:right;
width: 130px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}(Kode warna merah bisa diatur sesuai dengan selera kita)
Atau bisa juga disimpan setelah kode dibawah ini, silahkan aja pilih yg mana suka/*- Sidebar -*/#sidebar {
float: left;
width: 320px;
margin: 6px 0px 5px 0px;
padding:0px;
line-height: 18px;
display: inline;
}
- Setelah langkah- diatas, dilanjut dengan mencari kode seperti di bawah ini atau yang mirip2 gitu :
<blockquote>
<div align="justify">
<span style="color: magenta;"><span style="font-size: small;"><code></code></span></span>
<div id="sidebar-wrapper">
<span style="color: magenta;"><span style="font-size: small;">
</span></span>
<code><b:section class="sidebar" id="sidebar" preferred="yes"></b:section></code><span style="color: magenta;"><span style="font-size: small;"> </span></span>
<code><b:widget id="HTML6" locked="false" title="" type="HTML"></b:widget></code><span style="color: magenta;"><span style="font-size: small;"> </span></span>
<code></code><span style="color: magenta;"><span style="font-size: small;"> </span></span>
<code><span style="color: magenta;"><span style="font-size: small;"><span style="color: red;"></span></span></span></code></div>
<span style="color: magenta;"><span style="font-size: small;"></span></span></div>
</blockquote>
- Setelah ketemu hapus dulu kode <b><span style="color: red;"></span></b></span> nya, lalu copy kode berikut dan letakkan di bawahnya.
<blockquote>
<div align="justify">
<span style="font-size: small;"><code></code></span>
<div id="lsidebar-wrapper">
<span style="font-size: small;">
</span>
<code><b:section class="lsidebar" id="lsidebar" preferred="yes"></b:section></code><span style="font-size: small;"> </span>
<code></code><span style="font-size: small;"> </span>
<code></code></div>
<span style="font-size: small;">
<code></code></span>
<div id="rsidebar-wrapper">
<span style="font-size: small;">
</span>
<code><b:section class="rsidebar" id="rsidebar" preferred="yes"></b:section></code><span style="font-size: small;"> </span>
<code></code><span style="font-size: small;"> </span></div>
<span style="font-size: small;">
</span></div>
</blockquote>
<div align="justify">
<span style="font-size: small;">Jadi kode tersebut akan tampak seperti ini</span></div>
<blockquote>
<div align="justify">
<span style="font-size: small;"><code></code></span>
<div id="sidebar-wrapper">
<span style="font-size: small;">
</span>
<code><b:section class="sidebar" id="sidebar" preferred="yes"></b:section></code><span style="font-size: small;"> </span>
<code><b:widget id="HTML6" locked="false" title="" type="HTML"></b:widget></code><span style="font-size: small;"> </span>
<code></code></div>
<div align="justify">
<span style="font-size: small;"><span style="font-size: small;"><code></code></span></span>
<div id="lsidebar-wrapper">
<span style="font-size: small;"><span style="font-size: small;">
</span></span>
<code><b:section class="lsidebar" id="lsidebar" preferred="yes"></b:section></code><span style="font-size: small;"><span style="font-size: small;"> </span></span>
<code></code><span style="font-size: small;"><span style="font-size: small;"> </span></span>
<code></code></div>
<span style="font-size: small;"><span style="font-size: small;">
<code></code></span></span>
<div id="rsidebar-wrapper">
<span style="font-size: small;"><span style="font-size: small;">
</span></span>
<code><b:section class="rsidebar" id="rsidebar" preferred="yes"></b:section></code><span style="font-size: small;"><span style="font-size: small;"> </span></span>
<code></code><span style="font-size: small;"><span style="font-size: small;"> </span></span></div>
<span style="font-size: small;"><span style="font-size: small;">
<span style="color: red;"></span></span></span></div>
<span style="font-size: small;"></span></div>
</blockquote>
Beberapa catatan :
- Jika ingin meletakkan kedua bagian sidebar ini di atas sidebar yang utama, sobat tinggal memasang kode no. 6 di atas kode No. 5 .
- Pada point 6, harus menghapus kode ( sebetulnya kode ini dipindahkan ke paling bawah di point 6, lihat aja kodenya ada 2), ini dimaksudkan agar sidebar yang ditambahkan akan tetap berada ditempatnya, soalnya kalau gak gini, jika postingan kita lebih pendek dari sidebar, kadang2 sidebar baru itu suka berada di bawah posting, kan gak lucu ya.
- Untuk menyesuaikan lebar sidebar baru, lihat sidebar utamanya. Misalnya sidebar utama lebarnya 300 px, maka lebar sidebar 1 dan 2 bisa sekitar 145, sehingga masih ada sisa 10 px untuk batas atau margin.
- Terakhir saya mau bagi2 kapusing juga, soalnya judul sidebar yg baru dibuat itu fontnya masih belum sama dengan sidebar utamanya.. masih diutak-atik tapi belum ketemu tuh triknya.. lantas karena waktu dah menunjukan pukul 00.30.., mata juga dah ngantuk.. jadi di PR kan aja dulu, siapa tahu ada sobat yg mau ngasih tipsnya..
- Sekedar bewara : Disini sobat juga bisa utak-atik template tentang Cara Membuat Kolom Tambah Gadget di Bawah Header dan cara Buat Footer Multi Kolom yang pernah diposting lebih dulu.
ga lengkap nih mas!!!padahal perlu bgt saya!!
ada yg ilank...