cara membuat blog gratis dengan cepat dan mudah

cara membuat blog dengan cepat dan mudah. Blog merupakan media untuk menulis artikel yang berisikan berbagai macam konten. banyak sekali manfaat dari blog mulai dari iseng-iseng, untuk komersial dan lain sebgainya, banyak orang yang ingin membuat blog karena ingin mendapatkan uang dari blog, memang menyenangkan jika bisa menghasilkan uang dari blog.

bagi sobat yang mungkin baru saja ingin membuat blog, kali ini saya akan membahas bagaimana cara membuatnya. banyak cara dan tempat untuk mebuat blog, namun yang akan saya bahas kali ini adalah membuat blog di blogspot.com.

blogspot merupakan salah satu "produk" andalan dari google. hanya dengan memiliki email google (gmail), sobat sudah bisa menikmati semua produk google.

jadi untuk membuat blog di blogspot, sobat hanya perlu masuk ke blogspot.com

jika sobat belum login ke gmail silahkan sobat login dulu.

jika sobat belum memiliki akun gmail silahkan sobat membuatnya terlebih dahulu. silahkan sobat ketikkan gmail.com di browser sobat.

selanjutnya kita bahas seputar blogspot.

ketika sobat masuk ke blogspot.com dan belum login gmail, maka sobat akan diminta untuk login dengan akun gmail sobat

jika sobat sudah login maka tampilannya akan seperti ini.

untuk membuat blog baru silahkan sobat pilih blog baru.

kemudian ketikkan nama, alamat dan template blog yang ingin dibuat

jika sudah klik buat blog

jika sudah itu berarti blog sobat sudah berhasil dibuat

dan di sebelah kiri dashboard akan ada menu ikhtisar, pos, laman dan yang lainnya

pada menu ikhtisar menampilkan jumlah penayangan setiap harinya, serta informasi lainnya seperti komentar, pengikut dan yang lainnya

pada menu pos menampilkan postingan-postingan sobat

pada menu komentar berisikan komentar-komentar yang telah diterbitkan

pada menu google+ terdapat settingan-setiingan untuk google+ sobat, apakan sobat ingin membagikan postingan sobat yang baru ditulis ke akun google+ sobat atau tidak

pada bagian statistik berisikan statistik penayang, sumber lalu lintas dan yang lainnya

penghasilan (adsense)

sobat bisa mendapatkan penghasilan (dolar) dari blog sobat dengan cara memasang google adsense

google adsense menggunakan sistem PPC (pay per click) setiap ada yang mengklik iklan maka sobat mendapatkan imbalan.

kampanye, sobat bisa mempromosikan blog sobat dengan tujuan agar blog sobat memiliki banyak pengunjung

tata letak, sobat bisa mengatur tampilan blog sobat pada bagian ini

mengganti gambar favicon

mengatur gambar header

menambahkan widget untuk mempercantik blog sobat

template, untuk mengatur setting template sobat dan menambahkan aksesoris-aksesoris serta teknik-teknik lain dalam blogging

mengaktifkan atau menonaktifkan dan mengatur template seluller

setelan dasar

pos dan komentar

seluller dan email

bahasa dan pemformatan

preferensi penelusuran

setelan lainnya

Read more »

macam macam kode warna

macam macam kode warna. 

Gold #ffd700
Yellow #ffff00
Lightyellow #ffffe0
Yellowgreen #9acd32
Palegoldenrod #eee8aa
Goldenrod #daa520
Lime #00ff00
Green #008000
Seagreen #f4a460
Palegreen #98f698
Lightseagreen #20b2aa
Forestgreen #228622
Lightgreen #90ee90
Olive #808000
Tan #d2b48c
Teal #008080
Olivedrab #6b8e23
Greenyellow #adff2f
Darkslategray #2f4f45
Darkolivegreen #55662f
Mediumspringgreen #00fa9a
Darkgoldenrod #688606
Darkkhaki #606766
Orchid #da70d6
Fuchsia #ff00ff
Darkmagenta #860086
Darkviolet #940003
Mediumpurple #9370db
Violet #ee82ee
Purple #800080
Plum #dda0dd
Gray #808080
Dimgray #696969
Gainsboro #dcdcdc
Lightslategray #778899
Lightgray #d3d3d3
Slategray #708090
Darkgray #a9a9a9
Silver #c0c0c0
Springgreen #00ff7f
Lightpink #ffb6c1
Navojowhite #ffdead
Darksalmon
Khaki #f0e68c
Aquamarine
Chocolate #d2691e

Cyan #00ffff
Blue #0000ff
Skyblue #abcdef
Darkcyan #008686
Cadetblue #5f9ea0
Midnightblue #191970
Mediumslateblue #7b68ee
Cornflowerblue #6495ed
Lightsteelblue #b0c4de
Lightskyblue #87cefa
Powderblue #bde0e6
Aquamarine #7fffda
Dodgerblue #1e90ff
Royalblue #4169e1
Blueviolet #8a2be2
Indigo #460082
Lavender #e6e6fa
Lightblue #add8e6
Deepskyblue #00bfff
Darkslateblue #483080
Mediumvioletred #071585
Mediumturquoise #4801cc
Mediumorchid #ba55d3
Darkturquoise #00ccd1
Paleturquoise #afeeee
Darkorchid #9932cc
Slateblue #6454cd
Aqua #00ffff
Red #ff0000
Darkred #860000
Indianred #cd5c5c
Firebrick #622222
Lightsalmon #ffa07a
Lightcoral #f08080
Maroon #800000
Crimson #dc143c
Tomato #ff6347
Salmon #fa8072
Coral #ff7f50
Pink #ffc0cb
Hotpink #ff69ba
Deeppink #ff1493
Lightpink #ffb6c1
Mistyrose #ffe4e1
Moccasin #ffe4b5
Peachpuff #ffdab9
Mintcream #f5fffa
Floralwhite #fffaf0
Oldlace #fdf5e6
Thistle #d8bfd8
White #ffffff
Linen #faf0e6
Navy #000080
Snow #fffafa
Orange #ffd000
Orangered #ff4500
Burlywood #deb887
Darkorange #ff8c00
Palevioletred #db7093
Sandybrown #f4a460
Rosybrown #bc8f8e
Brown #a52a2a
Peru #cd853f

Read more »

membuat teks mengikuti kursor di blog

- sign in 

- edit laman

- tambah gadget lihat gambar Klik Disini
 
- pilih HTML/JavaScript

-kemudian copy code berikut:


<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "DHIRA PUZZPA";

/* 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 = 24;

// 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>


- kemudian simpan

keterangan: teks yang berwarna hijau ganti dengan teks yang kalian inginkan

Read more »

cara menghilangkan navbar di blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: <body>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code ini dibawahnya


<style type='text/css'> 
#navbar-iframe {display:none;} 
</style> 

-  kemudian simpan

Read more »

membuat menu dengan animasi di blog

- sign in

- edit laman

- tambah gadget (lihat gambar Klik Disini)

- pilih HTML/JavaScript

- kemudian copy code berikut:

<style type="text/css">
.menuqu ul li{list-style: none; display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://adhirapuzzpa.blogspot.com/'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>


- simpan

keterangan: URL ganti dengan URL kalian

Read more »

membuat teks berjalan pada menu bar di blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: <head>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code berikut dibawahnya:

<script language='JavaScript'>
var txt=&quot;    warna-warni kehidupan   &quot;;
var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
</script

- ganti teks warna-warni kehidupan dengan teks yang ingin ditampilkan
- simpan template

Read more »

membuat link efek pelangi di blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: <title><data:blog.pageTitle/></title>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code berikut dibawahnya:

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/rainbowlink.js'/>

- kemudian simpan

Read more »

memberi efek tutun salju pada blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: </head>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code berikut diatasnya:

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/vikry-Snow.js' type='text/javascript'/>

- kemudian simpan

Read more »

cara membuat daftar isi blog (part1)

langkah pertama:
- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: <b:include data='post' name='post'/>
- untuk mempermudah pencarian tekan CTRL+F
- hapus kode diatas, kemudian ganti dengan kode dibawah ini :


 <b:if cond='data:blog.homepageUrl != data:blog.url'>
 <b:if cond='data:blog.pageType != "item"'>
 <a expr:href='data:post.url'>
 <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
 <data:post.title/></div></a>
 <b:else/>
 <b:include data='post' name='post'/>
 </b:if>
 <b:else/>
 <b:include data='post' name='post'/>
 </b:if>


- kemudian simpan template


langkah kedua:
setelah langkah diatas selesai masuk ke menu EDIT LAMAN
- tambah gadget
- pilih HTML/JavaScript
-kemudian copy code berikut:

<a href="http:// NamaBlogAnda.com/search?max-results= 200 ">Daftar isi&raquo;</a>

200 adalah jumlah postingan yang ingin dimunculkan

- kemudian simpan perubahan

Read more »

membuat efek taburan love di blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: ]]></b:skin>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code berikut dibawahnya:

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/taburanlove.js?attredirects=0&d=1' type='text/javascript'/>

- kemudian simpan

Read more »

cara mengubah kursor di blog

- sign in ke blog
- edit laman
- tambah gadget
- pilih HTML/JavaScript
-kemudian copy code berikut:

<style type="text/css">
body {
cursor:url("file:///D:/software/cursor/ani272.ani")
,default}
</style>


- kemudian simpan perubahan

untuk lebih banyak jenis-jenis kursor silahkan download disini:
http://www.enterupload.com/bhvz9dmskcq8/cursor.rar.html

Read more »

cara membuat pesan pembuka di blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: </body>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code berikut diatasnya:

<script language="JavaScript">alert("SELAMAT DATANG DI BLOG SAYA");</script>


teks yang didalam kurung adalah teks yang ingin ditampilkan

- kemudian save

Read more »

cara membuat pesan penutup di blog

- sign in ke blog
- klik layout/tata letak
- klik edit HTML
- (sebaiknya kalian download template lengkap terlebih dahulu, agar jika hasil tidak sesuai dengan keinginan maka bisa dikembalikan seperti semula)
- beri tanda  centang pada Expand Widget Template (agar code widget muncul)
- kemudian cari kode: </head>
- untuk mempermudah pencarian tekan CTRL+F
- letakkan code berikut dibawahnya:

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Terima KAsih Atas Kunjungan Anda, Ditunggu Kunjungan Selanjutnya');
}
parent.window.onunload=goodbye;

</script>


teks yang didalam kurung adalah teks yang ingin ditampilkan

- kemudian save

Read more »

cara membuat efek kembang api di blog

- sign in
- edit laman
- tambah gadget (lihat gambar Klik Disini)
- pilih HTML/JavaScript
-kemudian copy code berikut:


<script src="http://adetea.fileave.com/apie.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.ade-tea.blogspot.com/
* Please keep this notice intact
***********************************************/
</script>


- kemudian simpan

Read more »

cara membuat tombol share melayang di blog

 
 
- sign in
- edit laman
- tambah gadget (lihat gambar Klik Disini)
- pilih HTML/JavaScript
- kemudian copy code berikut:

<style type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position: absolute;
}

#z33sHare{
right:1%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
top: 20%;
}

#z33sHare div{
padding:6px 6px 6px 5px;
}

#stw{
margin-left:-2px;
}

#sfs{
margin-left:-5px;
}

</style>
<div id="z33sHare">
<div id="ssl-box">
<div id="stw">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>
</div>
<div><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><div style="clear:both;"></div></div>

- simpan

Read more »

cara mengunggah template di blogger

Berikut ini saya akan menunjukkan bagaimana cara mengupload atau mengunggah template di blogger.

tanpa basa basi langsung saja kita ke TKP.

yang pertama adalah masuk ke rancangan kemudian pilih EDIT HTML

sebaiknya anda mendownload template anda terlebih dahulu untuk antispasi apabila template yang baru tidak sesuai dengan keinginan anda, atau suatu saat nanti ingin menggunakan template yang lama

dan tahap selanjutnya adalah memilih file template pada dokumen anda,

kemudian pilih unggah, dan tunggu sampai proses pengunggahan selesai.

Read more »

cara membuat template online

haii sobat blogger, bagaimana dengan template blog kalian????
apakah sudah sesuai dengan yang kalian inginkan???
jika belum, atau kalian belum tahu bagaimana caranya membuat temlate sendiri saya akan memberi tahu salah satu alternatif untuk membuat template sendiri, bahkan untuk pemula pun tidak akan kesulitan untuk membuatnya,,

meskipun banyak aplikasi untuk membuat template sendiri, tapi kali ini saya akan menggunakan penyedia jasa online yang tentunya tanpa biaya alias free,,
banyak penyedia jasa layanan online dalam pembuatan template, tapi kali ini saya akan membuatnya melalui http://www.dotemplate.com/

setelah masuk ke home page dotemplate kalian pilih yang free

setelah itu kalian pilih model/style templatenya

kemudian pilih customize and download untuk mengcustom atau mendesign sesuai keinginan kalian

jika kalian anggap sudah sesuai dengan yang kalian inginkan dan tidak ada yang perlu dirubah lagi kalian tekan download

lalu kalian pilih formatnya, apakah untuk bloger atau untuk wordpress

tunggu sampai proses uploading selesai

setelah itu tinggal kalian download

dan untuk cara mengunggah template ke blogspot bisa kalian lihat caranya Disini

Read more »