Senin, 04 September 2017
Selasa, 08 November 2016
Cara Mempercantik Blog 2
1. Mempercantik Blog dengan Background Image
Menambahkan background image pada <body> template blog sebenarnya sangat tidak saya rekomendasikan karena berpotensi untuk membuat load situs blog kita menjadi berat / lemot. Solusinya adalah dengan menggunakan background image repeat, yaitu sebuah kode CSS untuk menduplicate gambar secara berulang-ulang.
Jadi disini kita nantinya akan menggunakan gambar dengan ukuran yang sangat kecil lalu menduplikat gambar tersebut hingga memenuhi 1 halaman. Perlu dicatat bahwa cara ini sebenarnya hanya cocok untuk gambar berjenis pattern / pola garis seperti persegi / segita. Untuk menerapkannya dalam blog siapkan terlebih dahulu gambar yang akan kita jadikan sebagai background, sebagai contoh saya akan menggunakan gambar dengan pola kotak.
Dan untuk menerapkan gambar tersebut menjadi background pada bagian body template, silahkan gunakan kode CSS dibawah ini :
CSS
body {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzk1wO1ntUXhAsIN7FwwZFI3ZiNJkx_7JiRGWSUwd7TnSVRXNOKCRKjX8F0nM5phakwBLdF4-E8TtkyP-pwVmeTrSzreTO0Ia0aObWAhLSOVM3YLIpy17Rz7-N92MljvViyJQhKmrcw8/s1600/noisy_grid.jpg) repeat scroll top left;
}
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzk1wO1ntUXhAsIN7FwwZFI3ZiNJkx_7JiRGWSUwd7TnSVRXNOKCRKjX8F0nM5phakwBLdF4-E8TtkyP-pwVmeTrSzreTO0Ia0aObWAhLSOVM3YLIpy17Rz7-N92MljvViyJQhKmrcw8/s1600/noisy_grid.jpg) repeat scroll top left;
}
Copy lalu paste kode tersebut, tepat diatas kode ]]></b:skin> (untuk blogger). Selanjutnya save dan lihat hasilnya, dijamin blog Anda akan tampil lebih cantik dengan background kotak-kota yang keren.
2. Mempercantik Blog dengan Background Color
Cara mempercantik blog yang kedua adalah dengan cara mengganti warna background blog, yang saya yakin hampir seluruh warna template blog, di setiap div-nya hanya menggunakan satu warna. Nah, disini saya akan mencontohkan bagaimana membuat dua warna dalam 1 div. Dua warna yang akan saya gabungkan disini adalah warna cream dan cream putih.
CSS
.gradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}
Selanjutnya silahkan Anda masukkan teks / gambar / video / widget ke dalam div dengan class gradient, contohnya bisa Anda lihat dibawah ini.
HTML
<div class="gradient"><img src="url gambar"
style="float:left"> anda bisa memasukkan teks atau bahkan kode html
disini</div>
Div diatas bisa Anda masukkan dibagian 'tata leat' atau bisa juga langsung menuju template editor Blogger.
3. Cara Mempercantik Blog dengan Efek Hover
Apa itu efek Hover ? singkatnya, hover adalah efek yang akan muncul saat kursor berada diatas selector. Untuk lebih jelasnya Anda bisa lihat contoh hover yang saya terapkan pada tombol 'tekan' dibawah ini.
Tekan
Untuk membuat efek seperti itu, ada dua kode yang kita persiapkan, yang pertama adalah kode HTML div, dan kode CSS selector hover.
CSS
.tombol {
text-align: center;
border: 1px solid gainsboro;
width: 100px;
margin: auto;
height: 25px;
line-height: 25px;
}
.tombol:hover {
background: rgb(153, 153, 240);
color: white;
}
text-align: center;
border: 1px solid gainsboro;
width: 100px;
margin: auto;
height: 25px;
line-height: 25px;
}
.tombol:hover {
background: rgb(153, 153, 240);
color: white;
}
HTML
<div class="tombol">Tekan</div>
>Simpan dan silahkan Anda lihat hasilnya. Selain menambahkan efek hover, kita juga bisa membuat efek animasi tombol berputar, dengan efek animasi, silahkan baca panduannya dibawah ini.
4. Cara Mempercantik Blog dengan Efek Animasi Bergerak
Efek animasi bergerak disini ada dua macam, ada yang harus disentuh (hover) dulu baru efek animasinya bekerja dan ada juga yang otomatis langsung bergerak. Dan kedua efek tersebut akan saya jelaskan secar detail.
Efek Animasi Bergerak dengan Hover
Kita akan melanjutkan kode css tombol 'tekan' diatas, untuk membuatnya bergerak atau lebih tepatnya berputar saat kursor menyentuh tombol, maka kita perlu menambahkan efek css rotate berikut ini.
CSS
.tombol {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.tombol:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg); transform: rotate(360deg);
}
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.tombol:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg); transform: rotate(360deg);
}
Dan hasilnya nanti akan seperti tombol dibawah ini.
Jadi dengan menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga akan membuat blog Anda lebih menarik dan atraktif, dan ujung-ujungnya akan membuat pengunjung betah.
Efek Animasi Bergerak dengan Marquee
Jika Anda ingin mempercantik blog dengan animasi bergerak namun tanpa perlu disentuh, maka kode css Marquee adalah jawabannya. Namun disini saya tidak akan menjelaskan lagi bagaimana cara menggunakan efek berjalan marquee, karena pada artikel sebelumnya sudah saya jelaskan secara detail beserta cara memodifikasi kode marquee.
Singkatnya untuk membuat efek marquee / efek berjalan, maka kita harus mengapitnya dengan kode html marquee seperti dibawah ini.
HTML
<marquee>letakkan teks / gambr / video disini</marquee>
Kedua efek diatas sebenarnya bisa digabungkan yaitu dengan menambahkan property pada selector marquee, selanjutnya tinggal Anda tambahkan efek hover.
5. Cara Mempercantik Tampilan Blog dengan Social Share Button
Selain berfungsi untuk mempercantik tampilan blog, widget social button juga sangat bermanfaat untuk meningkatkan traffic dan juga SEO (sebagai social signal), jadi tidak alasan untuk tidak memasang widget social button pada blog Anda. Untuk cara pembuatannya sebenarnya cukup mudah, kita bisa membuatnya secara otomatis di situs ShareThis.
- Kunjungi situs ShareThis disini www.sharethis.com/get-sharing
Jika halaman sharethis sudah terbuka, silahkan Anda lanjutkan dengan memilih platform blog yang Anda gunakan, pada contoh ini saya menggunakan Blogger, untuk penggunakan Wordpress silahkan pilih platform atau CMS Wordpress.
- Pilih model Social Share Button
Silahkan pilih model social button mana yang menurut Anda paling bagus untuk mempercantik blog. Saya sendiri suka social button model 1 karena lebih minimalis.
- Klik 'Get The Code' untuk mendapatkan kode Widget
Sebelumnya Anda perlu mendaftar dan membuat akun di situs ShareThis untuk mengambil kodenya. Jika tidak mau repot silahkan ambil kode saya berikut ini.
Untuk menambahkan widget social button tersebut, Anda bisa memasangnya melalui menu 'tata letak' dengan cara pilih HTML / JavaScript lalu copy kode diatas dan paste kan pada kolom Konten.
6. Cara Mempercantik Tampilan Blog dengan Widget Twitter Follow
Tak hanya mampu mempercantik blog, widget embedded twitter juga akan menambah follower Anda. cara untuk memasangnya juga terbilang cukup mudah, dimana tugas Anda hanya perlu meletakkan kode embed twitter dibawah ini pada bagian template yang Anda inginkan, misalnya bisa di sidebar atau footer.
<a class="twitter-timeline" href="https://twitter.com/twitterdev"
data-widget-id="ID-TWITTER">Tweets by @twitterdev</a>
<script>window.twttr=(function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return
t;}(document,"script","twitter-wjs"));</script>
Ubah terlebih dahulu "ID-TWITTER" dengan ID Twitter Anda. Jika sudah silahkan simpan dan jika hasilnya seperti gambar dibawah ini maka Anda berhasil meng-embed timeline twitter di dalam Blog.
Jika ukuran dari widget tersebut dirasa terlalu besar, maka Anda bisa meresizenya dengan cara menambahkan css widht dan heigt pada class "twitter-timeline".
7. Cara Mempercantik Blog dengan Widget Facebook Page Like Box
Satu lagi widget akan mempercantik blog Anda, yap widget yang saya maksud adalah Facebook Like Box. Untuk menambahkan widget ini ke dalam blog kita bisa menggunakan plugin yang disediakan secara resmi oleh pihak Facebook, jadi nanti kita tinggal masukkan kode ID Fanpage lalu klik Create, atau lebih jelasnya bisa Anda simak caranya dibawah ini.
- Buat Fanpage Facebook
Sebelum menambahkan Facebook Like Box, tentu saja setidaknya Anda sudah harus memiliki minimal 1 Fanpage Facebook, jika belum silahkan buat fanpage baru terlebih dahulu, tutorial lengkap pembuatan fanpage bisa Anda baca disni cara membuat halaman facebook fanpage. - Buka https://developers.facebook.com/docs/plugins/like-box-for-pages
Selanjutnya, kujungi situs Developer Facebook diatas, lalu masukkan ID atau URL Fanpage ke dalam kolom Facebook Page URL, atur juga width atau panjang widget. - Klik 'Get Code'
Klik tombol 'get code' untuk mendapatkan kode widget Facebok Page Box, lalu copy kode tersebut dan masukkan ke dalam tata letak.
Itulah ketujuh cara mempercantik blog yang akan membuat tampilan blog Anda semakin indah, perlu dicatat disini saya sama sekali tidak menganjurkan kepada Anda untuk menerapkan ketujuh cara diatas, karena jika semua widget dipasang, maka akan sangat berdampak pada load time situs blog yang akan menjadi lebih berat dan lemot, ujung-ujungnya pengunjung bukannya senang malah jadi malas mengunjungi blog Anda, jadi pesan saya pikirkan dua kali sebelum menambahkan widget ke dalam Blog.
Selasa, 25 Oktober 2016
Cara Memodifikasi Tampilan BLOG Jadi Lebih Menarik
Cara Memodifikasi Tampilan BLOG Jadi Lebih Menarik
Kali ini saya akan share cara membuat tampilan blog menjadi lebih bagus.
yaitu :
1. Mengganti Tampilan Kursor
*yaitu dengan langkah - langkah sebagai berikut :
- Masuk Ke Blogger
- Pilih Template
- Edit HTML
- Dan Cari Code </head>
Silahkan pilih kode kode nya di link ini http://www.cursors-4u.com/
2. Menambah Tampilan Kursor dengan Tulisan Yang Memutar Bergerak Mengelilingi kursor.
*yaitu dengan langkah sebagai berikut :
- Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
- Copy code berikut ke dalam box HTML/Java Script tadi.
ini kode nya : (ganti teks yg berwarna merah dengan teks yang kamu inginkan)
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff840a;
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(){
// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)
var msg = "TULISAN YANG INGIN DITAMPILKAN";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;
// 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.2;
// 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;
// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //
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>
3. Menambah Efek Pada Blog
Memasang Efek Salju Bertaburan / Berjatuhan :1. Login ke akun Blogger Anda
2. Klik Nama Blog Anda.
3. Kemudian pilih Template.
4. Lalu Edit HTML dan Centang Expand Widget Template
5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>
6. Simpan Template.
Membuat Efek Daun Berjatuhan di Blog :
Caranya sama seperti langkah 1 sampai 4 diatas.
Lalu copy kode ini diatas </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>
Cara Memasang Efek Bintang berjatuhan di Blog :
Copy kode berikut dan letakkan diatas kode </head>
1.<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>
Kamu Bisa menggunakan kode pertama atau kedua sesuai keinginan Anda.
Kali ini saya akan share cara membuat tampilan blog menjadi lebih bagus.
yaitu :
1. Mengganti Tampilan Kursor
*yaitu dengan langkah - langkah sebagai berikut :
- Masuk Ke Blogger
- Pilih Template
- Edit HTML
- Dan Cari Code </head>
Silahkan pilih kode kode nya di link ini http://www.cursors-4u.com/
2. Menambah Tampilan Kursor dengan Tulisan Yang Memutar Bergerak Mengelilingi kursor.
*yaitu dengan langkah sebagai berikut :
- Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
- Copy code berikut ke dalam box HTML/Java Script tadi.
ini kode nya : (ganti teks yg berwarna merah dengan teks yang kamu inginkan)
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff840a;
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(){
// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)
var msg = "TULISAN YANG INGIN DITAMPILKAN";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;
// 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.2;
// 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;
// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //
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>
3. Menambah Efek Pada Blog
Memasang Efek Salju Bertaburan / Berjatuhan :1. Login ke akun Blogger Anda
2. Klik Nama Blog Anda.
3. Kemudian pilih Template.
4. Lalu Edit HTML dan Centang Expand Widget Template
5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>
6. Simpan Template.
Membuat Efek Daun Berjatuhan di Blog :
Caranya sama seperti langkah 1 sampai 4 diatas.
Lalu copy kode ini diatas </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>
Cara Memasang Efek Bintang berjatuhan di Blog :
Copy kode berikut dan letakkan diatas kode </head>
1.<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>
Kamu Bisa menggunakan kode pertama atau kedua sesuai keinginan Anda.
Langkah-langkah cara membuat blog
Langkah-langkah cara membuat blog
1. Pertama-tama, buka situs blogger.com2. Login menggunakan akun gmail anda. Jika tidak mempunyai akun gmail, anda bisa membaca panduan cara membuat email di gmail yang pernah saya bagikan sebelumnya.
3. Sebelum beralih ke halaman blogger. Terlebih dahulu anda harus memilih profil mana yang anda gunakan. Silakan pilih Buat profil Google+.
4. Form profil akan terisi secara otomotis. Anda juga bisa mengeditnya. Jika sudah selesai mengedit, silakan pilih Upgrade.
5. Pada langkah berikut ini, langsung pilih Continue.
6. Pilih Continue pada langkah ini juga. Continue-continue melulu nih, hehehe ?
7. Setelah itu, pilih Continue anyway.
8. Okey, profil blogger anda sudah jadi. Profil blogger yang anda gunakan adalah profil Google+. Kemudian silakan pilih Finish.
9. Baiklah, selanjutnya pilih Continue to Blogger untuk beralih ke halaman blogger.
10. Untuk membuat gubuk baru, eh maksudnya blog baru, silakan pilih New Blog.
11. Anda akan melihat tampilan seperti berikut ini. Silakan isi sesuai putunjuk nomor dibawah ini :
- Nomor 1 : Isi dengan judul blog baru anda, misal Nesaba Media.
- Nomor 2 : Isi dengan alamat url pada blog anda, misal nesaba-media.blogspot.com
- Nomor 3 : Jika alamat url blog baru anda tersedia, maka akan muncul status centang yang tampak seperti pada gambar.
- Nomor 4 : Pilih template yang anda sukai untuk blog baru anda.
Mengenal lebih jauh menu-menu pada Blogger
Terdapat beberapa menu dan tombol pada blogger yang perlu anda ketahui. Diantaranya sebagai berikut :
- Nomor 1 : Untuk membuat blog baru.
- Nomor 2 : Untuk menulis konten, silakan gunakan tombol berbentuk pensil ini.
- Nomor 3 : Untuk melihat blog anda.
- Nomor 4 : Untuk menambahkan blog mana saja yang ingin anda ikuti. Anda akan disuguhkan artikel-artikel blog yang anda ikuti tersebut.
- Nomor 5 : Berikut ini beberapa menu yang terdapat pada blogger, diantaranya :
- Overview menampilkan jumlah komentar yang menunggu moderasi, jumlah komentar yang telah diterbitkan, jumlah penayangan hari ini, jumlah pos dan pengikut blog anda.
- Posts menampilkan semua pos yang terdapat pada blog anda, pos yang sudah diterbitkan dan yang masih berbentuk draft. Dalam menu ini, anda juga bisa menghapus beberapa pos sekaligus dengan cepat.
- Pages menampilkan jumlah laman yang terdapat pada blog anda, laman yang masih berbentuk draft, dan laman yang sudah diterbitkan.
- Comments menampilkan komentar yang telah diterbitkan, komentar yang masih menunggu moderasi, dan komentar yang tergolong spam.
- Google+ menampilkan pengaturan untuk profil Google+ anda yang terkait dengan blog.
- Stats menampilkan informasi statiska pada blog anda, seperti jumlah penayangan hari ini, kemarin, dan bulan lalu. Selain itu, pada menu ini juga menampilkan informasi mengenai bagaimana pengunjung menemukan blog anda dan lain sebagainya.
- Earnings menampilkan menu penghasilan akun Adsense anda (jika punya).
- Campaigns menampilkan menu Adwords. Anda bisa mempromosikan blog anda dengan Adwords ini, tetapi ini tidak gratis loh.
- Layout menampilkan tata letak blog anda. Disini, anda bisa menambah atau menghapus widget pada blog anda.
- Template menampilkan pengaturan pada template blog anda. Untuk mengedit, mengganti template blog anda, dan lain sebagainya bisa anda lakukan disini.
- Settings menampilkan pengaturan lanjutan pada blog anda, seperti pengaturan dasar, pos dan komentar dan lain sebagainya bisa anda lakukan disini.
Bagaimana cara menulis/ posting konten di Blogger?
Untuk menulis konten atau yang sering di sebut dengan posting sangatlah mudah, malahan mudah banget. Simak langkah-langkahnya sebagai berikut :1. Klik tombol berbentuk pensil.
2. Sebelum memulai untuk menulis konten, terdapat beberapa menu, tombol, atau navigasi yang perlu anda pahami sebagai berikut :
- Nomor 1 : Terdapat 2 mode penulisan konten yang terdapat pada blogger, diantaranya mode compose dan mode HTML. Secara default, mode penulisan konten menggunakan mode compose.
- Nomor 2 : Judul konten anda.
- Nomor 3 : Menu formatting toolbar yang digunakan untuk pengolahan teks pada konten anda.
- Nomor 4 : Beberapa menu pengaturan pada konten anda. Seperti memberikan label/ kategori, tautan permanen pada konten anda dan lain sebagainya.
- Nomor 5 : Deretan tombol yang berguna untuk mempublikasikan, menyimpan, atau mempratinjau konten anda.
- Nomor 6 : Isi konten anda.
Templatenya kurang nggreget mas? Bisa diganti ndak?
Memang sih template default blogger kurang gimana gitu, bukan jelek loh, hahaha. Untuk mengganti template blog anda agar lebih menarik, silakan simak langkah-langkahnya sebagai berikut :1. Silakan download dulu template yang ingin digunakan pada blog anda. Anda bisa mencarinya di Btemplate, disana ada ribuan template yang bisa anda gunakan.
2. Setelah itu, masuk ke menu dashboard blog anda dan pilih Template.
3. Pilih Backup / Restore.
4. Klik tombol Browse untuk mengupload template yang anda inginkan.
5. Terakhir, klik tombol Upload. Perlu diingat yah kalau templatenya menggunakan format .xml
Penutup
Semoga dengan coretan sederhana saya ini, anda dapat membuat blog sendiri dengan mudah.
