Pages

▼

Monday, July 16, 2012

Menampilkan Scroll Tabel Keren Di Dalam Posting



Tabel Dengan Scroll Pada Postingan dan Widget Blog



Trisatya Blog.Cara membuat tabel yang berbentuk scroll pada postingan blog. Scroll tabel itu seperti dibawah ini:

Scroll tabel ini banyak digunakan pada postingan-postingan blog untuk tutotial atau postingan lain, yang membutuhkan pemisahan antara paragraph utama dengan sebuah lampiran yang panjang. Scroll tabel ini memang terlihat indah jika dibandingkan dengan tabel biasa. Disamping itu tabel yang berbentuk scroll, bisa menghemat tempat pada halaman blog.
Langsung saja sobat blogger praktekkan:
1. Pertama sobat harus edit tulisan pada menu Edit HTML, bukan compose atau yang lainnya




2. Tentukan batas tulisan yang ingin di scroll dalam tabel. Jika sudah, tahu batas tulisan itu, maka silahkan copy paste code/script dibawah ini:
<div style="overflow:auto;width:470px;height:150px;padding:10px;border:1px solid #000000">
Letakkan tulisan atau gambar atau yang lainnya yang ingin di Scroll dalam table DISINI…!!!
</div>



Contoh kotak scroll dgn background warna dan code script nya




<div style="overflow:auto; width:300px; height:60px; padding:10px; border:3px solid #cc0000; background:#00ff00;">trisatya blog</div>




background:#00ff00 adalah kode untuk memberi Background berwana hijau pada kotak scroll. Anda bisa mengubah warna background sesuai selera anda.

3. Contoh kotak scroll dgn Bingkai dan code script nya

<table border="8" cellpadding="5"><tbody><tr><td><div style="overflow:auto; width:300px; height:60px; padding:10px; border:3px solid #cc0000; background:#00ff00;">joglio.blogspot.com</div></td></tr></tbody></table>

   


<table border="8" adalah Untuk membuat bingkainya menjadi lebih tebal ( ganti angka 8 )
<table border="3" adalah Untuk memberi jarak antara bingkai dengan kotak (ganti angka 3 )


Cara Buat kotak dalam postingan kita kita harus mengcopy code script nya terlebih dahulu di HTML
( klik tulisan HTML sebelah kiri atas ) dan utk mengisi tulisan di dalam kotak klik COMPOSE...

Cara Membuat Kotak Blogroll dengan Efek Marque :
1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).
3.    Copy script di bawah ini dan paste pada gadget.
::Info Blogging:: Link....
Link....
Dst....


4.    Hasilnya akan terlihat seperti ini :
<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="200">
::<a href="http://www.joglio.blogspot.com/">Trisatya blog</a>::<p>
::<a href="http://www.joglio.blogspot.com/"><blink>Tips Blogging</blink></a>::<p>
::<a href="http://www.joglio.blogspot.com/"><i>Info Blogging</i></a>::<p> Link....<p>
Link....<p>
Dst....<p>
</marquee>
5.    Edit linknya sesuai dengan link blogroll sobat kemudian Simpan (Save).


Cara Membuat Kotak Blogroll dengan Efek Scroll (Unorderlist) :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).
3.    Copy script di bawah ini dan paste pada gadget.


<div style=”border:1px solid #006600;overflow:auto;width:180px;height:100px;”>
<ul>
<li><a href=”http://www.joglio.blogspot.com/”>Trisatya blog</a></li>
<li><a href=”http://www.joglio.blogspot.com/”>Tips Blogging</a></li>
<li><a href=”http://www.joglio.blogspot.com/”>joglio.blogspot</a></li>
<li><a href=”http://www.joglio.blogspot.com/”><blink>Trisatya blog</blink></a></li>
<li><a href=”http://www.joglio.blogspot.com/”><i>Tips Blogging<i></a></li>
<li><a href=”http://www.joglio.blogspot.com/”><b>joglio.blogspot</a></li>
<li><a href=”http://www.joglio.blogspot.com/”>Link Sobat</a></li>
</ul>






4.    Hasilnya akan terlihat seperti ini :




5.    Edit linknya sesuai dengan link blogroll sobat kemudian Simpan (Save).



Nah dari 2 kotak blogroll diatas tinggal pilih aja sobat mau pakai blogroll dengan marque atau blogroll dengan scroll (unorderlist). Menurut saya sih dua-duanya sama bagusnya jadi pasang aja 2 macam blogroll sekaligus biar tambah rame he he. Untuk lebar dan tinggi kotak blogroll silahkan disesuaikan dengan sidebar yang ada di blog sobat.



SEO


TUTORIAL BLOG


WIDGET


 TOOL BLOG

ARTIKEL LAINNYA :


    SECURITY======================================


    TRIK WINDOWS============================




    DESIGN========================================

    INTERNET==================================

    EARN $==================================











    at

    4 comments:

    1. Dadan NaturalOctober 16, 2012 at 9:30 PM

      Thanks Bro,, Like..!!
      Ditunggu Kunjungan baliknya ke http://allcatatan.blogspot.com

      ReplyDelete
    2. Sigli CyberNovember 15, 2012 at 10:14 PM

      mkasi sobat udah berbagi

      ReplyDelete
    3. ADMINNovember 15, 2012 at 10:49 PM

      ok sip..,
      liat juga article
      Cara simple buat gambar bisa berputar
      http://joglio.blogspot.com/2012/11/cara-simple-buat-gambar-bisa-berputar.html

      ReplyDelete
    4. AnonymousAugust 3, 2013 at 1:57 AM

      Maksih gan, tutorialnya lengkap

      ReplyDelete