Selamat Berkunjung Di Ocky's Blog
Tampilkan postingan dengan label Tips dan Trik Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tips dan Trik Blog. Tampilkan semua postingan

Rabu, 10 Oktober 2012

Cara Membuat Tulisan Berjalan atau Marquue

Cara membuat tulisan berjalan (marquee) – Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Cara Membuat Tulisan Berjalan (Marquee)

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :
<marquee>Tulisan disini akan berjalan</marquee>
Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah : 

bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks 

direction="left/right/up/down" » Mengatur arah gerakan teks 

behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan 

Scroll » teks bergerak berputar

Slide » teks bergerak sekali lalu berhenti

Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo) 

title="pesan" » Pesan akan muncul saat mouse berada di atas teks 

scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya. 

scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik 

loop="angka|-1|infinite" » Mengatur jumlah loop 

width="lebar" » Mengatur lebar blok teks dalam pixel atau persen 


Agar lebih jelas akan Kang Rohman sertakan contohnya : 

Contoh marquee dari gerakan : 
<marquee align="center" direction="left" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee> 

Contoh hasilnya : 

marquee dari kanan ke kiri 

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down . 

Contoh marquee dengan variasi hurup dan warna latar belakang : 

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>
Contoh hasilnya : 

marquee dengan variasi hurup


Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain. 

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

Contoh kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee> 

Contoh hasilnya : 

silahkan tunjuk ke sini 

Contoh kode marquee yang di dalam nya terdapat link : 
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a><br/> 
</marquee> 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://www.krtutorplus.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a>
<a href="http://krtutorplus.com/2007/04/bikin-blog.html">Membuat blog </a><br/> 
<a href=" http://www.krtutorplus.com/">cara membuat blog</a><br/> 
</marquee> 
Contoh hasilnya : 

cara membuat blog
Membuat blog 
Pasang IklanPasang Iklan 
Membuat blog 
cara membuat blog

Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini. 

Cara Memasang Tulisan Berjalan Di Blog

Bila anda bertanya, sesudah membuat kode marquee lalu untuk di pasang di blognya bagaimana? Tentu jawabannya ya terserah anda mau di pasang di mana. Namun, sebagai contoh berikut adalah cara memasang kode marquee di sidebar blogger. 
  1. Silahkan login ke blogger dengan akun anda.
  2. Klik pada nama blog anda.
  3. Klik menu Tata Letak
    tata letak
  4. Klik Tambah Gadget 
  5. Klik pada widget HTML/Javascript html widget
  6. Pasanglah kode marquee yang telah anda buat sesuai degan yang Kang Rohman terangkan diatas. kode marquee
  7. Klik tombol Simpan
  8. Selesai.
Semoga artikel cara membuat tulisan berjalan (marquee) ini dapat bermanfaat bagi anda.

Senin, 08 Oktober 2012

Cara pasang musik di blog


Cara pasang musik blog di MusicDumper

Hari ini saya akan membahas mengenai cara memasang musik ke blog melalui situs musicdumper.com . Saya membahas artikel ini sejak ada pertanyaan dari salah satu pengunjung yang kebingungan cara memasang musik ke blog. Baiklah tanpa basa-basi saya akan membahasnya.

Langkah-langkahnya :

1. Silakan kunjung ke situs musicdumper.com

2. Tuliskan judul lagu yang anda inginkan di kotak search.


3. Pilih dan klik salah satu judul lagu yang di inginkan.

4. Tunggu beberapa saat muncul musiknya play.

5. Lihat di kotak Embed Options, copy code html tersebut ke blog kamu.


Cara copy code html ke blogspot kamu :

1. Login ke blogger.com

2. Klik Rancangan.

3. Klik tambah gadget.

4. Pilih dan klik html/javascript.

5. Masukkan judul dan kode scriptnya di kotak html/javascript.

6. Setelah selesai dan klik Simpan. Lihat hasilnya.

Artikel berkaitan :


- Situs-situs untuk memasang musik blog

Jumat, 05 Oktober 2012

Cara Membuat Read More di Blog

Cara Mudah Membuat Read More di Blog

Setelah sebelumnya saya pernah share cara Membuat Tulisan Poskan Komentar Di Blog Lebih Menarik, kali ini saya aka share cara membuat read more di blog. Cara ini akan berlaku untuk semua posting, jadi cukup hasa sekali saja maka akan otomatis ada di setiap posting. Nantinya hasilnya akan menjadi seperti gambar di bawah ini. ( gambar ini saya ambil dari blog saya yang lain yaitu Modul MYOB Online ).
Mudah Membuat Read More di Blog

Langsung saja simak cara membuatnya.

  1. Silangkan Log In ke akun blog anda.
  2. Masuk ke Rancangan > Edit HTML
  3. Sebelum melanjutkan ke langkah berikutnya, alangkah baiknya jika anda backup dulu template anda, agar jika ada kesalahan tidak berpengaruh ke blog anada dengan cara klim Download Full Template.
  4. Centang Expand Template Widget.
  5. Cari Kode </head>, kemudian masukkan kode di bawah ini di bawah kode tersebut :


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

 
    6. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>
       Ganti kode di atas dengan kode di bawah ini :

 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


    7. Terakhir tentunya simpan template anda dengan klik tombol Save Template.

Catatan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll.


Demikian tips cara membuat read more di blog,
Semoga Bermanfaat.

Senin, 01 Oktober 2012

Membuat Widget Burung Twitter Terbang Di Blogspot

Membuat Widget Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini
  • Pertama-tama silahkan login di Blogger
  • Klik Design > Page Element > Add Gadget > Html/Javascript
  • Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4TmILfNH1RU3e4NP7cOnqNpB1u1Y1smXIoDIIyJN5oF5S4nSYyu1pYmkqn_aTMu1rR28FcvcIRuDaMrKwZXD4jlmXmrR55CGFkqewDpAzD519Q4G_jKt08ONFYzp_evRSHBKfYjBlr0/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>

  • Ganti kode yang berwarna biru dengan akun Twitter sobat
  • Ganti kode warna merah bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
  • Simpan dan lihat hasilnya.
 Warna Pilihan Burung Twitter
 Warna Kuning
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNwql14lb3qfSlLSY-fyCmkdOkaBIYHYScEDFmdw78828pnfUrxsMUiBxXlgXYHaOHUYMur5Z89_QF7DlblnuS1zGzT2p5w329dhihuLk17aqkHzivqccA_kO3HfHkvaHTrkbc8YpCQDs/s1600/yellow+bird.png
Warna Hitam
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueInrXU-EnPaarFR42nuxHaPzQHbBRrkBP4_8v7wpv5zeJzjZAmZcwYs8zjS7Ly2oQS0sqHj8OFtTHF4ol3W_1LL3ZLg8FBj9Em2kE1h3MfhVmDdpwhXo6PUaGi-9CC0yj7UoQbF_sH4/s1600/black+bird.png
Warna Biru
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0leKdloqfLIt8_V1OezOShz8tEYj0hiNIq6z3xPuc4g70RiUocti5QEHKY-rGdi85dahRTC5kh12nfxKAcxXPlRLIPVAgHowRCIIR1kgfyfKtj_dvbQJwZ0YMzNSTaM4OAoUVCbZOZmI/s1600/Blue+bird.png
Warna Coklat
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8bhyT2QrsbCAojDP4W7m5Ki-sDozQ4shCm7oSBTwHoBVGrgHVaCiLFOLZ93tgKxqlVKIpqdX1E1m5LhIYDyZyVbf_shDJcPOwg7IPPTdB9WzG7_qpmhfZGUL4KK8yIgWjNNDdaueWv8/s1600/brown+bird.png
Warna Hijau
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPJEBkL3SmPapKB7V4W1IwaesQqGxjRfiiMR0PfN-dubmUHH8uVWoftf7T-Xc1M9KrYhm3sINyu_4L_fizkg4wuWjV0G0nlbaqdZsnnvMmxkRVq98j9USUkJVqlhl5MxFEybt1ILJJ6QA/s1600/Green+bird.png
Warna Ungu
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vhFvEUQ82fmom_brxH-WH2s8l2oj36Jl6593m_229ZPNr4ESWaoYknaebU_oIKxJPIJ3iqHTRICnKFVX34asHLdd4xv9HFCjn06B5YM7xPrwhN2K6kc_U5YxWYNYzh0r5SFbtovMhp8/s1600/purple+bird.png
Warna Putih
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8CFTVr8D1dMbnyPPk-loF1TjoBxIDnkFAc6_nhxU4cI3jWOEqrk-G8BaxCc9MZFOj_nQrxR_AvGHc6pL4wwV-q5TJJm5AsSVedZE9_ch16r18YsEDAFA9Kdr5m-V7-ZKOf09RyEHU8w/s1600/white+bird.png
Warna Merah
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXokVFZK-C4qsZzyl-f-Bys0UcrZ-4lFoIOzsG4rGdtoZSeQad_Zydb7ay23Tzhr6foIyiXaKeLM5FzBywb0QKoPcaN2TR1H1RH59HzOFshLh89Wyr3PBOdVff5EOZ0zNVsXLTy3-WxE/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!!!!

Cara Membuat Menu Drop Down

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Ocky Creator pada halaman Facebook.
Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 
Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:







Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>


/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xbiqx35Ll850P7kBnyP2j_MkgzaiEhyF6QulAdNbxVyh1rH5kOSaPW9z55sm0RduyaiMC6QEYe7mekabrn6dwsem99-uHcPN49pIrhWJlf9WaOhaEJpIoXFwN3NPkBeRifXdTC43YJQ/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6vaI9aZnM2qsbA-DYPdCU1n_3vIfW6YudYqdCn48epP_FCy-XQjvlPfsuHiWfv6PTASzeuqmptPOjY6swWLz7Fcwm2NssBEOoMHa7kXylTpOy7sj0GUFfNhKbxpGL4DrSZ0wQdjF-vg/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}


Selanjutnya sobat blogger cari kode berikut:
  • <header>  : untuk menempatkan menu di atas nama blog
  • </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkPBczFG-jxAF3UKXM_mR-2tTYl4RgKxxYySwH5ZFsXo2OZzBMTsLyweqzQWHuJwGAByC4YhN4Xx0wR1zKfd6ilzxTx2lzAymmurFdhwfbLc0mw6KAj65o6F8r8Zbd-qMe2nW4QlG7BU/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo4NtGJYuufEKyJL50X0ynidd-Fly4Cw97YRi16WdcOoDoUY8zvLxoJqTcEmXgj3u_mWKXD4lSYWSAPaQop0X8eTGAfGB033uHGGBPw_UVfPDNlW4kKSviOWzcKWVLT6H-6jBJflOjWvs/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPEfPFcoM-VrVj4a7u1S94g_rO88QDt56HOG5y4Ym_7-bLlhP5_V5gFQLj5P7MhIoEI7pWWM1UPFqG_nUL4nBQbWX-0Qp7wBxLQSyY0n1XQPqS3L446NZ_kytPa8XMBa5LhS7BUMaxjg/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:
  1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
  2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Cara Membuat Blog 2012

Cara membuat blog sudah sangat banyak diulas oleh para blogger  baik di situs berbahasa indonesia maupun situs berbahasa asing, Meski demikian saya juga akan berbagi kepada sahabat pembaca mengenai cara mudah bikin blog ini.
Tahun 2012 ini memang ada beberapa perubahan baik fitur maupun tampilan yang dimiliki oleh Produk Google, seperti halnya Gmail, Jejaring Sosial Google+, termasuk juga perubahan tampilan bloggernya. Untuk itu agar pembaca mudah memahami tutorial ini bisa lebih freindly saya akan menjelaskan cara membuat blog terbaru dengan sangat mudah. 
Menjadi Blogger Pemula seperti saya memang awalnya terasa sangat sulit untuk membuat blog, namun ternyata rasa ingin tau yang besar akan membantu memudahkan calon blogger untuk membuat blog.

Panduan Membuat Blog Gratis di Blogspot

Membuat Blog di Blogspot Gratis

Benar sekali untuk membuat blog di blogspot, kita tidak dikenakan biaya apapun, selain itu fitur di yang dimiliki blogger sangat mudah untuk dipahami, untuk seorang pemula yang ingin bikin blog tidak akan mengalami kesulitan yang berarti, tentu saja situs kita akan memiliki format domain seperti http://situsanda.blogspot.com 

Langkah Membuat Blog Gratis di Blogspot

1. Buat Email di Gmail
Gmail.com adalah produk Google , untuk membuat blog dari blogger sudah barang tentu Wajib memiliki akun Gmail, selain itu Google juga memberikan kemudahan-kemudahan bagi pemilik akun blogger dan Google+ untuk langsung Login dari Gmail.com ini. Jika belum memiliki akun Gmail silahkan daftarkan di www.gmail.com dan klik Create New Akun  pada bagian sudut kanan atas dan kemudian isikan semua data yang diperlukan termasuk juga Pasword anda.

2. Mendaftar di Blogger.com

Ini adalah langkah inti membuat blog gratis di blogspot, Masuk ke www.blogger.com dan Klik Sign Up atau Daftar dan isikan data yang dibutuhkan di Formulir Blogger.

Keterangan :
  • Email : isikan dengan alamat email Gmail yang baru anda daftarkan
  • Pasword : Masukkan Pasword anda minimal 8 karakter
  • Retype Pasword : Masukkan pasword yang sama sekali lagi, untuk memastikan anda mengingat dengan baik pasword tersebut.
  • Display Name : Masukkan nama yang ingin anda tampilkan sebagai penulis di blog, misalkan anda menggunakan nama "Ocky Zadani" maka di artikel yang anda posting nanti akan muncul posted by Ocky Zadani
  • Gender : Masukkan jenis kelamin anda, pilih Male = Jika Laki - laki, Female = Jika Perempuan, atau bisa pula memilih Other atau lainya
  • Birthday : Masukkan tanggal lahir anda sesuai dengan format yang diminta misalkan 07 desember 1991 maka dibuat 07/12/1991, jika di dalam Inggris strukturnya adalah Month/Day/Year (Bulan/Tanggal/Tahun) maka anda buat 12/02/1991
  • Word Verifications : Isikan dengan kode yang terdiri dari angka maupun huruf yang muncul di kotak dialog Gmail
  • Centang Accept the term of service, Saran saya baca dahulu persyaratan pendaftaran dengan baik
  • Klik Continue jika anda memutuskan untuk membuat blog
3. Membuat Blog

Nah, Akun blogger sobat sudah jadi, sekarang saat nya membuat blog. Klik "Blog Baru" pada bagian Kiri atas. dan akan muncul tampilan seperti di bawah ini.


Keterangan :
  • Pada Kolom "Title" Isikan Judul Blog yang sobat ingin buat, misalkan My Personal Blog, My Story atau apalah yang sobat inginkan
  • Pada kolom alamat isikan nama situs sobat, misalkan ockyzadan.blogspot.com,  pilihlah alamat yang sesuai dengan nama dan tema blog dan cari yang simple saja agar mudah diingat 
  • Pilih Template yang sederhana saja, saya rekomendasikan pilih Awesome, karena lebih sederhana.
  • Blog Sobat sudah jadi, untuk mengecek coba ketikan alamat yang anda daftarkan tadi di url browser anda misalkan hadhara.blogspot.com (kalau tidak di cek juga tak masalah)
Selamat sekarang sobat sudah memiliki blog, dan sudah mulai bisa menulis apa yang ingin sahabat tulis dengan mengklik new post di halaman depan (dasbor) blog sobat.