Cara Membuat Blog

Sebelum membahas mengenai bagaimana cara membuat blog, ada baiknya jika kita mengerti apa itu definisi atau pengertian blog. Jika ditanya mengenai pengertian blog, setiap orang pasti mempunyai jawaban yang berbeda, meskipun jawabannya berbeda, makna dari jawaban mereka pasti tidak jauh berbeda.

Definisi Blog

Menurut RidwanAZ.com, blog adalah sebuah situs website yang memungkinkan penggunanya dapat menuliskan atau memposting berbagai hal sesuai dengan keinginannya dengan mudah, (tanpa harus memiliki pengetahuan html rumit) dan dapat dikomentari oleh pengunjungnya. Dengan urutan tulisan terbalik dimana tulisan terbaru berada di paling atas kemudian diikuti oleh tulisan lama di belakangnya. Pada awalnya blog hanya berisi sebuah catatan pribadi atau diari online pemiliknya, namun dewasa ini topik blog telah berkembang lebih luas sebagai ajang berbagi pengetahuan, seperti pendidikan, kesehatan, teknologi dan lain-lain. Bahkan blog juga telah digunakan untuk sebuah perusahaan sebagai media untuk lebih dekat dengan pelanggan dan mitra bisnisnya. (referensi, wikipedia.com blogger.com)

Cara Membuat Blog

Menurut RidwanAZ.com, ada dua layanan blogging yang telah diakui kehebatannya oleh para blogger di seluruh dunia. Yaitu Blogspot (blogger.com; sebuah layanan yang dimiliki oleh google) dan WordPress.com. Namun karena judul artikel ini adalah cara membuat blog di blogspot, jadi artikel kali ini akan membahas blogspot saja. Bagi kamu yang ingin membaca panduan wordpress silahkan baca di sini.

Untuk selanjutnya silahkan ikuti langkah-langkah cara membuat blog lengkap di berikut ini :

1. Untuk memulai mendaftar blog di blogspot silahkan kunjungi alamat situs  www.blogger.com, setelah itu cari tombol Sign up (daftar) yang ada di pojok kanan atas, seperti gambar di bawah ini

2. Setelah tombol sign up diklik, nanti akan muncul aplikasi pendaftaran pembuatan akun gooogle, seperti gambar di bawah ini. Silahkan lengkapi aplikasi tersebut. Gambar di bawah ini merupakan contoh pengisiannya.

Penjelasan pengisian : pada bagian Name, Isi nama  depan dan nama belakang kamu.

Pada Choose your username,  isi sesuai dengan keinginanmu, username ini nantinya berfungsi sebagai email login untuk akses ke dashboard blogspot kamu dan bisa juga untuk login ke Gmail. (jika username tidak tersedia, tambahka angka atau huruf di belakangnya),

Pada Create a Password, isi password kamu (gunakan yang mudah diingat), pada Confirm your passwordsilahkan isi dengan password yang sama dengan password pada kolom pada create a possword tadi.

Pada birth day isi tanggal lahir kamu.  Pada Phone, isi dengan nomor ponsel kamu, untuk Curent your email, dikosongkan saja.  Pada type the two pieces of text, ketikan dua buah teks kode yang ada di atasnya.  Selanjutnya beri tanda centang pada dua kotak kecil di bawahnya, dan yang terakhir Klik pada tombol Next step.

3. Setelah kamu klik pada tombol next, akan ditampilkan perintah verifikasi akun, silahkan masukan nomor ponsel kamu. Kemudian klik tombool Send Verifikation Code. Nanti kamu akan mendapat sms dari google yang berisi  kode aktifasi.

4.  SMS kode verifikasi dari google ke ponsel kamu akan tampak seperti gambar di bawah ini.

5.  Masukkan kode verikasi sms di atas pada kolom yang tampil, seperti gambar di bawah ini. kemudian klik tombol Verify

6.  Jika langkah sebelumnya berhasil, kamu akan menjumpai halaman seperti gambar di bawah ini. Untuk menambahkan foto silahkan klik add profile photo,  jika ingin langsung ke langkah selanjutnya silahkan klik tombol Next Step.

7.   Selanjutnya akan tampil halaman seperti gambar di bawah ini. Ini merupakan tanda bahwa kamu telah memiliki sebuah akun google  berupa alamat email yang bisa digunakan untuk login ke Gmail.com danblogger.com, selanjutnya silahkan klik tombol Back to blogger.

8. Jika melihat halaman seperti gambar di bawah ini abaikan saja , biar lebih cepat dalam membuat blog. SIlahkan klik tombol lanjutkan ke blogger.

9.   Setelah itu kamu akan masuk ke halaman utama Dashboard blogger. Di dashboard ini kamu bisa membuat blog, menulis posting, mengatur tema dan lain-lain.  Untuk membuat blog pertama kali klik tombol Blog Baru.

10.  Setelah tombol blog baru diklik, akan muncul  jendela pembuatan blog.  Pada bagian Judul isi  Judul blog kamu, pada bagian Alamat isi dengana alamat blog yang kamu inginkan. Pada template, pilih salah satu template yang kamu inginkan.  Kemudian klik tombol buat blog

11. Setelah langkah-langkah di atas, blog kamu sudah berhasil di buat.  Untuk menulis posting silahkan klik tombol Pensil, sedangkan untuk melihat tampilan blog yang masuk kosong (belum ada artikelnya) silahkan klik tombol lihat blog.

Selanjutnya-->>

Membuat Efek Salju Pada Blog

Cara membuat efek hujan salju  pada blog  dari judulnya dapat kita ketahui bahwa pada posting kali ini saya akan memberikan cara untuk memasang efek salju pada blog,
ya mungkin nanti blog kita akan kedinginan seperti tempat yang ada pada gambar di samping,
tapi bedanya gambar di samping sama blog anda nantinya
kalau pada gambar di samping orang yang mengunjungi akan kedinginan dan pakai jacket tentunya

tapi kalau pengunjung di blog anda akan terbawa suasana dingin namun, tidak usah pakai jacket .. heheheheeeee....

mungkin anda juga bertanya tanya

looohhh kenapa ni orang memposting Cara membuat efek hujan salju pada blog tapi di nya sendiri tidak memakai efek salju,,,
nah sebelum ada pertanyaan seperti itu saya akan jawab dahulu di sini hehehee
alasanya adalah karna blog saya tidak cocok memakai efek salju :), namun khusus untuk posting yang ini kemungkinan ada hujan saljunya,, karna saya menaruh script hujan salju pada posting ini, coba sajah anda lihat arah kan scroll nya keatas karna blog saya di atas warna nya coklat jadi bisa kelihatan , kalau di bawah mah gak keliatan karna warna nya putih

oke mungkin anda sudah kesel nunggu tutorialnya karna terlalu lama hehehe

oke langsung sajah nih tutorialnya

• login dulu ke blogger
• KLIK Rancangan/Design
• elemen laman
• add gadget
• pilih HTML/java script
• masukin scriptnya (  script ada di bawah posting ini )
• save
•    NIH SCRIPTNYA : 

<script src="http://gubhugreyotprojects.googlecode.com/svn/effects/effek-salju.js" type="text/javascript"></script>

oke gimana gan sudah bisa belum, jangan lupa tinggalin kometar ya, agar nanti bisa saya kunjungi balik, semoga posting kali ini bermanfaat untuk anda semua wassalam

Selanjutnya-->>

Cara membuat tulisan berjalan mengikuti cursor

Pada blog adalah salah satu dari trick mempercantik Blog, karna bisanya kalau cursornya ada tulisan yang mengikuti nya itu akan membuat pengunjung betah,
tahu gak kenapa ??


karna memungkinkan pengunjung untuk memainkan cursor pada blog yang ada tulisan yang menikuti nya
#jhahahaaa pengalaman heheheee


untuk melihat seperti apa sih Cara membuat tulisan berjalan mengikuti cursor pada blog, bisa anda lihat Demonya , klik tombol DEMO

oke sudah liatkan ??

saya tau pasti dalam fikiran anda terhadap saya begini
"ini pemilik blog banyak basa basinya lama banget bikin gue kesel"

hehheee bener gak ??

ya udah kalau emang begitu kita langsung sajah masuk ke tutorialnya

• Login ke Blogger (Dasboard)
• KLIK Rancangan/Design
• kemudian menuju Elemen Laman
• Klik add Gadget
• pilih HTML/javascript
• copy paste script di bawah ini
• simpan/save

  untuk melihat script klik tombol  SHOW di bawah ini

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'calligraffitti', verdana, arial;
color: #0000ff;
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 = "Bagus Dermawan";
/* 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;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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> 

Catatan:
              *ganti tulisan Bagus Dermawan dengan tulisan yang anda inginkan



oke sobat semoga blog ente semua semakin cantik,
sebaik baiknya pengunjung adalah pengunjung yang selalu memberikan komentar pada artikel yang di bacanya,
coment ya nanti saya kunjungi balik

Selanjutnya-->>

Cara Membuat Menu di Blog

Cara Membuat Menu Navigasi Pada Blog seperti punya saya terdapat  menu navigasi horizontal drop down atau seperti pada blog ini agar lebih jelasnya coba anda lihat menu dibagian atas sendiri adalah menu navigasi horizontal drop down. Fungsi dari menu navigasi pada blog yaitu memudahkan kita atau pengunjung blog untuk mencari artikel dalam satu kelompok misalkan pada menu navigasi tertera software pada menu drop downnya bisa terisi antara lain software audio, software edit foto, antivirus dan lain sebagainya sebelumnya saya juga pernah memposting cara membuat navigasi horizontal dengan slide out.

Bagaimanakah Cara Membuat Menu Navigasi Pada Blog akan saya bahas disini tutorialnya dengan tambahan menu navigasi horizontal drop down. Mari kita simak bersama sama.

1. Login blog anda 

2. Pada dashbord kemudian klik template >> edit HTML >> Lanjutkan

3. Beri tanda centang pada Expand widget template
4. Cari kode berikut

]]></b:skin>

5. Setelah ketemu letakan kode dibawah ini diatasnya

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;} #NavbarMenuleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; margin:0; padding:0;} #nav{margin:0; padding:0;} #nav ul{float:left; list-style:none; margin:0; padding:0;} #nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;} #nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;} #nav li{float:left; padding:0;} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #nav li ul a{width:140px;} #nav li ul ul{margin:-24px 0 0 170px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;} #nav li:hover, #nav li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

6. Sekarang cari kode

<body>

7. Dan letakan kode dibawah ini dibawahnya

<div id='outer'> <div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a href='http://www.madiuncool.blogspot.com'>Home</a></li> <li><a href='#'>Software</a> <ul> <li><a href='http://www.madiuncool.blogspot.com'>Antivirus</a></li> <li><a href='http://www.madiuncool.blogspot.com'>Audio</a></li> <li><a href='http://www.madiuncool.blogspot.com'>Video</a></li> </ul></li> <li><a href='#'>A</a> <ul> <li><a href='http://www.madiuncool.blogspot.com'>A1</a></li> <li><a href='http://www.madiuncool.blogspot.com'>A2</a></li> <li><a href='http://www.madiuncool.blogspot.com'>A3</a></li> </ul></li> <li><a href='#'>B</a> <ul> <li><a href='http://www.madiuncool.blogspot.com'>B1</a></li> <li><a href='http://www.madiuncool.blogspot.com'>B2</a></li> <li><a href='http://www.madiuncool.blogspot.com'>B3</a></li> </ul></li> <li><a href='#'>C</a> <ul> <li><a href='http://www.madiuncool.blogspot.com'>C1</a></li> <li><a href='http://www.madiuncool.blogspot.com'>C2</a></li> <li><a href='http://www.madiuncool.blogspot.com'>C3</a></li> </ul></li> <li><a href='http://www.madiuncool.blogspot.com/'>About Us</a></li> <li><a href='http://www.madiuncool.blogspot.com/'>Contact</a></li> <li><a href='http://www.madiuncool.blogspot.com/'>DAFTAR ISI</a></li> <li><a href='http://blogger.com'>Login</a></li> </ul> </div> <div id='search'> <form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/> <input class='btn' type='submit' value='Go'/> </form> </div></div> </div>

Update:
Ganti teks berwarna hijau dengan alamat blog / link anda
Ganti teks berwarna merah dengan nama menu yang anda inginkan
About Us : menjelaskan isi blog anda membahas tentang apa
Contac Us : menjelaskan mengenai data diri anda apa bila ada yang ingin memasang iklan di blog anda lebih mudah untuk menghubungi anda.

Ok akan saya bahas beberapa yang perlu diketahui untuk anda pengguna template bawaan blogger ada 2 cara yang perlu anda ketahui.
1. Bila ingin menggunakan tampilan navigasi ini dibawah navbar bawaan blogger letakan kode no 7 diatas kode

<div class='body-fauxcolumns'>

Hasilnya :

2. Bila ingin menggunakannya diatas navbar bawaan google letakan kode no7 dibawah kode

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Hasilnya :

Semua ini hanya pembahasan dan untuk pengetahuan saja apabila anda menggunakan cara 1 dan 2 silahkan dan bila anda menghilangkan navbar bawaan blogger tampilannya akan sama. Apa bila ada pertanyaan mengenai Cara Membuat Menu Navigasi Pada Blog silahkan jangan sungkan berkomentar karena setiap template berbeda.

Selanjutnya-->>