Minggu, 13 Juli 2014


Halo halo! Balik lagi ke serial Aplikasi-aplikasi buat twitter-an nih!
Sekarang Saya akan mencoba memberikan pilihan ke kamu buat Twitter-an di PC / Laptop. Silahkan menikmati:

Tweetdeck

Aplikasi Twitter-an paling popular di kalangan teman-teman Saya. Berbagai macam fitur yang lengkap, bisa short link, ada notifikasi juga. Theme gelap yang elegan. Tweetdeck juga menyediakan fitur twit longer. Jadi ketika user nge-tweet lebih dari 140 karakter, tweetdeck otomatis akan membuat shortlink untuk melihat tweet secara full. Selain Twitter, Tweetdeck juga menyediakan akses ke Facebook, Foursquare, MySpace, dll. Bisa multi account juga :)
Seesmic
Aplikasi yang hampir serupa dengan Tweetdeck, namun dengan theme yang sedikit lebih terang. Dan berdasarkan pengalaman Saya, Seesmic lebih ringan daripada Tweetdeck. Seesmic pun menyediakan fitur untuk akses ke Twitter, Facebook, Foursquare,dll.
Chrome Bird

Favorit Saya! Kenapa jadi favorit Saya? Chrome bird ini simple. Fiturnya pun sudah cukup buat Saya, bisa short link, upload picture, search, dan fitur-fitur utama twitter. Chrome bird ini merupakan add-ons buat browser Google Chrome. Chrome bird langsung terinstal di Google Chrome, jadi dibagian atas kanan akan ada angka notifikasi jumlah tweet baru. Jika ada mention/DM untuk kita pun akan muncul notifikasinya
Twirhl

Twitter client yang juga bekerjasama dengan Seesmic. Fitur-fitur utama buat Twitter-an tentunya tersedia di Twhirl. Bisa multi account juga loh. Tidak lupa fitur short link, notifikasi & auto refresh timeline.  Menariknya, theme Twhirl ini bisa diganti-ganti. Ada lebih dari 10 theme menarik yang disediakan, bisa disesuaikan dengan selera / warna kesukaanmu! ;)
Echofon
Nah, Echofon ini add-ons seperti Chrome Bird tapi buat di mozilla. Cocok buat kamu penggemar mozilla sebagai browser default. Jadi bisa sambil browsing bisa sambil twitter-an juga. Ada fitur Share web yang berguna men-share halaman web yang sedang kita buka. Tampilannya mirip twitter di iPhone. Echofon juga tersedia untuk iPhone, iPad dan Mac.
Power Twitter

Add-ons yang bisa hampir di semua browser. Mozilla, Chrome, Safari dan Greasemonkey. Kalau kita pakai Power Twitter, bisa preview photo / video langsung dari halaman twitter kita. Jadi tidak perlu buka link di tab baru. Power Twitter ini tinggal kita instal, kemudian kita akses langsung dari www.twitter.com. Jadi Power Twitter semacam memberikan fitur tambahan kalau kita mengakses website Twitter.
So, itu beberapa rekomendasi aplikasi / add-ons Twitter untuk di komputer,laptop, atau notebook kamu. Semua aplikasi diatas sudah Saya coba 
Bagaimana dengan kamu? Punya aplikasi lain buat twitter-an di laptop? share di sesi komentar ya 

Minggu, 06 Juli 2014

cara membuat website dgn HTML
Di artikel sebelumnya kita sudah membuat sketsa/mockup dan saya juga sudah menyertakan source codenya.
Source code tersebut kita modifikasi sedikit agar terlihat lebih baik. Bagi yang belum tahu bisa baca artikel http://roypurbo.blogspot.com/2013/03/cara-membuat-membuat-website-dengan.html.
Pertama anda bisa membuat headernya terlebih dahulu atau mencari di mbah google. Kalau sudah ada kita tinggal mengimplementasikannya.
Ini adalah source code yang sudah saya modifikasi ::
 
<table width="960" height="814" border="1" align="center" cellpadding="0" cellspacing="0" style="border:thin">
    <tr>
      <td height="118" colspan="4"><img src="blog/header-mana1.jpg" width="960" height="200" /></td>
    </tr>
    <tr bgcolor="#006699" bordercolor="#CCCCCC">
      <td width="214" height="25"><div align="center"><strong>Home</strong></div></td>
      <td width="222"><div align="center"><strong>Artikel</strong></div></td>
      <td width="284"><div align="center"><strong>Buku Tamu </strong></div></td>
      <td width="234"><div align="center"><strong>About</strong></div></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2"><div align="left">
        <p><strong><em>Judul Artikel</em></strong></p>
        <div align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing ornare cursus. Aliquam a nulla sapien. Sed facilisis ultricies purus, sed dapibus eros auctor vel. Phasellus et est nibh. Sed sagittis neque vel magna euismod ut vulputate sapien tempus. Fusce feugiat condimentum nulla. Aliquam quis convallis nunc. Nulla eu eros quam. Heading H1Suspendisse elementum tincidunt mi, non dictum nibh molestie a. In placerat rutrum felis, eu lacinia nunc eleifend vitae.
        </div>
      </div></td>
      <td height="28" bgcolor="#999999"><div align="center" class="style1">Kategori</div></td>
    </tr>
    <tr>
      <td rowspan="2"> </td>
    </tr>
    
    <tr>
      <td height="196" colspan="3"><table width="725" height="467" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="21" colspan="3" bgcolor="#006699"><div align="center">Galleri</div></td>
          </tr>
        <tr>
          <td width="235"><img src="blog/sponge.jpeg" width="235" height="214" /></td>
          <td width="235"><img src="blog/Spongebob Squarepants.jpg" width="235" height="214" /></td>
          <td width="470"><img src="blog/SpongeBob-SquarePants-p78.jpg" width="235" height="214" /></td>
        </tr>
        <tr>
          <td><img src="blog/images12.jpeg" width="188" height="171" /></td>
          <td><img src="blog/casper.jpg" width="235" height="214" /></td>
          <td><img src="blog/sosialisasi.jpg" width="235" height="214" /></td>
        </tr>
      </table></td>
    </tr>
    <tr bgcolor="#006666">
      <td height="1" colspan="4"><div align="center">Footer</div></td>
    </tr>
  </table>


Penjelasannya :
  • Saya menggunakkan header dengan ukuran 960x200.
  • <img ... > gunanya untuk menampilkan gambar di website.
Saya kira cukup itu saja penjelasannya, bagi teman-teman yang tidak paham silahkan baca artikel sebelumnya.

Hasil tampilan ::

hasil tampilan membuat website dengan HTML bag 2
 Ini hanya lah contoh cara membuat website dengan HTML, jadi teman-teman bisa berkreasi sendiri cara membuat layout websitenya. Semoga artikel ini bermanfaat buat kalian semua. (RP)

Sumber SharingRPL

Cara membuat website dengan HTML

cara membuat website

Pada artikel-artikel sebelumnya, saya sudah membahas cara membuat Hyperlink, cara membuat table, terus saya juga sudah memberikan contoh cara membuat login form dengan HTML.
Dan artikel saya ini saya akan membahas cara membuat website dengan HTML.
Sebelum kita melangkah dalam cara membuat website, terlebih dahulu kita membuat sketsa website.
Alasan mengapa kita membuat sketsa duluan karena katanya yang paling sulit itu menentukan layout website. Kalau layout ada perubahan bisa jadi pada source yang lain juga banyak di rubah. Tapi itu sering terjadi jika kita download theme yang sudah jadi bukan bikinan sendiri.
Ini tampilan sketsa yang saya bikin ::
Dan ini adalah source codenya::

 
<table width="863" height="580" border="1" align="center">
    <tr>
      <td height="118" colspan="4"><div align="center">Header</div></td>
    </tr>
    <tr>
      <td width="166" height="25">Home</td>
      <td width="182">Artikel</td>
      <td width="259">Buku Tamu </td>
      <td width="228">About</td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2"><div align="center">Isi Berita </div></td>
      <td height="28">Kategori</td>
    </tr>
    <tr>
      <td rowspan="2"> </td>
    </tr>
    
    <tr>
      <td height="196" colspan="3"><table width="621" height="201" border="1">
        <tr>
          <td colspan="3"><div align="center">Galleri</div></td>
          </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td height="1" colspan="4"><div align="center">Footer</div></td>
    </tr>
  </table>


Maaf Hasil tampilannya tidak bisa di perlihatkan, jadi teman-teman bisa mencobanya langsung.  Atikel ini saya akhiri sampai disini dlu sambungannya nanti saya tulis dalam artkel yang selanjutnya.

Mohon maaf karena ketidak nyamanan ini
Salam Hangat Dari saya.

Sumber SharingRPL

Membuat Table bagian 2
Di artikel yang sebelumnya sudah saya jelaskan cara membuat table sederhana. Kali ini saya akan memberikan tips kepada teman-teman untuk mempercantik table.
Tapi sebelum saya jelaskan bagaimana cara mempercantik table, akan saya jelaskan sedikit cara untuk menggabungkan row dan colum di table.

 
<table border="1">
  <tr>
    <th rowspan="2">NPM</th>
    <th rowspan="2">Nama</th>
    <th colspan="2">Mata Kuliah</th>
  </tr>
  <tr>
    <th>Nilai Bahasa Indonesia</th>
    <th>Nilai PBO</th>
  </tr>
  <tr>
    <td>1920133</td>
    <td>roy purbo</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
</table>


Dari potongan source code diatas attribut rowspan & colspan bernilai 2. Artinya saat kita berikan nilai pada attribut tersebut, row dan colum akan bergabung. Dari pada bingung dengan penjelasan saya, ini tampilan dari code diatas ::
NPM Nama Mata Kuliah
Nilai Bahasa Indonesia Nilai PBO
1920133 roy purbo A A

Pada table juga kita bisa memasukkan attribut align, yang artinya kita bisa membuat text punya kita menjadi rata tengah, kiri dan juga kanan.
Table juga bisa kita beri sentuhan warna agar menarik. Kita tinggal menambahkan attribut bgcolor.
 
<table border="1" cellpadding="1" cellspacing="0">
  <tr bgcolor="#3785ee">
    <th rowspan="2">NPM</th>
    <th rowspan="2">Nama</th>
    <th colspan="2">Mata Kuliah</th>
  </tr>
  <tr bgcolor="#3785ee">
    <th>Nilai Bahasa Indonesia</th>
    <th>Nilai PBO</th>
  </tr>
  <tr bgcolor="a9c9f4">
    <td>1920133</td>
    <td>roy purbo</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
</table>


Hasilnya tampilan code diatas ::

NPM Nama Mata Kuliah
Nilai Bahasa Indonesia Nilai PBO
1920133 roy purbo A A

Bagaimana ?? mudah sajakan. Selebihnya teman-teman bisa mengutak-atik sendiri. Jangan pernah menyerah sebelum mencoba ... itu saja kata-kata dari aku.

membuat table
Beragam macam kegunaan Table dalam membuat website. Kalau kita ingin membuat laporan di website kita banyak menggunakan fitur yang satu ini. 
Selain dalam pembuatan laporan, table juga bisa di gunakan untuk menata layout website.
Tapi kali ini kita akan membahas cara dasarnya saja. Untuk pembahasan tingkat lanjut, tunggu pada artikel berikutnya.

Perintah dasar dalam pembuata tabel ::


 
 <table border="1">
  <tr>
    <th>NPM</th>
    <th>Nama</th>
  </tr>
  <tr>
    <td>1920133</td>
    <td>roy purbo</td>
  </tr>
</table> 


Dari potongan source code diatas dapat kita ambil kesimpulan, untuk membuat sebuah table ::

  • <table>...</table> digunakan sebagai awalan table. Attribut border berguna untuk menampilkan        garis. Jika attribut border kita beri nilai 0, maka garis pada table tidak akan terlihat.
  • <tr>...<tr> : untuk awalan baris. tr singkatan dari table row.
  • <th>...</th> : digunakan untuk membuat table header. th singkatan dari table head.
  • <td>...</td> : untuk menyusun kolom data. td singkatan dari table data.
Ini adalah tampilan dari potongan source diatas ::

NPM Nama
1920133 roy purbo

;;

Curahan Hati Sang Admin


By :
Free Blog Templates

Welcome To Cheater Garang

Ini hanyalah pajangan saja

Silahkan Like Fans Pagenya untuk bisa update postingan yg lainnya dan jika kalian ingin bertanya tentang artikel yg tidak mengerti silahkan invite pin saya 76735C10 atau Follow @FS_GarangGarong

Tutorial Blog

Like Fans pagenya : Klik Disini

Cheater Garang

Lost your password?

Not a member yet? Sign Up!