Cara Membuat Background Gambar Pada Kotak Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Kamis, 19 April 2012 0 komentar
Cara Membuat Background Gambar Pada Kotak Komentar
Silahkan sobat Copy Paste Script di bawah ini sebelum kode ]]></b:skin> kemudian simpan di blogs sobat

#comment-form iframe{
   background:#ffffff url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/Blogspot-Variasi-Blogger-1.jpg) ;
   border:1px solid #9999FF;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:450px;
   height:230px;
   }

#comment-form iframe:hover{
   background:#000000 url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/rumput.jpg);
   border:1px solid #999FFF;
   }

Dengan cara Silahkan Log in ke blogs sobat >> klik Rancangan >> klik Edit Html >> centang Expand Template Widget , kemudian tekan Ctrl + f silahkan paste script ]]></b:skin> jika sudah ketemu silahkan paste script diatas , kemudian cari kembali script yang mirip di bawah ini

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='580'/>

jika sudah ketemu silahkan tambahkan kode script <div id='comment-form'> dan </div> diantara kode script di atas sehingga jika digabungkan akan seperti di bawah ini 

<div id='comment-form'>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='580'/>
</div>

kemudian Simpan dan Lihat Hasilnya , Semoga Bermanfaat
 Cara Membuat Background Gambar Pada Kotak Komentar




Baca Selengkapnya ....

cara untuk mengganti judul Menu bar dan Side Bar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown 0 komentar
cara untuk menggantu judul Menu bar dan Side Bar , caranya cukup simple namun agak sulit dimengerti jika kita tidak memperhatikannya dengan baik, oke mari kita mulai 

1. Log In ke blogger anda
2. Setelah itu pindahlah ke Tab Rancangan > Edit HTML
3. Bukalah Blog anda. *Pastikan blog anda memiliki Menu Bar dan Side Bar
4. Lalu pada gambar yang ingin diganti silahkan lakukan seperti gambar dibawah ini


cara untuk mengganti judul Menu bar dan Side Bar


5. Pada Gambar Pembatas Sidebar itu klik kanan dan pilih View Background Image
6. Maka  akan muncul tampilan Address gambar

cara untuk mengganti judul Menu bar dan Side Bar
7. Setelah itu, Copylah Address dari gambar yang didapat
8. Kembalilah ke EDIT HTML
9. Tekan CTRL + F lalu pastekan alamat tersebut.
10. Maka akan muncul tempat dimana kita akan menaruh Background baru

cara untuk mengganti judul Menu bar dan Side Bar

11. Sekarang kita akan membuat Background Side Bar yang baru lewat situs Cooltext.com
12. Buka Cooltext lalu pilih Button
cara untuk mengganti judul Menu bar dan Side Bar

 13. Buatlah Gambar sendiri dengan Kreativitas anda, dan Jangan lupa untuk MENGOSONGKAN TULISAN pada tombol itu untuk dijadikan background


cara untuk mengganti judul Menu bar dan Side Bar

14. Jika sudah diatur, klik RENDER BUTTON
15. Download gambar tersebut dan upload di Situs lain atau di blogger juga. Perhatikan gambar berikut
cara untuk mengganti judul Menu bar dan Side Bar

16. Setelah selesai anda COPAS di tempat Edit HTML tadi.


cara untuk mengganti judul Menu bar dan Side Bar



PROBLEM :
1. Sidebar saya tidak terdapat gambar ?
Caranya cukup mudah
Masuklah ke EDIT HTML lalu cari

".sidebar h2" atau "#sidebar h2" atau "sidebar post title"
2. Backgroundnya tidak sama rata ?
Caranya cukup merubah LEBAR dan TINGGI gambar yang anda buat tadi. Setelah itu upload lagi dan Copy lagi

3. Gambarnya Kecil, padahal Imagenya sudah besar.  ?
Perhatikan Code dibelakang tag MARGIN, WIDTH, Lebih baik gunakan code yang sudah saya berikan

sidebar h2 {margin: 10px 0 0 0;padding: 6px 0 20px 0;background: url(URL GAMBAR ANDA) top left no-repeat;font-size: 16px;font-family: Arial, Helvetica, Sans-serif;font-weight: bold;color: #464646;

NB : CARA INI BERLAKU UNTUK MENGUBAH BACKGROUND LAINNYA, SEPERTI NAV BAR MENU, POST BACKGROUND.
cara untuk menggantu judul Menu bar dan Side Bar

Baca Selengkapnya ....

Cara Membuat 2 Kolom di bawah sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Senin, 16 April 2012 0 komentar
Cara Membuat 2 Kolom di bawah sidebar
tutorial agar sidebar template anda menjadi terbagi 2 di bagian bawahnya.

Kira-kira seperti ini gambarnya

Cara Membuat 2 Kolom di bawah sidebar

Kalo uda ditambahkan akan menjadi seperti gambar di bawah

Cara Membuat 2 Kolom di bawah sidebar

Langsung saja ini dia caranya:
- login dulu ke akun blogger
- masuk dashboard --> Tata Letak --> Edit HTML
- Cari kode di bawah ini atau biar lebih mudah kita gunakan CTRL + F (biar lebih gampang dalam mencari)
#sidebar-wrapper{ width:320px;  float:$endSide;  word-wrap:break-word;  overflow:hidden}
- Lalu copy kode berikut dan letakkan di bawah nya
.singlesidebar {float:$endSide;  word-wrap:break-word;  overflow:hidden}
- Setelah itu klik save.
- Lalu cari kode berikut
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>
- kemudian hapus dan gantikan dengan kode di bawah ini
<div id='sidebar-wrapper'>
<div class='singlesidebar' style='width:100%'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>


<div style='width:100%'><div class='singlesidebar' style='width:50%; float:left;'>
          <b:section class='sidebar' id='sidebar1' preferred='yes'/>
        </div>


<div class='singlesidebar' style='width:50%;float:right;'>
          <b:section class='sidebar' id='sidebar2' preferred='yes'/>
        </div>
        </div><div style='clear:both'/>
      </div>
- Lalu save dan lihat hasilnya.

Artikel ini tentang Cara Membuat 2 Kolom di bawah sidebar


Baca Selengkapnya ....

Membuat 3 Kolom Baru di Bawah Header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown 0 komentar
Membuat 3 Kolom Baru di Bawah Header | Tutorial tambah kolom baru

Cara membuat head menjadi 3 kolom :

1.  Login ke blogger.
2.  Setelah masuk dasbor lalu pilih Tata Letak.
3.  setelah itu klik Edit HTML.
4.  Cari kode ]]></b:skin> 

5.  Copy kode di bawah ini dan simpan di atas kode ]]></b:skin>

    #Header-column-divide {
    clear:both;
    }
    .header-column {
    padding: 10px;
    }


    #header-column-divide {
    clear:both;
    }
    .header-column {
    padding: 10px;
    }


6.Selanjutnya Cari kode dibawah ini .

    <div id='header-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>


7.Jikalau sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .

    <div id='header-column-divide'>

    <div id='header1' style='width: 30%; float:left;
    margin:0; text-align:left;'>
    <b:section class='header-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='header2' style='width: 40%; float: left;
    margin:0; text-align: left;'>
    <b:section class='header-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='header3' style='width: 30%; float: right;
    margin:0; text-align: left;'>
    <b:section class='header-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/>
    </div>


8.Klik Simpan Template .

Artikel cintafido tentang Membuat 3 Kolom Baru di Bawah Header


Baca Selengkapnya ....

Cara Menambah Gadget diatas Header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Jumat, 13 April 2012 0 komentar
Cara Menambah Gadget diatas Header. Pada umumnya blog bawaan dari blogger tidak terdapat gadget yang berada diatas header. Tapi kita sering melihat web maupun blog yang meletakkan gadget diatas header, seperti iklan baris, baner, gambar, teks berjalan, animasi, atau apa saja sesuai selera atau kebutuhan blog. Lalu bagaimana cara menambah gadget diatas header ?.


Ok....Silahkan ikuti langkah - langkah berikut ini :
1. Login ke Blogger.
2. Klik Tata Letak/layout/rancangan.
3. Klik Edit HTML.
4. Lalu cari kode berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Catatan : 
Setiap template mempunyai kode yang berbeda-beda, cari saja yang mirip seperti kode diatas.

5. Ganti kode diatas dengan kode berikut ini :

<b:section class='header' id='header' preferred='yes'>

6. Klik Save Template
7. Klik Page Element -> 
Lihat perubahan yang terjadi, sudah terdapat penambahan add a gadget diatas header yang dapat anda isi sesuai kebutuhan blog anda.


Baca Selengkapnya ....

Cara membuat background random image pada header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown 0 komentar
Cara membuat background random image pada header. Pada tutorial ini  memberikan langkah-langkah cara membuat background gambar pada header yang tampil secara acak bergantian. Dan cara kerjanya yaitu background header mengalami perubahan background ketika halaman setiap kali kita refresh.

Dengan menambahkan fitur random image pada background header ini, seakan mengganti suasana tampilan blog kita..., Heboh kan?
Munculnya perubahan background tergantung jumlah gambar background header yang kita buat. Dan dibawah ini saya contohkan dengan 5 tampilan background gambar yang berbeda.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

Cara membuat background random image pada header

4. Cari kode di bawah ini atau yang mirip dengan kode ini :
<body>

5. Copy kode di bawah ini dan taruh tepat setelah kode <body> :
<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL GAMBAR UKURAN HEADER-1&quot;
HeaderImage[1]=&quot;URL GAMBAR UKURAN HEADER-2&quot;
HeaderImage[2]=&quot;URL GAMBAR UKURAN HEADER-3&quot;
HeaderImage[3]=&quot;URL GAMBAR UKURAN HEADER-4&quot;
HeaderImage[4]=&quot;URL GAMBAR UKURAN HEADER-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>
CATATAN:
Ganti "URL GAMBAR UKURAN HEADER" dengan URL gambar MILIK Anda.

Jika kode di atas tidak bekerja pada blog Anda, silahkan ganti "# header-wrapper" dengan "# header". (ID atau CSS pada bagian header).

Anda dapat menambahkan gambar yang berbeda untuk latar belakang header pada blog anda. Tapi ingat untuk memberi 5 gambar background,   pada bagian "var random" tertulis
"var random=Math.round(4*Math.random());"

Jadi bila anda ingin menambahkan menjadi 8 tampilan background yang berbeda, maka kode harus berubah menjadi seperti berikut :
"var random=Math.round(7*Math.random());".

Silahkan perhatikan cara penulisan di bawah ini.:
 <script type='text/javascript'>
var HeaderImage = new Array ()

HeaderImage [0] = "URL-OF-HEADER-CITRA-1"
HeaderImage [1] = "URL-OF-HEADER-CITRA-2"
HeaderImage [2] = "URL-OF-HEADER-CITRA-3"
HeaderImage [3] = "URL-OF-HEADER-CITRA-4"
HeaderImage [4] = "URL-OF-HEADER-CITRA-5"
HeaderImage [4] =" URL-OF-HEADER-CITRA-6"
HeaderImage [4] =" URL-OF-HEADER-CITRA-7"
HeaderImage [4] =" URL-OF-HEADER-CITRA-8"

var random = Math.round (7 * Math.random ());
document.write (" <style> ");
document.write (" # header-wrapper {");
document.write ('background: url ("' + HeaderImage [acak] + '") tidak mengulangi-kiri TOP;');
document.write ("}") ;
document.write ("</ style>");
</ script>

5. Simpan Template.

bila ada yang kurang tepat silahkan anda coba utak atik di HeaderImage[ ]

artikel ini tentang Cara membuat background random image pada header

Baca Selengkapnya ....

Cara Terbaru Mengembalikan Tampilan Blogger Lawas/Lama 2012

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Kamis, 12 April 2012 6 komentar
Sekarang Menu "Kembali Ke Tampilan Lawas" pada Dashboard Blogger sudah tidak ada, Tetapi saya punya Trik yang bagus dan jitu alias mujarab untuk Anda yang masih bingung menggunakan tampilan Blogger Yang baru Dan Ingin mengembalikan Kembali Tampilan Blogger yang Lawas/Lama.

Berikut ini Tips Dan Triknya :
1. Masuk Ke Blogger Dashboard Anda.

2. Maka Akan Tampilan Halaman Blogger yang Baru (Yang Membuat Anda Bingung)

3. Coba Sekarang Anda Cari Menu Setting, Biasanya Berbentuk Gambar Roda/Gear. Setelah Ketemu Klik saja Setting, Maka Sekarang Lihat URL di AddresBar Anda, URL menunjukkan draft.blogger.com/....ID=312321321....., dst.   Sekarang Anda ganti alamat URL blogger anda tersebut dengan http://www.blogger.com/html?blogID=.....(sesuaikan nomor ID anda)...

NB: mohon maaf, cara ini sekarang sudah tidak bisa .!

Baca Selengkapnya ....

tips memaksimalkan bandwith intenet anda

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Sabtu, 07 April 2012 0 komentar
tips memaksimalkan bandwith internet anda..ingat cara ini hanya untuk memaksimalkan berikut langkah - langkahnya :
1. start
2. pilih menu run
3. pada menu run ketik “gpedit.msc”
4. pada group policy,klik administrative template
5. pada tampilan sebelah kanan klik “network”
6. setelah itu, klik “Qos Packet scheduler”
7. pilih limit reservable bandwith
8. pilih enable dan rubah bandwith limitnya menjadi 0
9. klik apply dan tekan ok ingat,tekannya pake mouse,jangan pake jari ok
10. selesai

silahkan anda coba browsing pasti sedikitnya anda akan merasa ringan dari pada sebelumnya..jika masih kurang kencang,silahkan tambah bandwith anda dengan menghubungi ISP anda untuk menambah bandwith internet anda
terimakasih dan semoga bermanfaat. Artikel berjudul tips memaksimalkan bandwith internet anda

Baca Selengkapnya ....

Cara Menambah Kolom Antara Post dan Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Kamis, 05 April 2012 0 komentar
Cara Menambah Kolom Antara Post dan Sidebar. Biar tidak berkepanjangan kita langsung saja pada pokok pembahasan. untuk membuat satu kolom antara kolom post dan sidebar. yang pertama perlu anda perhatikan adalah ukuran lebar dari outer-wraper blog yang anda miliki. misalnya anda memiliki lebar auter-wraper 660px. nah untuk menambah kolom baru anda harus menambah lebar blog anda.

Untuk menambah kolom baru yang perlu anda perhatikan adalah kode-kode pada outer-wrapper berikut:
#outer-wrapper {
width: 680px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Nah untuk menambah kolom baru secara logika tentunya lebar dari Outer-wraper akan mengalami perubahan. pertama sekali yang harus di perhitungkan adalah, berapa lebar kolom yang ingin kita tambahkan. misalnya nilai dari kolom baru 230px; berarti jumlah keseluruhan lebar outer wrapper menjadi kira-kira 420px + 230px + 230px + 20 px = 880 pixel kemudian bisa kita tambahkan lagi 10 px untuk sela oute wraper sehingga lebar keseluruhan 890 pixel. jadi kode untuk penambahan kolom baru dari nilai di atas adalah:
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Nah setelah di tambah kan maka keseluruhan kodenya akan menjadi seperti ini:
#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
word-wrap: break-word;
overflow: hidden;
}
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Kode di atas merupakan langkah pertama yang harus kita tambahkan. berikut nya adalah menambah kode id untuk kolombaru tersebut. untuk kode id sidebar sebelum penambahan kolombaru adalah sebagai berikut:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
karna kita sudah menambah elemen baru pada sidebar, maka kita juga harus menambahkan id untuk elemen baru tersebut. id elemen baru tersebut adalah sebagai berikut
<div id='kolombaru-wrapper'>
<b:section class='sidebar' id='kolombaru' preferred='yes'>
</b:section>
</div>
Nah setelah menambahkan id kolom baru tersebut dengan id sidebar blog yang sebelumnya. sehingga menjadi seperti ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='kolombaru-wrapper'>
<b:section class='sidebar' id='kolombaru' preferred='yes'>
</b:section>
</div>
Selesai... simpan dan sekarang silahkan di cek pada tata letak blog anda. di sana akan terlihat kolom yang baru yang kita tambah kan tadi. untuk nilai header dan footer sebaiknya anda tambahkan menjadi 890 px. sehingga menjadi sama dengan nilai outer wraper. biar kelihatan lebih klop. Selamat mencoba.....

Cara Menambah Kolom Antara Post dan Sidebar

Baca Selengkapnya ....

Cara Menambah Kolom di Sidebar Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by Unknown Rabu, 04 April 2012 0 komentar
Cara Menambah Kolom di Sidebar Blog | Tutorial Buat 2 Gadget Baru | Tips trik.
Biasanya, ini dilakukan bila sidebar hanya  terdiri 1 kolom besar saja. Mari kita mulai ...
  • Log in ke blogger : dashboard >> layout >> Edit HTML
  • Cari kode di bawah (bisa gunakan Ctrl+F untuk mempercepat)
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
  • Kemudian, tambahkan kode di bawah, di antara </b:section> dan </div>.
<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text514' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text524' locked='false' title='Column 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
  • Kemudian, cari kode : ]]></b:skin>
  • Tambahkan kode CSS di bawah di atas ]]></b:skin>.
#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}
Note : Sobat bisa ubah nilai dari lebar/width, sesuai keinginan Anda.
  • Simpan Template sobat. Hasilnya akan tampak seperti di bawah ini
Cara Menambah Kolom di Sidebar Blog

cinta fido artikel postingan berjudul Cara Menambah Kolom di Sidebar Blog

    Baca Selengkapnya ....

    Memberi Background pada Table HTML

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown Selasa, 03 April 2012 2 komentar
    Memberi Background pada Table HTML | Cara Membuat Table dan memodifikasinya | Belajar dasar Table pada HTML. Membuat sebuah tabel harus di awali dengan tag <table> dan ditutup dengan tag </table>.
    Sedangkan untuk membuat setiap baris dalam tabel harus diawali tag <tr> dan diakhiri tag </tr>. Tentunya kita juga butuh setiap kolom dalam 1 baris maka buatlah kolom dengan diawali <td> dan diakhiri tag </td>.
    sedangkan untuk membuat headernya gunakanlah tag <th> dan </th>. Dan judul tabel dibuat dengan tag <caption> dan </caption>.
    sebuah tabel dapat digunakan untuk membuat postingan blog kita menjadi rapi dan lebih merata karena sebuah tabel bisa kita buat tanpa menggunakan garis garis pembatas (Border) sedangkan jika kita ingin membuat garis pembatasnya maka tinggal gunakan tag <border>, misalnya <table border=1>.
    Kita juga dapat memberi gambar latar atau background pada setiap sel dengan cara <td background=gambar.jpg>. Atau diberi warna latar diberi warna : <td bgcolor=aEt#203e8d>,dan dapat menambahkan link pada setiap kolom <td><a href=link.html><img src=gambar.gif border=0></td>. Sehingga apabila masing2 sel diberikan link gambar maka akan menghasilkan effect seperti efek imageMap.
    Atribut Tabel lain yang dibutuhkan untuk membuat suatu tabel diantaranya
    Pengaturan perataan teks horizontal seperti ini : align (left, center, right, justify), contohnya : <tr align=left>, <td align=left>.
    Pelurusan vertical suatu sel : valign(top, middle, bottom), ex : <tr valign=top>, <td valign=bottom>.
    Untuk mengatur Jumlah kolom yang ditempati sebuah sel gunakanlah tag : rowspan=n, contohnya : <td rowspan=2>
    Agar kata yg dimuat dalam sebuah sel tidak terlipat atau menghasilkan garis baru gunakanlah tag : nowrap, contohnya : <td nowrap>
    Menentukan panjang/lebar suatu sel/kolom : (weight, height), contohnya : <td height=10, weight=5> Contoh sebuah tabel sederhana:


    <table border=2>
    <caption>Judul Tabel</caption>
    <tr>
    <th>header1</th>
    <th>header2</th>
    <th>header3</th>
    </tr>
    <tr>
    <td>baris 1 kolom 1</td>
    <td>baris 1 kolom 2</td>
    <td>baris 1 kolom 3</td>
    </tr>
    <tr>
    <td>baris 2 kolom 1</td>
    <td>baris 2 kolom 2</td>
    <td>baris 2 kolom 3</td>
    </tr>
    </table>

    Dari contoh diatas maka akan menjadi sebuah tabel seperti ini

    Judul Tabel
    header1 header2 header3
    baris 1 kolom 1 baris 1 kolom 2 baris 1 kolom 3
    baris 2 kolom 1 baris 2 kolom 2 baris 2 kolom 3

    ulasan tentang Memberi Background pada Table HTML

    Baca Selengkapnya ....

    Meletakkan animated recent post widget

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown Senin, 02 April 2012 0 komentar
    Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

    (tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)


    Berikut adalah cara-cara untuk menggunakan widget ini.

    1. Dari dashboard > design > add a gadget > HTML/javascript

    2. copy code berikut dan paste di ruangan HTML/javascript


    <center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css" media="screen">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #spylist ul{
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff repeat-x;
    border:1px solid #ddd;
    }

    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->
    </style>
    <script language='javascript'>

    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://URL BLOG.blogspot.com/";
    limitspy=4
    intervalspy=4000
    </script>

    <div id="spylist">
    <script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
    </div>
    </center>
    <small><a href="http://cintafido.blogspot.com" target="_blank">get this widget here</a></small>


    Note: gantikan URL BLOG dengan url blog anda..

    3. Save dan lihat hasilnya.

    -------------------

    PERHATIAN: Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

    Harap blog anda boleh menggunakan widget ini.
    Selamat mencoba

    ulasan tentang Meletakkan animated recent post widget




    Baca Selengkapnya ....

    Memodifilasi Dokumen HTML Template

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown Minggu, 01 April 2012 0 komentar
    Tahap Memodifikasi Dokumen HTML Template | Belajar Utak Atik Template | Tutorial Rombak Template Blogger / Blogspot template minima merupakan tahap yang terpenting dari semua tahap dalam membuat template blog. Karena membuat template blog sendiri berarti membangun sebuah dokumen HTML. cara mudah membuat template blog adalah dengan memodifikasi template yang sudah ada. Nah kali ini bloggertrick akan menjelaskan bagaimana memodifikasi kode-kode didalam dokumen HTML template minima agar sesuai dengan apa yang telah kita rencanakan sebelumnya
    Ikuti bagian demi bagian. Sekarang masuk ke akun blogger anda dan tujulah halaman edit HTML, pastikan anda memilih template minima dan kotak expand template widget tidak usah dicentang.

    Header
    Cari kode seperti dibawah ini
    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
    Kode-kode CSS diatas adalah untuk mengatur elemen header-wrapper, elemen header yang terluar. Ganti kode-kode diatas menjadi seperti ini
    #header-wrapper {
    width:900px;
    height: 150px;
    margin:0 auto 10px;
    background:url(http://Terserah Anda Ya)no-repeat top left;
    }
    900 pixel adalah lebar header yang baru.
    Perhatikan penambahan kode baru untuk background. Kita mengambil gambar dari hasil desain yang telah kita upload.
    No-repeat berarti gambar background hanya ditampilkan sekali. Jika kita tidak menambahkan kode ini maka gambar akan ditampilkan berulang-ulang oleh browser sepanjang wrapper.
    Top left adalah posisi gambar didalam elemen header-wrapper, yaitu berada di atas kiri.
    Broder kita hilangkan saja.
    Cari kode seperti ini
    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }
    Rubah menjadi seperti ini
    #header {
    margin: 5px;
    display: none;
    text-align: center;
    color:$pagetitlecolor;
    }
    Kode CSS diatas adalah untuk mengatur tampilan judul blog. Penambahan kode display: none; berfungsi untuk menyembunyikan judul blog . Biasanya blogger secara otomatis akan menampilkan judul blog, apabila anda ingin menyembunyikan judul blog karena didalam gambar background anda sudah menambahkan judul blog maka anda harus menambahkan kode tersebut.
    Cari kode CSS seperti ini
    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:700px;
    text-transform:uppercase;
    letter-spacing:.2em;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;
    }
    Kode CSS diatas adalah untuk mengatur tampilan deskripsi blog, jika anda tidak ingin menampilkan nya maka tambahkan juga kode display:none seperti pada kode CSS judul blog.
    Sekarang simpan hasil editing anda di preview.

    Outer-wrapper
    Outer-wrapper adalah elemen terluar dari template minima. Elemen ini membungkus semua elemen dari template minima, seperti header, content-wrapper, main-wrapper, sidebar, dan footer. Sesuai dengan rencana kita tadi kita akan merubah lebar template menjadi 900pixel, cari kode seperti ini
    #outer-wrapper {
    width: 660px;
    Ganti angka 660px menjadi 900px

    Content-wrapper
    Didalam template minima elemen content-wrapper tidak diatur dengan CSS, karena kita akan menambahkan background untuk elemen ini maka kita perlu menambahkan kode CSS untuk elemen ini. Perlu diketahui panambahan background berupa image untuk elemen content-wrapper berguna agar tampilan main (area posting) dan sidebar sama tinggi. Bloggertrick lebih suka menggunakan cara ini dari pada memberi background elemen main dan sidebar dengan warna saja. Buatlah kode CSS seperti ini
    #content-wrapper{
    width: 900px;
    margin-bottom: 10px;
    background: url(http://img5.imageshack.us/img5/1239/1001contentwrapper.gif)repeat-y top center;
    }
    Letakkan diatas kode ini
    #main-wrapper {
    Untuk background link url kita ambil dari direct link gambar untuk content-wrapper yang telah kita upload di imageshack sebelumnya.
    Kode repeat-y berfungsi untuk memerintahkan browser agar menampilkan gambar tersebut secara berulang-ulang secara vertical. Bandingkan dengan kode no-repeat pada background untuk header.
    Top center berarti gambar diposisikan di atas tengah didalam elemen content-wrapper.
    Main-wrapper
    Elemen main-wrapper adalah elemen yang merupakan area untuk postingan. Untuk mengaturnya cari kode CSS seperti ini
    #main-wrapper {
    width: 410px;
    float: $startSide;
    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 */
    }
    Rubahlah menjadi seperti ini
    #main-wrapper {
    width: 470px;
    float: $startSide;
    margin-left: 10px;
    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 */
    }
    Lebar kita rubah menjadi 470 pixel seperti yang telah kita rencanakan sebelumnya.
    Margin-left: 10pixel adalah jarak antara elemen main-wrapper dengan elemen di sebelah kirinya yaitu elemen sidebar1 sebesar 10pixel.
    Sidebar-wrapper
    Template minima hanya memiliki satu sidebar, karena sebelumnya kita telah merencanakan untuk membuat template dengan dua sidebar maka kita perlu menambahkan kode CSS untuk sidebar baru. Caranya cukup mudah, anda tinggal mengkopi kode CSS sidebar lama. Kode CSS untuk sidebar lama adalah seperti ini
    #sidebar-wrapper {
    width: 220px;
    float: $endSide;
    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 */
    }
    Kopi dan paste saja dibawahnya dan lakukan beberapa perubahan hingga menjadi seperti ini
    #sidebar1-wrapper {
    width: 250px;
    margin-left: 5px;
    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 */
    }
    #sidebar2-wrapper {
    width: 150px;
    float: right;
    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 */
    }
    Beri nama sidebar yang lama dengan sidebar1-wrapper dan sidebar baru dengan sidebar2-wrapper. Rubah juga lebar masing-masing sidebar sesuai dengan yang telah kita rencanakan sebelumnya.
    Beri margin untuk sidebar1 sebesar 5pixel.
    Nilai float untuk sidebar1 adalah left, karena akan kita posisikan disebelah kiri template, sedang untuk sidebar2 float-nya right agar berada disebelah kanan template.
    Footer
    Untuk footer kita hanya akan merubah lebar dan menambah background dengan warna, cari kode seperti ini
    #footer {
    width:660px;
    rubah nilai 660 pixel menjadi 900pixel, tambahkan properties background. hingga menjadi seperti ini
    #footer {
    width:900px;
    background: #FCE6E6;
    Sampai disini tahap memodifikasi bagian CSS sudah selesai selanjutnya kita akan beralih ke bagian HTML. Di bagian HTML kita hanya akan menambahkan kode untuk sidebar baru. Caranya adalah sama dengan penambahan kode CSS untuk sidebar baru, anda tinggal mengkopi saja dari kode HTML sidebar yang lama. Cari kode HTML seperti ini
    <div id=’sidebar-wrapper’>
    <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    <b:widget id=’BlogArchive2′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
    <b:widget id=’Profile2′ locked=’false’ title=’About Me’ type=’Profile’/>
    </b:section>
    </div>
    Kopi kode HTML diatas dan paste diatas kode ini
    <div id=’main-wrapper’>
    Jadinya seperti ini
    <div id=’sidebar-wrapper’>
    <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    <b:widget id=’BlogArchive2′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
    <b:widget id=’Profile2′ locked=’false’ title=’About Me’ type=’Profile’/>
    </b:section>
    </div>
    <div id=’main-wrapper’>
    Kode <div id=’main-wrapper’>adalah kode HTML untuk elemen main-wrapper, mengapa kita meletakkan kode HTML untuk sidebar baru di atas kode HTML main-wrapper adalah karena seperti yang telah kita rencanakan sebelumnya kita akan memposisikan area posting (main-wrapper) diantara kedua sidebar. Sidebar1-main-wrapper-sidebar2.
    Rubah juga nama dari masing masing sidebar. Perhatikan kode yang berwarna merah
    Hapus widget yang ada di sidebar1. Anda nanti bisa menambahkan widget untuk sidebar1 melalui halaman add elemen seperti cara biasa.
    Sehingga secara keseluruhan kode untuk sidebar1-main-wrapper-sidebar2 menjadi seperti ini
    <div id=’sidebar1-wrapper’>
    <b:section class=’sidebar’ id=’sidebar1′ preferred=’yes’>
    </div>
    <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>
    <div id=’sidebar2-wrapper’>
    <b:section class=’sidebar’ id=’sidebar2′ preferred=’yes’>
    <b:widget id=’BlogArchive2′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
    <b:widget id=’Profile2′ locked=’false’ title=’About Me’ type=’Profile’/>
    </b:section>
    </div>
    Sampai disini seluruh proses memodifikasi template minima bisa dianggap selesai. Simpan hasil perubahan dan lihat hasilnya. Apakah anda puas??? Sebenarnya masih banyak yang bisa kita lakukan untuk memodifikasi dokumen HTML template minima tersebut. Yang sudah bloggertrick jelaskan diatas adalah hanyalah dasar-dasarnya saja. Anda bisa mengembangkannya sesuai dengan keinginan dan selera anda.
    Yang paling penting adalah sering sering berlatih. Dengan sering berlatih anda akan dengan sendirinya bisa memahami bagaimana memodifikasi kode-kode didalam dokumen HTML template. Jangan takut salah dan selamat berkreasi.

    Ulasan di atas tentang Memodifikasi Dokumen HTML Template

    Baca Selengkapnya ....

    Code Tutorial | CSS Hover

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown 0 komentar
    Code Tutorial | CSS Hover | Belajar Efek Hover | Mengenal Hover pada Template Blog | Blogger / Blogspot. Entri ni adalah kesinambungan untuk CSS Hover..sebab entri yang mula2 tu bukan la tutorial..itu cuma pengenalan dalam entri ni baru la ada tutorial. Css hover pada template biasanya anda akan jumpa cuma
    a:hover {color:#0f0;}
    yang tu untuk link..warna link akan berubah bila anda letak mouse pada link tu..CSS hover tidak terbatas pada link saja..terpulang pada template designer atau tuan blog jika mahu main efek hover ni..
    sebagai contoh pada template..ada yang sama,ada yang berbeda..
    #main-wrapper {background:#ff3366;color:#151515;}
    di atas tu contoh css untuk main wrapper yang mana warna background pada main wrapper tu colour pink manakala tulisan berwarna kelabu gelap.. untuk membuat efek hover masukkan code seperti di bawah..
    #main-wrapper:hover {background:#ff0;color:#000;}
    bila mouse diletakkan pada main-wrapper..background akan berubah seperti yang disetkan pada code css di atas..
    nampak kan cara guna efek hover tu…
    Contoh lagi
    #sidebar-wrapper a:link {color:#3366ff;}
    tambah code hover
    #sidebar-wrapper:hover a:link {color:#0f0;}
    jika anda letak mouse pada area sidebar.. link akan bertukar warna dari warna biru(#3366ff) ke warna hijau{#0f0)

    berikut adalah code css juga :
    #main-wrapper:hover {background:#000;color:#ff0000;}(code ni buat main wrapper jadi warna hitam dan tulisan jadi warna merah)
    #sidebar-wrapper:hover a:link {color:#0f0;font-weight:bold;font-size:36px;}
    (code ni buat setiap link pada sidebar bertukar jadi warna hijau dan tulisan link tu bersaiz 36px..besar tu..)
    .sidebar .widget {border:5px dashed #3366ff;}
    ini bukan efek hover…ni efek membuatkan widget tu ada border kaler biru dengan border putus2
    .sidebar .widget:hover{border:5px solid #0f0;}
    efek hover ni untuk widget pada sidebar..bila letak mouse pada sidebar.. border jadik kaler hijau dan border jadi bersambung…
    boleh faham?..efek tu terpulang dari anda…mau masukkan efek apa..makin dalam pengetahuan anda tentang css…makin kaw2 la efek yang boleh anda masukkan… pengetahuan aku pasal code css ni cuma asas saja…sebab tu efek hover ni biasa saja…heheehe…

    Artikel tentang Code Tutorial | CSS Hover

    Baca Selengkapnya ....

    Mengatur Margin dan padding di template blogger

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown 2 komentar
    Mengatur Margin dan padding di template blogger | Mengenal Padding dan Margin HTML pada Template. Margin dan padding adalah elemen penting dalam design blogger. Kalo kau tahu, mereka adalah nyawa dari design dan style dari blog kamu.
    Sebelum kita melakukan modifikasi dan macam-macam pada blog kita, kita cari tahu dulu struktur blog di blogger itu seperti apa. Oh ya yang pasti kamu juga udah daftar dulu di blogger agar punya blog dengan alamat http://www.nama_blog_kamu.blogspot.com
    OK kalo udah kita lanjut!!!
    Perhatikan gambar berikut ini:
    Mengatur Margin dan padding di template blogger


    Perhatikan gambar di atas, dan kita akan tahu, apa yang disebut padding dan margin!!

    CARA MENAMBAHKAN BORDER DI BLOGGER

    Tambahkan border pada bagian-bagian berikut ini:
    • Outer Wrapper
    • Header Section
    • Sidebar
    • Main Post Column
    • Footer
    Untuk menambahkan border tersebut kita tinggal menambahkan kode berikut ini:
    border: 1px solid #000000;
    Copy kode ini dan carilah kode berikut ini di HTML blogger kamu. Kemudian "paste" di bawah nya:
    #outer-wrapper {

    #header-wrapper {

    #main-wrapper {


    #sidebar-wrapper {

    #footer {

    Jika kamu punya 3 kolom pada layoutnya tambahkan pula di tag berikut ini:
    #new-sidebar-wrapper
    Sebelum menyimpan, preview dulu hasilnya, kamu akan lihat tulisan kamu dan border pasti terlalu mepet. Seperti ini:
    Mengatur Margin dan padding di template blogger

    Tapi jangan takut, kita akan merapikannya dengan cara yang sangat mudah.Dalam kasus ini saya mengambil contoh bahwa main wrapper kamu lebarnya 450px, coba cek di kode HTML blog kamu, ada nggak kode yang seperti ini:
    #main-wrapper {

    border: 1px solid #000000;

    width: 450px;


    float: $startSide;

    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 */

    }

    Atur lebarnya agar tidak ada ruang yang terlalu lebar antara main-wrapper dan sidebar (misalnya menjadi 430px), kita akan lihat bahwa sidebar kamu akan lebih rapi:
    Mengatur Margin dan padding di template blogger

    Menentukan margin

    Margin menentukan jarak antara setiap elemen dalam layout. Dalam contoh di atas kita lihat tidak ada jarak antara main-post-column dan sidebar. Kita bisa menggunakan margin untuk menentukan jarak antara keduanya

    Mengatur Margin sebelah kanan main wrapper

    Disini kita akan mencoba untuk menambahkan margin 10px di sebelah kanan yang akan mengatur jarak antara main wrapper dengan sidebar.
    Tambahkan saja kode yang dicetak merah di bawah ini dan tempatkan di main wrapper:

    #main-wrapper {

    border: 1px solid #000000;

    margin-right: 10px;

    width: 444px;

    float: $startSide;

    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 */

    }

    PADDINGKita lihat dari contoh di atas, tidak ada jarak antara isi dan border, hanya bagian atas dan bawah saja yang sudah ber-jarak.
    Sekarang misalnya kita ingin membuat jarak antara tulisan dan bordernya dengan jarak 5 pixel. Maka yang harus kita lakukan adalah:
    Menambahkan kode berikut ini
    padding: 0 5px 0 5px;
    Kode tersebut artinya adalah jarak atasnya : 0 pixels, kanan: 5 pixels, bawah: 0 pixels, kiri: 5 pixels.
    Dan paste di bagian ini:
    #main-wrapper {

    #sidebar-wrapper {

    #new-sidebar-wrapper {
    Sayangnya kadang-kadang pengaturan padding tersebut juga akan merubah layout dari keseluruhan tampilan blog kita. Yang tadinya sudah pas, tiba-tiba sidebar kita turun ke bawah. Jangan takur yang kita lakukan hanyalah mengurangi lebar sidebar tersebut.
    #sidebar-wrapper {

    padding: 0 5px 0 5px;

    border: 1px solid #000000;

    width: 235px;


    margin-right: 10px;

    float: $endSide;

    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 */

    }

    #new-sidebar-wrapper {

    padding: 0 5px 0 5px;


    border: 1px solid #000000;

    width: 235px;

    float: $endSide;

    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 */

    }


    With these padding declarations in place and the nescessary adjustments have been made, the demonstration template now looks like this:

    Mengatur Margin dan padding di template blogger


    Selamat berkarya..
    artikel cinta fido tentang Mengatur Margin dan padding di template blogger

    Baca Selengkapnya ....

    Belajar Membuat Template Blog

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown 0 komentar
    Bagaimana Cara Membuat Template Blog. Mungkin cara ini akan terlihat kuno dan sulit bagi sebagian orang , tapi mungkin juga akan terlihat mudah bagi yang lainnya.


    Mengedit template blog adalah mengedit layout blog yang dibuat orang lain untuk disesuaikan dengan keinginan kita. Jadi bukan asli milik kita sendiri.

    Maka untuk itu sekaranglah saatnya untuk mencoba belajar membuat template blog sendiri untuk blog kita.

    Template blog yang akan kita bikin , nantinya akan diarahkan untuk template blogspot . Namun tidak menutup kemungkinan jika sudah familiar dengan beberapa kode-kode HTML , kita akan mudah mengaplikasikannya ke CMS blog lain seperti misalnya untuk membuat template wordpress,atau juga untuk membuat template website sendiri.

    Tool Atau Software Untuk Membuat Template Blog


    Tool atau software yang dipakai dalam membuat template blog ini , adalah yang ada di windows ,
    yakni : notepad , MS Paint, Microsoft Office Picture Manager,dan MS Excel . Ini adalah tool standar yang biasanya default ada di sistem operasi Windows dan Office.

    Dalam Tutorial membuat Template blog ini ,akan lebih baik jika kita memiliki software MS Frontpage atau Dreamweaver. Tapi karena sebagian besar orang tidak semuanya memiliki dua tool terakhir , maka saya kira tool default tadi sudah cukup buat kita. O ya..software lain yang penting , adalah browser Mozilla Firefox.

    Kenapa saya memilih mozilla ? karena browser ini lah yang paling banyak dipakai oleh pengguna internet saat ini. Jika di komputer anda belum ada browser mozilla firefox , silahkan download dulu disini , dan lalu instal.

    Rincian Penggunaan masing-masing Tool :


    - Notepad atau notepad++ (notepad plus)  : Kita gunakan sebagai editor teks dan HTML
    - MS Paint : Digunakan untuk mengedit gambar
    - Microsoft Office Picture Manager : Fungsinya sama dengan MS paint, dan keduanya saling mendukung
    - MS Excel : Digunakan sebagai denah rencana tampilan Layout blog .
    - Browser Mozilla Firefox : Untuk melihat hasil pembuatan Template blog.

    Baiklah sekarang kita mulai langkah-langkah dalam membuat template blogspot ya .
    Langkah 1 : Mulai Membikin Template
    Buka Notepad , lalu ketikkan kode-kode sebagai berikut  :

    <html>
    <head>
    
    <title>Template Pertamaku</title>
    </head>
    <body>
    Belajar Membuat  Template Pertamaku
    
    </body>
    </html>

    Penjelasan Tag-Tag html yang ada diatas:


    Di awal dan di akhir ada tag pembuka <html> dan penutup </html>: (ditambahi garis miring) ini adalah tanda halaman HTML , semua template , akan terlihat seperti ini dengan beberapa perubahan sedikit.

    Dan di bagian antara <head> dan </head> : ini adalah tempat menaruh titel blog ( <title>Template Pertamaku</title> ) , juga tempat untuk kode-kode pengaturan tampilan blog (yang dikenal dengan style.css ) dan dibagian ini juga tempat utk menaruh beberapa script javascript pengatur tampilan layout.

    Kemudian diantara Tag <body> ISI </body> itulah nantinya akan kita tempatkan kontent atau isi dari blog kita. Di bagian ini nantinya kita akan mengisikan Header( kepala) Postingan(konten) , sidebar dan footer.

    Oke ..dilanjuuutttt…..

    Setelah selesai anda ketik di notepad , lalu klik File dan kemudian klik "Save as” .
    Beri nama di kotak "file name” dengan misalnya :  template-pertamaku-step1.html

    Jangan ada spasi dan harus diakhiri dengan .html  (titik html).
    Dikotak "Save as type” pilih "All files” Lalu klik tombol Save.

    O ya..kalau bisa simpan di folder khusus agar mudah mencari nantinya. (kalau saya khusus membuat folder "Belajar Template” )

    Jika sudah anda simpan, buka file tersebut dengan mozilla firefox (klik kanan file, lalu Open with Mozilla” ). Jika tidak salah ketik , maka anda akan melihat sebuah halaman berwarna biru dengan tulisan di atas kiri :
    Belajar Membuat Template Pertamaku.

    Dan di ujung atas kiri browser akan nampak : Template Pertamaku-Mozilla Firefox
    Nah…itu adalah halaman HTML pertama yang anda buat yang merupakan cikal bakal template blogspot anda…… horeeee…! 

    Hhhhh…istirahat dulu sejenak… kendurkan urat syaraf…. lihat seputar halaman ini..siapa tau ada link yang berguna buat anda dan blog ini .. 


    Bagaimana ? sudah rilex ? Sudah siap melanjutkan belajar bikin templatenya ?? oke deh.. mari kita teruskan…!



    Langkah 2 : Mengembangkan Template Dengan Style.css

    Buka notepad baru , file yang pertama tadi biarkan saja, untuk anda simpan sebagai bahan perbandingan dan pembelajaran.

    POST Bagian 2 : Publish : 10 April malam

    Ketik atau copy lagi kode-kode diatas. Lalu tambahkan tag2 ini sebelum </head>.  (boleh sebelum atau sesudah <title>namablog</title>  , tapi sebaiknya persis sebelum </head> aja , biar mudah nantinya.

    Ini kodenya :
    <style type="text/css">
    Isi kode style
    </style>

    Kemudian diantara tag :
    <body> isikan kode dibawah disini </body>

    Ini kode-kode nya :
    <div id="kotakblog">
    <div id="topbar">Isi topbar</div>
    <div id="header">Isi header </div>
    <div id="navigasi">Isi navigasi</div>
    <div id="tembok-utama">
    <div id="kotak-posting">
    <div id="isi-Posting">isi postingan</div>
    </div>
    <div id="ruang-Sidebar">
    <div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
    <div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
    <div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
    </div>
    </div>
    <div id="footer-kaki">Isi footer-kaki</div>
    </div>

    Kemudian klik save as lagi seperti diatas, dan beri nama :  template-pertamaSTEP2.html


    Penjelasan atas kode-kode :


    <div id=”kotakblog”>


    <div> adalah permulaan dalam mengawali kode , dan ID adalah identitas dari isi (dalam hal ini nama nya = kotakblog dan isinya adalah seluruh yang ada diantara tag ini sampai dengan dengan akhir <div>.

    Agak sulit juga nih saya neranginnya, Hmm

    Jadi begini contoh diatas :  <div id=”kotakblog”> harus diakhiri dengan </div> , ditengah2 nya itu adalah ISI dari ID yang diberi nama kotakblog , id atau nama ini nanti fungsinya sebagai identitas dalam pengaturan layout nya (CSS nya).

    Lebih Mudahnya lagi akan saya ilustrasikan dengan rumah.

    Anggap saja style.css = Insiyur atau arsitek rumah

    1. Kemudian <div id=”kotakblog”> = rumah itu sendiri , dan di kode ini lah nantinya semua akan kita tempatkan :

    Atap(header) + Kuda2 (Navigasi) + Tembok (Badan artikel) + Jendela(Sidebar) dan Pondasi (footer) dalam hal ini pagar pembatasnya adalah </div>

    2. Pada Rumah , kan ada atap . kodenya <div id="header">Isi atap/kepala yang juga dibatasi dengan </div> untuk memisahkan antara atap dengan kuda2 beton penopang atap,

    3. Masuk kebawah ada kuda2 beton penopang atap = <div id=”navigasi”>Isi navigasi yang dibatasi juga dengan </div> untuk membedakan nya dengan tembok utama

    4. Tembok utama : <div id="tembok-utama"> , isinya untuk jendela,pintu ,gambar lukisan dan lain-lain.

    5. Kemudian kusen pintu = posting , kodenya : <div id="kotak-posting"> = tempat akan taruh pintu , diakhiri dengan </div>

    Nah Pintu nya sendiri = <div id=”isi-Posting”>isi postingan </div>

    6. Jendela = sidebar , kodenya :

    <div id=”ruang-Sidebar”>
    <div id=”ruang-Sidebar-top-besar”>Isi ruang-Sidebar-top-besar</div>
    <div id=”ruang-Sidebar-kanan”>Isi ruang-Sidebar-kanan</div>
    <div id=”ruang-Sidebar-kiri”>Isi ruang-Sidebar-kiri</div>
    </div>

    7. Pondasi rumah = Footer , ini kodenya :
      <div id=”footer-kaki”>Isi footer-kaki</div>

    Gimana masih bingung ?

    Kalau iya..coba lagi deh lihat dengan gambar sebagai berikut : (lihat gambar)

    Bagaimana Cara Membuat Template Blog

    Layout_Bikin_Template

    Mudah-mudahan sudah jelas ya ?

    Kalau gitu tahap dua sudah kita selesaikan , dan jika kode-kode yang anda tulis benar, maka di brwoser anda akan muncul beberapa tulisan seperti yang ada pada kode diatas.

    Langkah 3 : Mengatur Bentuk atau Layout tampilan Template (Style.css)


    A.Membuat Layout Template dengan denah rencana


    Nah disini kita bisa menggunakan MS Excel sebagai denah rencana awal pepmbuatan Template , bagaimana nantinya tampilan blog kita, baik itu warna, border dan gambar2 yang diperlukan. Ibaratnya ini previewnya . Contoh nya bisa anda lihat gambar di Denah Layout Pembuatan Template

    B. Membuat layout dengan Kode


    Buka lagi notepad baru,
    Copy kode-kode yang ada di file kedua tadi (file template-pertamaSTEP2.html)

    Tambahkan kode-kode ini dibawah jni pada bagian tag :

    <style type="text/css">masukkan kode disini </style>

    Dan ini kode2 nya :

    /*------------------------------------------------
    Theme Name: Template pertamaku
    Theme URI: http://blogaku.com
    Description: Ini Template pertama aku
    created by <a href="http://blogaku.com/">blogaku</a> .
    Author: Aku
    Author URI: http://blogaku.com/
    Date: 08 April 2010
    ----------------------------------------------- */
    
    /*----Pengaturan layout blog mulai dari sini----*/
    
    body {
    background:#0ff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    
    }
    
    #kotakblog {
    width:1000px;
    border:1px solid #000;
    background:#0ff;
    }
    #topbar {
    width:920px;
    height:30px;
    border:1px solid #000;
    background:#aaa;
    }
    #header {
    width:920px;
    height:100px;
    border:1px solid #000;
    background:#0f0;
    }
    
    #navigasi {
    width:920px;
    height:30px;
    border:1px solid #000;background:#ccc;
    }
    
    #tembok-utama {
    width:920px;
    border:1px solid #000;background:#ddd;
    }
    
    #kotak-posting {
    width:500px;
    border:1px solid #000;background:#eee;
    }
    
    #isi-Posting {
    width:470px;
    border:1px solid #000;background:#ff0;
    }
    
    #ruang-Sidebar {
    width:350px;
    border:1px solid #000;background:#abc;
    }
    
    #ruang-Sidebar-top-besar {
    width:330px;
    border:1px solid #000;background:#ff0fff;
    }
    
    #ruang-Sidebar-kanan {
    width:150px;
    border:1px solid #000;background:#bbc;
    }
    
    #ruang-Sidebar-kiri {
    width:150px;
    border:1px solid #000;background:#ccd;
    }
    
    #footer-kaki {
    width:920px;
    height:50px;
    border:1px solid #000;background:#00ffff;
    }
    /*---akhir CSS sampai disini yaaaa---*/

    Bagaimana ? Sudah ditambahkan ? ?

    Kalau sudah , ayo dah di  Save as lagi , dan beri nama :
    template-pertamaSTEP3.html

    Lihat hasilnya dengan membuka di browser .
    Cihuuuuiiiyyy cetaaar...

    Sudah mulai berbentuk kan ya ??
    Tapi masih nempel dan belum kelihatan mana sidebar dan kotak postingannya …

    Baiklah sekarang kita atur lebih dalam lagi.

    C. Mengatur Posisi layout Template


    Kita sekarang akan menambahkan dengan posisi (float) , margin dan Padding.
    Kalau posisi pasti sudah tau ya, nah lalu margin dan padding itu apa sih ?
    margin dan padding adalah pengatur jarak .

    Keduanya hampir sama , dan lebih jelasnya mari kita narasikan lagi dengan rumah.

    Pagar Rumah — Rumah – meja

    Kita fokuskan pada pengaturan jarak Rumah. Antara rumah dengan pagar (jarak keluar) diatur dengan margin , dan antara rumah dengan meja (jarak kedalam) diatur dengan padding.

    Sebaiknya bikin lagi aja di notepad baru ya… copy code yang ada di template-pertamaSTEP3 , lalu save as dengan template-pertamaSTEP4.html

    Mari kita tambahkan padding:3px;
    Di bagian css nya , misal nya :

    body {
    background:#0ff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    }

    tambahkan padding:3px; menjadi sebagai berikut :

    body {
    padding:3px;
    background:#0ff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    }

    Nah…lihat hasilnya dengan membuka file template-pertamaSTEP4.html dibrowser . Sudah berubah kan ?
    Seterusnya tambahkan  di kode-kode css yang lain. Nambahinnya diantara tanda { dan }

    Sudah ditambahkan ? jika sudah.. coba di refresh browser nya dan lihat hasilnya.
    Anda bisa memperkecil angka 3 menjadi 2 misalnya, atau memperbesar nya. Terserah saja. Nantinya kita bisa mengatur si padding agar bisa mengatur jarak atas-kanan-bawah-kiri.

    Pada contoh kode padding diatas : padding:3px;
    Dia mengatur sekaligus jarak atas-kanan-bawah-kiri , masing-masing sebesar 3px

    Kita bisa menggunakan kode sebagai berikut :

    padding:10px 5px ;
    ini artinya jarak atas-dan -bawah = 10px . sedangkan jarak kanan-dan-kiri = 5px
    padding:10px 3px 7px;
    ini artinya jarak atas = 10px . jarak kanan-dan-kiri = 3px , jarak bawah = 3px
    padding:10px 6px 4px 2px;
    ini artinya jarak atas = 10px -kanan = 6px -bawah = 4px -kiri= 2px

    Aturan ini juga berlaku untuk pengaturan margin
    Oke lanjut….

    Setelah di refresh, kita melihat bagian sidebar masih berada dibawah kotak posting.
    Nah mari kita pergi ke tag CSS pengaturan #Sidebar dan pengaturan #kotak-posting . Tambahin kode ini :   float:left

    Sehingga hasilnya menjadi seperti ini :

    #ruang-Sidebar {
    float:left;
    width:350px;
    border:1px solid #000;
    background:#abc;
    padding:3px;
    }

    Yang di #kotak-posting juga ditambahin float:left; ya…

    semoga berhasil...
    info dari hasil surfing.
    artikel ini tentang Bagaimana Cara Membuat Template Blog

    Baca Selengkapnya ....

    Belajar Bikin Template Blog Sendiri

    بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

    Posted by Unknown 0 komentar
    Belajar Bikin Template Blog Sendiri | Dasar Membuat Template Blogspot | Blogger. Mungkin selama ini kita adalah pemakai Template berbayar atau template Gratis yg dibuat oleh orang lain . Meskipun Dengan pilihan template gratisan yg banyak , tapi kita masih saja merasa belum pas atau cocok untuk tema blog yang kita inginkan.

    Kita bisa saja mencoba mengedit template yang saat ini kita pakai . Namun akan banyak ditemui kendala, karena mungkin kita belum ngerti kode2 HTML . Template gratisan yang kita pakai, pun disana ada link si pembuat template.

    Nah jika kita mencoba membuat template sendiri, tentunya akan bisa disesuaikan dengan keinginan sendiri , serta ada rasa kebanggan atas karya kita sendiri.

    Dalam Persiapan Membuat Template , biasanya saya membikin rencana design dengan menggunakan MS excel. Ini contohnya : (klik Gambar Utk Memperbesar)


    Belajar Bikin Template Blog Sendiri

    Dan saya Meng analogi kan Layout blog dengan bentuk "Rumah" untuk memahami struktur nya , (gambar bawah)


    Belajar Bikin Template Blog Sendiri


    Kemudian saya jabarkan kode2 CSS dengan menggunakan Layout rencana yg di buat di excel , seperti gmbr bawah :
    Belajar Bikin Template Blog Sendiri

    Dan ini cara saya memahami arti padding dan Margin untuk memberikan Jarak layout satu dengan lainnya.

    Belajar Bikin Template Blog Sendiri

    Postingan berjudul Belajar Bikin Template Blog Sendiri

    Baca Selengkapnya ....
    Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

    investasi semoga anda senang

    kurs mata uang BCA-2


    Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

    Islam itu Cinta Damai Agama Islam Cinta Damai
    jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam