Cara membuat Blog di Blogger

Cara membuat Blog di Blogger - Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama. 

Pada awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan website pada umumnya yang ada di internet. 

Flatform blog atau seringkali disebut dengan mesin blog dibuat sedemikian rupa oleh para designer/programer penyedia blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah menyebut angka 1 2 3.

Cara Membuat Blog Di Blogger

Salah satu penyedia blog gratis yang cukup populer saat ini adalah  blogspot atau blogger, dimana ketika mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub domain dari blogspot, contoh : contohsaja.blogspot.com

Kenapa harus membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di banding dengan penyedia blog lain. Beberapa contoh kelebihan blogger di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau anda dapat mengubah nama blog anda dengan nama domain sendiri misalkan contohsaja.blogspot.com di ubah menjadicontohsaja.com,sedangkan hosting tetap menggunakan blogspot dan masih tetap gratis.

Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam beberapa waktu kedepan panduan membuat blog di blogger ini akan sedikit berbeda dengan apa yang anda lihat di blogger.com

Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blog di blogger.com

Membuat Email

Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan daftar terlebih dahulu di gmail karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email gmail. Jika anda belum paham bagaimana cara membuat email, silahkan baca terlebih dahulu postingancara membuat email gmail. 

Daftar Blog Di Blogger

1. Silahkan kunjungi situs http://www.blogger.com
2. Setelah halaman pendaftaran terbuka, alihkan perhatian ke sebelah kanan bawah, ubah bahasa ke Indonesia agar lebih mudah difahami. 
   
3. Silahkan langsung masuk/login dengan menggunakan username/nama pengguna serta password/sandigmail anda ( akun email anda bisa untuk login ke blogger). 
   
4. Isilah formulir yang ada :
   1. Nama tampilan : isi dengan nama yang ingin tampil pada profile blog anda.
   2. Jenis Kelamin : pilih sesuai dengan jenis kelamin anda, misal : pria.
   3. Penerimaan Persyaratan : Beri tada ceklis sebagai tanda anda setuju dengan peraturan yangtelah di tetapkan oleh pihak blogger. Saran: sebaiknya anda membaca terlebih dahulu persyaratan yang ada agar anda tahu dan mengerti apa yang boleh dan tidak diperbolehkan ketika menggunakan layanan blogger.
   4. Klik tanda panah bertuliskan “Lanjutkan”. 
      
5. Klik tombol “Blog Baru”. 
   
6. Isilah formulir :
   1. Judul : Isi dengan judul blog yang di inginkan, misal : Coretan sang penghayal
   2. Alamat : isi dengan alamat blog yang di inginkan. Ingat! Alamat ini tidak dapat di edit kembali setelah dibuat, apabila anda ingin serius, maka pilihlah nama yang benar-benar anda inginkan.
   3. Template : pilih template (tampilan blog) yang disukai (ini dapat ganti kembali).
   4. Lanjutkan dengan klik tombol “Buat blog!”. 
      
   5. Sampai disini blog anda telah berhasil di buat.
7. Untuk menghindari spam filter, sebaiknya anda langsung posting sembarang saja. Klik tulisan “Mulai mengeposkan”. 
   
8. Isi judul serta artikel. Akhiri dengan klik tombol “Publikasikan”. 
   
9. Silahkan lihat blog anda dengan klik tombol “Lihat Blog”
10. Selesai.

Kini blog anda telah tercipta dan dapat di buka di berbagai belahan dunia. Umumkan pada teman-teman anda bahwa anda kini telah mempunyai blog.

Cara Membuat Header Animasi

Cara Membuat Header Animasi

Kalian liat kan header (ikan-ikan yang berenang) yang ada di atas blog ini, Itulah yang saya maksud. Sebenarnya header itu bukan gambar yang bergerak (berformat giv), melainkan sebuah widget dari abowman.com yang di ubah ukurannya menjadi ukuran header, dan diubah backgroundnya, sesuai dengan yang kita inginkan.

jadi gambar ikan-ikan itu bisa diberi makan (dengan cara diklik) dan bergerak sesuai arah kursor. Selain fish (ikan), masih ada lagi widget dari abowman.com yang lain yang bisa di buat header seperti Stingray, spider (laba-laba), Tree Frog (katak), dll. Tapi, kali ini saya akan menjelas cara membuat header seperti yang saya miliki sekarang ini (header fish).

Bagi kalian yang tertarik membuat header animasi seperti yang ada di blog ini, saya akan menjelaskan caranya,

1. Pertama-tama kita buat backgroundnya. yaitu sebuah file gambar (sebaiknya yang berformat JPEG) yang berukuran sekitar width=950 dan height=250 pixel. Lalu upload ke salahsatu website yang bisa menyimpan gambar, sebaiknyahttp://upload.kapanlagi.com/.

2. Untuk mendapatkan kode widget. kita harus masuk ke http://abowman.com/, lalu cari postingan “fish”. Untuk mempermudah kalian lansung klik saja alamat postingnya, DI SINI.

3. Setelah masuk kedalam postingan “fish”. kita harus mengedit. yaitu mengganti background dll.



4. Pada "edit settings". Yang harus diubah adalah:

a) Background image (jpg)= isikan alamat URL gambar yang telah di upload tadi (gambarnya harus berformat JPEG), caranya klik kanan pada gambar lalu klik “copy image location” lalu kemudian paste. (Sebaiknya sebelum mem-paste, hapus tulisan http:// yang ada di dalam bar “background image (jpg), supaya nantinya tidak double seperti ini, http://http://.

b) Setelah mengganti background, kalian juga bisa menentukan jumlah ikan “number oh fish”, dan warna masing-masing ikan “fish color”.

c) Setelah selesai mengedit, copy scrip-nya di “embed”.



d) Kemudian, login ke blogger lalu,

-Pilih tata letak
-Elemen laman
-Tambah gadget di header.

5. bagi kalian yang tidak bisa meletakkan gadget di header, ini solusinya,

a. Klik tab Edit HTML
b. Beri tanda centang pada Expand Widget Template untuk membackup.
c. Cari kode dibawah ini, (untuk memudahkan gunakan CTRL+F).

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Setelah itu, ganti kode diatas dengan kode dibawah ini

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

d. lalu klik Simpan Template.

6. Kalau sudah, kembali ke “elemen laman”, lalu klik "tambah gadget" yang ada pada header.



Lalu pilih HTML/JavaScript, kemudian paste kode widget (“header ikan”) tadi, lalu simpan.

supaya ukuran widget sesuai dengan gambar (sekitar 940x250 pixel), ganti ukuran widget menjadi(sekitar width="940" height="250" ). caranya, tinggal ubah ukuran widget pada scripnya. cari kode width= (untuk lebar) dan height= (untuk tingginya), lalu ubah ukurannya menjadi, width="940" height="250".

7. Terakhir klik save.

dan selesai…

catatan: cara membuat header dengan widget yang lain(Stingray, spider (laba-laba), Tree Frog (katak), dll) juga sama, tidak jauh berbeda dengan cara yang saya paparkan di satas.

Selamat Mencoba, Semoga Berhasil, dan Semoga Bermanfaat!!!

Cara tulisan mengikuti kursor

Cara tulisan mengikuti kursor

Login ke Blogger 
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript 
Kemudian Copy kode Script berikut dan Paste ke dalamnya :

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000ff; /* warna huruf */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "ridwanfaturrohman.blogspot"; /* Tulisan yang mengikuti cursor */
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20; /* ukuran huruf */
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

Keterangan : tulisan yang berwarna merah bisa sobat ganti sesuai pilihan. 
jika sudah selesai SIMPAN dan lihat hasilnya 

Background Berganti Warna Setiap Loading

Penampilan blog dengan warna background yang sama mungkin akan membosankan. Untuk itu post ini merupakan alternatif lain untuk mengganti warna background blog yang berganti setiap kali loading.
Trik ini dapat juga anda tampilkan pada blog anda dengan mengikuti langkah-langkah dibawah ini :

1. Masuk ke Blogger dengan ID anda
2. Pilih Elemen Halaman
3. Pilih Edit HTML
4. Cari kode </body> pada template blog anda
Copy script dibawah ini, kemudian paste diatas kode tadi

<script> /*Random background color*/ //Enter list of bgcolors: var bgcolorlist=new Array("#DFDFFF", "#FFFFBF", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#FFFFFF", "#DDDD00") document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)] </script>

Gantilah kode warna pada script diatas dengan warna kesukaan anda.
1. Klik tombol Simpan Template
2. Lihat Blog anda sekarang, kemudian refresh kembali untuk melihat perubahan warna background

Membuat Warna Background Blog Transparan

Asesoris blog yang satu ini dikhususkan bagi anda yang memiliki blog dengan latar belakang berupa image.

Secara umum latar belakang image hanya tampil sebagian karena tertutup oleh warna latar dari outer wapper, main wrapper dan sidebar wrapper. Untuk mengatasi masalah tersebut anda harus sedikit menyamarkan latar yang menghalangi background berupa gambar tadi.
Bisa juga dilakukan dengan menghapus warna latar belakang dari outer wapper, main wrapper dan sidebar wrapper, tapi hasilnya artilkel/postingan blog anda akan menjadi kurang jelas karena bersatu dengan gambar latar.
Tutorial ini merupakan salah satu solusi bagi anda untuk menampilkan bayangan latar berupa gambar tetapi tidak terlalu mengganggu bagian lainnya dari blog.

Jika anda tertarik untuk menampilkannya, ikuti langkah-langkahnya :

1. Masuk ke Blogger.
2. Masuk ke Rancangan bagian Edit HTML.
3. Cari kode seperti dibawah ini :
   
   #outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:black;
}
4. Tambahkan kode dibawah ini yang diletakkan dibawah kode diatas
   
   filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.8;
-khtml-opacity: 0.0;
5. Jika digabungkan kodenya akan menjadi seperti dibawah ini :
   
   #outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:black;
filter: alpha(opacity=100);
-moz-opacity: 1.8;
opacity: 0.8;
-khtml-opacity: 0.0;
}
6. Angka berwarna kuning merupakan ukuran yang digunakan oleh blog ini .Silakan anda ubah angka-angka tersebut. Semakin kecil angkanya, akan semakin semakin samar bagian outer wrapper blog anda.
7. Klik tombol Simpan Template.
8. Lihat perubahan blog anda.

Trik ini dapat juga anda terapka pada bagian lainnya dari blog anda.

Selamat mencoba, semoga bermanfaat.