betawie punya blog: blog

Tampilkan postingan dengan label blog. Tampilkan semua postingan

Kamis, 25 Februari 2010

membuat tiga kolom blogger template

The Minima template is the easiest Blogger template to customise, as this is the simplest two column template, and has few parameters regarding margins, padding and the like. Once you have developed the third column, it will then be easier to alter font-size, colours and such so leave this until later on. We're going to concentrate on the actual layout first.

First of all, set your template to Minima (not the stretch template, but any colour will do!), then follow these instructions:

Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.
Now, find this section in the HTML code:
#sidebar-wrapper { width: 220px; 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 */ }
Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:
#left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)
This will provide the styling for the new sidebar element which we will create next.
Now, you need to find this section further down the page:
<div id='main-wrapper'>
. Immedietly before this section, you should paste the following piece of code:
<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
Let me explain the elements of this code to help you understand what we've just done:
- This section tells the browser that the left-sidebar element exists here, and to look in the css for the appropriate styling for this element.
- This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwie this would cause problems when viewing. It is preferred so that it will feature in the layout, even if no widgets are placed within it.
If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar. Find this section in the HTML code:
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.
You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:
#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
At this point, you should save your template. At present, your new sidebar will not be seen as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template>Page elements in your Blogger dashboard.
Your layouts section should now look something like this: You can now add a page element (or two) to your new left sidebar.
But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this: This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red:
#main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }
This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this:
Finally, save your template and enjoy your new sidebar!

The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

resources
- http://www.blogger.com/

Rabu, 24 Februari 2010

Cara mengatur layout kolom di blogspot

Pada pembahasan sebelumnya sudah saya jelaskan bagaimana cara membuat kolom baru di blogspot, dan pada tutorial kali ini saya akan membahas bagaimana cara mengatur layout kolom yang sudah kita buat, dan pada dasarnya ini juga berlaku buat kolom yang sudah ada baik itu template dengan layout 2 kolom ataupun sudah menjadi 3 kolom. Trik ini sebenarnya tidak rumit karena kita hanya memindahkan kode div di bagian section 3 (HTML) dan sedikit mengubah margin dan paddingnya apabila tampilan layoutnya bertabrakan dengan element lainnya dan posisi floatnya. Seperti biasa saya masih menggunakan acuan contoh layout template minima dan pada dasarnya tutorial ini bisa berlaku juga pada template yang lainnya.

Perhatikan screenshoot di bawah ini

Posisi 2 kolom berada di sebelah kanan main post :

Posisi main post di tengah-tengah 2 kolom :

Posisi 2 kolom berada di sebelah kiri main post :

Untuk masing-masing posisi saya akan jelaskan satu persatu, dan dalam mengubah layout kolom template, sobat blogger tidak perlu mencentang expand widget.

Pada posisi 2 kolom di sebelah kanan main post kode pada bagian section 3 (HTML) :

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di bawah div main-wrapper dan akan memberikan tampilan 2 kolom berada di sebelah kanan main post.

Pada posisi main post berada di tengah-tengah 2 kolom maka kode pada section 3 (HTML):

Pada posisi 2 kolom di sebelah kiri main post kode pada bagian section 3 (HTML) :

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di atas div main-wrapper, tetapi hal ini belum cukup karena pada bagian section 2 (CSS) perlu di rubah posisi floatnya terutama yang kode sidebar-wrapper menjadi posisi float left karena defaultnya right ,baru akan memberikan tampilan 2 kolom berada di sebelah kiri main post.
Konsep dasar cara mengubah layout kolom adalah :

Posisi div pada bagian section 3 (HTML)
Posisi float, nilai margin dan padding apabila layout kolomnya bertabrakan dengan element lainnya
Trial and error

Semoga dengan tutorial cara mengubah layout kolom sobat blogger akan bisa berkreativitas dengan stylenya masing-masing.

Membuat kolom baru di blogspot

Bagaimana cara membuat atau menambahkan kolom baru di blogspot? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, baik itu membuat 2 kolom menjadi 3 kolom maupun 4 kolom atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan konsep dasar membuat kolom baru di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.Konsep dasar untuk membuat kolom baru :

Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
Membuat definisi kolom baru pada section 2 (CSS)
Peletakan tag div baru pada section 3 (HTML) yang sudah dideklarasikan di bagian section 2 (CSS)
Simpan dan lihat hasilnya

Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya.

Mengubah template 2 kolom menjadi 3 kolom

Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

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

#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

Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.

Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 150px;
float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper2 {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk margin dan padding agar nantinya tidak berdempetan masing-masing container. Sedangkan untuk container baru di tandai dengan warna biru. Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya.

NB : Biasanya saya mencopy kode #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left

Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template minima 2 kolom (no expand widget templates) :

Kemudian kita akan memasukkan tag div sidebar baru ke dalam structur templatenya

Perhatikan text yang berwarna merah yang merupakan tag div sidebar barunya, sedangkan untuk yang di warnai kuning adalah nilai section class yang mempunyai arti tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>, sedangkan untuk text yang diwarnai orange merupakan id yang harus unik atau berbeda dengan id lainnya.

Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.

Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya. Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger menjadi 3 kolom atau lebih dengan konsep dasar di atas.

NB.Jangan lupa mengubah nilai width header dan
footernya umumnya mengikuti nilai width outer

Margin dan Padding.

Margin dan padding merupakan suatu property CSS yang tidak asing buat sobat blogger yang senang dengan mengedit template, di postingan ringan ini saya mencoba mengenal margin dan padding dengan gaya bahasa saya sendiri dan tidak lebih untuk sebagai media catatan saya dan bukan bermaksud untuk menggurui., karena pada dasarnya saya juga sering lupa perbedaan margin dan padding ini :p.

Untuk memudahkan sobat dalam mengenal margin dan padding ini saya akan berikan screenshootnya seperti di bawah ini :

Masing-masing element saya definisikan nilainya sebagai berikut :

element 1 { margin:0px; padding:0px;}

element 2 { margin:0px 10px 10px 0px; padding:0px 10px 10px 0px}

element 3 ( margin:0px; padding:0px}

Sekarang masuk ke definisi margin dan padding :

Margin : Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di luarnya (E1)
Syntax propertynya :
margin-top : value;
margin-right: value;
margin-bottom: value;
margin-left: value;

Bisa ditulis shorthand property (secara singkat) :
contoh:

margin {10px 20px 10px 0px}

Padding : Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di dalamnya (E3}

Syntax propertynya :
padding-top:value;
padding-right: value;
padding-bottom:value;
padding-left:value;

Bisa di tulis Shorthand Property (secara singkat) :
contoh:
padding {10px 20px 10px 0px}

Pada hal ini kita hanya fokus pada element 2 (E2) saja dimana saya sudah berikan margin bottom E2 dengan garis merahnya, margin right E2 garis kuning, padding bottom E2 dengan garis hitamnya, dan padding right E2 garis ungu dan nilai-nilai yang saya berikan untuk element 2 akan memberikan tampilan seperti screenshoot di atas, beda lagi apabila kita memberikan nilai element 2 (E2)dengan 0px uintuk margin dan paddingnya, maka element tersebut akan berdempetan dengan element 1 (E1) karena margin E2 0px dan element 3 (E3) karena padding E2 0px.

Semoga pengertian margin dan paddng ini dapat membantu sobat untuk lebih dalam mengenal property css, dan saya harapkan postingan ringan ini bermanfaat buat sobat blogger and happy blogging.

Rabu, 17 Februari 2010

Cara membuat tabel di blog

sekarang saya membicarakan topik utama yang mau saya ulas yaitu cara membuat tabel di blog/website. Pertanyaan ini di ajukan oleh salah satu sobat yang saya lupa namanya karena sudah agak lama melalui buku tamu, dan saya juga sedikit males membuka dokumen-dokumen lama di buku tamu. Bagi yang merasa menanyakan soal ini, silahkan absen saja di kotak komentar.

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya. Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

* bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
* align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
* cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .
* border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel" .
* cellspacing
* : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" . height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .
* height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%" .

Sintaks atau kode yang terbentuk yaitu seperti ini :

<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">

.....................

</table>

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).

Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

Sintaks atau kode yang terbentuk yaitu seperti ini :

<caption align="top"|"bottom">

............................

</caption>

elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :

* align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
* valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
* bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">

.....................

</tr>

elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

* align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
* valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
* bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
* colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
* rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini :

<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</th>

Elemen TR(Table Row) adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

* align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
* valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
* bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
* colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
* rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini :

<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</td>

Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :

Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :

<table width="200" border="1">
<tr>
<td>

Contoh

</td>
</tr>
<table>

Hasilnya akan seperti ini :

Contoh

Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :

<table width="200" border="1">
<tr>
<td align="center">

Contoh

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

Hasilnya akan seperti ini :

Contoh

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

<table width="200" border="9">
<tr>
<td align="center">

Contoh

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

Hasilnya akan seperti ini :

Contoh

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

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

Hasilnya akan seperti ini :

Contoh

Contoh juga denk

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>
hasilnya seperti ini :

Contoh	Contoh juga denk
Contoh	Contoh juga denk

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
<tr bgcolor="yellow">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

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

hasilnya seperti ini :

Contoh	Contoh juga denk
Contoh	Contoh juga denk

Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :

**Tabel 1.1**
Data Teknisi
No.	Nama
1.	?
2.	?
3.	?

Kode yang di pakai bisa seperti ini :
<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>?</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>?</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>?</td>
</tr>
</table>

Hasilnya ya kira-kira seperti ini lah...:

**Tabel 1.1**
Data Teknisi
No.	Nama
1.	?
2.	?
3.	?

Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan untuk menempatkan gambar agar terlihat lebih rapih. Contoh :
<table width="300" border="1" cellpadding="20">
<tr>
<td align="center">
<a href="http://www.askersasloves.blogspot.com" target="new"><img height="58" src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/animasimotor.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>
</td>
<td align="center">
<a href="http://www.askersasloves.blogspot.com"><img src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/mr-bean-dada.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>
</td>
</tr>
<tr>
<td align="center">
<a href="http://www.askersasloves.blogspot.com"><img src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/semut-melek-ss-ok-beneton.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"></a>
</td>
<td align="center">
<a href="http://www.askersasloves.blogspot.com" target="new"><img height="58" src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/1344916_edp1_anim_speed30.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>
</td>
</tr>
</table>

Hasilnya akan seperti ini :

<table width="300" border="0" cellpadding="20">
<tr>
<td align="center">
<a href="http://www.askersasloves.blogspot.com" target="new"><img height="58" src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/animasimotor.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>
</td>
<td align="center">
<a href="http://www.askersasloves.blogspot.com"><img src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/mr-bean-dada.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>
</td>
</tr>
<tr>
<td align="center">
<a href="http://www.askersasloves.blogspot.com"><img src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/semut-melek-ss-ok-beneton.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"></a>
</td>
<td align="center">
<a href="http://www.askersasloves.blogspot.com" target="new"><img height="58" src="http://i1008.photobucket.com/albums/af202/AskersAsloves/AskersAsloves/1344916_edp1_anim_speed30.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>
</td>
</tr>
</table>

Hasilnya seperti ini :

Bagaimana hasilnya yang terakhir ini, mata kita dapat di tipu bukan?

Hasilkan Uang dari Blog dengan Mudah

Sangat berharap untuk membuat blog ini sebagai media monetisasi, memberi bantuan walau sekedar buat uang jajan dan membayar bulanan tagihan internet. Nah, saya akan mencoba sharing beberapa hal tentang program yang membuat blog anda tidak kosong, mskudnya adalah kita dapat memanfaatkan blog kita agar dapat membantu kita dalam masalah keuangan. Kita dapat mandiri dan tidak hanya bergantung orang tua (khususnya para remaja). Justru dengan adanya penghasilan dari blog kita ini kita akan tunjukkan sesuatu yang beda kepada orang tua dan pasti akan membuat mereka bangga.

Nah, sekarang bagaimana cara kita membuat blog kita menjadi mesin uang? Kita lihat di berbagai penjuru, melalui blog lain atau melalui forum. Saya akan mencontohkan beberapa program yang saya ikuti dan alhamdulillah masih bisa membantu saya.

Blogsvertise
Sebuah situs yang dikenal sebagai situs untuk menghasilkan uang dengan cara me-review sebuah situs. Di sana kita tinggal submit blog kita dan menunggu job yang datang yang dikirim melalui email.

Jika Anda mempunyai blog yang banyak dan semua memiliki pagerank tinggi, tidak menjadi heran jika sebulan Anda dapat memperoleh lebih dari $100 dengan sangat mudah

SponsoredReviews
Banyak blogger yang sukses dengan mengikuti bisnis review dari SponsoredReviews ini, tapi di samping dollar yang sangat mudah didapatkan dari SponsoredReviews, pihak SponsoredReview sangat teliti dalam memilih suatu blog yang akan diterima. Misalnya dalam ketentuan sebagai berikut:

DO NOT SUBMIT BLOGS THAT DO NOT MEET OUR REQUIREMENTS. WE WILL SUSPEND YOUR ACCOUNT IF YOU DO.
Your blog must contain at least 10 non-paid posts with 200 words of unique content each.
Your blog must be at least 3 months old and be cached/indexed in the major search engines, including Google.
Your blog must have, and maintain, at least a 2:1 ratio of non-paid to paid content.
The URL being submitted must be the homepage of your blog. At least 50 words and one link must appear on this URL for each paid review you post, when first posted.
If the blog is not the homepage of your site, there must be a clearly visible link to the blog on the homepage of the site. In other words, we do not want blogs that are orphaned (do not get traffic) on your site.
You must own the blog that you are submitting. Free-for-all or community article/blogs will not be accepted. Hosted blogs from sites like blogspot are ok.
Your blog must not be completely automated or appear to be created solely for search engine traffic.
You must complete all accepted reviews within 7 days, or your account will be suspended.
Foreign Language blogs (non-english) must clearly state in the title which language the blog is written in. i.e. "Jose's Blog - Spanish". All Reviews must be written in English unless otherwise stated by advertiser.
Blogs with very little traffic and/or links, may be rejected.
We may reject blogs that are overpriced. You should not charge more then our suggested price unless your site, and writing style, can justify it.
You must not list a price for reviews on your site greater then the price you set in sponsoredreviews.
We will suspend your account if you make rude or unconstructive comments about an advertiser. You should not accept an offer to write a review if you do not have at least something positive to say about the product/service. We encourage constructive criticism!

Dengan demikian, hati-hatilah sebelum menambahkan blog anda ke SponsoredReviews karena blog yang telah didaftarkan sebelumnya tidak akan bisa didaftarkan kembali. Jadi, lebih baik anda bangun dulu blog anda agar mendapatkan harga yang tinggi saat anda menambahkannya. Dan ini salah satu bukti kerja saya setelah beberapa hari join di SponsoredReview:

Siapa tau dengan screenshot ini anda akan tergerak dan memulai bisnis online. Klik SponsoredReviews untuk mendaftarkan blog anda

Perfect Money
Ini dia program yang sangat menguntungkan, dengan modal PageRank kita akan mendapatkan puluhan dollar dari sini. PerfectMoney membayar kita setiap bulan, rutin setelah blog yang didaftarkan memasang logo. Program yang mereka terapkan dinamakan Paid Put Logo. Minimal blog yang didaftarkan adalah mempunyai Pagerank minimum PR 3 dan harus menggunakan SLD (Second Level Domain) diantaranya berekstensi .com .net .org .biz .me dan sebagainya. Yang kita dapatkan adalah $10xPR blog, jadi semisal anda mempunyai blog PR4, maka yang akan anda terima adalah $10x4 yaitu $40 per bulan hanya dari PerfectMoney

Nah, di atas adalah program yang saya ikuti dan masih rutin membayar saya, minimal $50 dapat anda berikan walau hanya mengikuti program di atas. Padahal masih banyak lagi yang bisa menghasilkan uang di internet ini. Good Luck

Minggu, 24 Januari 2010

Membuat Kotak / Form Email Berlanganan

Selamat datang di KAMPUNG BLOGGER kali ini kita akan membahas tentang cara membuat kotak / form email berlanganan. Form tersebut fungsinya adalah untuk mempermudah para pembaca blog kita agar bisa berlangganan atau mendapatkan info terbari postingan kita melalui email mereka. Jadi jika memposting artikel baru maka para pelanggan/pembaca yang sudah memasukkan email mereka melalui form tersebut akan secara otomatis mendapatkan kiriman email yang berisi postingan terbaru kita.

OK. Kita langsung saja kecaranya :

1. Kunjungi situs ini : http://www.feedburner.com atau klik gambar di bawah

2. Saat pertama kali datang kamu akan langsung disodori kotak untuk mengisikan alamat feed blogmu yang akan dibakar

3. Biasanya alamat feed blog kamu seperti ini http://Nama Blog Lu.blogspot.com/feeds/post/default, ganti tulisan NAMABLOGLU dengan nama alamat blogmu.

4. Isikan nama feed blogmu tadi dalam kotak yang disodorkan tersebut, jika blogmu itu isinya hanya video2 maka beri tanda centang pada kotak "I am a podcaster", jika tidak ya gak usah dicentang. Kemudian klik tombol "next"

5. Setelah itu kamu akan disodori lagi dengan form pendaftaran, isikan data2 yg diperlukan disana, trus klik tombol "Activate Feed" Nha kalo berhasil nanti akan ada informasi "Congrats! your ......".

6. Dibawahnya akan ada tombol "Next" dan link "Skip directly to feed anagement" kali ini pilih yang link "Skip directly to feed anagement", sebenarnya lewat tombol "next" bisa sih tapi biar seru kita lewat jalan lain aja.

7 Kemudian nanti akan ada beberapa menu, kali ini pilih menu "Publicize"

8. Setelah itu disebelah kiri akan muncul beberapa menu. PIlih menu "Email Subscriptions".

9. Kemudian klik tombol "Activate"

10. Nah setelah itu nanti akan ada beberapa kotak yang berisi kode2. Nah kalo km pinginnya yang berbentuk form maka pilih kode yang ada di kotak "Subsciption Form Code".

11. Copy kode yang ada dalam kotak tadi, trus klik tombol "Save" untuk mengaktifkan layanan tersebut.

12. Cara pasangnya, Login ke blogger, pilih "layout --> Add a Gadget --> HTMl/Java Script" nah paste deh kode yang sudah kamu copy tadi disana.

Sekarang coba dilihat blogmu, udah ada kan form untuk "Email Subscriber". Trus kalo mo nampilin jumlah reder yang berlanganan gini caranya :

- Login ke feedburner kemudian pilih feed blogmu

- Trus masuk ke menu "Publicize --> FeedCount" nah disitu scriptnya yang harus km copy dan pasang di blogmu.

Percepat Loading Blog Anda

Hal yang dapat menarik pembaca ke Blog anda adalah isi dari blog tersebut, namun disamping itu kecepatan blog juga sangat berperan penting dalam menarik pengunjung, apalagi bila pengunjung tersebut baru pertama kali datang ke blog anda.
Coba anda bayangkan... ada pengunjung yang datang ke blog anda namun karena loading blog anda sangat lambat apa yang akan mereka lakukan? Tentu saja mereka akan segera menutup blog anda bukan?

Nah... jika anda merasa blog anda sangat lambat, wajib untuk baca yang satu ini. Untuk itu saya sudah menyiapkan beberapa cara untuk mempercepat blog anda.
Oke, kita langsung saja!

Hal-hal yang mempengaruhi kecepatan blog anda yaitu:

Postingan Anda
Kecepatan blog anda sangat dipengaruhi oleh jumlah postingan anda yang terdapat pada halaman utama. Semakin banyak jumlah postingan anda yang berada di halaman utama, maka semakin lambat pula blog anda.
Nah.. Untuk itu anda harus mengatur jumlah postingan yang ada di halaman utama anda tersebut. Caranya pergi ke menu "Setting | Formatting" tab. Disana anda dapat mengatur jumlah postingan anda yang ingin ditampilkan.
Untuk hasil yang optimal, atur jumlah postingan anda tidak lebih dari 10 post karena semakin sedikit jumlah postingan yang anda tampilkan maka semakin cepat loading blog anda.

Link dan Javascript dari Pihak Ketiga

Untuk memperoleh hasil yang optimal, sangat disarankan untuk menggunakan Link, widgets dan Javascripts dari Blogger. Namun, jika anda ingin menambahkan widget dari luar sebaiknya anda taruh di bagian bawah blog anda saja atau jika anda menaruhnya di sidebar sebaiknya anda taruh di bagian paling bawah sidebar anda untuk memperoleh kecepatan yang optimal.

Foto dan Video
Kalo yang satu ini udah pasti ngebebani blog kita... malah bagian ini yang paling berat lagi untuk blog kita. Semakin banyak kita memesang gambar di blog, maka semakin lambat pula loading blog kita. Tapi meskipun berat-berat begitu, bagian multimedia ini juga gak kalah pentingnya dari postingan yang kita buat.

Dengan adanya Multimedia seperti Foto dan Video di blog kita, maka pengunjung akan semakin tertarik untuk melihatnya, selain itu juga dapat memperindah blog kita.
Tapi gimana caranya memasang banyak gambar tapi kecepatan blog kita tidak menurun ya?
Berikut ada beberapa tips untuk anda agar blog anda tetap kenceng meskipun banyak gambarnya..

Kurangi ukuran gambar anda atau gunakan thumbnails yang mengarah ke link foto/gambar yang sebenarnya.

Sebaiknya Upload gambar anda di Image Hosting agar blog anda tidak terbebani dengan gambar-gambar yang anda Upload. Ada beberapa Image Hosting yang dapat anda pilih tapi sebaiknya gunakan yang cocok untuk blogger seperti Picasa Web Album.

Untuk mengetahui seberapa cepat loading blog anda, anda dapat menggunakan fitur layanan dari Numion yaitu Stopwatch. Dengan menggunakan layanan ini, anda dapat mengetahui seberapa cepat loading blog anda.

Sabtu, 23 Januari 2010

percepat loading blog

Oke buat tmen-tmen yang blognya lodingnya lama saya mungasih solusinya biartmen-tmen ga boring nunggu loading, terkadang pengunjung blog ingin melihat blog tmen tetapi saat loding lama bgt dan akhirnya pengunjung g jadi deh ngunjungin blog anda duh kacian juga y. Jadi nie solusinya pasti ga bakal nyesel, ikuti perintah dibawah ini ya men :

Kunjungi website http://www.cssdrive.com/index.php/main/csscompressor/ , kira-kira tampilannya seperti ini :
login ke blog anda
klik tataletak/layout
klikedit HTML
cari dan copy kode dari
setelah di copy kembali ke web CSS compressor, lalu paste kode yang plend copy tadi ke kotak besar yang berada di bawah tulisan insert CSS code
lihat pada tulisan compression mode, ganti dengan Light lalu lihat tulisan comments handling, ganti dengan don't strip any comments
lalu klik tulisan compress-it, lalu tunggu sebentar
sampai muncul gambar seperti di bawah ini :
copy kode tersebut, lalu paste kembali ketempat plend ambil kode tersebut
mau tes kecepatan blog plend klik disini
kalau blog plend kecepatannya di atas 100kb blog plend masih lambat tapi kalau blog plend kecepatannya di bawah 100kb blog plen sudah cepat
kalau sudah puas kembali ke tata letak lalu simpan
selesai plend semoga berhasil ya

ok sekarang blog plend g lambat lagi waktu loading, pasti nanty banyak deh yang berkunjung
y dah selamat tinggal god bay B-)

Cara Mengkompress kode CSS, maka postingan kali ini mencoba membahas tentang bagaimana mengkompres kode CSS.
Salah satu faktor agar blog atau website mudah atau ringan untuk di load adalah dengan mengoptimalkan file CSS. Salah satu cara agar file CSS anda bisa kecil adalah dengan cara mengkompres file tersebut baik secara manual ataupun secara otomatis dengan menggunakan tool CSS Compressor.
Sebenarnya apa sih yang di kompres pada file CSS? Ambil contoh dalam kode CSS ada kode seperti ini :

a {
color: #0d5ef3;
text-decoration:none;
}

a:visited {
color: #0d5ef3;
text-decoration:none;
}
a:hover {
color: #0d5ef3;
text-decoration:underline;
}

Dari contoh diatas terlihat bahwa ada dua buah properti CSS yang sama, yaitu untuk fungsi a dan fungsi a:visited. Untuk kasus seperti ini maka sebenarnya kita bisa lebih menyedehanakan yaitu dengan menggabungkannya dengan memberikan tanda koma ( , ), dan karena a:hover mempunyai kode warna yang sama maka kode tersebut tidak perlu di tulis kembali. MIsal kode hasil penyederhanaan adalah seperti ini :

a, a:visited{
color: #0d5ef3;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}
Syntax CSS yang pertama dengan yang kedua sedikit berbeda, namun mempunyai fungsi yang sama.

Ternyata gaya penulisan juga berpengaruh terhadap loading, pemakaian banyak spasi memungkinkan waktu load lebih lama. Maka jika anda menginginkan hasil terbaik, syntax CSS yang tadi harus di tulis seperti ini :

a, a:visited{color: #0d5ef3; text-decoration:none;}
a:hover { text-decoration:underline; }
Lebih ekstrim lagi seperti ini :

a, a:visited{color: #0d5ef3; text-decoration:none}a:hover { text-decoration:underline}

Untuk yang terakhir ini akan memnghasilkan loading tercepat, namun anda akan kesulitan ketika anda ingin melakukan editing terhadap CSS anda.

Contoh diatas adalah melakukan kompresi dengan cara manua. Cara ini hanya bisa dilakukan apabila anda sudah familiar dengan kode CSS. Cara yang praktis dan tanpa harus mempunyai basic pemrograman adalah dengan menggunakan Tool CSS compressor, tool seperti ini banyak sekali di internet dan dapat anda digunakan secara gratis.

Tool CSS compressor sangat banyak di internet, salah satunya adalah http://www.csscompressor.com. Namun, sebelum melakukan kompresi kang Rohman menyarankan kepada untuk membuat sebuah backup karena hasil kompresi oleh tool terkadang ada yang kurang sempurna.
Berikut cara-cara kompresi CSS dengan CSS Compressor :

Silahkan kunjungi http://www.csscompressor.com
Pilih mode kompresi yang anda inginkan, apakah itu Highest, Hight, Standart, atau Low.
Copy lalu paste kode CSS yang anda miliki ke kolom CSS input, lalu klik tombol Compress.
Setelah ada hasil kompresi, klik tombol Select All, copy lalu paste pada template anda yang tadi di optimasi.
Selesai.

Selain menggunakan tool dari csscompressor, anda juga bisa menggunakan tool css compressor dari ;

Dan tentunya masih terdapat ratusan tool yang lainnya.

Selamat mencoba !

Jumat, 22 Januari 2010

Menampilkan Widget di Halaman Tertentu saja

Untuk memasangnya ikuti langkah dibawah ini.

Masuk ke blogger acount anda, dan pilih Dashboard >> layout >> Edit html dan sebelumnya anda centang Expand Widget Templates.

Lalu cari kode dibawah ini:

<b:widget id='HTML1' locked='false' title='Shoutbox' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

NB:
Kata shoutbox yang bercetak tebal diatas menandakan title sidebar anda jadi harus disesuaikan

Jika Anda ingin menampilkan Shoutbox pada halaman depan saja maka tambahkan kode berwarna Orange diatas,

Berikut ini Tag lain yang bisa digunakan:

Untuk menampilkan widget pada homepage / halaman depan saja.

<b:if cond='data:blog.pageType == "index"'>

Untuk menampilkan widget pada halaman archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menampilkan widget pada halaman artikel saja

<b:if cond='data:blog.pageType == "item"'>

hanya menampilkan widget pada halaman tertentu saja. Ubah [masukkan URL] dengan halaman pada blog kamu yg widget yg kamu inginkan muncul.

<b:if cond="[masukkan URL]" == data:blog.url'>

Selain Tag diatas, kita juga dapat menampilan kebalikannya.
Caranya, ubah tanda = (samadengan) tang pertama dengan tanda ! (seru)

Misalnya, saya ingin menampilkan widget pada halaman selain homepage, maka kode yg digunakan :

<b:if cond='data:blog.pageType != "index"'>

Kamis, 21 Januari 2010

Mengganti Icon Blogspot default

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

tempatkan script berikut kedalam tag <head> atau tepat dibawah script <head>

<link href='http://img139.imageshack.us/img139/83/image5oa7.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. jika kamu tidak punya webhosting tempat menaruh gambar coba aja daftar di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.