Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Friday, March 2, 2012

Membuat Bingkai Untuk Tulisan Di Posting Dan Sidebar

Cara membuat bingkai pada tulisan yang bisa di taruh di sidebar atau postingan. Banyak hal yang bisa dilakukan dengan bingkai ini, semisal membuat catatan, peringatan, pengumuman, dll.

1. Solid
<div style="border: 1px solid #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

2. Dashed
<div style="border: 1px dashed #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

3. Dotted
<div style="border: 1px dotted #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...</div>

4. Double
<div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...

</div>

5. Groove
<div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...

</div>

6. Outset
<div style="border: 4px outset #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

7. Ridge
<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Keterangan:
border: tebal tipisnya, jenis dan warna bingkai.
background-color: warna latar bingkai.
padding: jarak antar bingkai dengan tulisan.
width: lebar bingkai.

Cara memasang di posting :
Copy-kan kode diatas dalam area “HTML” dan tulis artikel anda hingga selesai dan kembali ke mode “Visual“.

    Wednesday, February 29, 2012

    Cara Membuat Scroll Pada Tabel Label


    Tujuannya scroll disini untuk mempersingkat halaman yang digunakan oleh label. Langkah-langkahnya sebagai berikut:
    •     Dari halaman dasbor, klik Tata Letak - Edit HTML.
    •     Beri tanda centrang pada Expand Template Widget.
    •     Kemudian cari kode dibawah ini (gunakan Control F atau F3).
    <b:widget id='Label1' locked='false' title='Label' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:300px;'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'>
    <data:label.name/>
    </span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
    <data:label.name/>
    </a>
    </b:if>
    <span dir='ltr'>(<data:label.count/>)</span>
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div> </div> </div>

    Selanjutnya tambahkan kode yang warna merah itu untuk fungsi scrollnya.
    Angka 300px adalah tinggi kotak scroll, bisa diganti sesuai selera.

    Jika tidak ada kode seperti diatas <div class="widget-content"> coba cari kode dibawah ini:

    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>


    Klau yang ada kode di atas ini maka taruh
    <div style='overflow:auto; width:ancho; height:300px;'>
    dibawah kode yang berwarna Biru

    Selamat Mencoba

    Tuesday, February 28, 2012

    Cara Membuat Menu Scroll Link list (Daftar Link) Blog


    Gadget Link list ini banyak digunakan oleh blogger yang enggan menuliskan syntax link pada setiap link yang ingin dimasukkan. Dengan gadget Link list ini, cukup memasukkan URL-URL situs maka selesai deh. Hanya saja, sebagaimana pada gadget Bloglist, pada gadget Link list inipun jika tidak dibuatkan scroll, akan memanjang ke bawah memenuhi halaman blog

    Langkah-langkah sebagai berikut:


    • Dari halaman dasbor, klik Tata Letak - Edit HTML.
    • Beri tanda centrang pada Expand Template Widget.
    • Kemudian cari kode type='LinkList' (gunakan Control F atau F3).
    • Perhatikan kode yang ada di bawahnya, seperti ini:

    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>

    • Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna kuning, sehingga menjadi seperti ini:

    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content' style='overflow:auto; height:200px'>

    • Atur ukuran tinggi (height)-nya sesuai kebutuhan. 
    • Kemudian simpan hasil editing ini.

    Selamat mencoba.