English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Pages

let us build peace and friendship with insight

ASSALAMU"ALAIKUM WR.WB
SALAM SEJAHTERA
NEWBIE BLOGGER
Sebelum dan sesudah kunjumgan anda diblog ini,saya sebagai author mengucapkan banyak terima kasih.
Saya bangun free blog ini adalah sebagai catatan ,menambah wawasan dan belajar untuk diri saya.Dan semoga juga bermanfaat buat pengunjung dan pembaca semua.
Blog ini jauh dari sempurna.
Sungguh suatu kehormatan buat saya,bilamana pengunjung bersedia membagikan ilmu dan wawasan demi proses pembelajaran diri saya.
Sedikit banyak posting dan article saya ambil dari Simbah google,dan apabila membuat ketidaknyamanan pengunjung,blogger,dll atas copy paste yang terdapat di blog saya ini,mohon kesediaan memakluminya.

@ 2012 Dhanalova Corporation

" Sabar memiliki dua sisi, sisi yang satu adalah sabar, sisi yang lain adalah bersyukur kepada Allah "

@ 2012 Dhanalova Corporation

" Ketahuilah bahwa sabar, jika dipandang dalam permasalahan seseorang adalah ibarat kepala dari suatu tubuh. Jika kepalanya hilang maka keseluruhan tubuh itu akan membusuk. Sama halnya, jika kesabaran hilang, maka seluruh permasalahan akan rusak "

@ 2012 Dhanalova Corporation

" Pahlawan bukanlah orang yang berani menetakkan pedangnya ke pundak lawan, tetapi pahlawan sebenarnya ialah orang yang sanggup menguasai dirinya dikala ia marah "

@ 2012 Dhanalova Corporation

" Jika orang berpegang pada keyakinan, maka hilanglah kesangsian. Tetapi, jika orang sudah mulai berpegang pada kesangsian, maka hilanglah keyakinan "

Minggu, 25 September 2011

MENAMBAH GADGET DIATAS HEADER

epg-studio.blogspot.com

Gadget diatas header.
Gadget diatas header bisa difungsikan untuk pemasangan koleksi image atau apa saja yang anda suka, bahkan dapat juga untuk pemasangan iklan, karena tempatnya startegis, terdapat dibagian paling atas yang secara langsung loadingnya paling duluan dan yang pertama dilihat oleh pengunjung blog anda.
Hanya dengan sedikit penambahan kode, blog anda memiliki tempat widget diatas header. Simak cara-caranya :
  • Masuk ke Blogger dengan ID anda
  • Pilih Rancangan
  • Pilih Edit HTML
  • Backup dulu templatenya kalau anda takut gagal
  • Beri tanda contreng pada kotak disamping Expland Widget Template
  • Cari kode yang mirip dengan kode dibawah ini pada template anda

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
    </b:section>
  • Perhatikan yang berwarna putih tebal. Angka 1 ganti dengan jumlah gadget yang ingin anda tampilkan (disarankan angka 1 jangan diubah) dan kata no anda ganti dengan kata yes Setelah anda ubah kata yang berwarna putih tebal, copy kode dibawah ini dan letakan tepat dibawah kode <div id='header-wrapper'>

    <b:section class='header' id='topheader' preferred='yes'/>
  • Setelah digabungkan kodenya menjadi seperti ini :


    <div id='header-wrapper'>
    <b:section class='header' id='topheader' preferred='yes'/>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
    </b:section>
  • Klik tombol Simpan Template
  • Lihat pada Elemen Halaman
  • Setelah muncul Tambah Gadget diatas header, sekarang cobalah anda tambah widget atau apa saja yang ingin anda tampilkan diatas header
  • Selesai
  • Selamat mencoba .....semoga bermanfaat.

BACKGROUND JUDUL POST BERUBAH WARNA KETIKA MOUSE BERADA DIATASNYA

epg-studio.blogspot.com

  Untuk memahami judul post ini, coba anda arahkan mouse ke atas judul post. Anda akan melihat perubahan warna latar belakang (background) judul post yang semula biru tua berubah menjadi biru agak kehitaman. Perubahan itu dikarenakan penambahan kode a hover pada bagian judul post (h3).
Blog anda juga bisa dibuat seperti penampilan EPG Studio, tentunya dengan warna lain yang anda sukai
Anda langsung saja ke langkah-langkahnya :
  • Masuk ke Blogger dengan ID anda.
  • Pilih Rancangan, kemudian kilk Edit HTML.
  • Back up dulu template anda kalau takut gagal.
  • Cari kode dibawah ini :

    .post h3 {
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    background:#0066CC;
    border:0px solid #C3D9FF;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:$titlecolor;
    font-weight:bold;
    }
  • Copy kode dibawah ini kemudian paste tepat dibawah kode yang berwarna merah

    .post h3 strong, .post h3 a:hover {
    color:$textcolor;
    background:#003366;
  • Ganti kode warna yang berwarna merah dengan kode warna yang anda sukai
  • Klik tombol Simpan Template.
  • Lihat blog anda sekarang.

MEMBUAT TEKS BERJALAN PADA NAVBAR ATAS

epg-studio.blogspot.com

Variasi yang dapat anda pasang pada blog yang anda sayangi berbagai ragam bentuknya. Salah satunya adalah teks berjalan pada navbar bagian atas.
Tidak sulit dalam membuatnya, anda hanya memerlukan penambahan beberapa kode kedalam Template.
Ikuti langkah-lanhkahnya :
  • Sign ke Blogger dengan ID anda.
  • Pilih Rancangan.
  • Pilih Edit HTML.
  • Cari kode ini : <b:skin><![CDATA[/*
  • Copy seluruh kode dibawah ini dan pate tepat diatas kode tadi.


    <script language='JavaScript'>
    var txt=&quot;. . : : Selamat Datang di EPG Studio...Tempatnya Berbagi Ilmu dan Pengalaman.... : : . .&quot;;
    var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
    </script>
  • Ganti teks yang berwarna merah dengan teks yang anda inginkan
  • Ganti angka pada var kecepatan=100 dengan angka yang anda inginkan. Makin besar angka yang dipasang makin lambat gerakannya.
  • Selesai...Selamat mencoba.

MENAMPILKAN DAFTAR ISI LENGKAP DENGAN TABEL

epg-studio.blogspot.com

Membuat daftar isi dari sebuah blog sudah banyak ditulis di berbagai blog tutorial. Hanya saja, sebagian dari cara yang dikemukakan tidak menampilkan seluruh daftar isi yang ada pada blog.
Tips kali ini juga merupakan cara membuat daftar isi blog secara lengkap yang ditampilkan dalam bentuk tabel.
Post ini diperoleh dari sumbernya aslinya yaitu : BEAUTIFUL BETA
Ikuti langkah-langkah dibawah ini bagi anda yang ingin mencoba.
  • Langkah Pertama
    1. Masuk ke Blogger dengan ID anda.
    2. Pilih Rancangan.
    3. pilih Edit HTML.
    4. Back up dulu templatnya jika takut gagal.
    5. Cari kode ini : ]]></b:skin>
    6. Copy kode dibawah ini, kemudian paste tepat diatas kode tadi.


      #toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

      .toc-header-col1, .toc-header-col2,

      .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

      .toc-header-col2 { width:75px;}

      .toc-header-col3 { width:125px;}

      .toc-header-col1 a:link, .toc-header-col1 a:visited,

      .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

      .toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

      .toc-header-col1 a:hover,

      .toc-header-col2 a:hover,

      .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

      .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
    7. Klik Tombol Simpan Template
  • Langkah Kedua
    1. Masuk ke Elemen Halaman.
    2. Pilih Tambah Gadget.
    3. Pilih HTML/JavaScript.
    4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia


      <div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZ0qsIrPdQI/AAAAAAAACVI/m_NGy4DuSvc/add2.png"/><font color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>
      </div>
      <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/blogtoc.js"></script>
      <script src="http://namablog anda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

      <div id="toc"></div>
    5. KLik tombol Simpan
  • Selesai.
  • Selamat mencoba, semoga bermanfaat.

MEMBUAT DAFTAR ISI LENGKAP DENGAN FILE JS


epg-studio.blogspot.com
Membuat daftar isi blog secara manual pada bagian sidebar blog sangat melelahkan, apalagi jika postingan artikel jumlahnya sudah ratusan. Untuk mengatasi masalah tersebut, anda dapat membuatnya dengan sangat mudah yaitu dengan menggunakan file Java Script ( js ). Trik membuat daftar isi kali ini selain menampilkan judul seluruh postingan artikel juga judul postingan tersebut terpisah berdasarkan label dari postingan tersebut.
Satu lagi...postingan yang baru dipublikasikan, secara otomatis ditambah kata New!! berwarna merah yang letaknya disebelah kanan judul postingan.
Pokoknya trik yang satu ini akan memuaskan anda jika ditampilkan pada blog anda dan tentunya akan lebih memudahkan pengunjung mendapatkan artikel yang dicarinya tanpa harus bersusah payah.
Langkah-langkahnya :
  1. Masuk ke Blogger.
  2. Pilih Rancangan bagian Elemen Halaman.
  3. Klik tambah gadget.
  4. Pilih HTML/JavaScript.
  5. Copy script dibawah ini dan paste pada kolom yang tersedia.

    <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
    <script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


    Ganti http://epg-studio.blogspot.com dengan URL blog anda
  6. Klik tombol Simpan.
  7. jika daftar isi terlalu panjang, tambahkan fungsi scroll, sehingga kodenya seperti ini :


    <div style="overflow:auto;width:300px;
    height:200px;padding:10px;
    border:1px solid #eee">
    <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
    <script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

    </div>
  8. Anda atur ukuran width dan height sesuai keperluan.


Sumber : abu-farhan.com

MEMBUAT SIDEBAR JADI 2

epg-studio.blogspot.com
Penampilan sebuah blog akan semakin cantik jika memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan elemen halaman baik berupa tulisan ataupun widget
Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan.
Perlu diingat kode yang ditampilkan pada tips ini merupakan kode yang berasal dari template Tata Letak. Jadi jika anda kesesulitan menemukan kodenya berarti templatenya berbeda.

Langkah pertama

  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Edit HTML
  3. Cari Kode dibawah ini (biasanya berada dibagian atas)


    * Outer-Wrapper
    ------------------------------------------ */
    #outer-wrapper {
    width: 840px
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }
    #main-wrapper {
    width: 410px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebar-wrapper {
    width: 200px;
    float: right;
    padding-left:10px;
    (tambahkan kode ini biar tampak ada jarak sela)
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  4. Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.
  5. Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi

    #sidebarbaru-wrapper {
    width: 200px;
    float: right;
    padding-left:10px;
    word-wrap: break-word;
    overflow: hidden;
    }
  6. Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.


    #sidebarbaru-wrapper {
    width: 200px;
    float: left;
    padding-right:10px;
    word-wrap: break-word;
    overflow: hidden;
    }

Langkah Kedua

  1. Masih pada bagian Edit HTML
  2. Cari kode HTML dibawah ini pada bagian body

    <div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>
  3. Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?

    <div id='sidebarbaru-wrapper'>
    <b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
    </div>
  4. Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai.
  5. Silahkan lihat hasilnya !
  6. Jika hasilnya tidak seperti harapan anda, kemungkinan lebar dari main wrapper, sidebar wrapper dan sidebar baru wrapper jumlahnya tidak sama dengan lebar outer wrapper, sehingga salah satu sidebar akan kebawah. Solusinya.....cobalah ubah lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan kita. Lihat Klik disini untuk mengubah lebar sidebar.
  7. Selamat mencoba, semoga bermanfaat...


MENYISIPKAN IMAGE PADA JUDUL SIDEBAR

epg-studio.blogspot.com

Judul sidebar dapat kita atur penampilannya sesuai dengan keinginan pengelola sebuah blog, baik dalam penampilan huruf maupun penambahan lainnya semisal penyisipan gambar.
DEMO ; Lihat judul Sidebar pada EPG Studio.
Sebenarnya trik semacam ini telah dibahas pada beberapa Tutorial EPG Studio sebelumnya, namun tidak ada salahnya dibuat lagi secara khusus, karena mungkin sebagian dari peblogger malas mencari tutorial berkenaan.
Caranya sangat mudah, silahkan anda ikuti langkah-langkah dibawah ini.
  • Login ke Blogger dengan ID anda.
  • Masuk ke bagian Rancangan kemudian pilih tab Edit HTML.
  • Cari kode untuk judul sidebar (h2) seperti dibawah ini :
    .sidebar h2 {

    font-size:100%;

    color:#ffffff;

    font-weight:bold;

    text-transform:uppercase;

    text-align:center;

    border: 3px solid #000033;

    background:#000033
  • Perhatikan yang berwarna merah yang merupakan kode warna latar dari judul siebar.
  • Siapkan sebuah gambar kecil kemudian upload pada host penyimpan gambar seperti : photobucket atau lainnya.
  • Copy link dari gambar tersebut :
  • Contoh gambar kecil yang dimaksud
  • Tambahkan kode ini setelah kode background:#000033 :
    url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;

    kode yang berwarna merah merupakan link dari gambar kecil tadi.
  • Secara lengkap background tersebut menjadi :
    background:#000033 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
  • Klik tombol Simpan Template.
  • Lihat Judul Sidebar blog anda sekarang.


TAB MENU HORIZONTAL DENGAN CSS VERSI 4

 epg-studio.blogspot.com


Bagi anda yang memiliki blog dengan latar belakang gelap seperti EPG Studio, agar tampilannya tambah gelap sangat cocok menggunakan tab meu horizontal versi 4 ini.
Dengan latar belakang berwarna hitam ditambah dengan dua gambar yang juga warna gelap yaitu merah tua dengan hover merah kehitaman akan mejadikan tampilan blog anda semakin gelap.

Demo : perhatikan contoh dibawah ini :




CARA MEMBUATNYA
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Elemen Halaman
  3. Klik Tambah Gadget
  4. Pilih TML/Javascript
  5. Copy kode dibawah ini kemudian paste pada kolom yang tersedia

    <style type="text/css">

    body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
    }

    #tabs {
    float:left;
    width:100%;
    background:#000;
    font-size:93%;
    line-height:normal;
    }
    #tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    #tabs li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabs a {
    float:left;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqx1d0_N2s2pewQQAp-x_gY8Xh26yqG_uCRkAcZ0KZqjnZhsqRjn8broFk_-BWQSG_TKQ7ZYvXT0bFjE9heLlr8enzaO-Z8Iv2yOPlDqV_MRz7L1ztESZv_0l9GWofb0KDwgI-zohJHQ/") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
    #tabs a span {
    float:left;
    display:block;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwigm5xMCLHKwdjCDUDWysl1AKFBRzgS5pceKsvEhdjB7CWQRXZ9od38k4c-KuP_GyReMNq1n-3_J_PyZx0Y6x4NjVF5AjJuNy-VMdJx4MM-kr2VBQ3DAH19mriUnLHlyPCU6KFjzTsk/") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }
    #tabs a span {float:none;}

    #tabs a:hover span {
    color:#FFF;
    }
    #tabs a:hover {
    background-position:0% -42px;
    }
    #tabs a:hover span {
    background-position:100% -42px;
    }

    #tabs #current a {
    background-position:0% -42px;
    }
    #tabs #current a span {
    background-position:100% -42px;
    }

    </style>
    <div id="tabs">
    <ul>
    <li><a href="Url/alamat link target 1"><span>MENU 1</span></a></li>
    <li><a href="Url/alamat link target 2"><span>MENU 2</span></a></li>
    <li><a href="Url/alamat link target 3"><span>MENU 3</span></a></li>
    <li><a href="Url/alamat link target 4"><span>MENU 4</span></a></li>

    <li><a href="Url/alamat link target 5"><span>MENU 5</span></a></li>
    <li><a href="Url/alamat link target 6"><span>MENU 6</span></a></li>
    <li ><a href="Url/alamat link target 7"><span>MENU 7</span></a></li>
    <li><a href="Url/alamat link target 8"><span>MENU 8</span></a></li></ul>
    </div>


    1. Pengeditan kode dapat anda lakukan dengan memperhatikan kode yang berwarna ungu muda, ungu tua, merah dan kuning
    2. Kode berwarna ungu muda : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqx1d0_N2s2pewQQAp-x_gY8Xh26yqG_uCRkAcZ0KZqjnZhsqRjn8broFk_-BWQSG_TKQ7ZYvXT0bFjE9heLlr8enzaO-Z8Iv2yOPlDqV_MRz7L1ztESZv_0l9GWofb0KDwgI-zohJHQ/ merupakan alamat gambar untuk latar 1. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :

    3. Kode yang berwarna ungu tua : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwigm5xMCLHKwdjCDUDWysl1AKFBRzgS5pceKsvEhdjB7CWQRXZ9od38k4c-KuP_GyReMNq1n-3_J_PyZx0Y6x4NjVF5AjJuNy-VMdJx4MM-kr2VBQ3DAH19mriUnLHlyPCU6KFjzTsk/ merupakan alamat gambar untuk latar 2. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :

    4. Kode bermarna merah : Url/alamat link target 1, 2, 3, 4, 5, 6, 7 dan 8 merupakan URL/alamat link target (jika menu diklik akan terbuka halaman lain sesuai URL/alamat link target yang anda pasang). Ganti kode tersebut dengan URL/alamat link target yang ingin anda tampilkan.
    5. Kode berwarna kuning : MENU 1,2 , 3, 4, 5, 6, 7dan 8 merupakan menu yang akan tampil pada tab menu. Ganti kode tesebut dengan menu yang ingin anda tampilkan.
    6. Jumlah menu yang ditampilkan pada tab menu horizontal versi 4 ini sebanyak 8 menu. Anda dapat menambah jumlah menu tersebut sesuai dengan keinginan.
  6. Setelah selesai pengeditan kode diatas, klik tombol Simpan
  7. Lihat tab menu horizontal pada blog anda.


TAB MENU HORIZONTAL DENGAN CSS VERSI 3



epg-studio.blogspot.com


Tampil cantik dengan perpaduan warna merah muda, tab menu horizontal dengan css versi 3 ini sangat cocok untuk blog yang dikelola oleh wanita karena secara umum, wanita menyukai warna lembut terutama warna pink.
Tab menu horizontal versi 3 pada dasarnya sama dengan tab menu horizontal versi sebelumnya, yaitu menggunakan latar berupa gambar sebanyak dua buah dan hover (warna yang tampil waktu disorot mouse) adalah warna putih.

Demo : perhatikan gambar di bawah ini




LANGKAH-LANGKAHNYA

  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Elemen Halaman
  3. Klik Tambah Gadget
  4. Pilih HTML/Javascript
  5. Copy kode dibawah in kemudian paste pada kolom yang tersedia

    <style type="text/css">

    body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
    }

    img {
    border: none;
    }

    #tabs {
    float:left;
    width:100%;
    background:#FCF1F6;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #E276A7;
    }
    #tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    #tabs li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabs a {
    float:left;
    background:url("https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
    #tabs a span {
    float:left;
    display:block;
    background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#333;
    }
    #tabs a span {float:none;}

    #tabs a:hover span {
    color:#591333;
    }
    #tabs a:hover {
    background-position:0% -42px;
    }
    #tabs a:hover span {
    background-position:100% -42px;
    }

    #tabs #current a {
    background-position:0% -42px;
    }
    #tabs #current a span {
    background-position:100% -42px;
    }

    </style>
    <div id="tabs">
    <ul>

    <li><a href="URL/link target menu 1"><span>Menu 1</span></a></li>
    <li><a href="URL/link target menu 2"><span>Menu 2</span></a></li>
    <li><a href="URL/link target menu 3"><span>Menu 3</span></a></li>
    <li><a href="URL/link target menu 4"><span>Menu 4</span></a></li>
    <li><a href="URL/link target menu 5"><span>Menu 5</span></a></li>
    <li><a href="URL/link target menu 6"><span>Menu 6</span></a></li>
    <li><a href="URL/link target menu 7"><span>Menu 7</span></a></li></ul>
    </div>


    1. Kode yang berwarna pink muda, pink tua, merah dan kuning merupakan kode yang harus anda ganti.
    2. Kode dengan warna pink muda : https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif merupakan kode dari gambar latar 1. Ganti kode tersebut dengan gambar milik anda sendiri. Ini tampilan gambarnya :

    3. Kode dengan warna pink tua : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif merupakan kode gambar latar 2. Ganti kode tersebut dengan gambar simpanan anda sediri. Ini tamplannya :

    4. Kode dengan warna merah : URL/link target menu 1, 2, 3, 4, 5, 6 dan 7 merupakan kode untuk URL/alamat link target dari setiap menu. Ganti dengan URL yang ingin anda jadikan link target.
    5. Kode dengan warna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan kode untuk menu yang ingin anda tampilkan '
    6. Jika jumlah menu dari kode diatas masih dianggap kurang, silakan anda tambah secukupnya setelah anda memahami kode yang harus ditambahkan.
  6. Klik tombol Simpan setelah selesai pengeditan kode.
  7. Lihat tab menu horizontal pada blog anda.


TAB MENU HORIZONTAL DENGAN CSS VERSI 2


epg-studio.blogspot.com

Tab menu dengan CSS versi 2 memiliki sedikit perbedaan dari versi 1. yaitu terletak pada penambahan dua gambar sebagai latar belakang.
Tampilan secara umum berwarna abu-abu muda, kecuali menu pertama berwarna biru. Agar tampilannya lebih menarik setiap menu akan berubah warna jika disorot mouse yaitu tampil dengan warna yang sama seperti menu menu pertama.

Demo : Perhatikan gambar dibawah ini :




Jika berminat dengan Tab Menu dengan CSS versi 2, ikutilangkah-langkahnya :
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Elemen Halaman
  3. Klik Tambah Gadget
  4. Pilih HTML/Javascript
  5. Copy code dibawah ini kemudian paste pada kolom yang tersedia

    <style type="text/css">
    body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
    }

    #tabsJ {
    float:left;
    width:100%;
    background:#F4F4F4;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #24618E;
    }
    #tabsJ ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    #tabsJ li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabsJ a {
    float:left;
    background:url("https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 5px;
    text-decoration:none;
    }
    #tabsJ a span {
    float:left;
    display:block;
    background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#24618E;
    }
    #tabsJ a span {float:none;}
    #tabsJ a:hover span {
    color:#FFF;
    }
    #tabsJ a:hover {
    background-position:0% -42px;
    }
    #tabsJ a:hover span {
    background-position:100% -42px;
    }

    #tabsJ #current a {
    background-position:0% -42px;
    }
    #tabsJ #current a span {
    background-position:100% -42px;
    color:#FFF;
    }

    </style>
    <div id="tabsJ">
    <ul>
    <li id="current"><a href="URL/alamat menu 1"><span>Menu 1</span></a></li>
    <li><a href="URL/alamat menu 2"><span>Menu 2</span></a></li>
    <li><a href="URL/alamat menu 3"><span>Menu 3</span></a></li>
    <li><a href="URL/alamat menu 4"><span>Menu 4</span></a></li>

    <li><a href="URL/alamat menu 5"><span>Menu 5</span></a></li>
    <li><a href="URL/alamat menu 6"><span>Menu 6</span></a></li>
    <li><a href="URL/alamat menu 7"><span>Menu 7</span></a></li></ul>
    </div>

    1. Kode yang berwarna ungu, pink, merah dan kuning adalah kode yang harus anda ganti
    2. Kode berwarna ungu : https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gif merupakan alamat gambar latar 1, ganti alamat gambar tesebut dengan gambar milik anda. Ini tampilannya :

    3. Kode berwarna pink : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gif merupakan alamat gambar latar 2, ganti dengan gambar milik anda. Ini tampilannya :

    4. Kode berwarna merah : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan menu/label dari blog anda. Ganti dengan menu yang ingin ditampilkan,
    5. Kode berwarna kuning : URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link target dari menu. Ganti dengan URL dari menu yang ingin anda tampilkan.
    6. Jika anda ingin menambah dengan beberapa menu lainnya, terlebih dulu harus memahami kode yang harus ditambahkan
  6. Setelah selesai pengeditan kode, klik tombol Simpan
  7. Lihat blog anda


TAB MENU HORIZONTAL DENGAN CSS VERSI 1


epg-studio.blogspot.com


Membuat tab menu dengan menggunakan CSS (Cascading Style Sheet) atau kode sebagai pelengkap dari HTML yang berfungsi untuk menambah keindahan tampilan blog/situs.
CSS memiliki kelebihan dibanding java script yaitu tidak mengakibatkan blog menjadi berat waktu loading.
Tab menu dengan CSS ini jika waktu memungkinkan akan dibuat beberapa versi dengan tampilan yang berbeda satu sama lainnya.
Sebagai permulaan, dibawah ini merupakan cara menampilkan tab menu dengan CSS bagian 1.

Demo : Perhatikan gambar dibawah ini :




Jika anda tertarik dengan tampilan tab menu versi 1 ini, ikuti langkah-langkahnya :
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Elemen Halaman.
  3. Klik Tambah gadget
  4. Pilih HTML/Javascript
  5. Copy kode dibawah ini kemudian paste pada kolom yang tersedia

    <style type="text/css">
    #navcontainer {
    background: #369;
    border-top: 1px solid #9CC;
    font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    #navlist {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }

    @media all {
    #navlist {
    text-align: center
    }
    }

    #navlist li {
    bottom: 11px;
    display: inline;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    position: relative;
    }

    html>body
    #navlist li {
    background: #000;
    margin: 0 3px 0 0;
    padding: 4px 0px 4px 0;
    }

    #navlist a, #navlist a:link, #navlist a:visited {
    background: #900;
    border: 1px solid #FFF;
    bottom: 2px;
    color: #FFF;
    cursor: pointer;
    display: inline;
    height: 1em;
    margin: 0;
    padding: 3px 5px 3px 5px;
    position: relative;
    right: 2px;
    text-decoration: none;
    }

    #navlist a:hover {
    background: #C00;
    bottom: 1px;
    color: #FFF;
    position: relative;
    right: 1px;
    }

    #navlist a:active {
    background: #999;
    bottom: 0px;
    color: #FFF;
    position: relative;
    right: 0px;
    }

    #navlist li#active {
    background: #369;
    bottom: 13px;
    display: inline;
    margin: 0 3px 0 0;
    padding: 0;
    position: relative;
    }

    html>body
    #navlist li#active {
    background: #000;
    margin: 0 4px 0 4px;
    }

    #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
    background: #369;
    border-bottom: none;
    border-left: 1px solid #9CC;
    border-right: 1px solid #9CC;
    border-top: 1px solid #9CC;
    bottom: 0;
    color: #FFF;
    cursor: text;
    margin: 0;
    padding: 2px 5px 0 5px;
    position: relative;
    right: 0;
    }

    </style>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a id="current" href="URL/alamat menu 1">Menu 1</a></li>
    <li><a href="URL/alamat menu 2">Menu 2</a></li>
    <li><a href="URL/alamat menu 3">Menu 3</a></li>
    <li><a href="URL/alamat menu 4">Menu 4</a></li>
    <li><a href="URL/alamat menu 5">Menu 5</a></li>
    <li><a href="URL/alamat menu 6">Menu 6</a></li>
    <li><a href="URL/alamat menu 7">Menu 7</a></li></ul>
    </div>
  6. Kode yang berwarna kuning dan merah ganti dengan apa yang ingin anda tampilkan
    1. Kode yang berwarna merah yaitu : URL/alamat menu 1,2 ,3 ,4, 5. 6 dan 7 ganti dengan menu atau label pada blog anda.
    2. Kode yang berwarna kuning yaitu : Menu 1, 2, 3, 4, 5, 6 dan 7 ganti dengan URL/alamat link target dari menu
  7. Jika jumlah menu yang ditampilkan masih kurang, anda dapat menambah beberapa menu lainnya dengan catatan, pahami dulu kode dari setiap menu pada contoh.
  8. Setelah selesai pengeditan, klik tombol Simpan
  9. Lihat hasilnya


Selamat mencoba, semoga berhasil.....

MENAMPILKAN LABEL DALAM TAB MENU


epg-studio.blogspot.com

LAbel sebuah blog semakin lama akan semakin banyak sesuai dengan isi postingan yang ada pada blog tersebut. Untuk menampilkan label tersebut ada beberapa cara, misalnya dengan menggunakan tehnik Label Clouds atau dapat juga menampilkan label yang telah disediakan oleh Blogger/Blogspot dengan cara : Dasbor, Tata Letak, Elemen Halaman, Tambah Gadget, Pilih Label dan Simpan.
Selain dengan kedua cara diatas, anda juga dapat menampilkan label dalam deretan tab menu, baik menu horizontal, vertikal maupun dropdown. Pempilannya tergantung dari pilihan dan kreatifitas anda.
Untuk anda yang belum memiliki software untuk membuat tab menu silahkan download disini (CSS MENU GENERATOR) dan disini (CSS TAB DESIGNER)
Sebagai contoh cara menampilkan label, berikut ini langkah-langkah yang dapat anda lakukan untuk menampilkan label dalam menu dropdown. Untuk penampilan lainnya, silahkan gunakan software yang telah anda download tadi.
  • Siapkan kode untuk tab menu dropdown sperti dibawah ini :

    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="0" selected>LABEL EPG STUDIO</option>
    <option value="Alamat Label 1">Nama Label 1</option>
    <option value="Alamat Label 2">Nama Labe 2</option>
    <option value="Alamat Label 3">Nama Labe 3</option>
    <option value="Alamat Label 4">Nama Labe 4</option>
    </select>


    Cara mengedit kode diatas adalah sebagai berikut :
    1. Cara mendapatkan alamat label dapat anda lakukan dengan cara : klik kanan pada label blog anda yang ada di halaman postingan kemudian pilih copy dan paste pada alamat Label 1 sampai 4.
    2. Tulisan Nama Label 1 sampai 4 diganti nama label yang sesuai dengan alamat label
  • Sebagai contoh perhatikan pengisian label EPG Studio dibawah ini :

    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="0" selected>LABEL EPG STUDIO</option>
    <option value="http://epg-studio.blogspot.com/search/label/SOFTWARE%20GRATIS">SOFTWARE GRATIS</option>
    <option value="http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER">TUTORIAL BLOGGER</option>
    <option value="http://epg-studio.blogspot.com/search/label/ASESORIS%20BLOG">ASESORIS BLOG</option>
    <option value="http://epg-studio.blogspot.com/search/label/TRAFFIC%20BLOG">TRAFFIC BLOG</option>
    </select>
  • Contoh diatas akan terlihat seperti ini (Coba anda klik untuk melihat hasilnya.


  • Setelah anda berhasil menampilkan label dengan tab menu dropdown, coba sekarang gunakan software pembuat tab menu untuk mendapatkan penampilan yang berbeda.

MEMBUAT TAB MENU HORIZONTAL

Sebuah blog akan menjadi kurang lengkap jika belum dipasang tab menu yang dapat dijadikan pedoman oleh pengunjung untuk melihat menu yang terdapat dalam blog tersebut.
Sebenarnya banyak cara untuk menampilkan menu misalnya : MEMBUAT LABEL BERPUTAR (LABEL CLOUDS) , MENGHEMAT HALAMAN POSTINGAN DENGAN DROPDOWN MENU , MENAMPILKAN LABEL DALAM TAB MENU
Atau dapat juga dengan cara membuat sendiri dengan sofware khusus untuk membuat tab menu. Silahkan anda lihat di CARA MEMBUAT TAB MENU atau MEMBUAT TAB MENU DENGAN CSS TAB GENERATOR dan MEMBUAT TAB MENU DENGAN CSS MENU GENERATOR
Semua link diatas merupakan cara untuk menampilkan menu yang terdapat dalam sebuah blog.
Jika anda ingin menampilkan tab menu yang sudah jadi (tab menu yang digunakan EPG Studio), tinggal copy kode dibawah ini kemudian masukan pada blog anda.
Cara memasukkan kode kedalam blog seperti biasa : Masuk ke Blogger, Rancangan, Elemen Halaman, Tambah Gadget, Klik tanda + pada HTML/JavaScript, Paste kode pada kolom yang tersedia, Simpan
Kodenya seperti ini, silahkan anda copy :


<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml>
<style type="text/css">
<!--
/* CSS Tabs */
#navcontainer {
background: #6C82B5;
border-top: 5px solid #32527A;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist {
list-style: none outside none;
margin: 0px;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li {
bottom: 0px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited {
background:#999999;
border: 1px solid #FFF;
bottom: 10px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #e6e6e6;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active {
background: pink;
bottom: 0px;
color: blue;
position: relative;
right: 0px;
}

#navlist li#active {
background:#369 ;
bottom: 1px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active {
background: #000;
margin: 0 2px 0 2px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #808080;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 10;
color: ;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
-->
</style>
<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER">TUTORIAL BLOGGER </a></li>
<li><a href=" http://www.blogger.com/profile/14536802221205706514" target="_balnk">PROFIL ADMIN</a></li>
<li><a href="http://bloglambirday.blogspot.com" target="_blank">AYAH BUNDA</a></li>
<li><a href="http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD">FREE DOWNLOAD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html">TUKERAN LINK</a></li>
<li><a href="http://epg-studio.blogspot.com/search?max-results=999"><blink>DAFTAR ISI</blink></a></li>
<li><a href="http://epg-studio.blogspot.com/2008/07/koleksi-award-epg-studio.html">KOLEKSI AWARD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/08/buku-tamu.html">BUKU TAMU</a></li></ul>
</div>
</!doctype>



COBA ...............AJAH

PENGATURAN TABEL BLOGGER

epg-studio.blogspot.com


Fokus pengaturan tabel terletak pada bagian <table border="1" align="left"> serta pada bagian ini <tr> dan <td>.
Dari kode diatas dapat kita lihat bahwa tabel tersebut memiliki border/ketebalan garis 1px dan tabel itu diletakan pada bagian kiri dari postingan. Sedangkan pada bagian baris dan kolom belum ada pengaturan.
Beberapa pengaturan tambahan dapat kita masukkan kedalam tabel, diantaranya :
  1. Width : untuk pengaturan lebar dari tabel . Anda dapat mengisi width tersebut disesuaikan dengan keinginan anda. Jika width tidak dicantumkan, lebar tabel akan mengikuti dari banyaknya kata dalam tabel tersebut secara otomatis.
    Contoh kode tabel yang tidak memakai width :


    <table border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>


    Tabel akan terlihat seperti ini :

    isi tabel disini


    Contoh kode tabel yang memakai width :

    <table width="200" border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>

    Tabel akan terlihat seperti ini :

    isi tabel disini

  2. Border : untuk mengatur penampilan garis tabel. Anda dapat menggunakan border sesuai keperluan anda. Border tersebut juga bisa dihilangkan dengan mencantumkan border="0" atau menebalkan border misalnya border="4"

    Contoh kode tabel tanpa pengaturan width dan dipasang border pada ukuran 4px
    <table border="4" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>

    Tabel terlihat seperti ini :

    isi tabel disini
  3. Align : merupakan pengaturan letak tabel jika ditambahkan pada bagian <> dan jika diletakan pada kode <td>maka fungsinya sebagai pengatur letak tulisan pada sel. Align dapat kita isi dengan left, right, center dan justify.

    Contoh kode yang ditambahkan kode align :

    <table width="200" border="1" align="center"><tbody><tr><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>


    Tabel akan kelihatan seperti ini :

    isi tabel disiniisi tabel disini

  4. Bgcolor : merupakan pengaturan warna tabel. Anda dapat memvarisiasikan warna tersebut pada tabel yang anda buat.

    Contoh kode tabel yang telah ditambah kode warna :

    <table width="400" border="1" bgcolor="black" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>

    Pengaturan diatas : Tabel terdiri dari satu baris dua kolom dengan lebar 400 px(masing-masing kolom 200px), border 1px dengan warna garis hitam, letak tabel ditengah, Warna baris kuning, sel pertama letak huruf ditengah dan sel kedua letak huruf dikiri

    Tabel akan terlihat seperti ini :

    isi tabel disiniisi tabel disini
  5. Untuk menambah baris (row), anda tinggal menambahkan kode dibawah seperti ini :

    </tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr> yang diletakkan setelah kode ini :</td></tr>

    Contoh : perhatikan yang berwarna kuning.

    <table width="400" border="1" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>

    Jadinya akan seperti ini:

    isi tabel disiniisi tabel disini
    isi tabel disiniisi tabel disini
  6. Untuk menambah kolom anda tinggal menambahkan kode ini;<td>isi tabel</td> pada kode yang sama disebelah kanan atau kiri
    Contoh(perhatikan berwarna kuning)

    <table width="400" border="1" bgcolor="black" align="center"><tbody><tr bgcolor="yellow"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td><td align="left">isi tabel disini</td></tr><tr bgcolor="green"><td align="center">isi tabel disini</td><td align="left">isi tabel disini</td><td align="left">isi tabel disini</td></tr></table>

    Jadinya akan seperti ini :

    isi tabel disiniisi tabel disiniisi tabel disini
    isi tabel disiniisi tabel disiniisi tabel disini
  7. Selamat mencoba...!!!
    Jika anda belum memahami uraian diatas coba anda copy contoh-contoh dari postingan ini dan paste pada postingan anda. Baru anda lakukan pengeditan sesuai keperluan anda.

SELAMAT .........NYOBA

CARA MEMBUAT TABEL


epg-studio.blogspot.com

Sebuah tabel yang ditampilkan, baik pada sebuah postingan maupun pada bagian lain dari sebuah blog akan membantu memperindah blog dan kerapian dari blog itu semakin baik.
Untuk membuat tabel, kita harus mengetahui terlebih dulu kode-kode yang digunakan dalam sebuah tabel.
Anda belum tahu caranya...??, ikuti kelanjutannya.
  1. Kode Utama dari tabel adalah:

    <table border="1" align="left"><tbody>.....</table>
  2. Kode untuk row/baris adalah:

    <tr>..........</tr>
  3. Kode untu kolom/column adalah :

    <td>.........</td>
  4. Kode-kode diatas, jika kita gabungkan akan menghasilkan satu baris dan satu kolom. Jadinya seperti ini :

    <table border="1" align="left"><tbody><tr><td>isi tabel disini</td></tr></table>

    Kode-kode diatas akan terlihat seperti ini:

    isi tabel disini
  5. Jika anda ingin menambah baris dan kolom, anda hanya perlu menambahkan kode < <tr>...</tr> dan kode <td>...</td>

    Contoh kode table dengan satu baris dan 2 kolom:
    <table border="1" align="left"><tbody><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr></table> Perhatikan letak dari <td>

    Tabelnya akan terlihat seperti ini:

    isi tabel disiniisi tabel disini


    Contoh tabel dengan 2 baris dan dua kolom :

    <table border="1" align="left"><tbody><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr></table>

    Tabel terlihat seperti ini :

    isi tabel disiniisi tabel disini
    isi tabel disiniisi tabel disini

  6. Setelah memahami kode-kode diatas, sekarang anda dapat membuat tabel dengan jumlah baris dan kolom yang anda kehendaki
  7. Selamat mencoba....dan untuk pengaturan penampilan tabel dapat anda lihat disini.

CARA MEMBUAT LINK PADA POSTINGAN

epg-studio.blogspot.com

Link pada sebuah blog sangat diperlukan, baik untuk kepentingan blog itu sendiri maupun untuk kepentingan orang lain.Misalnya tukaran link sesama blogger atau link untuk download dll.
Kita perhatikan link dalam sebuah artikel. Misalnya Jika anda anda ingin memiliki buku tersebut klik disini untuk mendapatkannya.
Untuk membuat link seperti contoh diatas, ikuti langkah-langkah berikut.
  1. Block atau highlight kata atau kalimat yang ingin dibuat link (Contoh diatas adalah klik disini).
  2. Klik icon dengan gambar seperti ini pada toolbar dan muncul sebuah kotak dialog seperti ini.
  3. Isi kotak bertuliskan http:// dengan alamat situs yang kita inginkan. Misalnya :http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html
  4. Klik OK selesai.
Contoh diatas, jika link-nya kita klik maka halaman yang diklik tadi akan muncul menggantikan/menimpa halaman sebelumnya. Tentu akan berefek kurang baik bagi blog kita karena secara umum link yang kita pasang merupakan alamat dari situs-situs lain. Dalam arti lain pengunjung meninggalkan blog kita.
Untuk menghidari hal tersebut, kita pilih alternatif lain yaitu jika pengunjung mengklik link tersebut, halaman baru/window baru akan muncul. Sementara halaman blog anda tetap seperti asalnya.
Langkah-langkahnya silahkan anda simak berikut ini.
  1. Pasang postingan pada menu Edit HTML dengan gambar seperti ini
  2. Link yang tadi kita pasang akan terlihat seperti ini

    <a href="http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html"> klik disini </a>
  3. Tambahkan kata target="new" atau target="_blank" pada bagian akhir dari alamat situs. Jadinya akan seperti ini

    <a href="http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html"target="new> klik disini </a>


    atau seperti ini

    <a href="http://epg-studio.blogspot.com/2009/04/pasang-widget-dari-widgeonet.html"target="_blank> klik disini </a>

  4. Contoh :

    Jika anda berminat silahkan klik disini untuk menuju situs tersebut.
SELESAI.............COBA AJAH

MENAMBAHKAN LIVE TRAFFIC FEED PADA BLOG

epg-studio.blogspot.com

Live Traffic Feed dari situs life.feedjit.com diperlukan bagi sebuah blog yang berguna untuk mengetahui dari mana datangnya pengunjung ke blog yang kita kelola juga dapat mempercantik penampilan blog. Terdapat 2 widget utama yang dapat kita tambahkan pada blog, yang pertama berupa keterangan asal pengunjung dan apa yang dikunjunginya yang disertai dengan gambar bendera negara pengunjung. Yang kedua berupa tampilan peta dengan noktah berwarna merah berupa lokasi asal pengunjung. Jika pointer diarahkan kenoktah merah, akan mucul tulisan lokasi asal pengunjung blog.

Untuk anda yang ingin menambahkan kedua widget diatas, ikuti langkah-langkah berikut ini.
  1. Kunjungi link : http://feedjit.com
  2. Klik get feedjit setelah anda berada di situs tersebut.
  3. Klik salah satu pilihan Javascrift widget atau Image Widget.
  4. Agar tidak terlalu berbelit-belit, kami memilihkan untuk anda yaitu klik Javasrift widget yang letaknya bagian bawah.
  5. Pada halaman berikutnya anda akan melihat 4 tampilan widget. pilih salah satunya sesuai dengan keinginan anda.
  6. Tampilan warna dapat kita ubah dengan mengklik First Costumize it. setelah muncul kotak dialognya, silahkan anda pilih penampilan warna yang sesuai.
  7. Selesai mengotak-atik warna, klik Add to your Blogger blog atau Typepad blog.
  8. Blogger : Menambah Elemen Halaman akan muncul, silahkan anda masukan nama blog seta judul dari widget dan menambahkan kode lainnya, misal : pada edit konten tambahkan <center>pada awal kode HTML dan </center> pada akhir kode HTML agar widget berada ditengah-tengah sidebar.
  9. Klik menambah widget.
  10. Silahkan anda lihat blog anda sekarang
Untuk widget lainnya lakukan langkah-langkah seperti diatas.
Selamat mencoba...!!

HEADER TAMPIL DUA KOLOM


epg-studio.blogspot.com


C oba anda perhatikan bagian header EPG Studio. Bagian tersebut terdiri dari header dan widget lainnya atau dalam istilah lainnya " Header terdiri dari dua bagian "Tambahan baru pada bagian header ini dapat anda isi dengan berbagai widget yang disesuaikan dengan keinginan anda.
Berikut langkah-langkahnya :
  • LANGKAH PERTAMA
    1. Masuk ke Blogger dengan ID anda.
    2. Klik Rancangan kemudian pilih Edit HTML.
    3. Simpan dulu template anda dengan dengan cara klik Download Template Lengkap jika takut gagal
    4. Cari kode css bagian header seperti dibawah ini :
      /* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor height:190px; } #header-inner { width:900px; background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; }
    5. Hapus kode css diatas kemudian ganti dengan kode css dibawah ini :

      /* Header =================================== */
      #header-wrapper {
      width:1000px;
      margin:0 auto 0px;
      background:$bgheadercolor
      height:190px;
      }
      #head-inner {
      width:500px;
      background-position: left;
      margin-left: auto;
      margin-right: auto;
      float:left;
      }
      #header {
      margin: 0px;
      text-align: left;
      color:#ffcc66;
      }
      #r_head{
      width:500px;
      float:left;
      padding-top:10px;
      }

      • Perhatikan kode-kode yang berwarna, terutama pada ukurannya, ganti ukuran tersebut sesuai dengan keinginan anda.
      • width:1000px; : merupakan ukuran header secara kesuluruhan
      • #header-inner {
        width:500px; : merupakan ukuran header yang baru tempat menampilkan gambar pada header
      • #r_head{
        width:500px; : merupakan ukuran bagian header sebelah kanan (yang baru anda tambahkan). Bagian inilah nantinya dapat anda tambahkan widget-widget pilihan anda.



  • LANGKAH KEDUA







    1. Cari kode seperti dibawah ini :

      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='
      Title blog anda (Header)' type='Header'/>
      </b:section>
      </div>

    2. Hapus kode tersebut kemudian ganti dengan kode dibawah ini :

      <div id='header-wrapper'>
      <div id='head-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Title blog anda (Header)' type='Header'/>
      </b:section>
      </div>
      <div id='r_head'>
      <b:section class='header' id='header2' preferred='yes'/>
      </div>
      </div>

    3. Klik tombol Simpan Template
    4. Sekarang coba anda lihat Rancangan pada bagian Elemen Halaman jika berhasil anda akan melihat tampilan baru pada bagian header blog anda. Silahkan anda isi sesuatu pada header bagian kanan tersebut.
    5. Tampilan Elemen Halaman akan terlihat seperti gambar dibawah ini :

    6. Selamat mencoba semoga bermanfaat.

    Read more: http://epg-studio.blogspot.com/2010/09/header-tampil-dua-kolom.html#ixzz1Yvx345ER

    MENAMBAH WIDGET DIBAWAH JUDUL POST

    MENAMBAH WIDGET DIBAWAH JUDUL POST


    epg-studio.blogspot.com
     Menambahan widget dibawah judul postingan dapat difungsikan untuk menampilkan widget yang memiliki kepentingan lebih dari widget-widget lainnya. Misalnya widget iklan atau jenis widget lainnya yang menurut anda penting.
    Penempatan widget di bawah postingan ini akan muncul di setiap judul postingan yang ada pada blog anda. Blog anda memiliki 100 judul postingan maka widget itupun akan tampil dengan jumlah yang sama.
    Jika anda tertarik untuk menampilkannya, simak caranya...!
    • Siapkan sebuah widget yang akan ada tampilkan di bawah judul postingan
    • Atur ukuran widget (width dan heightnya), sesuaikan dengan ukuran main wrapper.
    • Ubah sript dari widget tersebut pada pharse yang dapat diterima oleh temlate.
    • Untuk mempharsenya silahkan anda kunjungi situs ini : http://centricle.com
    • Copy dulu script widgetnya dan paste pada kolom yang tersedia pada http://centricle.com
    • Klik tombol encode untuk mengubah pharsenya.
    • Setelah selesai prosesnya, copy kode yang diubah tadi dan simpan dulu pada notepad
    • Masuk ke Blogger dengan ID anda
    • Pilih Tata Letak
    • Pilih Edit HTML
    • Back up terlebih dahulu templatenya, jika anda takut gagal
    • beri tanda contreng pada kotak disamping tulisan Expand Template Widget
    • Cari kode ini <div class='post-header-line-1'/> kemudian copy kode yang telah dipharse tadi da paste tepat dibawah kode <div class='post-header-line-1'/>
    • Klik tombol Simpan Temolate dan lihat hasilnya...!!

    Sabtu, 24 September 2011

    PASANG FEED FACEBOOK DI BLOG

    Langsung aja yach...

    1. login blog

    2. meluncur ke twitterfeed.com

    3. registrasi,isi email & pasword

    4. created account

    5. step 1 pilih yang ingin di feed : twitter , facebook, dll

    6. test rss feed

    7. continue step 2

    8. pilih yang ingin di feed selanjutnya.contoh : facebook ,twiter ,dll

    9. jika facebook yang dipilih,jika belum punya facebook atau belum login pilih no.1 dan jika udah punya account facebook pilih no.2

    10. klick created

    MENIKAH DALAM SELIMUT CINTA

    Cinta itu milik pribadi,yang tak bisa diganggu gugat meski itu dri orang tua & keluarga sendiri.Cinta tak bisa dilarang & tak bisa dipaksa harus tumbuh.Karna itu sepenuhnya milik kita sbg anugrah dr Tuhan.
    Cinta yg sesunguhnya tak mengenal materi,agama,ras,tua/muda,janda ato duda.Selama semua itu masih berjalan dlm koridor islam cinta bsa berlanjut ke pernikahan yg agung.Dikumpulkan dua individu berbeda pria & wanita jadi halal sesuai syarat syar'i.Sbg mn sabda rosul mnkah adl penyempurnaan sbgian agama.

    Jumat, 23 September 2011

    MENAMPILKAN POST BLOG DI FACE BOOK DENGAN MIRROR BLOG


    epg-studio.blogspot.com

    Bagi peblogger yang memiliki akun Facebook, sebaiknya menggunakan kesempatan ini untuk mempublikasika postingan blog anda pada Facebook.
    Apalagi kalau anda memiliki banyak teman di Facebook, dan postingan anda memiliki daya tarik, sehingga teman-teman anda itu akan langsung menuju blog anda, maka dengan sendirinya akan menambah traffik blog anda.
    Caranya mudah, ikuti langkah-langkah dibawah ini :
    1. Masuk ke Facebook dengan akun anda
    2. Dibawah Frofil anda terdapat deretan menu, kilk menu Aplikasi. Lihat gambar :
    3. Setelah di Laman Aplikasi, isi kotak pencarian dengan kata Mirror Blog. Kemudian icon Mirror Blog akan muncul dibawah kotak pencarian tadi. Klik icon tersebut. Lihat gambar :
    4. Tekan tombol ke Aplikasi dibawah foto Profil fb Mirror Blog. Klik izinkan. Lihat gambar :
    5. Setelah berada di Mirror Blog, klik menu Setup
    6. Berikutnya Pilih opsi nomor dua, " I have a Blog on Blogger,com." Lihat gambar : Klik Continue
    7. Silahkan masukkan email dan password yang bisa digunakan untuk masuk ke Blogger anda pada kotak yang tersedia. Klik Continue. Lihat Gambar :
    8. jika anda memiliki blog lebih dari satu, berikutnya anda dikasih pilihan, blog mana yang akan ditampilkan. silahkan anda pilih kemudian klik Continue. Lihat gambar :
    9. Selanjutnya muncul tulisan , "Congratulation! Your Mirror Blog is ready for use!" Klik Done. Pada langkah ini berarti anda telah berhasil memasukkan postingan blog anda pada Facebook. Lihat gambar :
    10. Selesai.
    11. Selamat mencoba, semoga bermanfaat

    GOOGLE AKAN HAPUS AKUN BLOGGER

    iApakah Anda salah satu pengguna Blogger ... ? Kalau Anda yang telah bergabung dan memiliki account sebelum tahun 2007 maka berhati-hatilah kalau belum melakukan upgrade ke Google Account yang baru, pasalnya berdasarkan aturan yang baru setelah Blogger diakuisisi oleh Google kabarnya pihak Google Blogger akan segera menghapus account dan blog lama penggunanya tersebut. Oleh karenanya Anda diperkenankan untuk memiliki account Google terlebih dahulu sebelum bisa mengakses Blogger nantinya.
    Sebagai salah satu akuisisi pertama yang dilakukan pihak Google beberapa waktu yang silam, proses integrasi Blogger dengan produk Google kabarnya masih mengalami hambatan dan belum selesai. Delapan tahun setelah mengakuisisi Blogger, pihak Google akhirnya mengakhiri dukungannya terhadap account warisan Blooger yang lama dengan memberi dukungan yang baru terhadap account Google secara menyeluruh.
    Sebelumnya Blogger menggunakan sistem account sendiri sampai tahun 2006 dan baru mulai bermigrasikan penggunanya pada tahun 2007. Selama empat tahun itu ternyata intergrasinya sendiri tidak dilakukan sebagaimana mestinya, sehingga pada akhirnya Google Blogger memutuskan akan segera menghapus dukungan bagi account penggunanya yang lama. Tidak hanya akan account lama saja yang berhenti bekerja, tetapi blog yang terkait dengan pengguna lamanya pun tersebut tentunya juga akan segera dihapus jika penggunanya tidak segera bermigrasi ke sistem yang baru pada bulan 25 Juni 2011 yang akan datang.
    “Untuk sejumlah alasan teknis dan operasional, Kami telah memutuskan untuk menghentikan dukungan Kami terhadap semua account warisan dan blog yang lama setelah tanggal 25 Juni 2011″, ungkap pihak Google Blogger.
    “Jadi jika Anda memiliki account Blogger dan tidak login sejak 2007, Anda akan kehilangan akses ke account dan konten yang berhubungan secara permanen tersebut kecuali jika Anda memperbaruinya ke sistem Account Google sebelum tanggal 25 Juni 2011″, tambahnya.
    Sudah barang tentu nantinya bakal akan banyak orang yang belum melakukan login sejak tahun 2007. Namun apa mau dikata, bagi Anda yang mau selamat, ya sebaiknya segera saja mengupgradenya ke sistem account google yang baru. Sedangkan sebaliknya jika tidak, ya sebaiknya cukup abaikan saja dan beralihlah ke situs layanan pembuat blog yang lain untuk membuat blog Anda yang baru.
    Google Account menyediakan sistem yang sangat padat, baik dari segi keamanan dan kinerja, proses verifikasi dua langkah adalah salah satu contoh, belum lagi itu membuat cara lebih mudah bagi Google untuk hanya memiliki satu sistem terhadap semua produk-produknya. Anda dapat mengetahui lebih lanjut tentang proses di sini.
    Sebelumnya Google juga menghadapi masalah yang sama di YouTube dan telah mengeluarkan peringatan serupa baru-baru ini, dan meminta para penggunanya yang belum melakukannya agar dapat melakukan login ke Youtube diwajibkan sebelumnya untuk memiliki sistem account Google terlebih dahulu.
    Sumber : http://www.beritateknologi.com

    Catatan :
    Jika anda menggunakan blogger tetapi bukan berupa akun Googgle, segeralah lakukan migrasi. Caranya mudah anda tinggal mengunjungi : Klaim Blog Anda

    PENTING UNTUK ANDA BACA


    Read more: http://epg-studio.blogspot.com/2011/04/google-akan-hapus-akun-blogger.html#ixzz1Yl9uaCJ3

    KENAIKAN GAJI PNS 2001

    Bulan April 2011 mendatang, seluruh PNS di negeri ini akan tersenyum lebar karena pada bulan tersebut mereka akan menerima pembayaran gaji yang telah dinaikan pemerintah sebesar 10% dari gaji pokok masing-masing. Kenaikan gaji tersebut mulai berlaku dari Bulan Januari, berarti selain menerima kenaikan pada bulan April, juga menerima pembayaran kekurangan selama 3 bulan dalam bentuk rapel.
    Selain gaji pokok tersebut,PNS juga akan menerima sejumlah tunjangan seperti tunjangan fungsional, tunjangan jabatan, bahkan tunjangan kinerja yang nilainya melebihi gaji pokok.

    Rincian kenaikan gaji PNS 2011 berdasarkan golongan

    Pegawai Golongan I a dengan masa kerja 0 tahun Rp1.175.000
    Pegawai Golongan I a dengan masa kerja 10 tahun Rp1.346.800
    Pegawai Golongan I a dengan masa kerja 26 tahun Rp1.675.200

    Pegawai Golongan II a dengan masa kerja 0 tahun Rp1.505.400
    Pegawai Golongan II a dengan masa kerja 11 tahun Rp1.749.600
    Pegawai Golongan II a dengan masa kerja 21 tahun Rp2.004.900
    Pegawai Golongan II a dengan masa kerja 33 tahun Rp2.361.400

    Pegawai Golongan III a dengan masa kerja 0 tahun Rp1.902.300
    Pegawai Golongan III a dengan masa kerja 10 tahun Rp2.180.300
    Pegawai Golongan III a dengan masa kerja 20 tahun Rp2.499.000
    Pegawai Golongan III a dengan masa kerja 32 tahun Rp2.943.400

    Pegawai Golongan IV a dengan masa kerja 0 tahun Rp2.245.200
    Pegawai Golongan IV a dengan masa kerja 10 tahun Rp2.537.300
    Pegawai Golongan IV a dengan masa kerja 20 tahun Rp2.949.400
    Pegawai Golongan IV a dengan masa kerja 32 tahun Rp3.473.900

    Sementara itu, untuk pejabat eselon I, yaitu golongan IV d dan golongan IV e adalah:

    Golongan IV d masa kerja 0 tahun Rp2.542.300
    Golongan IV d masa kerja 10 tahun Rp2.913.900
    Golongan IV d masa kerja 20 tahun Rp3.339.700
    Golongan IV d masa kerja 32 tahun Rp3.933.600

    Golongan IV e masa kerja 0 tahun Rp2.649.900
    Golongan IV e masa kerja 10 tahun Rp3.037.100
    Golongan IV e masa kerja 20 tahun Rp3.481.00
    Golongan IV e masa kerja 32 tahun Rp4.100.000


    Daftar rician kenaikan gaji diatas dikutip dari: http://forum.vivanews.com

    Kepada seluruh Pegawai Negeri Sipil (PNS) di Republik tercinta ini, selamat menikmati kenaikan gaji tersebut dan mudah-mudahan dapat meningkatkan kinerja sesuai dengan tugas dan tanggung jawab masing-masing

    Kamis, 22 September 2011

    Siapa Khalil Gibran ???

    Tak lengkap rasanya jika kita belum mengenal seorang pujaan kita. Berikut sekelumit tentang Khalil Gibran berseumber dari wikipedia.

    Khalil Gibran (juga dieja Khalil Gibran; lahir Gibran Khalil Gibran, bahasa Arab: جبران خليل جبران, lahir di Lebanon, 6 Januari 1883 – meninggal di New York City, Amerika Serikat, 10 April 1931 pada umur 48 tahun) adalah seorang seniman, penyair, dan penulis Lebanon Amerika. Ia lahir di Lebanon (saat itu masuk Provinsi Suriah di Khilafah Turki Utsmani) dan menghabiskan sebagian besar masa produktifnya di Amerika Serikat.
      
    Kehidupan awal

    Khalil Gibran lahir di Basyari, Libanon dari keluarga katholik-maronit. Bsharri sendiri merupakan daerah yang kerap disinggahi badai, gempa serta petir. Tak heran bila sejak kecil, mata Gibran sudah terbiasa menangkap fenomena-fenomena alam tersebut. Inilah yang nantinya banyak memengaruhi tulisan-tulisannya tentang alam.

    Pada usia 10 tahun, bersama ibu dan kedua adik perempuannya, Gibran pindah ke Boston, Massachusetts, Amerika Serikat. Tak heran bila kemudian Gibran kecil mengalami kejutan budaya, seperti yang banyak dialami oleh para imigran lain yang berhamburan datang ke Amerika Serikat pada akhir abad ke-19. Keceriaan Gibran di bangku sekolah umum di Boston, diisi dengan masa akulturasinya maka bahasa dan gayanya dibentuk oleh corak kehidupan Amerika. Namun, proses Amerikanisasi Gibran hanya berlangsung selama tiga tahun karena setelah itu dia kembali ke Beirut, di mana dia belajar di College de la Sagasse sekolah tinggi Katholik-Maronit sejak tahun 1899 sampai 1902.

    Selama awal masa remaja, visinya tentang tanah kelahiran dan masa depannya mulai terbentuk. Kesultanan Usmaniyah yang sudah lemah, sifat munafik organisasi gereja, dan peran kaum wanita Asia Barat yang sekadar sebagai pengabdi, mengilhami cara pandangnya yang kemudian dituangkan ke dalam karya-karyanya yang berbahasa Arab.
    Gibran meninggalkan tanah airnya lagi saat ia berusia 19 tahun, namun ingatannya tak pernah bisa lepas dari Lebanon. Lebanon sudah menjadi inspirasinya. Di Boston dia menulis tentang negerinya itu untuk mengekspresikan dirinya. Ini yang kemudian justru memberinya kebebasan untuk menggabungkan 2 pengalaman budayanya yang berbeda menjadi satu.

    Gibran menulis drama pertamanya di Paris dari tahun 1901 hingga 1902. Tatkala itu usianya menginjak 20 tahun. Karya pertamanya, "Spirits Rebellious" ditulis di Boston dan diterbitkan di New York City, yang berisi empat cerita kontemporer sebagai sindiran keras yang menyerang orang-orang korup yang dilihatnya. Akibatnya, Gibran menerima hukuman berupa pengucilan dari gereja Maronit. Akan tetapi, sindiran-sindiran Gibran itu tiba-tiba dianggap sebagai harapan dan suara pembebasan bagi kaum tertindas di Asia Barat.
    Masa-masa pembentukan diri selama di Paris cerai-berai ketika Gibran menerima kabar dari Konsulat Jendral Turki, bahwa sebuah tragedi telah menghancurkan keluarganya. Adik perempuannya yang paling muda berumur 15 tahun, Sultana, meninggal karena TBC.

    Gibran segera kembali ke Boston. Kakaknya, Peter, seorang pelayan toko yang menjadi tumpuan hidup saudara-saudara dan ibunya juga meninggal karena TBC. Ibu yang memuja dan dipujanya, Kamilah, juga telah meninggal dunia karena tumor ganas. Hanya adiknya, Marianna, yang masih tersisa, dan ia dihantui trauma penyakit dan kemiskinan keluarganya. Kematian anggota keluarga yang sangat dicintainya itu terjadi antara bulan Maret dan Juni tahun 1903. Gibran dan adiknya lantas harus menyangga sebuah keluarga yang tidak lengkap ini dan berusaha keras untuk menjaga kelangsungan hidupnya.

    Di tahun-tahun awal kehidupan mereka berdua, Marianna membiayai penerbitan karya-karya Gibran dengan biaya yang diperoleh dari hasil menjahit di Miss Teahan's Gowns. Berkat kerja keras adiknya itu, Gibran dapat meneruskan karier keseniman dan kesasteraannya yang masih awal.
    Pada tahun 1908 Gibran singgah di Paris lagi. Di sini dia hidup senang karena secara rutin menerima cukup uang dari Mary Haskell, seorang wanita kepala sekolah yang berusia 10 tahun lebih tua namun dikenal memiliki hubungan khusus dengannya sejak masih tinggal di Boston. Dari tahun 1909 sampai 1910, dia belajar di School of Beaux Arts dan Julian Academy. Kembali ke Boston, Gibran mendirikan sebuah studio di West Cedar Street di bagian kota Beacon Hill. Ia juga mengambil alih pembiayaan keluarganya.


    Amerika Serikat

    Pada tahun 1911 Gibran pindah ke kota New York. Di New York Gibran bekerja di apartemen studionya di 51 West Tenth Street, sebuah bangunan yang sengaja didirikan untuk tempat ia melukis dan menulis.
    Sebelum tahun 1912 "Broken Wings" telah diterbitkan dalam Bahasa Arab. Buku ini bercerita tentang cinta Selma Karami kepada seorang muridnya. Namun, Selma terpaksa menjadi tunangan kemenakannya sendiri sebelum akhirnya menikah dengan suami yang merupakan seorang uskup yang oportunis. Karya Gibran ini sering dianggap sebagai otobiografinya.

    Pengaruh "Broken Wings" terasa sangat besar di dunia Arab karena di sini untuk pertama kalinya wanita-wanita Arab yang dinomorduakan mempunyai kesempatan untuk berbicara bahwa mereka adalah istri yang memiliki hak untuk memprotes struktur kekuasaan yang diatur dalam perkawinan. Cetakan pertama "Broken Wings" ini dipersembahkan untuk Mary Haskell.

    Gibran sangat produktif dan hidupnya mengalami banyak perbedaan pada tahun-tahun berikutnya. Selain menulis dalam bahasa Arab, dia juga terus menyempurnakan penguasaan bahasa Inggrisnya dan mengembangkan kesenimanannya. Ketika terjadi perang besar di Lebanon, Gibran menjadi seorang pengamat dari kalangan nonpemerintah bagi masyarakat Suriah yang tinggal di Amerika.

    Ketika Gibran dewasa, pandangannya mengenai dunia Timur meredup. Pierre Loti, seorang novelis Perancis, yang sangat terpikat dengan dunia Timur pernah berkata pada Gibran, kalau hal ini sangat mengenaskan! Disadari atau tidak, Gibran memang telah belajar untuk mengagumi kehebatan Barat. ocix_81

    Karya dan kepengarangan

    Sebelum tahun 1918, Gibran sudah siap meluncurkan karya pertamanya dalam bahasa Inggris, "The Madman", "His Parables and Poems". Persahabatan yang erat antara Mary tergambar dalam "The Madman". Setelah "The Madman", buku Gibran yang berbahasa Inggris adalah "Twenty Drawing", 1919; "The Forerunne", 1920; dan "Sang Nabi" pada tahun 1923, karya-karya itu adalah suatu cara agar dirinya memahami dunia sebagai orang dewasa dan sebagai seorang siswa sekolah di Lebanon, ditulis dalam bahasa Arab, namun tidak dipublikasikan dan kemudian dikembangkan lagi untuk ditulis ulang dalam bahasa Inggris pada tahun 1918-1922.
    Sebelum terbitnya "Sang Nabi", hubungan dekat antara Mary dan Gibran mulai tidak jelas. Mary dilamar Florance Minis, seorang pengusaha kaya dari Georgia. Ia menawarkan pada Mary sebuah kehidupan mewah dan mendesaknya agar melepaskan tanggung jawab pendidikannya. Walau hubungan Mary dan Gibran pada mulanya diwarnai dengan berbagai pertimbangan dan diskusi mengenai kemungkinan pernikahan mereka, namun pada dasarnya prinsip-prinsip Mary selama ini banyak yang berbeda dengan Gibran. Ketidaksabaran mereka dalam membina hubungan dekat dan penolakan mereka terhadap ikatan perkawinan dengan jelas telah merasuk ke dalam hubungan tersebut. Akhirnya Mary menerima Florance Minis.
    Pada tahun 1920 Gibran mendirikan sebuah asosiasi penulis Arab yang dinamakan Arrabithah Al Alamia (Ikatan Penulis). Tujuan ikatan ini merombak kesusastraan Arab yang stagnan. Seiring dengan naiknya reputasi Gibran, ia memiliki banyak pengagum. Salah satunya adalah Barbara Young. Ia mengenal Gibran setelah membaca "Sang Nabi". Barbara Young sendiri merupakan pemilik sebuah toko buku yang sebelumnya menjadi guru bahasa Inggris. Selama 8 tahun tinggal di New York, Barbara Young ikut aktif dalam kegiatan studio Gibran.
    Gibran menyelesaikan "Sand and Foam" tahun 1926, dan "Jesus the Son of Man" pada tahun 1928. Ia juga membacakan naskah drama tulisannya, "Lazarus" pada tanggal 6 Januari 1929. Setelah itu Gibran menyelesaikan "The Earth Gods" pada tahun 1931. Karyanya yang lain "The Wanderer", yang selama ini ada di tangan Mary, diterbitkan tanpa nama pada tahun 1932, setelah kematiannya. Juga tulisannya yang lain "The Garden of the Propeth".

    Kematian

    Pada tanggal 10 April 1931 jam 11.00 malam, Gibran meninggal dunia. Tubuhnya memang telah lama digerogoti sirosis hepatis dan tuberkulosis, tapi selama ini ia menolak untuk dirawat di rumah sakit. Pada pagi hari terakhir itu, dia dibawa ke St. Vincent's Hospital di Greenwich Village.
    Hari berikutnya Marianna mengirim telegram ke Mary di Savannah untuk mengabarkan kematian penyair ini. Meskipun harus merawat suaminya yang saat itu juga menderita sakit, Mary tetap menyempatkan diri untuk melayat Gibran.

    Jenazah Gibran kemudian dikebumikan tanggal 21 Agustus di Mar Sarkis, sebuah biara Karmelit di mana Gibran pernah melakukan ibadah.

    Sepeninggal Gibran, Barbara Younglah yang mengetahui seluk-beluk studio, warisan dan tanah peninggalan Gibran. Juga secarik kertas yang bertuliskan, "Di dalam hatiku masih ada sedikit keinginan untuk membantu dunia Timur, karena ia telah banyak sekali membantuku."

    Selasa, 23 Juni 2009

    Beberapa Mutiara Kata Karya Kahlil Gibran

    "...pabila cinta memanggilmu... ikutilah dia walau jalannya berliku-liku... Dan, pabila sayapnya merangkummu... pasrahlah serta menyerah, walau pedang tersembunyi di sela sayap itu melukaimu..." (Kahlil Gibran)

    "...kuhancurkan tulang-tulangku, tetapi aku tidak membuangnya sampai aku mendengar suara cinta memanggilku dan melihat jiwaku siap untuk berpetualang" (Kahlil Gibran)

    "Tubuh mempunyai keinginan yang tidak kita ketahui. Mereka dipisahkan karena alasan duniawi dan dipisahkan di ujung bumi. Namun jiwa tetap ada di tangan cinta... terus hidup... sampai kematian datang dan menyeret mereka kepada Tuhan..." (Kahlil Gibran)

    "Jangan menangis, Kekasihku... Janganlah menangis dan berbahagialah, karena kita diikat bersama dalam cinta. Hanya dengan cinta yang indah... kita dapat bertahan terhadap derita kemiskinan, pahitnya kesedihan, dan duka perpisahan" (Kahlil Gibran)

    "Aku ingin mencintaimu dengan sederhana... seperti kata yang tak sempat diucapkan kayu kepada api yang menjadikannya abu... Aku ingin mencintaimu dengan sederhana... seperti isyarat yang tak sempat dikirimkan awan kepada hujan yang menjadikannya tiada..." (Kahlil Gibran)


    "Jika cinta tidak dapat mengembalikan engkau kepadaku dalam kehidupan ini... pastilah cinta akan menyatukan kita dalam kehidupan yang akan datang" (Kahlil Gibran)

    "Apa yang telah kucintai laksana seorang anak kini tak henti-hentinya aku mencintai... Dan, apa yang kucintai kini... akan kucintai sampai akhir hidupku, karena cinta ialah semua yang dapat kucapai... dan tak ada yang akan mencabut diriku dari padanya" (Kahlil Gibran)

    Puisi Cinta Kalil Gibran

    CINTA yang AGUNG
    Adalah ketika kamu menitikkan air mata
    dan MASIH peduli terhadapnya..
    Adalah ketika dia tidak mempedulikanmu dan kamu MASIH
    menunggunya dengan setia..
    Adalah ketika dia mulai mencintai orang lain
    dan kamu MASIH bisa tersenyum sembari berkata ‘Aku
    turut berbahagia untukmu’

    Apabila cinta tidak berhasil…BEBASKAN dirimu…
    Biarkan hatimu kembali melebarkan sayapnya
    dan terbang ke alam bebas LAGI ..
    Ingatlah…bahwa kamu mungkin menemukan cinta dan
    kehilangannya..
    tapi..ketika cinta itu mati..kamu TIDAK perlu mati
    bersamanya…

    Orang terkuat BUKAN mereka yang selalu
    menang..MELAINKAN mereka yang tetap tegar ketika
    mereka jatuh

    Waktu

    Dan jika engkau bertanya, bagaimanakah tentang Waktu?….
    Kau ingin mengukur waktu yang tanpa ukuran dan tak terukur.

    Engkau akan menyesuaikan tingkah lakumu dan bahkan mengarahkan perjalanan jiwamu menurut jam dan musim.
    Suatu ketika kau ingin membuat sebatang sungai, diatas bantarannya kau akan duduk dan menyaksikan alirannya.

    Namun keabadian di dalam dirimu adalah kesadaran akan kehidupan nan abadi,
    Dan mengetahui bahwa kemarin hanyalah kenangan hari ini dan esok hari adalah harapan.


    Dan bahwa yang bernyanyi dan merenung dari dalam jiwa, senantiasa menghuni ruang semesta yang menaburkan bintang di angkasa.


    Setiap di antara kalian yang tidak merasa bahwa daya mencintainya tiada batasnya?
    Dan siapa pula yang tidak merasa bahwa cinta sejati, walau tiada batas, tercakup di dalam inti dirinya, dan tiada bergerak dari pikiran cinta ke pikiran cinta, pun bukan dari tindakan kasih ke tindakan kasih yang lain?

    Dan bukanlah sang waktu sebagaimana cinta, tiada terbagi dan tiada kenal ruang?Tapi jika di dalam pikiranmu haru mengukur waktu ke dalam musim, biarkanlah tiap musim merangkum semua musim yang lain,Dan biarkanlah hari ini memeluk masa silam dengan kenangan dan masa depan dengan kerinduan.

    CINTA

    AKU bicara perihal Cinta ????…

    Apabila cinta memberi isyarat kepadamu, ikutilah dia,
    Walau jalannya sukar dan curam.
    Dan pabila sayapnva memelukmu menyerahlah kepadanya.
    Walau pedang tersembunyi di antara ujung-ujung sayapnya bisa melukaimu.
    Dan kalau dia bicara padamu percayalah padanya.
    Walau suaranya bisa membuyarkan mimpi-mimpimu bagai angin utara mengobrak-abrik taman.
    Karena sebagaimana cinta memahkotai engkau, demikian pula dia
    kan menyalibmu.

    Sebagaimana dia ada untuk pertumbuhanmu, demikian pula dia ada untuk pemanakasanmu.

    Sebagaimana dia mendaki kepuncakmu dan membelai mesra ranting-rantingmu nan paling lembut yang bergetar dalam cahaya matahari.
    Demikian pula dia akan menghunjam ke akarmu dan mengguncang-guncangnya di dalam cengkeraman mereka kepada kami.
    Laksana ikatan-ikatan dia menghimpun engkau pada dirinya sendiri.

    Dia menebah engkau hingga engkau telanjang.
    Dia mengetam engkau demi membebaskan engkau dari kulit arimu.
    Dia menggosok-gosokkan engkau sampai putih bersih.
    Dia merembas engkau hingga kau menjadi liar;
    Dan kemudian dia mengangkat engkau ke api sucinya.

    Sehingga engkau bisa menjadi roti suci untuk pesta kudus Tuhan.

    Semua ini akan ditunaikan padamu oleh Sang Cinta, supaya bisa kaupahami rahasia hatimu, dan di dalam pemahaman dia menjadi sekeping hati Kehidupan.

    Namun pabila dalam ketakutanmu kau hanya akan mencari kedamaian dan kenikmatan cinta.Maka lebih baiklah bagimu kalau kaututupi ketelanjanganmu dan menyingkir dari lantai-penebah cinta.

    Memasuki dunia tanpa musim tempat kaudapat tertawa, tapi tak seluruh gelak tawamu, dan menangis, tapi tak sehabis semua airmatamu.

    Cinta tak memberikan apa-apa kecuali dirinya sendiri dan tiada mengambil apa pun kecuali dari dirinya sendiri.
    Cinta tiada memiliki, pun tiada ingin dimiliki; Karena cinta telah cukup bagi cinta.

    Pabila kau mencintai kau takkan berkata, “Tuhan ada di dalam hatiku,” tapi sebaliknya, “Aku berada di dalam hati Tuhan”.

    Dan jangan mengira kaudapat mengarahkan jalannya Cinta, sebab cinta, pabila dia menilaimu memang pantas, mengarahkan jalanmu.

    Cinta tak menginginkan yang lain kecuali memenuhi dirinya. Namun pabila kau mencintai dan terpaksa memiliki berbagai keinginan, biarlah ini menjadi aneka keinginanmu: Meluluhkan diri dan mengalir bagaikan kali, yang menyanyikan melodinya bagai sang malam.

    Mengenali penderitaan dari kelembutan yang begitu jauh.
    Merasa dilukai akibat pemahamanmu sendiri tenung cinta;
    Dan meneteskan darah dengan ikhlas dan gembira.
    Terjaga di kala fajar dengan hati seringan awan dan mensyukuri hari haru penuh cahaya kasih;

    Istirah di kala siang dan merenungkan kegembiraan cinta yang meluap-luap;Kembali ke rumah di kala senja dengan rasa syukur;

    Dan lalu tertidur dengan doa bagi kekasih di dalam hatimu dan sebuah gita puji pada bibirmu.

    Persahabatan

    Dan seorang remaja berkata, Bicaralah pada kami tentang Persahabatan.

    Dan dia menjawab:
    Sahabat adalah keperluan jiwa, yang mesti dipenuhi.
    Dialah ladang hati, yang kau taburi dengan kasih dan kau tuai dengan penuh rasa terima kasih.
    Dan dia pulalah naungan dan pendianganmu.
    Kerana kau menghampirinya saat hati lupa dan mencarinya saat jiwa mahu kedamaian.

    Bila dia berbicara, mengungkapkan fikirannya, kau tiada takut membisikkan kata “Tidak” di kalbumu sendiri, pun tiada kau menyembunyikan kata “Ya”.
    Dan bilamana dia diam,hatimu berhenti dari mendengar hatinya; kerana tanpa ungkapan kata, dalam persahabatan, segala fikiran, hasrat, dan keinginan dilahirkan bersama dan dikongsi, dengan kegembiraan tiada terkirakan.
    Di kala berpisah dengan sahabat, tiadalah kau berdukacita;
    Kerana yang paling kau kasihi dalam dirinya, mungkin kau nampak lebih jelas dalam ketiadaannya, bagai sebuah gunung bagi seorang pendaki, nampak lebih agung daripada tanah ngarai dataran.

    Dan tiada maksud lain dari persahabatan kecuali saling memperkaya roh kejiwaan.
    Kerana cinta yang mencari sesuatu di luar jangkauan misterinya, bukanlah cinta , tetapi sebuah jala yang ditebarkan: hanya menangkap yang tiada diharapkan.

    Dan persembahkanlah yang terindah bagi sahabatmu.
    Jika dia harus tahu musim surutmu, biarlah dia mengenali pula musim pasangmu.
    Gerangan apa sahabat itu jika kau sentiasa mencarinya, untuk sekadar bersama dalam membunuh waktu?
    Carilah ia untuk bersama menghidupkan sang waktu!
    Kerana dialah yang bisa mengisi kekuranganmu, bukan mengisi kekosonganmu.
    Dan dalam manisnya persahabatan, biarkanlah ada tawa ria dan berkongsi kegembiraan..
    Kerana dalam titisan kecil embun pagi, hati manusia menemui fajar dan ghairah segar kehidupan.

    ~ Khalil Gibran

    Share

    Twitter Delicious Facebook Digg Stumbleupon Favorites