Home    About    Artikel        Blog Contoh
Tampilkan postingan dengan label tips. Tampilkan semua postingan
Tampilkan postingan dengan label tips. Tampilkan semua postingan

Jumat, 24 Februari 2017

Cara Memperbaiki Foto Blur di Blog



https://youtu.be/N7jURnhaCRY

Ini adalah Video tentang Cara Memperbaiki Foto Blur di Blog

Diposting oleh di Tidak ada komentar:
Label:

Cara Mengganti Warna Menu dengan CSS


https://youtu.be/wYJXQUMuEm0

Ini adalah video tentang Cara Mengganti Warna Menu dengan CSS


Diposting oleh di Tidak ada komentar:
Label:

Cara Membuat Header dalam Bentuk Teks




Sumber:  https://youtu.be/P0lbFQlGATk


Ini adalah video tentang Cara Membuat Header dalam bentuk Teks.

Diposting oleh di Tidak ada komentar:
Label:

Senin, 23 Januari 2017

Cara Membuat Kolase Foto di Pixlr Express



Kolase Foto dengan Watermark di Pixlr Express
Baca selanjutnya »
Diposting oleh di Tidak ada komentar:
Label:

Watermark Foto

Foto yang diberi Watermmark yang dibuat menggunakan Pixlr Express

Baca selanjutnya »
Diposting oleh di Tidak ada komentar:
Label:

Minggu, 22 Januari 2017

Cara Memperbaiki Hover Link di Blogspot

https://youtu.be/Bjpsi35nKho
cara memeperbaiki hover link yang tidak bekerja di blogspot
Diposting oleh di Tidak ada komentar:
Label:

Kamis, 19 Januari 2017

Cara Mencari Ilustrasi Konten

https://youtu.be/ST6rsQaQ9GM


Salah satu cara untuk mempercantik blog dan membuat blog lebih nyaman dibaca adalah dengan menyertakan gambar/foto di dalam posting. 

Foto/ilustrasi dalam blog tak harus selamanya foto pribadi kita. 

Kita bisa membeli atau memakai foto buatan orang lain yang kita dapat dari internet.

Note:  Jangan lupa sebelum mendownload foto buatan orang lain yang kita dapat dari internet yang free gratis, register dulu agr Kita dapat mendownload.

Diposting oleh di 1 komentar:
Label:

Jumat, 13 Januari 2017

Cara Mengatur Posisi Text Header ke Tengah

Text Header posisinya Center
Baca selanjutnya »
Diposting oleh di Tidak ada komentar:
Label:

Selasa, 10 Januari 2017

Cara Membuat Freebies Foto

Baca selanjutnya »
Diposting oleh di Tidak ada komentar:
Label:

Senin, 09 Januari 2017

Cara Membuat Kolase Foto di photovisi.com


Baca selanjutnya »
Diposting oleh di Tidak ada komentar:
Label:

Cara Membuat Tabel di Post atau Page sebuah Blog

Cara Membuat Tabel tersebut, masukan script ini pada tab html di sebuah Post atau Page di dashboard Blogspot atau Blogger Anda:

 

  1. Untuk tampilan TABEL yang Responsif

    Responsive Table

    First Name Last Name Job Title Favorite Color Wars or Trek? Porn Name Date of Birth
    James Matman Chief Sandwich Eater Lettuce Green Trek Digby Green January 13, 1979
    The Tick Crimefighter Sorta Blue Wars John Smith July 19, 1968
    Jokey Smurf Giving Exploding Presents Smurflow Smurf Smurflane Smurfmutt Smurfuary Smurfteenth, 1945
    Cindy Beyler Sales Representative Red Wars Lori Quivey July 5, 1956
    Captain Cool Tree Crusher Blue Wars Steve 42nd December 13, 1982
    <div id="page-wrap" style="height: 323; width: 593;">
    <h1 style="line-height: 150%; margin-bottom: 3;">
    Responsive Table</h1>
    <table>
      <thead>
    <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Job Title</th>
       <th>Favorite Color</th>
       <th>Wars or Trek?</th>
       <th>Porn Name</th>
       <th>Date of Birth</th>
      </tr>
    </thead>
      <tbody>
    <tr>
       <td>James</td>
       <td>Matman</td>
       <td>Chief Sandwich Eater</td>
       <td>Lettuce Green</td>
       <td>Trek</td>
       <td>Digby Green</td>
       <td>January 13, 1979</td>
      </tr>
    <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
        <td>Blue</td>
        <td>Wars</td>
        <td>John Smith</td>
        <td>July 19, 1968</td>
      </tr>
    <tr>
        <td>Jokey</td>
        <td>Smurf</td>
        <td>Giving Exploding Presents</td>
        <td>Smurflow</td>
        <td>Smurf</td>
        <td>Smurflane Smurfmutt</td>
        <td>Smurfuary Smurfteenth, 1945</td>
      </tr>
    <tr>
        <td>Cindy</td>
        <td>Beyler</td>
        <td>Sales Representative</td>
        <td>Red</td>
        <td>Wars</td>
        <td>Lori Quivey</td>
        <td>July 5, 1956</td>
      </tr>
    <tr>
        <td>Captain</td>
        <td>Cool</td>
        <td>Tree Crusher</td>
        <td>Blue</td>
        <td>Wars</td>
        <td>Steve 42nd</td>
        <td>December 13, 1982</td>
      </tr>
    </tbody>
     </table>
    </div>



  2. Untuk tampilan TABEL yang tidak Responsif

    Non-Responsive Table

    First Name Last Name Job Title Favorite Color Porn Name Date of Birth
    James Matman Chief Sandwich Eater Lettuce Green Digby Green January 13, 1979
    The Tick Crimefighter Sorta Blue John Smith July 19, 1968
    Jokey Smurf Giving Exploding Presents Smurflow Smurflane Smurfmutt Smurfuary Smurfteenth, 1945
    Cindy Beyler Sales Representative Red Lori Quivey July 5, 1956
    Captain Cool Tree Crusher Blue Steve 42nd December 13, 1982
    <div align="center">
    <div id="page-wrap" style="height: 276; width: 518;">
    <h1 style="line-height: 150%; margin-bottom: 3;">
    Non-Responsive Table</h1>
    <center>
     
     <table>
      <tbody>
    <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Job Title</th>
       <th>Favorite Color</th>
       <th>Porn Name</th>
       <th>Date of Birth</th>
      </tr>
    <tr>
       <td>James</td>
       <td>Matman</td>
       <td>Chief Sandwich Eater</td>
       <td>Lettuce Green</td>
       <td>Digby Green</td>
       <td>January 13, 1979</td>
      </tr>
    <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
        <td>Blue</td>
        <td>John Smith</td>
        <td>July 19, 1968</td>
      </tr>
    <tr>
        <td>Jokey</td>
        <td>Smurf</td>
        <td>Giving Exploding Presents</td>
        <td>Smurflow</td>
        <td>Smurflane Smurfmutt</td>
        <td>Smurfuary Smurfteenth, 1945</td>
      </tr>
    <tr>
        <td>Cindy</td>
        <td>Beyler</td>
        <td>Sales Representative</td>
        <td>Red</td>
        <td>Lori Quivey</td>
        <td>July 5, 1956</td>
      </tr>
    <tr>
        <td>Captain</td>
        <td>Cool</td>
        <td>Tree Crusher</td>
        <td>Blue</td>
        <td>Steve 42nd</td>
        <td>December 13, 1982</td>
      </tr>
    </tbody></table>
    </center>
    </div>
    </div>

     

 

Lalu masukan Script TABEL ini ke Tambah CSS di dashboard Blogspotatau Blogger Anda:

/* Tabel Orange di Blogspot */
    * {
    margin: 0;
    padding: 0;
}
body {
    font: 12px/1.4 Georgia, Serif; text-align: justify;
}
#page-wrap {
    margin: 10px;
}
p {
    margin: 20px 0;
}

    /*
    Generic Styling, for Desktops/Laptops
    */
    table {
        width: 100%;
        border-collapse: collapse;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        background: #F8DD9A; /* warna orange muda*/
    }
    th {
        background: #523C05; /* warna orange tua*/
        color: white;
        font-weight: bold;
    }
    td, th {
        padding: 6px;
        border: 1px solid #000; /* warna orange hitam*/
        text-align: left;
    }

Hasilnya seperti ini:
Tampilannya akan seperti ini kalau dilihat di browser Internet Explorer (IE)

Tampilannya akan seperti ini kalau dilihat di broser  Firefox (Mozila) dan Chrome


dan hasilnya seperti ini, jika kolom pada tabelnya banyak:


Jika ingin tampilan warna Tabelnya seperti gambar dibawah ini:


Maka script CSS diatas diubah menjadi seperti ini:
 
/* Tabel Biru di Blogspot */

* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/1.4 Georgia, Serif;
}
#page-wrap {
    margin: 50px;
}
p {
    margin: 20px 0;
}

    /*
    Generic Styling, for Desktops/Laptops
    */
    table {
        width: 100%;
        border-collapse: collapse;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        background: #eee;
    }
    th {
        background: #333;
        color: white;
        font-weight: bold;
    }
    td, th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
    }

SUMBER:

https://css-tricks.com/responsive-data-tables

SELESAI, SELAMAT MENCOBA !!!

NOTE:

Anda tinggal mengganti Judul Tabel dan isinya sesuai dengan yang diinginkan
Diposting oleh di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)