Cara Membuat Blog Terbaru 2012 + Cread Email

Blogger.com platform blog yang jadi salah satu blog pilihan blogger Indonesia terutama buat yang baru belajar sepertiku. Walau sebagian blogger pro mencibir blogspot dan selalu membanding bandingkan dengan Wordpress.org blogspot selalu yang utama dihatiku karena dia gratis dan sudah support beragam script dan bisa memasang iklan.

Langsung saja ini langkah demi langkah cara membuat blogger di Blogspot terbaru :

1. Membuat Email di Gmail.com

Blogger.com sudah di akusisi oleh Google jadi langkah pertama dalam membuat blog di blogspot ialah kita wajib untuk memiliki akun GMAIL sebagai  email yang digunakan untu daftar di blogger.com. Walaupun sebenarnya bisa menggunakan email lain tapi percaya deh mending make GMAIL dari awal.

Cara Membuat Email di Gmail

Daftar GMAIL gratis buka www.gmail.com lalu klik di pojok kanan atas Create An Account atau Buat Akun

membuat akun di Gmail.com

Tinggal isi data data di akun gmail yang akan dibuat seperti nama, tempat tanggal lahir , password dan lain-lain.

Biasanya dalam membuat email di GMAIL kita perlu verifikasi lewat nomor handphone jadi usahakan masukan nomor handphone yang bisa dikirimin sms dari Google untuk verifikasi.

Setelah email di Gmail dibuat baru kita bisa melanjutkan ke step 2 membuat blog.

2. Daftar di Blogger.com

Setelah membuat email di GMAIL sekarang saatnya daftar di www.Blogger.com

buka www.blogger.com lalu klik bagian kanan atas yang bertulisan 'sign up atau daftar'

daftar blogger | Sign Up

Isi data-data sesuai keinginan :

Cara bikin blog

• email : email GMAIL yang kita buat tadi di tahap 1
• Password : pilihlah password minimal 8 karakter
• Display Name (nama tampilan) : Merupakan nama yang digunakan sebagai nama kita di akun blog nanti. Misal aku memilih nama "ayead gaptek" maka nama yang akan muncul ketika aku posting nanti ialah "posted by ayead gaptek atau diposting oleh ayead gaptek"
• Gender (Jenis Kelamin) : pilih kelamin sesuai kenyataan atau kalau ragu pilih "other atau lainnya"
• Birthday (tanggal lahir) : masukan dengan format tanggal/bulan/tahun misal jika tanggal lahir 17 agustus 1945 maka yang dimasukkan = 17/08/1945 jika dalam format bahasa inggris seperti gambar dibawah maka format tanggalnya ialah bulan/tanggal/tahun
• Word Verification (verifikasi) : masukan karakter yang terdapat di bawah
• Lalu centang Acceptance of terms (penerimaan peryaratan)
• Klik Continue / Lanjutkan

3. Membuat Blog | Cara Bikin Blog

Sampai proses diatas sobat sudah selesai cara membuat akun Blogger, sekarang saatnya membuat BLOGnya. 

Di akun blogger klik "Blog baru" untuk membuat blog. Lalu akan muncul halaman untuk memilih Judul, Alamat Blog dan Template.

Cara Membuat Blogger : memilih Judul, Alamat dan template

Pilih Judul dan Alamat blog.

• Judul digunakan sebagai penama blog, misal untuk blog ini dulu kuberi judul Blognya Ayead Tergaptek
• Alamat merupakan url alamat blog yang diinginkan misal alamat blog blogayead.blogspot.com

Saran Gaptek : dalam memilih judul dan nama blog jangan pilih yang aneh atau susah dieja maupun menggunakan simbol yang aneh-aneh. Pilih yang mudah diingat orang lain dan tidak membingungkan.

Memilih Template Blog

Ada berbagai template bawaan dari blogger yang tersedia sobat bisa memilih terserah sesuai dengan yang disuka lalu klik 'Buat Blog'

Saran Gaptek : Dalam memilih template blog awal, aku lebih suka dengan template 'AWESOME' karena lebih terlihat simpel tanpa banyak background gambar. Template yang namanya 'Simple' justru sebenarnya tidak simpel seperti namanya karena menggunakan background dalam bentuk gambar sehingga berat untuk dibuka.

4. Blog Sudah Jadi

Selamat ! sampai disini blog sudah berhasil dibuat, namun masih kosong. Setelah ini akan ada beberapa hal yang perlu di setting sebelum melakukan posting.

Blog Yang Dibuat Masih Kosong

Untuk melihat blog yang baru dibuat bisa langsung mencoba dengan langsung mengetikan alamat blog yang baru dibuat tadi di browser contoh : blogayead.blogspot.com

5. Jangan lupa cek email yang didaftarkan tadi untuk memverifikasi akun google kita .

Di email yang kita daftarkan pada tahap 1 nanti akan ada "

Google Email Verification

" buka dan klik link yang ada di dalam email tersebut

Cara Menambahkan Elemen Halaman Baru Diatas Header

Seperti judul diatas akan membahas tetang tehnik untuk menambakan Elemen halaman baru diatas Header blog. Yang saya maksut dari menambahkan Elemen halaman Baru Diatas Header blog adalah seperti pada gambar dibawah bagian yang ditunjuk oleh panah berwarna merah

Fungsinya tetap sama sebagai tempat untuk meletakan widget yang pada umumnya digunakan oleh banyak orang untuk meletakan Iklan atau menu horizontal.

Berikut lankah-Lankah yang Harus anda lakukan untuk menaba elemen baru diatas Header :

1. Pastikan anda sudah masuk pada halaman blogspot anda pilih menu "Template"





2. Akan muncul halaman berikut dan klik pada tombol Edit HTML





3. Klik tombol Next/Lanjutkan setelah itu anda akan dibawa kehalaman edit HTML seperti berikut





4.  Centang Expand Template Widget.
5. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca ranya Disini
6. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
7. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

8.  Sekaran Anda cari Kode <div id='header-wrapper'>   atau <div id="header-outer">
9. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas kode <div id='header-wrapper'>   atau <div id="header-outer">

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

10. Lankah terakhir klik simpan





11. Selesai

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar



Demikian Tutorial Kali ini tetang Cara Menambahkan Elemen Halaman Baru Diatas Header Blog Semoga bisa bermanfaat

Cara menambahkan elemen laman baru Dibawah Header Blog

Elemen halaman yang akan ditambahkan kali ini berda di bawah header blog anda seperti gambar berikut

Fungsinya tetap sama sebagai tempat untuk meletakan widget yang pada umumnya digunakan oleh banyak orang untuk meletakan Iklan atau menu horizontal.

Berikut lankah-Lankah yang Harus anda lakukan untuk menabah Elemen Halaman baru dibawah Header :

1. Login Menggunakan Akun Blogspot anda pilih menu "Template"





2. Selanjutnya akan tampil seperti halaman berikut, klik pada tombol Edit HTML





3. Klik tombol Next/Lanjutkan setelah itu anda akan dibawa kehalaman edit HTML seperti berikut





4. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu
5. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
6. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

7. Sekarang anda cari kode yang mirip dengan kode berikut ini
• Kode Yang harus anda cari jika anda menggunakan template lama blogger

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
    </div>

• Kode yang harus anda temukan jika anda menggunkan template baru blogger

<div id='header-outer'> 
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
    </div>

8. Apabila sudah ketemu copas kode dibawah ini dan letakan dibawah kode diatas

<div id="under_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

9. Lankah terakhir klik simpan





10. Selesai

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak jika ada Elemen tambahan dibawah Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar



Demikian Tutorial Kali ini tetang Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog Semoga bisa bermanfaat

Cara membuat atau menambah 3 kolom dibawah header

Cara Membuat Atau Menambah 3 Kolom Dibawah Header berhubungan dengan tutorial sebelumnya tentang Cara Membuat Atau Menambah 2 Kolom Dibawah Header. Dari tutorial tersebut kita akan menambahkan sedikit kode untuk Merubahnya menjadi 3 kolom.

Berikut Lankah-Langkah Untuk Menambah 3 Kolom Dibawah Header :

1.  Pastikan anda sudah login ke akun blogger/blogspot
2. Setelah ada berada pada halaman Panel Blog anda Pilih " Template"





3. Klik Tombol Edit HTML





4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut





5. Jangan lupa Centang Expand Template Widget.





6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini 
7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode)
8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin> 

<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div> 

9. Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer">
10. Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">

<div id='box-kolom-widget'>
<div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

12. Lankah terakhir klik Tombol Simpan Template 





13. Selesai dan lihat hasilnya

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 3 Kolom Dibawah Header Semoga bisa bermanfaat

Cara membuat atau menambah 2 kolom dibawah header

Nah...Untuk menambahkan 2 kolom dibawah header tidak begitu sulit kita hanya memodifikasi sedikit dari kode tersebut.

Berikut langkah-langkah yang harus anda lakukan :

1. Login menggunkan akun blog anda
2. Setelah anda masuk ke Dashboard pilih Menu "Template"





3. Klik  Tombol Edit HTML





4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut





5. Centang Expand Template Widget.





6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>

#box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }

9. Sekaran Anda cari Kode <div id='main-wrapper'>   atau <div id="main-outer"> 
10. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">

</div>
<div id='box-kolom-widget'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>

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

11. Lankah terakhir klik Tombol Simpan Template





12. Selesai dan lihat hasilnya

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 2 Kolom Dibawah Header Semoga bisa bermanfaat

Cara Upload dan Back-up Template pada Tampilah baru Blogspot

Berikut langkah-langkah untuk upload dan back-up template blog anda pada tampilan baru blogspot:

1. Pastikan anda sudah Login ke akun blogger anda
2. Klik Tempalte





3. Anda akan dibawa kehalaman seperti pada gambar berikut :




Perhatikan tanda panah pada gambar diatas. Klik pada tombol Cadangan/Pulihkan atau Tombol Backup/Restore

4. Setelah anda klik tombol tersebut anda akan dihadapkan ke halaman berikut





5. Klik pada Tombol Unduh Template Lengkap untuk Download Template anda dan klik pada tombol Browser untuk upload template blog anda
6. Selesai

Demikian tutorial dasar tetang cara download dan Upload template pada tampila baru blogspot/blogger semoga bermanfaat.

Cara menambahkan widget like box Facebook Pada Halaman blog

Lankah 1 : Mendapatkan Code Like Box FB

1. Silahkan anda masuk ke akun facebook anda
2. Jika sudah kunjungi alamat berikut http://developers.facebook.com/docs/plugins/
3. Anda akan menjumpai Halaman dibawah ini kemudian klik Like Box 





4.  Berikutnya akan muncul pengaturan untuk widget like box seperti berikut 





Klik Gambar Untuk Memperbesar


Ket :
Facebook Page URL : Letekan URL Fans Page FB anda Disini
Width : Pengaturan untuk lebar kotak like box FB 
Height : Pengaturan Untuk Tinggi kotak Like box FB
Color Scheme : Pengaturan Background Like Box FB
Show Faces : Pengaturan apakah ingin menampilkan orang yang menyukai Fans Page anda
Border Color : Pengaturan untuk border Like Box FB anda


5. Selanjutnya Klik Get Code
6. Kemudian Copy Semua kode yang diberikan 

Sekarang anda sudah mendapatkan Kode untuk menampilkan Widget Like Box di blog anda sekarang lanjut ketahan berikutnyanya

Langkah 2 : Menambahkan Widget like Box kehalaman Blog

1. Silahkan anda masuk kehalaman blog anda
2. Pilih Tata Letak





3. Klik Tambah Gadget/Widget





4. Pilih HTML/JavaScript





5. Paste Code Like Box FB yang sudah anda Copy tadi Ke box HTML/JavaScript 





6. Trakhir Klik Simpan
7. Selesai

Cara menyembunyikan Code CSS

Halo, Pagi ini ane share cara menyembunyikan CSS.

Pas ane ngecek source FACEBOOK kok pendek amat, Setelah ane buka 1 per 1 ternyata itu CSS nya.

CSS nya seperti hilang tapi kagak hilang sebenarnya CSS nya hanya disembunyikan dan di ringkas menjadi (.CSS).

   Contoh: Http://www.penyolongan-cheater.css.

Jika anda ingin membuatnya alangkah baiknya membackup Template anda Terlebih dahulu.

1.  Login ke Blogger, masuk ke Rancangan/Template >> Edit HTML
2. Selection dari Tengah-Tengah Kode Berikut  <b:skin><![CDATA[ script css (cut) ]]></b:skin>.
3. Setelah di Selection Klik Kanan > Cut atau CTRL + X di keyboard.
4. Kemudian Paste kan kode tadi ke Notepad dan Save dengan format .CSS
   Contoh: Penyolongan-cheater.css.
5. Kemudian upload File .CSS tadi ke dalam sebuah hostingan atau Google Site.
6. Setelah di upload sekarang tinggal membuat script pemanggilnya.
   Ganti Kode  Dengan Kode Berikut.

<link href='URL-FILE.CSS' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:skin><![CDATA[ ]]></b:skin>
</b:if>

             Teks Yang Bewarna Kuning adalah URL css yang telah di upload tadi ^_^.

     7. Dan Terakhir Save Template dan lihat pada blog anda apakah CSS nya masi muncul pada open
         source.


Apabila Artikel ini Membantu tinggalkan komentar anda ^_^.
THX.

Cara membuat kotak sidebar terpisah

Membuat Kotak Sidebar terpisah-pisah adalah hal yang mudah. berbagai desain blog bermunculan.
yaudah gak usah lama-lama lagi ikuti langkah-langkah di bawah ini untuk membuat sidebar terpisah-pisah.

1. Login ke Bloger dan masuk ke edit Html
2. Cari kode yang mirip seperti kode dibawah ini di antara <head> dan </head>

.sidebar .widget{Border-bottom:1px solid; margin:0 0 1.4em; padding:0 0 1.5em;}

3. Edit kode di atas dengan kode dibawah ini

.sidebar .widget {background:transparent;border:1px solid #fff; margin:0 0 1.4em; padding:0.5em;}

4. Save template.


NB:artinya setiap widget yang kamu tambahkan akan dipisahkan (margin:0 0 1.4em;)  
sebesar 1.4m ke bawah.