Langsung ke konten utama

Create Tables With MS Word

Siang All
Table terkadang dibutuhkan untuk melengkapi artikel yang kita buat ,sayangnya blogspot tak menyediakan tool penggunaan table pada editor artikelnya. Diluar sana banyak situs online untuk membuat table seperti TABLAIZER , tapi kali ini team [OBC] tidak akan membahas  penggunaan situs tersebut , melainkan menggunakan jasa Microsoft Word dalam membuat table dalam postingan blogspot. 


# Langkah Pertama 

Buka Microsoft word dari menu start , kalau belum punya bisa mendownload dan instalasi terlebih dahulu. Kali ini saya menggunakan Microsoft Word 2010 , setelah membuka MS Word buatlah sebuat table lalu pergi ke Sisipkan > Table > Grid Table untuk memilih jumlah baris kolom yang dibutuhkan. Misalnya sobat membuat kolom 3x3 , maka sobat harus memilih 3 baris dan 3 kolom seperti yang terdapat pada gambar dibawah ini 


Setelah table siap dan sekarang kita lanjutkan ke tahap selanjutnya . Tapi sebelumnya mungkin sobat ingin mempercantik terlebih dahulu penampilan tablenya supaya terlihat lebih keren dan elegant  , silahkan sobat pergi ke tombol > Design .


Sobat bisa memilih bentuk dan design table atau merubah jarak kolom yang sesuai dengan selera sobat , seperti pilihan design diatas  . Hasil yang saya contohkan seperti dibawah ini


# Langkah kedua 

Setelah sobat merasa puas dengan tablenya, saatnya kita mendapatkan kode HTML nya untuk dimasukan pada postingan. 

  • Pertama, sobat simpan file nya kedalam ekstensi HTML , caranya Klik File > Save as dari daftar dropdown pilih terlebih dahulu setelan save > Webpage/Filtered > lalu Save . 
  • Sekarang sobat buka file yang telah disimpan tadi klik kanan > Open With >> Notepad "

Selanjutnya sobat Copy Kode HTML , seperti gambar dibawah ini. 


setelah sobat copy kode HTML nya silahakan sobat masukan /paste pada postingan dengan Editor HTML , bukan compose , selanjutnya publish postingan sobat. Begitulah kira-kira membuat table pada postingan dengan menggunakan MS Word . Good Luck & Thank

MyBlogerLab

Komentar

  1. wahh .. keren, ternyata ada caranya pake offline ya :D

    baru tau saya, biasanya cuma kopi paste doang kalo tabelnya ahaha *maklum .

    BalasHapus
    Balasan
    1. lumayan miz ...
      gak di maklum ko hehe

      Hapus
    2. kalo saya biasa pake kopi mix dong :)

      Hapus
    3. mau tanya..

      kalo kopipaste dari word, kan htmlnya beda tuh.. ngaruh gak dalam posisi di gugel?!.

      aku pernah nulis di word terus kopi dan pastekan di dalam postingan blogger tapi dalam htmlnya tuh ada tulisan word13/ dokumenC balabalablablaa gitu..
      dan setelah di posting di dalam deskripsi yang keluar tuh htmlnya bukan tulisan asli dari compose..

      itu ngefek gak sama blognya?!, soalnya takut salah :D .

      Hapus
    4. Mas Bud : mantapz kalau yang berhubungan dengan kopi mah saya suka hehe
      Miz : tidak miz kalau saving kita dengan wab page dan paste di html editor hasilnya akn sesuai dengan bentuk table nya

      Hapus
  2. makasih infony

    BalasHapus
  3. Alhamdulillah dapat pengetahuan baru yg penuh manfaat sobat, ijin mempelajari dulu nih
    terima kasih sudah berbagi

    BalasHapus
    Balasan
    1. silahkan kawanku PP dipelajari dulu saja yah hehehe

      Hapus
    2. Terima kasih Kang Dede, pokonya dicoba dulu..hehe

      Hapus
    3. all , maaf nih baru sempet bales biasa sibuk di duta kata kang dd mah

      Hapus
  4. wah...menarik tutornya kang
    blm pernah posting pke tabel soale hehe
    besok2 ta coba deh..

    BalasHapus
    Balasan
    1. pasti masih disimpen dalem kulkas ya mas :)

      Hapus
    2. soale opo Mas Budi,?? pasti disimpan dulu sampai mateng jiakakak

      Hapus
    3. jangan lama lama nanti lama lama aku di ambil orang hehe

      Hapus
  5. simple juga ya kang ternyata, tinggal buka ms.word bikin table langsung simpan alahasil tabelpun siap digunakan secara onlen tinggal ambil kode htmlnya saja

    BalasHapus
    Balasan
    1. kayanya begitu tuh,tapi buat saya gak simple malah ruwet soalnya masih gaptek hihi

      Hapus
    2. Iya benar mas andes, ternyata memang simple yah...., tapi apa kang Dede kok bisa ruwet kenapapa yah..??

      Hapus
  6. mantap mas, terimakasih infonya sangat membantu sekali

    BalasHapus
  7. asiiik,... ternyata ada cara yg mudah yah memasang table di blog.... aku baru tau kang... makasih kang, ngopi dulu ah kang... :D

    BalasHapus
  8. ilmu yang bermanfaat ,,,,
    makasih dah berbagi kak

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition: