Selamat Datang Di Blog Fherry Putra Madamba Semoga Blog Ini Bisa Membantu Sahabat. Makasih Telah Berkunjung Di Blog Fherry Putra Madamba Fherry Putra Madamba: Oktober 2013

Hati

Cari Blog Ini

Selasa, 01 Oktober 2013

MENGGANTI BACKGROUND TEMPLATE BLOG DENGAN GAMBAR

Sebenarnya blogger telah menyediakan perancang template blogger guna penyesuaian template untuk penggunanya. Di sini Anda bisa sangat mudah merubah template Anda sesuai yang Anda inginkan. Bahkan Anda bisa mengganti latar belakang warna atau gambar background template yang telah disediakan oleh perancang template blogger.
Tapi bagaimana jika Anda ingin mengganti background template dengan gambar milik Anda sendiri.

Di sini saya ingin berbagi dengan Anda bagaimana cara mengganti background template dengan gambar milik kita sendiri, khususnya bagi Anda yang baru menggunakan blog di blogger.
  • Pertama yang harus Anda siapkan adalah sebuah gambar yang Anda inginkan.
    Gambar tidak perlu terlalu besar, jika terlalu besar bisa Anda potong atau kecilkan.
    Kemudian upload gambar tersebut dimana Anda biasa upload gambar di internet.
    Selanjutnya Anda ambil alamat gambarnya.

  • Sebagai contoh di sini saya mempunyai alamat gambar seperti ini:

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2D2JWv7Z3J-H5cUW74TJvJwVFeuxA8hlO-YZ1irH6hyX8GaAHItlC5D4F-51XCZTurroEwjVKAF0J2oYnZAGjYwvTaSrUkcpL1aqMEy5xA_-UTgq7DSgwzPfhZwTT-elt2nWOdkWGw4/s1600/batik.jpg

    Tambahkan kode pada alamat gambar Anda sehingga seperti ini:

    background-image:url ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2D2JWv7Z3J-H5cUW74TJvJwVFeuxA8hlO-YZ1irH6hyX8GaAHItlC5D4F-51XCZTurroEwjVKAF0J2oYnZAGjYwvTaSrUkcpL1aqMEy5xA_-UTgq7DSgwzPfhZwTT-elt2nWOdkWGw4/s1600/batik.jpg");
  • Dan ini adalah bentuk gambar milik saya:
  • Jika alamat gambar Anda sudah siap, sekarang yang harus Anda lakukan adalah login ke blog Anda.

  • Pilih blog yang ingin Anda ganti backgroundnya.

  • Kemudian pilih template.

  • Selanjutnya pilih edit html.

  • Cari kode seperti di bawah ini:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    padding: 0 $(content.shadow.spread) $(content.shadow.spread)

    $(content.shadow.spread);
    $(body.background.override)
    }

  • Lihat yang saya beri tanda merah, ganti dengan alamat Anda yang tadi telah dirubah kodenya.
    Hingga hasilnya seperti di bawah ini:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background-image:url ("http://3.bp.blogspot.com/-CSoH_Ia5ti4/UN7gQ1ZnZaI/AAAAAAAAAB8/iwoeeDS_Vk/s1600/batik.jpg");
    padding: 0 $(content.shadow.spread) $(content.shadow.spread)

    $(content.shadow.spread);
    $(body.background.override)
    }

  • Lihat perubahan melalui pratinjau.

  • Setelah Anda rasa sesuai kemudian boleh Anda simpan template.
By Fherry Putra Madamba

Cara buat tabel pada blog

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat tabel dalam postingan pada blogspot.

Cara Membuat Tabel Di Blog Blogger

Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:

<table> dan </table>
<tr> dan </tr>
<td> dan </td> 


Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...

YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...

Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

  • Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table> 


Dan Hasilnya akan terlihat seperti ini:
Kolom 1 Kolom 2

Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan atau Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini :

Kolom 1 Kolom 2 Kolom 3

  • Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table> 

Hasilnya Seperti ini:
Kolom 1 A Kolom 1 B
Kolom 2 A Kolom 2 B

Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan 1 atau 2 </td> di antara <tr> dan </tr> pertama dan kedua
Contoh:
<table width="500" border="1">
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>

Maka hasilya seperti ini :
Kolom 1 A Kolom 2 A Kolom Tambahan 1
Kolom 1 B Kolom 2 B Kolom Tambahan 2

  • Membuat Tabel 3 Kolom kesamping dan 3 kolom kebawah. jika ingin membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>

Hasil kode htmlnya akan seperti ini :
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>

Dan hasil tabelnya akan terlihat seperti ini :
Kolom 1 A Kolom 1 B Kolom 1 C
Kolom 2 A Kolom 2 B Kolom 2 C
Kolom 3 A Kolom 3 B Kolom 3 C

Keterangan :
  • Pada tulisan yang saya tulis kolom 1, kolom 1A, kolom 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan. 
  • Sedangkan kode ini.
<table width="500" border="1">
  • Kode yang saya beri warna biru "500" adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.
Mau Coba Praktek?...

Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja kode yang sudah saya tuliskan di atas, terserah mau pakai yang mana.

Namun jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini :
th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}

Jika anda sudah faham CSS silahkan bikin kode CSS tabel sesuai selera anda.

Wah saya ga tau gimana dan di mana meletakkan CSSnya.

Untuk menambahkan CSS yang saya tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah tempat persemayaman CSS blog blogger anda (Untuk bagian Edit Html ini nanti akan saya bahas secara tersendiri)

Demikian blogger tutorial mengenai Cara Membuat Tabel Ke Dalam Postingan pada Blogspot.


Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^
By Fherry Putra Madamba