Panduan Lengkap Blogger

DEFINISI, FUNGSI DAN MANFAAT BLOG

noreply@blogger.com (www.e-mons.org) — Thu, 11 Aug 2016 17:51:00 +0700

Seiring berkembangnya jaman perkembangan teknologi pun turut berkembang dengan pesatnya, dengan mudahnya orang-orang (pengguna internet) bisa mendapatkan informasi yang di butuhkan melalui blog-blog di internet.

Banyak sekali blog-blog di internet yang menyediakan informasi-informasi yang di butuhkan orang-orang (pengguna internet) dan blog itu sendiri mempunyai tema dan tujuan masing-masing. Ada blog yang bertemakan kesehatan dengan konten yang membahas tentang masalah seputar kesehatan. Ada pula blog yang bertemakan teknologi, tentunya dengan konten yang membahas seputar teknologi.

I. DEFINISI BLOG

Terus yang di sebut blog itu sendiri apa?

Blog berasal dari kata Weblog yang merupakan suatu aplikasi web yang berisi informasi-informasi dalam bentuk tulisan, gambar, atau pun video. Ada banyak platform blog yang mempermudah kita untuk menunjang aktivitas ngeblog, tetapi yang sangat populer di kalangan blogger adalah blogger.com, wordpress.com, dan wordpress.org.

Blogger.com

Dimiliki oleh Pyralabs, yang akhirnya di akusisi oleh google pada tahun 2002. Platform ini Seringkali di pakai oleh blogger-blogger pemula dikarenakan pemakainnya sangat mudah (user friendly) dan tentunya tidak memerlukan biaya yang besar untuk memiliki blog dengan platform ini, berbeda dengan platform wordpress.org yang memerlukan biaya yang cukup besar.

Wordpress.com

Sama halnya dengan Blogger.com platform ini tidak memerlukan biaya yang sangat besar dan pemakainnya pun sangat user friendly akan tetapi hostingnya (tempat untuk menyimpan file) di batas anda tidak bisa mengupload file-file yang banyak, berbeda dengan blogger.com tidak ada batasnya anda bisa mengupload file-file semau anda.

Wordpress.org

Wordpres.org sama dengan Wordpress.com akan tetapi wordpress.org memerlukan hosting dan domain sendiri dan itulah yang membuat biaya ngeblognya semakin besar, dan untuk mengurus blog dengan platform wordpress.org memerlukan pengetahuan yang cukup karena harus maintenance sendiri,karena itulah blogger pemula jarang memakai platform ini. Biarpun begitu wordpress.org sangat powerfull di bidang seo karena ditunjang dengan pluggin-pluggin. Dengan adanya pluggin para blogger bisa meniggkatkan performa blog nya agar bagus di mata search engine. Dan ada banyak para developer yang mengembangkan pluggin-pluggin ini.

II. FUNGSI BLOG

Jika dilihat dari sudut pandang para blogger / penulis, blog berfungsi sebagai sarana atau media yang berbentuk perangkat lunak untuk menuangkan gagasaan maupun opini si penulis.

Jik kita bandingkan menulis di buku dengan menulis di blog, prosentasi tulisan kita di baca oleh orang akan lebih besar menulis diblog, karena seperti yang sudah di bahas di atas bahwasannya blog sangat mudah di akses oleh semua orang (pengguna internet )

III. MANFAAT BLOG

Selain mempermudah mendapatkan informasi, manfaat dari blog sangat beragam.

Berikut adalah manfaat dari blog:

A. Mempermudah interaksi antara penulis dan pembaca.

Ya, dengan blog si pembaca tidak akan sulit bertanya tulisannya atau informasinya sulit untuk di pahami dan si pembaca akan mudah mengemukakan pendapat tentangtulisannya, baik itu pro atau pun kontra.

B. Mempermudah penulis untuk mendapatkan pekerjaan yang lebih baik.

Dengan kita menulis orang lain akan tahu seberapa dalam pemahaman mengenai kehalian yang kita miliki, dan tidak menutup kemungkinan ada seseorang yang membutuhkan tenaga ahli sesuai dengan keahlian yang kita miliki

C. Mempermudah kita untuk mendapatkan teman yang se-hobby dengan kita.

Jika kita, khususnya saya membuat blog tentunya saya akan membuat blog yang sesuai dengan hobi saya.

Sebagai contoh, saya hobinya mendesign pastinya blog saya isinya seputar design

Dan tidak bisa dipungkiri para pembaca blog saya pun adalah mereka yang mencari informasi seputar design yang tidak lain adalah hobi mereka sendiri dan tidak menutup kemungkinan akan berinteraksi dengan kita.

Semakin sering berinteraksi maka akan semakin besar kesempatan untuk menjalin pertemanan.

D. Membantu orang lain (pembaca)

Secara tidak langsung kita akan memberikan inspirasi, ide dan menambah wawasan serta memberikan solusi untuk memecahkan masalah bagi para pembaca blog kita.

Demikian sedikit pembahasan mengenai definisi, Fungsi dan manfaat blog.

Setelah kalian membaca tulisan ini apakah kalian berminat membuat blog?

Jika kalian berminat, untuk referensi kalian membuat blog silahkan baca tulisan tentang cara membuat blog di blogger.com atau cara membuat blog di wordpress.com atau juga cara membuat blog di wordpress.org.

Dan jika kalian bingung harus membuat blog dengan platform apa.Silahkan baca tulisan tentang perbedaan blogger.com, wordpress.com dan wordpress.org.

CARA MEMBUAT FORM CONTACT / KONTAK KAMI DI BLOGSPOT

noreply@blogger.com (www.e-mons.org) — Thu, 30 Sep 2010 18:49:00 +0700

Keinginan untuk membuat form contact / kontak kami berawal dari template yang sudah ada menu form contact / kontak kami tersebut.
Awalnya sich bingung gimana ngisi menu tersebut, tapi setelah blog walking akhirnya saya menemukan cara untuk membuat form contact / kontak kami.
Selain berguna untuk mengirim pesan secara pribadi form contact / kontak kami menambah kesan professional pada blogspot kita.
Bagi kalian yang tertarik untuk memasang form contact / kontak kami caranya adalah sebagai berikut :

Sumber : Kang Rohman                Demo : Klik contact diatas sebelah kanan

1.    Kunjungi situs Kontactr
2.    Klik sign up,
lihat screenshot
3.    Isi form registrasi,
lihat screenshot
4.    Cek email kalian, klik link-nya untuk mengaktifkan akun kalian.
5.    Login.
6.    Copy paste kode HTML-nya pada postingan,
lihat screenshot
7.    Selesai
Keterangan:
       Untuk membuat halaman form contact-nya seperti membuat postingan tinggal merubah menu compose ke menu edit.
Semoga bermanfaat and happy bloging.

CONTACT

noreply@blogger.com (www.e-mons.org) — Thu, 30 Sep 2010 18:04:00 +0700

Jika kalian ingin memberi saran, kritikan, atau apa saja silahkan isi form dibawah ini, terima kasih.

MERUBAH STYLE PAGENUMBER / NAVIGASI HALAMAN

noreply@blogger.com (www.e-mons.org) — Mon, 27 Sep 2010 17:39:00 +0700

Pada postingan sebelumnya saya share tentang cara memasang Pagenumber/Navigasi Halaman.
Jika kalian merasa kurang puas dengan style/tampilan Page numbernya. Maka kali ini saya akan berbagi tentang cara merubah tampilannya tersebut.
Untuk caranya adalah sebagai berikut :

Sumber : Abu farhan

1. Ikuti langkah pada postingan CARA MEMASANG NAVIGASI HALAMAN/PAGE NUMBER
2. Ganti kode pada langkah ke-2 dengan kode dibawah ini :

   Untuk style 1:       Demo

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
    font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_20BQHr8UNy0vP6jtcC98od265ofOXD8ZjS8D_VAQ8ztJzv28iZW09jh4pcnACeTaviUTgYtqb9OOctDJzZ-BO3RbXleWyM08VHMQSD_2_w9TyILuvE92q2T_q1JH6mb5lckZqBcN3Po/s1600/wp1.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_20BQHr8UNy0vP6jtcC98od265ofOXD8ZjS8D_VAQ8ztJzv28iZW09jh4pcnACeTaviUTgYtqb9OOctDJzZ-BO3RbXleWyM08VHMQSD_2_w9TyILuvE92q2T_q1JH6mb5lckZqBcN3Po/s1600/wp1.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_20BQHr8UNy0vP6jtcC98od265ofOXD8ZjS8D_VAQ8ztJzv28iZW09jh4pcnACeTaviUTgYtqb9OOctDJzZ-BO3RbXleWyM08VHMQSD_2_w9TyILuvE92q2T_q1JH6mb5lckZqBcN3Po/s1600/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}
]]></b:skin>

Untuk style 2:       Demo

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
    font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztDS04OjLd_TwQ845gradYD2E4nTqe8dUK9FDcZiaREuZerknNg3-78YHi1nYsdtvYUx0NYAPxFKoTrNaVZgALjXCPKJ-PkcNw7-5awjkYrIhbrpnYAXQlVWKxKZ0bxxkf2BMXZGLxu0/s1600/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztDS04OjLd_TwQ845gradYD2E4nTqe8dUK9FDcZiaREuZerknNg3-78YHi1nYsdtvYUx0NYAPxFKoTrNaVZgALjXCPKJ-PkcNw7-5awjkYrIhbrpnYAXQlVWKxKZ0bxxkf2BMXZGLxu0/s1600/wp2.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztDS04OjLd_TwQ845gradYD2E4nTqe8dUK9FDcZiaREuZerknNg3-78YHi1nYsdtvYUx0NYAPxFKoTrNaVZgALjXCPKJ-PkcNw7-5awjkYrIhbrpnYAXQlVWKxKZ0bxxkf2BMXZGLxu0/s1600/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}
]]></b:skin>

Untuk style 3:       Demo

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_PgkhXy_uDMrdiM_a0laMGHqFNihODTyf6wcqkX9zMP4_-aqT5J-Hp9-cZpWns7FoTL7fPYs7ZbnF3x5zezMoTuudHCCQI49aZ_PRCsmnvsaeySDxcvXtwxdKnOB46q63zI5pZbQUA8/s1600/wp3.jpg) 0 -25px repeat-x;
}

.showpageNum a:hover {
background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_PgkhXy_uDMrdiM_a0laMGHqFNihODTyf6wcqkX9zMP4_-aqT5J-Hp9-cZpWns7FoTL7fPYs7ZbnF3x5zezMoTuudHCCQI49aZ_PRCsmnvsaeySDxcvXtwxdKnOB46q63zI5pZbQUA8/s1600/wp3.jpg) 0 -50px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_PgkhXy_uDMrdiM_a0laMGHqFNihODTyf6wcqkX9zMP4_-aqT5J-Hp9-cZpWns7FoTL7fPYs7ZbnF3x5zezMoTuudHCCQI49aZ_PRCsmnvsaeySDxcvXtwxdKnOB46q63zI5pZbQUA8/s1600/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>

Untuk style 4:       Demo

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 4px;
margin:0 4px;
text-decoration: none;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZJlm00qWoE7P2ohHxPPlWtNWyM7qRFFR8-PqY5_odJ2OM-YUY07XFcwSjKkrWEflU8JbMB0ndqNnIygCFqZczOI-HAprO4B5fTHjdFLJMfCAeXpY_Blk_ApxfYIzbDHwYcjf4xXq_rE/s1600/wp4.jpg) 0 -25px repeat-x;
}

.showpageNum a:hover {
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZJlm00qWoE7P2ohHxPPlWtNWyM7qRFFR8-PqY5_odJ2OM-YUY07XFcwSjKkrWEflU8JbMB0ndqNnIygCFqZczOI-HAprO4B5fTHjdFLJMfCAeXpY_Blk_ApxfYIzbDHwYcjf4xXq_rE/s1600/wp4.jpg) 0 -50px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZJlm00qWoE7P2ohHxPPlWtNWyM7qRFFR8-PqY5_odJ2OM-YUY07XFcwSjKkrWEflU8JbMB0ndqNnIygCFqZczOI-HAprO4B5fTHjdFLJMfCAeXpY_Blk_ApxfYIzbDHwYcjf4xXq_rE/s1600/wp4.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>

Untuk style 5:       Demo

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJcDDiNGkP_j17I0q922ijSQkWjkhk8MvOq2YjKAXwEWbf2d41c3DY_cyOVLDK9GzInvzGmeDwZpf_2eKri4N8mtFm104ecqxPaz9k5ND7YSO62bkJsUwajYwl9HnUcfy0nDdKDbfMKA/s1600/wp5.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJcDDiNGkP_j17I0q922ijSQkWjkhk8MvOq2YjKAXwEWbf2d41c3DY_cyOVLDK9GzInvzGmeDwZpf_2eKri4N8mtFm104ecqxPaz9k5ND7YSO62bkJsUwajYwl9HnUcfy0nDdKDbfMKA/s1600/wp5.jpg) 0 -25px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJcDDiNGkP_j17I0q922ijSQkWjkhk8MvOq2YjKAXwEWbf2d41c3DY_cyOVLDK9GzInvzGmeDwZpf_2eKri4N8mtFm104ecqxPaz9k5ND7YSO62bkJsUwajYwl9HnUcfy0nDdKDbfMKA/s1600/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>

Untuk style 6:       Demo

.showpageArea {
font-family:verdana,arial,helvetica;
color: #fff;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #333;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #666;
}

.showpageNum a:hover {
background: #888;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #da6100;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>

3. Klik Save Template
4. Selesai
   Keterangan:
- Untuk mempermudah mencari kode gunakan ctrl+f
- Jika kode ada yang ga bisa ditemukan coba kilik Expand Template widget.

Semoga bermanfaat and happy bloging

CARA MEMASANG NAVIGASI HALAMAN/PAGE NUMBER

noreply@blogger.com (www.e-mons.org) — Thu, 16 Sep 2010 17:54:00 +0700

Page number/navigasi halaman dengan menggunakan angka, memberi kemudahan bagi pengunjung blog kita untuk menjelajahi isi blog kita.
Selain itu page number juga membuat tampilan blog kita lebih menarik dan kelihatan proffesional.
Untuk cara pasang page number adalah sebagai berikut:

Demo:Lihat dibawah postingan      Sumber: abu farhan

1. login ke blogger, pilih rancangan, pilih edit HTML.

2. cari kode ini "]]></b:skin>" kemudian ganti dengan kode di bawah ini:
   kode:
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }
]]></b:skin>

3. cari kode ini "</body>" kemudian ganti dengan kode di bawah ini:
   kode:
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
</body>

4. centang kotak expand widget dan cari kode 'data:label url' kemudian ganti dengan kode di bawah ini:
     kode:
'data:label.url + "?&max-results=7"'

5. Save template.

6. Selesai semoga bermanfaat.
   keterangan:
- var postperpage=7; adalah jumlah postingan yang akan tampil di halaman, untuk itu sesuaikan dengan jumlah postingan,per halaman kalian,untuk menyesuiakan postingan klik edit pada elemen post di halaman elemen laman jika jumlah postingan kalian 10 maka tulis pada maka ganti angka 7 dengan angka 10.

- var numshowpage=4; adalah nomor navigasi halaman yang akan ditampilkan.

CARA PASANG WIDGET CHATING DI BLOG

noreply@blogger.com (www.e-mons.org) — Sat, 11 Sep 2010 21:58:00 +0700

Shoutmix adalah situs penyedia layanan chatting, jika kalian ingin menambah aplikasi chating di blog kalian, shoutmix adalah jawabannya.
Kalian juga bisa menambahkan ikon gambar/emotion pada waktu pengunjung/kalian berchating ria seperti Yahoo Messenger.
Yapz...widget yang satu ini memang sangat bagus untuk melengkapi blog kalian.
Untuk cara pasang shoutmix adalah sebagai berikut:
1. Kunjungi situsnya disini.
2. Klik create shoutbox, untuk melihat screenshot klik
disini
3. Isi form registrasi-nya, untuk melihat screenshot klikdisini
- shoutbox ID
- Ketik password
- Ketik kembali passwordnya
- Isikan nama kalian
- Isikan dengan alamat kalian
4. Klik "I have read and agree to the terms of service"
5. Klik continue
6. Pada menu setting, untuk melihat screenshot klikdisini
a. Style and color untuk merubah tampilan shoutmix
b. Smileys adalah untuk menampilkan emotion pada waktu chatting, untuk melihat screenshot klikdisini
- Untuk menambahkan emotion save gambar di bawah ini, kemudian upload di hostingan kalian:

- Isikan URL gambar Yang tadi kalian upload, isi kode-nya,isi optional, klik add.
- Save setting.
c. Get code, Copy script-nya disini untuk dipasang di blog, untuk melihat screenshot klikdisini
7. Login ke blogger.
- Pilih rancangan.
- Pilih Pilih Elemen laman
- Pilih tambah gadget
- Pilih HTML/Javascript.
- Paste script yang tadi
- Save
8. Selesai
Semoga bermanfaat dan selamat ngeblog.

CARI TAHU PENGUNJUNG BLOG DENGAN FEEDJIT

noreply@blogger.com (www.e-mons.org) — Fri, 10 Sep 2010 19:43:00 +0700

feedjit.com adalah situs penyedia layanan live traffic feed, artinya kalian bisa mengetahui
orang-orang yang mengunjungi blog kalian mulai darimana asal mereka, artikel mana yang di kunjungi, dan waktu kunjungannya.Untuk cara pasang widget ini adalah sebagai berkut:
1.Masuk ke blogger
2.Klik rancangan di dashboard
3.Klik elemen laman
4.Klik tambah gadget.
5.Klik Html Javascript
6.copy/paste kode di bawah ini:

<script src="http://feedjit.com/serve/?bc=ffffff&tc=494949&brd1=336699&lnk=494949&hc=336699&ww=160" type="text/javascript">
</script>

7. Klik save.

8. Selesai 160 merupakan lebar dari wiget tersebut.
Semoga bermanfaat and happy bloging.

DEMO CARA MENAMPILKAN RECENT COMMENT

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 21:40:00 +0700

Dibawah ini merupakan demo cara menampilkan recent comment cara pasang yang sangat mudah sekali dan ini merupaka recent comment dari blog karman on blog

Kembali ke artikel

CARA MENAMPILKAN RECENT COMMENT

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 21:34:00 +0700

Widget yang satu ini mungkin akan terasa bermanfaat bagi pemilik blog, karena dengan wiget akan menampilkan komentar-komentar terbaru dari pengunjungnya dan pemilik blog dapat dengan mudah menanggapi komentar tersebut.
Widget ini tidak hanya menampilkan komentar terbaru dari satu postingan saja tetapi seluruh postingan kita.Untuk selanjutnya kita mari kita coba untuk membuatnya.
Berikut adalah langkah-langkahnya :

Demo Javascript: Sumber:Beautiful Beta
- recent comment.js
1. Login ke blogger
2. Pilih tata letak kemudian pilih HTML javascript.
3. Pasang kode berikut pada tag <head> :
Contoh:
<head>

pasang kode disini

</head>
Kodenya:
<script type="text/javascript" src="http://dfssdf.googlecode.com/files/gcrecentcomment.js
"></script>
4. Pasang kode berikut pada sidebar/tambah widget.
Kodenya:
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://karman-goes74.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
4. Pilih save lalu Klik lihat blog
5. Selesai
Keterangan:
- Klik kanan pada pada teks recent comment.js lalu kalian save.
- Upload file tersebut ke hostingan kalian,untuk cara upload bisa kalian lihat disini.
- Ganti URL yang berwarna merah dengan URL file javascript kalian.
- Angka 10 merupakan jumlah komentar yang akan di tampilkan.
- Ganti teks yang berwarna biru dengan alamat blog kalian.
- Untuk memudahkan dalam pencarian tag <head> gunakan Ctrl+F
Semoga bermanfaat and happy bloging....

DEMO MEMBUAT TAGSCLOUD BERUBAH-UBAH

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 19:48:00 +0700

Ini adalah demo tagscloud berubah-ubah akan sangat menarik lagi bila di tempatkan di sidebar.

Kembali ke artikel

CARA MEMBUAT TAGSCLOUD BERUBAH-UBAH

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 19:30:00 +0700

Tagscloud menurut pandangan saya adalah sekumpulan link yang di tampilkan secara tidak teratur dalam segi ukuran huruf.Sehingga kesannya seperti awan, mungkin oleh sebab itu dinamakan tagscloud, he..he..so tahu ya...Selain membuat blog kita menarik dan kelihatan professional tagscloud juga mempermudah
pengunjung blog menemukan seluruh judul postingan kita dan membuat hemat ruang blog kita.
ada banyak sekali cara membuat tagscloud, berhubung blog ini di dedikasikan ke orang -orang yang masih belajar ngeblog seperti saya.
Saya akan berbagi cara membuat tagscloud yang sangat mudah sekali kalo bahasa kerennya usefull,
Seperti bahasa marketer "murah tapi bukan murahan" ini juga mudah tapi berbobot ini script bisa membuat tagscloud kita berubah-ubah warna, tempat, dan ukuran hurufnya.

Untuk cara membuatnya sebagai berikut :
Demo Download javascript: Sumber: Dime3studio
     - tagscloud.js
     - tagscloud.css
Seperti biasa login dulu ke blog kita, pilih Rancangan, pilih Edit HTML
1. Pasang kode di bawah ini di dalam tag <head>
Contoh:
<head>

Pasang kode disini

</head>
Kodenya:

<link type="text/css" media="screen" rel="stylesheet" href="http://dfssdf.googlecode.com/files/tags%20cloud.css" />
<script type="text/javascript" src="http://dfssdf.googlecode.com/files/tags%20cloud.js"></script>

2. Pasang kode di bawah ini dalam tag <body>
Contoh:
<body>

Pasang kode disini

</body>

Kodenya:
<ul id="dmCloud2" class="dmCloud">
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">xHtml</a></li>
<li><a href="#"> C++ </a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Marketing</a></li>

</ul>

<script type="text/javascript">
var cloud2 = new dmCloud('dmCloud2', '10,20', '#BF1717,#222,green', false, true, 5);
</script>

3. Selesai
keterangan:
- Klik kanan pada file javascript dan file css-nya lalu save kemudian upload di hostingan kalian.untuk cara upload klik disini
- Ganti URL yang berwarna merah dengan URL file css kalian.
- Ganti URL yang berwarna biru dengan URL file javascript kalian.
- Untuk tanda "#" adalah URL yang akan di pasang di tagscloud
- Untuk teks berwarna ungu adalah teks yang akan tampil di tagscloud
- kode pada body bisa di pasang pada tambah widget dan postingan
- Diharapkan kalian mengganti file URL file javascript dan css dengan hostingan kalian karena jika tidak sewaktu-waktu script bisa tida berfungsi

Semoga bermanfaat dan selamat ngeblog.....

DEMO MEMBUAT POP UP WINDOW

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 16:35:00 +0700

Ini adalah demo cara membuat pop up window silahkan kalian klik pada teks di bawah ini.
POp up image

Kembali ke Artikel

CARA MEMBUAT POP UP WINDOW

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 16:28:00 +0700

Salah satu cara untuk membuat blog kita menghasilkan uang adalah dengan memasang baner iklan sponsor.
Semakin banyak baner yang kita pasang maka semakin besar peluang untuk menghasilkan uang, untuk memasang banyak baner tentunya di perlukan ruang yang cukup luas.
Untuk itu saya akan sharing tentang cara membuat pop up window karena pop up window lumayan menghemat ruang dalam blog kita.

Berikut adalah caranya :

Demo File javascript-nya Sumber: javascriptkit
- popupwin.js

1. Pasang kode di bawah ini di dalam head HTML
Contoh :
<head>

Pasang kode disini

</head>

Kode-nya :
<script type="text/javascript" src="http://dfssdf.googlecode.com/files/popupwin.js"></script>

2. Pasang kode di bawah ini pada body HTML.
Contoh :
<Body>

Pasang kode disini

</Body>

Kode-nya :
<a href="#" onClick="jkpopimage(' http://i823.photobucket.com/albums/zz154/faturahman74/SMILE.jpg ', 325, 445,''); return false">
POp up image</a>

3. Selesai
Keterangan :
- Klik kanan pada file javascript-nya lalu save dan upload ke hostingan kalian, untuk cara upload klik disini
- Ganti URL javascript yang berwarna orange dengan URL javascript yang telah kalian upload tadi.
- Ganti url yang berwarna biru dengan url gambar kamu.
- Angka 325 adalah lebar pop up yang akan muncul
- Angka 445 adalah tinggi pop up yang akan muncul
- Warna ungu merupakan teks yang akan di beri pop up

Semoga bermanfaat n happy bloging,jangan lupa komentarnya ya..

CARA MEMBUAT TOOLTIP DENGAN PENJELASAN GAMBAR DAN TEKS

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 15:43:00 +0700

Penggunaan tooltip dalam bloging merupakan hal yang penting karena dengan tooltip kita bisa memunculkan kotak penjelasan dari teks atau gambar-gambar tertentu,bahkan kita dapat membuat screenshoot di teks tertentu.
Tooltip juga bisa menghemat ruang blog kita jadi kita bisa pasang banyak iklan ,karena tooltip bekerja pada saat kursor berada di atas teks atau gambar tertentu.
Berikut cara-cara membuat tooltip :

DEMO JAVASCRIPT-nya SUMBER: Css globe
- jquery.js
- main.js

Langkah ke 1 pasang kode di bawah ini di pada bagian head HTML

Kodenya :

<script src="http://dfssdf.googlecode.com/files/tooltipjquery.js" type="text/javascript"></script>
<script src="http://dfssdf.googlecode.com/files/tolltipmain.js" type="text/javascript"></script>

<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}

/* */

#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

/* */
</style>

Contoh :
<head>

PASANG KODE DI SINI

</head>

Langkah ke 2 pasang kode di bawah ini pada bagian body HTML

Kodenya :

<a href="http:/karman-goes74.blogspot.com" class="screenshot" rel="http://i823.photobucket.com/albums/zz154/faturahman74/SMILE.jpg" title=" HAPPY BLOGING ">HAPPY BLOGING</a>

Contoh :

<body>

PASANG KODE DISINI

</body>

Keterangan :

- Klik kanan pada kedua file javascript-nya lalu save setelah itu upload di file hostingan kalian NB : untuk cara upload file javascript bisa lihat disini
- Ganti kedua URL javascript yang berwarna merah dengan URL javascript yang kalian upload tadi.
- Ganti URL yang berwarna biru dengan URL yang akan kalian akan jadikan tooltip.
- Ganti URL Fhoto yang berwarna Orange dengan URL fhoto kalian,URL fhoto ini yang akan di jadikan penjelasan link, NB : untuk cara upload Fhoto bisa lihat disini
- Ubah teks yang berwarna pink dengan penjelasan anda,teks ini akan muncul bersama gambar.
- Ubah teks yang berwarna ungu.teks ini yang akan berisi link dan akan memunculkan gambar ketika kursor ditempatkan di atas teks ini.

Selesai

Tulisan ini hanya sebatas sharing dari seorang pemula untuk pemula,Jika ada yang kurang di mengerti kita bisa sharing di kolom komentar di bawah ini ,semoga bermanfaat.and happy blogging.

DEMO MEMBUAT TOOLTIP DENGAN PENJELASAN TEKS DAN GAMBAR

noreply@blogger.com (www.e-mons.org) — Mon, 6 Sep 2010 15:15:00 +0700

Ini adalah demo membuat tooltip dengan memunculkan gambar dan teks,coba kalian tempatkan kursor di atas teks happy bloging di bawah ini.
HAPPY BLOGING

Kembali ke artikel

CARA UPLOAD FILE JAVASCRIPT/CSS DI GOOGLE CODE

noreply@blogger.com (www.e-mons.org) — Sun, 5 Sep 2010 20:30:00 +0700

Kode-kode javascript/css sangat mudah digunakan untuk mengoptimalkan blog kita.
Seperti dalam memasang pop up window, recent comment dan sebagainya.
Memasang kode javascript/css bisa dilakukan dengan memasang langsung pada kode HTML.
Tapi cara ini agak sedikit ribet juga jika suatu hari kita harus melakukan pengeditan.
Untuk cara mudahnya adalah dengan cara menyimpan file javascript/css di hostingan.
Ada banyak hostingan yang menyediakan penyimpanan file javascript/css secara gratisan salah satunya adalah google code.
Untuk cara meng-upload file javascript/css di google code adalah sebagai berikut :
1. Kunjungi google code klik disini
2. Klik sign in to create project.
Untuk melihat screenshoot klik disini
3. Isi dengan alamat email kalian.
Untuk melihat screenshoot klik disini
4. Klik create a new project.
Untuk melihat screenshoot klik disini
5. Create project.
Untuk melihat screenshoot klik disini
- Project name : Isi dengan nama project
- Poroject Summary : Isi dengan rangkuman project kalian
- Project description : Isi dengan penjelasan tentang project kalian
- Version control system : pilih mercurial
- Source code licensi: Pilih GNU general public licensi v3
- Centang use separate content licensi lalu pilih apa saja
- Klik create project

6. Untuk mulai mengupload klik downloads pada menu bar lalu klik new download.
Untuk melihat screenshoot klik disini
7. Beri nama pada kotak summary, pilih file javascript/css yang akan di upload.
Untuk melihat screenshoot klik disini
8. Klik Submit
9. Klik pada file yang sudah di upload, lalu klilk kanan untuk mendapatkan URL-nya
Untuk melihat screenshoot klik disini
10. Selesai

Keterangan :

- Kalian harus mempunyai akun email google untuk masuk google code.
- Cara penulisan kodenya untuk di pasang di blog adalah sebagai berikut :
Silahkan komentari tulisan saya ini.thx

MENG-UPLOAD GAMBAR DI PHOTOBUCKET

noreply@blogger.com (www.e-mons.org) — Sat, 4 Sep 2010 20:24:00 +0700

Gambar seringkali di gunakan orang untuk menerangkan suatu hal karena gambar sangat mudah di ingat dan mudah di mengerti.
Begitupun halnya dalam dunia bloging banyak pengguna blog yg menggunakan gambar sebagai alat supaya isi blognya mudah di mengerti pengunjungnya.
Untuk dapat memasang gambar pada blog kita perlu menyimpan file gambar tersebut di hostingan kita.
Ada banyak situs yang memberikan tempat penyimpanan file gambar secara percuma alias gratisan, salah satunya adalah situs photobucket.com.
Pada postingan ini saya akan sharing tentang cara meng-upload file gambar di photobucket.

Berikut adalah caranya :

1. Silahkan anda kunjungi situs photobucket.com klik disini
2. Klik sign up pada menu bar.
Untuk melihat screenshot klik disini
3. Isi form registrasi sesuaikan dengan data-data kalian.
Untuk melihat screenshot klik disini
4. Pilih no thanks untuk menyimpan pada tempat gratisan.
Untuk melihat screenshot klik disini
5. Klik Public.
Untuk melihat screenshot klikdisini
6. Klik upload image and video untuk memulai upload lalu pilih file gambar yang akan kita upload.
Untuk melihat screenshot klik disini
7. Klik save untuk menyimpan file yang sudah kita upload.
Untuk melihat screenshot klik disini
8. Copy kode-kode-nya untuk di pakai di blog.
Untuk melihat screenshot klik disini
9. Selesai

Semoga tulisan saya ini bermanfaat jika ada yang kurang di mengerti kita bisa sharing di kolom komentar di bawah ini.

Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):