Top Banner
Cara membuat recent post di blog Untuk menambah atau memasang recent post yang biasa juga dikenal dengan postingan terbaru jika di blog saya bisa dilihat di Artikel terbaru. Widget recent post telah tersedia di blogger dengan dua pilihan, yaitu recent post dan recent post advanced. Dalam contoh ini akan kita gunakan recent post advanced. 1. Login ke account blogger anda, pilih dashboard , tata letak , elemen halaman 2.Klik tambah gadget 3. Pilih Recent Posts advanced 4. Atur tampilan recent posts anda a. Judul : Artikel terbaru b.Ketinggian : 200 px (pixel) c.Blog Url(Means the link of the blog whose posts are to be displayed), masukkan url blog anda, misalnya :
69

Tampilan Di Blog

Jun 18, 2015

Download

Documents

MuhammadIrwan
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Tampilan Di Blog

Cara membuat recent post di blog

Untuk menambah atau memasang recent post yang biasa juga dikenal dengan postingan terbaru jika di blog saya bisa dilihat di Artikel terbaru. Widget recent post telah tersedia di blogger dengan dua pilihan, yaitu recent post dan recent post advanced.

Dalam contoh ini akan kita gunakan recent post advanced.

1. Login ke account blogger anda, pilih dashboard , tata letak , elemen halaman

2.Klik tambah gadget

3. Pilih Recent Posts advanced

4. Atur tampilan recent posts andaa. Judul : Artikel terbarub.Ketinggian  : 200 px (pixel)c.Blog Url(Means the link of the blog whose posts are to be displayed),   masukkan url blog anda, misalnya : http://artikelkomputerku.blogspot.com d. Number of posts to display , ketik jumlah postingan yang akan ditampilkan,    e. Display post thumbnails ?    jika di centang maka akan menampilkan thumbnail (gambar kecil yang diambil dari postingan)   f. Display post summaries ?     untuk menampilkan ringkasan postingang. Summary length (Needed only if you opt to display summaries)      lebar ringkasan (sesuaikan dengan lebar blog/sidebar)

Page 2: Tampilan Di Blog

h. Display post date ?     menampilkan tanggal postingani. Display the number of comments ?     menampilkan jumlah komentarj. Display the Read more link ?     menampilkan read morek. Display a Separator b/w the posts ?  menampilkan garis pemisah antara postingan

Untuk bagian  e sampai k , centang jika ingin diaktifkan

Untuk melihat preview tampilannya, klik Pembaruan

Klik Simpan untuk menampilkan di blog.

Cara membuat slideshow di blog

Ada banyak cara untuk membuat slide show, seperti menggunakan javascript, menggunakan widget slideshow blogger, ataupun bisa dengan mengunakan layanan pihak ketiga. Dalam postingan ini kita mencoba membuat gambar dalam bentuk slide show, bergerak acak (random), dan berbagai efek-efek lainnya. Ada sebuah situs yang menyediakan layanan gratisan, yang bisa anda manfaatkan untuk membuat slide show, kmudian kodenya bisa anda pasang di blog anda, bisa dipasang di dalam postingan, di sidebar, header atau di footer blog anda. Slide show ini bisa anda terapkan pada gambar kesayangan, foto pribadi, atau koleksi foto dan gambar lainnya.

Untuk membuat slideshow di blog, prosedur yang harus anda lakukan:

1. Buka situs slideshowJika belum terdaftar (belum punya akun) klik tombol sign up untuk daftar dan isi form pendaftaran, jika sudah punya bisa langsung klik tombol Sign in

Page 3: Tampilan Di Blog

2.Setelah login , klik Create a slideshow atau klik icon Ctreate slideshow

3. Pada tampilan berikut, klik browse untuk memilih file gambar atau foto yang akan di upload

4. Pilih gambar yang adaKlik Open

Page 4: Tampilan Di Blog

6. Lakukan langkah di atas hingga semua gambar ter-upload

7. Anda bisa mengatur style (efek / animasi slideshow)

8. Kemudian atur ukuran  widget slideshow yang akan dibuat:width : lebar widget , height ; tinggi widget dalam satuan pixel (atur sesuai kebutuhan)Ada beberapa option lain yang bisa anda atur seperti skin, themes, music/video,backgroundKlik update setelah selesai melakukan pengaturan

Page 5: Tampilan Di Blog

Jika suatu saat anda ingin mengubah efek slideshow anda bisa login ke akun slideshow, kemudian pilih edit slideshow.

9. pada halaman berikut pilih tombol  save slideshow

10. Anda akan mendapatkan kode yang bisa dipasang di blog

11. Login ke dashboard bloggerPilih tata letak , pilih elemen halamanPilih tambah gadget, pilih HTML/Javascript

Page 6: Tampilan Di Blog

Masukkan kode yang anda peroleh dari situs slideshow

Hasilnya bisa dilihat seperti pada blog  Dummy atau contoh lain dengan efek yang beda pada blog membuat slideshow di blog

Salah satu contohnya bisa dilihat di bawah ini

\ Cara membuat banner berjalan di blog (gambar berjalan)

Mungkin ada diantara teman-teman yang ingin membuat banner berjalan di blog,atau jika punya gambar kesayangan mungkin bisa buat gambar berjalan di blog, bisa juga jika punya foto maka membuat foto berjalan di blog. Anda bisa menempatkan banner, gambar, atau foto tersebut di dalam postingan atau di disebar (gadget html/javascript). Prosedur atau cara buat banner berjalan hampir sama dengan cara buat teks berjalan (marquee)

Ada beberapa tahap yang harus anda lakukan, 1. Upload gambar dari komputer ke situs layanan image hosting gratis seperti tinypic,photobucket,dll (dalam contoh ini kita menggunakan tinpyc)2. Buat kode banner di blog

Langkah detail untuk membuat :1. Buka situs tinypic image hosting , login dengan email dan password tinypic anda kemudian upload gambar dari komputer ke tinypic(Jika belum punya account anda bisa daftar dengan klik tombol Sign up)

Klik Browse, pilih gambar di komputer , klik Upload Now

Page 7: Tampilan Di Blog

Anda akan mendapatkan link gambar yang sudah diupload (Gunakan link yang ada di : Direct link for layouts)

Dalam contoh ini kita menggunakan 3 banner dengan link berikut:

http://i49.tinypic.com/2n7pmwx.jpg http://i46.tinypic.com/214umau.jpg http://i48.tinypic.com/208vejc.jpg  atau: http://i46.tinypic.com/s2zbjr.jpghttp://i47.tinypic.com/2u4sheu.jpghttp://i48.tinypic.com/2502hjc.jpg

2. Login ke dasboard blogger, buat entri baru atau add gadget html/javascriptMasukkan kode berikut:

Contoh 1: Gambar 1 buah, bergerak dari kanan ke kiri,Anda bisa mengatur tinggi dan lebar gambar , dalam contoh ini:a. width="490" lebar gambar 490 sesuaikan dengan gambar andab. height="360" lebar gambar 360 sesuaikan dengan gambar anda

Page 8: Tampilan Di Blog

Kode:<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"><img src="http://i49.tinypic.com/2n7pmwx.jpg" /></marquee>

Hasilnya bisa dilihat seperti di bawah ini:

Contoh 2, jika gambarnya lebih dari satu, bergerak dari kanan ke kiri

Kode:<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"><img src="http://i49.tinypic.com/2n7pmwx.jpg"/> <span style="padding: 5px;"> <img src="http://i46.tinypic.com/214umau.jpg"/> </span> <span style="padding: 5px;"> <img src="http://i48.tinypic.com/208vejc.jpg"/></span></marquee>

Hasil:

Page 9: Tampilan Di Blog
Page 10: Tampilan Di Blog

Contoh 3: jika gambarnya bergerak secara vertikal , untuk mengubah bergerak dari atas ke bawah , ganti direction="up" menjadi direction="down"

Kode:<marquee behavior="scroll" direction="up" scrollamount="3" width="490" height="360"><img src="http://i49.tinypic.com/2n7pmwx.jpg"/> <br> <img src="http://i46.tinypic.com/214umau.jpg"/><br><img src="http://i48.tinypic.com/208vejc.jpg"/><br></marquee>

Hasil

Page 11: Tampilan Di Blog
Page 12: Tampilan Di Blog

Silahkan dicoba...masukkan kode di atas ke dalam teks editor blogger atau ke gadget html, sesuaikan lebar dan tinggi sesuai dengan gambar/banner anda.

Selain cara di atas, anda juga bisa menggunakan website penyedia layanan pembuatan slidshow gratis, di situs tersebut banyak menyediakan skin, efek,animasi ,bahsannya bisa dilihat di postingan saya tentang cara membuat slideshowcontohnya bisa dilihat di bawah ini

Cara membuat teks berjalan di blog (marquee)

Teks berjalan yang biasa juga disebut marquee, merupakan sebuah efek gerak pada teks. Biasanya teks berjalan ini digunakan oleh pemilik blog untuk menampilkan sebuah pesan , link atau banner untuk menarik perhatian pengunjung.

Secara umum cara buat teks berjalan bisa menggunakan kode dasar seperti di bawah ini

1. Buat teks berjalan dari kanan ke kiri (default)

Kode

<marquee> Membuat teks berjalan </marquee>

Hasil :

2. Membuat teks berjalan dari kiri ke kanan (direction)

Kode:

Page 13: Tampilan Di Blog

<marquee behavior="scroll" direction="right" height="50" width="auto">Teks berjalan dari kiri ke kanan</marquee>Hasil:

3. Membuat teks bergerak dengan mengatur kecepatannya (scrollamount)Anda bisa mengubah angka 30 pada scrollamount="30"Kode:<marquee behavior="scroll" direction="left" scrollamount="5">Teks bergerak lambat</marquee><marquee behavior="scroll" direction="left" height="100" scrollamount="30" width="auto">Teks bergerak lebih cepat</marquee>hasil:

4. Membuat teks bergerak bolak balik / memantul saat tiba di tepi kiri atau kanan

Kode:<marquee behavior="alternate">Teks berjalan bolak balik</marquee>

Contoh hasil-nya:

5. Membuat teks berjalan dengan background biruUntuk mengganti background (warna latar belakang-nya) bisa ganti kata "blue" pada kode bgcolor="blue" , warna lain bisa dilihat disini tabel warna

Kode:

Page 14: Tampilan Di Blog

<marquee bgcolor="blue" height="50" width="auto">Teks berjalan dengan background biru</marquee>

Contoh tampilan:

6. Membuat teks bergerak dari bawah ke atas

Kode:<marquee behavior="scroll" direction="up" height="200" width="auto">Teks bergerak dari bawah ke atas</marquee>

untuk mengubahnya menjadi bergerak dari atas ke bawah ganti kode direction="up" menjadi direction="down"

Contoh:

7. Membuat teks bergerak dari bawah ke atas (di dalam kotak teks)

Kode:<div style="border: 1px solid rgb(202, 61, 217); height: 180px; overflow: auto; padding: 5px;"><b><marquee behavior="scroll" scrollamount="3" direction="up"></br><a href="http://artikelkomputerku.blogspot.com/">Artikel Komputer</a></br><a href="http://www.komputerseo.com/">Komputer SEO</a></br><a href="http://mycomputerdummies.blogspot.com/">My Computer Dummies</a></br><a href="http://dummy-ku.blogspot.com/">Dummy-ku</a></br></marquee></b></div>

Contohnya bisa dilihat di bawah ini:

Page 15: Tampilan Di Blog

Contoh 2Kecepatannya diubah dengan scrollamount="2" , arahnya ke bawah direction="down"

8. Membuat teks bergerak dari bawah ke atas, memantul dan berhenti jika penunjuk mouse berada di atas teks area.Tambahkan kode: onmouseout="this.start()" onmouseover="this.stop()

Kode:<marquee align="center" behavior="alternate" direction="up" height="300" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100"> Teks 1 Teks 2 Teks 3 </marquee>

Contohnya bisa dilihat di bawah ini :

Page 16: Tampilan Di Blog

Anda bisa memasukkan kode kode di atas pada teks editor blogspot,

Atau pada gadget html/javascript

Cara membuat kotak teks (text area) di dalam postingan blog

Terkadang di dalam postingan kita ingin buat kotak teks (text area), di dalam kotak teks bisa diisi dengan teks, link, banner, dll. Ada banyak cara / script yang bisa anda gunakan untuk membuat kotak teks (text box) tersebut. Kotak teks ini biasanya digunakan untuk membuat form untuk tukaran link dengan blog lain.Sebagai contoh di bawah ini adalah beberapa macam cara membuat kotak teks (text box) dengan script yang berbeda.

Contoh 1:* Teks rata tengah = text-align: center; center bisa diganti dengan left, right,justify* Background warna biru = background-color: rgb(0, 0, 240)  angaka 0 dan 240 bisa anda ubah sesuai keinginan (untuk mengubah warnanya)

Script: (dimasukkan di dalam postingan)

Page 17: Tampilan Di Blog

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: rgb(0, 0, 240); text-align: center;"><a href="http://artikelkomputerku.blogspot.com">Artikel Komputer</a></p>

Hasilnya:

<a href="http://artikelkomputerku.blogspot.com">Artikel Komputer</a>

Contoh 2:* Teks otomatis rata kiri * Background warna hitam = background-color: black; black bisa diganti dengan warna lain seperti white, red, blue, green, dsb, warna lainnya bisa dilihat disini daftar warna* Link diisi hingga baris pertama penuh kemudian akan berpindah ke baris 2*Tinggi kotak teks  100 px (pixel) = height: 100px; angka 100 bisa diubah sesuai kebutuhan

Script: (dimasukkan di dalam postingan)

<div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 100px; background-color: black; "><br><a href="http://www.komputerseo.com/">Komputer SEO</a> <a href="http://mycomputerdummies.blogspot.com/">Dummies</a><br></div>

Hasil:

Komputer SEO Dummies

Contoh 3:

* Teks otomatis rata kiri * Background transparan* Link diisi per baris 1 link*Tinggi kotak teks  200 px (pixel) = height: 100px; angka 100 bisa diubah sesuai kebutuhan Script: (dimasukkan di dalam postingan)

<div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 200px; "> <br><a href="http://www.komputerseo.com/">Komputer SEO</a> <br><a href="http://mycomputerdummies.blogspot.com/" target="_blank">Dummies</a>

Page 18: Tampilan Di Blog

<br></div>

Hasil:

Komputer SEO Dummies

kode di atas dimasukkan saat membuat entri baru / edit entri dalam mode "Edit HTML"

Mudah-mudahan postingan ini bisa menjawab pertanyaan teman-teman yang sering menanyakan cara membuat form tukaran link di dalam postingan. Pertanyaan seperti ini sudah sering saya terima lewat email, namun baru sempat membuat postingannya. agar lebih memudahkan menjawab pertanyaan teman-teman. Jika masih ada yang kurang jelas silahkan di tanyakan di kotak komentar.

Cara membuat background pada judul postingan blog

Buat teman-teman yang mempunyai blog dan di blognya pada bagian judul postingan ingin membuat background yang warnanya bebrbeda dengan background utama maka anda bisa mengubah sedikit script pada template anda. Menurut beberapa sumber yang pernah saya baca agar blog lebih seo friendly maka judul postingannya di buat lebih besar ukurannya dari ukuran teks isi postingan, dan lebih kecil dari ukuran teks dan deskripsi header. Selain itu membuat background pada judul postingan bisa memudahkan pengunjung melihat judulnya, dan katanya lebih memudahkan search engine mendeteksi keyword yang ada di judul tersebut.

Page 19: Tampilan Di Blog

Contoh judul postingan yang di-ubah background-nya bisa dilihat seperti gambar di bawah ini.

Untuk mengubah /membuat background judul postingan lakukan prosedur berikut:

1. Di dashboard pilih Tata letak , Edit HTML

Cari kode : post-title {

Di bagian bawah post-title { , masukkan kode

line-height: 2.1em;border: 4px solid #000099;background-color: #000099;

atau line-height: 2.1em;border: 4px solid yellow;background-color: yellow;

Page 20: Tampilan Di Blog

catatan: #000099 adalah kode hexadesimal untuk warna biru (bisa gunakan warna lain)Selain menggunakan kode warna hexadesimal anda juga bisa menggunakan warna seperti: yellow , red, pink, blue,green, black, dll.Untuk warna lainnya bisa dilihat disini tabel warna

Tampilan scriptnya seperti di bawah ini

post-title {margin: 0;padding: 0;font-size: 125%;font-weight: bold;line-height: 2.1em;border: 4px solid yellow;background-color: yellow;

atau:

post-title {margin: 0;padding: 0;font-size: 125%;font-weight: bold;line-height: 2.1em;border: 4px solid #000099;background-color: #000099;

Contohnya bisa dilihat di blog ini atau di blog berikut : blog komputer

Cara mengatur perataan teks (justify) dalam postingan (rata kiri dan kanan)

Jika diantara teman-teman ada yang menggunakan template standar/bawaan Blogger, tekadang teks yang terdapat di bagian postingan hanya rata kiri. kita dapat mengatur-teks yang terdapat di dalam postingan tersebut agar menjadi lebih rapi, yaitu dengan mengatur rata kiri dan kanan (justify).

Page 21: Tampilan Di Blog

Contoh tampilan awal blog ini, postingan rata kiri.

Untuk mengatur rata teks, anda perlu menambahkan script ke dalam blog anda, script ini saya peroleh dari situs belajar script html.

Prosedur yang perlu anda lakukan:Login ke dashboard , pilih Tata letak , Edit HTML

cari kode    #main-wrapper {di bagian bawahnya tambahkan kode   text-align: justify;

Tampilan scriptnya seperti di bawah ini: (mungkin susunan scriptnya berbeda dengan sript template anda, karena saya menggunakan template denim)

#main-wrapper {  margin-$startSide: 14px;  width: 500px;  float: $startSide;  text-align: justify;  background-color: $mainBgColor;

Atau lihat gambar di bawah ini:

Page 22: Tampilan Di Blog

Hasilnya bisa dilihat di blog ini, teks pada postingan yang awalnya rata kiri, setelah memasukkan script   text-align: justify; maka berubah menjadi rata kiri dan kanan.

Tampilan Template baru blog Artikel Komputerku

Di akhir tahun 2009 ini, blog gratisan Artikel Komputerku berubah wajah /tampilan dari awalnya menggunakan template bloggerize adsense, kini menggunakan template bawaan blogger, script body menggunakan template denim, sedangkan di bagian background menggunakan background son of moto, ditambah dengan pengaktifan 4 slot header sedangkan gambar jpeg saya hilangkan untuk meringankan loading/membuaka halaman. Di bagian footer saya ubah menjadi 3 kolom. dan di sidebar rencana akan dibuat menjadi dua kolom.

Ada beberapa hal yang mendasari saya untuk mengubah template:1. Template yang lama sudah mengalami beberapa error akibat eberapa kali bongkar pasang script yang diperoleh dari internet, jadi untuk menghindari error yang lebih banyak maka lebih baik menggunakan fresh template blogger.

2. Belajar mengoptimasi blog menggunakan template standart (bawaan) blogger

Sekalipun tampilannya sangat sederhana, tetapi sebagai blogger pemula adalah suatu proses pembelajaran jika menggunakan template bawaan blogger kemudian di kostumasi sesuai selera dan kemampuan sendiri.

Eh.....template lama blog Artikel Komputerku (sebagai kenangan)

Page 23: Tampilan Di Blog

Cara menghilangkan garis bawah link di blogspot

Mungkin ada teman-teman yang menggunakan template blog yang di download dari Internet,saat anda memasang template tersebut di blog anda ternyata disetiap link akan otomatis ada garis bawah link-nya, contohnya seperti link pada template denim yang saya gunakan di blog saya. pada link adsense PTC Lokal ada garis bawah-nya.

Untuk memudahkan menghilangkan garis bawah link tersebut, anda perlu menambahkan script css, ke template anda. script ini saya dapatkan ketika googling dan ketemu di blog teman menghilangkan garis bawah link

1. Login ke dashboard , tata letak , edit html

cari kode berikut:<b:skin><![CDATA[

Page 24: Tampilan Di Blog

Letakkan script berikut sebelum script <b:skin><![CDATA[

<style type='text/css'>A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}</style>

Scriptnya akan tampak seperti di bawah ini

<style type='text/css'>A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}</style><b:skin><![CDATA[

Silahkan di coba mudah-mudahan bisa berjalan di blog anda. Jika cara di atas tidak berhasil maka anada bisa melakukannya secara manual, cari semua text yang berisi:

text-decoration: underline

ganti dengan: 

text-decoration:none

Cara menambah (pasang) video youtube di blog blogspot

Mungkin ada diantara teman yang masih pemula kesulitan menambah (memasang) video youtube ke dalam postingan di blogspot (blogger). Anda bisa memanfaatkan youtube sebagai tempat menyimpan video anda. Mengapa memilih youtube??, karena di youtube selain anda menempatkan file video kesayangan anda maka secara tidak langsung anda mempromosikan video dan blog anda di youtube, yang bisa menjadi salah satu sumber trafik (pengunjung) ke blog anda.

Video youtube yang anda pasang /tambah ke blog anda juga bisa membuat postingan semakin menarik dan bisa membuat postingan lebih informatif.

Ada beberapa tahap cara memasang video di youtube:1. Anda harus punya link/script embed file video di youtube, script ini bisa diperoleh dengan

Page 25: Tampilan Di Blog

cara:a. mengunjungi langsung situs youtube kemudaian mengambil script embed-nya,b. bisa juga dengan meng-upload video di youtube kemudian mengambil kode /scriptnya

Dalam contoh ini kita akan menggunakan file video youtube yang sudah saya upload di situs youtube

Masuk ke direktori My VideosPilih salah satu file video yang sudah anda upload ke youtubeCopy script yang ada dalam kotak teks embed

Contoh scriptnya bisa dilihat di bawah ini:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/VYWu3IaVVtg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VYWu3IaVVtg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Agar videonya bisa simetris letaknya, atau berada di tengah-tengah bisa tambahkan script <center> ------ </center> menjadi seperti di bawah ini

<center><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/VYWu3IaVVtg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VYWu3IaVVtg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></center>

Page 26: Tampilan Di Blog

Setelah mendapatkan script embed video dari youtubeLogin ke akun blogger anda, buat postingan baru (new entri)Masukkan script embed video youtube ke dalam kotak teks

Hasil video youtube yang terpasang di dalam postingan blog akan tampak seperti di bawah ini (anda harus bersabar menunggu loading file video youtube-nya), cepat atau lama munculnya video tergantung koneksi internet anda)

Selain video yang sudah anda download sendiri ke youtube, anda juga bisa mengambil script embed video orang lain yang ada di youtube,Anda cukup membuka sebuah video yang ada di youtube, kemudian mengambil script embed videonya, dan memasukkannya ke blog anda.Contoh script embed videonya bisa dilihat seperti di bawah ini:

Page 27: Tampilan Di Blog

Memasang widget google translator logo bendera di blog

Buat teman-teman yang mungkin ingin menambah atau memasang widget google translator ke blog ada dua pilihan, yaitu google traslate strandar dan google translate yang terdiri dari logo bendera.

Contoh widget google transtalor logo bendera bisa dilihat seperti di bawah ini:

Selain di atas bisa juga menggunakan tampilan berikut:

Info selengkapnya tentang script google translator di atas bisa dilhat disini Free widget google translator

Cara buat teks judul blog berjalan di title bar browser

Mungkin ada diantara teman-teman yang ingin menghias blognya, dengan membuat teks judul blog berjalan saat dibuka di browser internet. Untuk membuat judul tersebut berjalan anda perlu menambahkan script ke template anda.

Jadi bigung membuat kata-kata yang cocok buat menjelaskannya. Untuk lebih jelasnya bisa dilihat disini blog dummy

Di bagian atas browser (title bar browser) ada tulisan berikut:Welcome to my blog !!! ... , Articles about computerNah tulisan tersebut yang saya maksudkan.

Page 28: Tampilan Di Blog

Buat teman-teman yang tertarik

1. Login ke dasboard

Pilih Tata Letak -> Edit Html

2. Cari kode berikut

]]></b:skin></head>

3. Setelah kode ]]></b:skin>, masukkan kode berikut:

<SCRIPT language='JavaScript'>var txt="Welcome to my blog !!! ... , Articles about computer | ";var speed=150;var refresh=null;function move() { document.title=txt;

Page 29: Tampilan Di Blog

txt=txt.substring(1,txt.length)+txt.charAt(0);refresh=setTimeout("move()",speed);}move();</SCRIPT><script type='text/javascript'>if (window.jstiming) window.jstiming.load.tick('headEnd');</script>

4. hasilnya akan tampak seperti di bawah ini

]]></b:skin><SCRIPT language='JavaScript'>var txt="Welcome to my blog !!! ... , Articles about computer | ";var speed=150;var refresh=null;function move() { document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);refresh=setTimeout("move()",speed);}move();</SCRIPT><script type='text/javascript'>if (window.jstiming) window.jstiming.load.tick('headEnd');</script></head>

catatan:Angka 150 pada var speed=150 bisa anda ubah sesuai kebutuhan, semakin kecil nilainya maka semakin cepat pergerakan teksnya.Tulisan Welcome to my blog !!! ... , Articles about computer | , bisa anda ganti sesuai tema blog anda....

Selamat mencoba.....Saya tidak menyarankan anda memakai cara ini karena menurut saya secara pribadi jika tulisannya bergerak bisa membuat kepala pusing...dan susah membaca teksnya.

Page 30: Tampilan Di Blog

Cara buat read more di blogspot versi 3 (readmore versi blogger help)

Secara tidak sengaja saat membuat postingan, saya mengklik tanda tanya yang ada di posting blog dan membuka halaman tentang readmore blogger. Buat teman-teman yang mungkin berminat menggunakan cara membuat readmore ini, bisa ikuti prosedur berikut:

1. Login ke dashboar andaPilih Tata Letak -> Edit Html

2. Cari kode berikut

<data:post.body/>

3. Coba anda lihat di bagian bawah kode tersebut, apakah sudah ada kode berikut(Biasanya jika menggunakan template bawaan blogger, sudah ada kode di bawah ini, jika belum ada masukkan kode berikut di bawah kode yang terdapat pada langkah 2

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></div></b:if >

4. Hasilnya mirip seperti di bawah ini

<data:post.body/><b:if cond='data:post.hasJumpLink'>

Page 31: Tampilan Di Blog

<div class='jump-link'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></div></b:if >

5. Selanjutnya, Pada dashboard pilih Elemen halamanPada bagian Posting Blog ,klik Edit

6. Pada bagian Teks tautan laman entriAnda bisa mengganti Tulisan " baca selengkapnya " menjadi "readmore" atau kata yang ingin anda tampilkan sebagai pengganti read more

Simpan perubahan di atas, dengan menekan tombol Simpan

7. Selanjutnya Di dasboard pilih Posting -> Entri baruAnda aktifkan Mode "Edit HTML"pada bagian teks yang akan dipenggal masukkan kode berikut:

<!-- more -->

Page 32: Tampilan Di Blog

Catatan:1.Teks sebelum script "more" akan ditampilkan, sedangkan teks setelah script "more" akan disembunyikan2. Penulisan script more perhatikan tanda - dan more ada spasi.

Catatan:Agar anda tidak berulang menuliskan script <!-- more --> pada setiap membuat entri (postingan baru) maka anda bisa memasukkan script <!-- more --> tersebut ke template entry

Pada Dashboard pihh Tata letak -> Format

Di bagian template entri masukkan script <!-- more --> Jika anda membuat entri baru (lihat langkah 7, maka secara otomatis script tersebut akan muncul di entri baru anda.

Contoh blog saya yang memakai script ini bisa dilihat disini blog dummy

Update nov 2009

Page 33: Tampilan Di Blog

Saat ini untuk membuat readmore di blogger (blogspot) sudah tidak perlu menggunakan script lagi, anda cukup menggunakan/mengaktifkan new editor blogger, dan menggunakan toolbar read more, paduannya bisa dilihat disini membuat readmore di blogger (blogspot)

Membuat readmore di editor baru blogger

Membuat readmore di editor baru blogger lebih mudah jika dibanding menggunakan editor lama. Di editor baru (new editor ), anda tidak perlu membuat script cukup menggunakan tombol readmore yan tersedia di toolbar editor blogspot. Anda perlu mengatur editor agar yang aktif adalah new editor.

Prosedur yang harus anda lakukan:1. login ke dashboardpilih pengaturan ->; dasar

geser halaman ke bawah hingga menemukan setting globalpada bagian "pilih editor entri" klik option pada "editor yang diperbarui"Simpan setelan

Page 34: Tampilan Di Blog

2. mulai membuat postingan baru,pilih entri baru

ketik teks (postingan) , di bagian bawah teks yang akan dimunculkan, letakkan kursor mouse kemudian klik klik tombol readmore di toolbar editorjika berhasil akan muncul pemisah berupa garis putus-putus.

Cara menambah lagu di blog

Awalnya saya tidak tertarik membuat postingan ini,karena menurut saya tidak efektif jika tambah /pasang lagu di blog dan jauh lebih baik memutar winamp di komputer sambil buat blog daripada memutar lagu secara online. tetapi karena ada beberapa teman yang menanyakan cara menambah atau memasang lagu ke blog, akhirnya saya buat juga postingan cara tambah lagu di blog ini.

Tetapi sebagai pertimbangan buat teman-teman sebelum menambah lagu ke blog:1. Blog akan menjadi lebih berat, sehingga waktu loading atau membuka halaman lebih lambat2. Robot google tidak suka dengan blog yang berat loadingnya, jadi jika tujuan anda untuk optimasi seo maka jangan tambah atau pasang lagu di blog anda.

Buat yang tertarik pasang lagu di blog bisa lakukan prosedur berikut:1. Buka situs layanan mp3 online2. Copy kode html yang tersedia

Page 35: Tampilan Di Blog

3. Logn ke account blogger andaPilih Dashboard -> tata letak -> elemen halamanPilih Tambah Gadget

4. Pilih html/java script

Page 36: Tampilan Di Blog

5. Masukkan kode yang anda perleh dari website layanan lagu online ke kotak teks html/javascriptKlik Simpan

6. Buka blog anda, jika sukses maka akan muncul widget mp3 player di blog anda. Untuk memulai lagu anda bisa tekan tombol play seperti di winamp. Untuk menyembunyikan playlist tekan tombol PL.

Page 37: Tampilan Di Blog

Contoh hasilnya bisa dilihat disini : blog dummy

Mengubah (konversi) tabel excel ke html script

Mungkin ada diantara teman-teman yang sering membuat tabel saat akan membuat website/blog. Anda bisa memanfaatkan tool berikut untuk membantu anda mengubah tabel excel tersebut ke dalam bentuk html script. Jadi anda cuma meng-copy tabel tersebut selajutnya paste di website converter kemudian anda mendapatkan script htmlnya yang bisa anda sisipkan di halaman web anda.

Untuk memulai konversi:1. Buka excel anda, copy tabel yang akan di konversi2. Buka website tableizer3. masukkan (paste) tabel excel di web tersebut

Page 38: Tampilan Di Blog

4. klik tombol tableize it

5. Copy script html ke web /blog anda

Tabel warna dan kode warna (hexadecimal code)

Berikut ini adalah tabel daftar nama warna (color name) dan nilai hexadesimal (or a hex value)

Color Name HEX Code Color (Contoh warna)

Alice Blue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000

Page 39: Tampilan Di Blog

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGreen #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

Darkorange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DodgerBlue #1E90FF

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Page 40: Tampilan Di Blog

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateGray #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

Page 41: Tampilan Di Blog

MediumPurple #9370D8

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #D87093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Page 42: Tampilan Di Blog

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

Sumber: Tabel warna

cara buat tag cloud (tag berputar)

Mungkin ada diantara teman yang masih pemula yang senang menghias blog dengan membuat atau menambah tag (label) yang berputar ketika pointer mouse diarahkan ke tag atau label tersebut. Biasanya tag cloud ditempatkan di sidebar blog. Anda bisa menambahkan script ke template anda untuk bisa menampilkan tag (label) cloud tersebut di sidebar.Contohnya bisa dilihat di bawah ini

Page 43: Tampilan Di Blog

Untuk buat (tambah) tag cloud ke sidebar blog anda,bisa lakukan prosedur berikut1. Login ke dashboardPilih Tata Letak -> Edit Html

2. Cari kode berikut

<b:section class='sidebar' id='sidebar' preferred='yes'>

Setelah kode di atas masukkan kode berikut

<b:widget id='Label100' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/><div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>RoyTanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div><script type='text/javascript'>

Page 44: Tampilan Di Blog

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");// uncomment next line to enable transparency//so.addParam("wmode", "transparent");so.addVariable("tcolor", "0x333333");so.addVariable("mode", "tags");so.addVariable("distr", "true");so.addVariable("tspeed", "100");so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");so.addParam("allowScriptAccess", "always");so.write("flashcontent");</script><b:include name='quickedit'/></div></b:includable></b:widget>

3. Simpan template

Jika sukses maka hasilnya akan terlihat seperti berikut tag cloud

Catatan,Jika di blog anda memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog anda. Pilih option Cloud

Jika ingin mengubah warnanya anda bisa coba ganti beberapa variabelnyatagcloud", "240", "300", "7", "#ffffff" ->a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa anda ganti sesuai lebar widget anda agar lebih rapi),b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain ,

Page 45: Tampilan Di Blog

bisa dilihat disini daftar warna3. so.addVariable("tcolor", "#ffffff"); dimana , #ffffff warna teks hitam. warna teks lain yang bisa anda gunakan:

0xffffff : warna putih0xFF0000FFF : warna merah0x00FF00: Warna Hijau0x0FFFF0: warna Kuning0x00FF0000 : warna biru0xFFF000 : warna biru muda0xFFFFFFF : Warna Hitam0x0FF0FF0 : warna pink

Contoh di bawah ini adalah script tag berputar background berwarna biru, dan teks berwarna putih:

<b:widget id='Label100' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/><div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>RoyTanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div><script type='text/javascript'>var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "280", "300", "7", "#007FFF");// uncomment next line to enable transparency//so.addParam("wmode", "transparent");so.addVariable("tcolor", "0xffffff");so.addVariable("mode", "tags");so.addVariable("distr", "true");so.addVariable("tspeed", "100");so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");so.addParam("allowScriptAccess", "always");so.write("flashcontent");</script><b:include name='quickedit'/></div></b:includable></b:widget>

Page 46: Tampilan Di Blog

Contoh tag berputar warna biru bisa dilihat disini tag berputar

Cara follow (mengikuti) twitter orang lain

Ini bagian keenam dari cara promosi blog di twitter

Ada banyak cara untuk mencari teman (mengikuti twitter) orang lain, beberapa contohnya:

A. Sebelum anda login di twitter

1. Misalkan anda twittwalking , anda melihat sebuah twitter orang lain yang menarik, maka cukup klik salah satu logo yang ada di following (sidebar)lihat gambar di bawah

2. akan muncul kotak login, isi dengan user dan password twitter andaKlik Sign in

Page 47: Tampilan Di Blog

3. Secara default, orang yang anda follow akan muncul di list follow anda jika mereka sudah menyetujui.

B. Cara lain saat anda sudah login (aktif di account twitter)Ada beberapa cara mencari followera. cari teman dengan invited email (mengundang teman menggunakan email)b. Find peoplec. browse teman (follower) dari teman andad. Folow undangan dari teman

saya akan mencoba dengan menggunakan Find People1. Klik Find people

2. masukkan keyword, miasalnya nama negara, nama sekolah, atau nama artis dan lain-lainKlik search

3. Dalam hasil pencarian, klik "Follow"Anda harus menunggu mereka aprove permohonan follow anda.

Page 48: Tampilan Di Blog

Mengubah gambar background blog dengan gambar sendiri

Buat teman-teman yang masih pemula, mungkin ada yang belum tahu cara mengganti background blog. Sebenarnya anda bisa mengubah background blog anda dengan menambah sedikit script CSS ke template blog anda.

Sebagai Catatan:Saya menguji coba template ini pada template bawaan blogger yaitu: "Denim"Mungkin jika menggunakan template lain tidak berfungsi optimal, karena biasanya setiap template mempunyai struktur dan syntax script yang berbeda.

Jika tertarik mengganti template blog:1. Anda harus mengupload gambar yang akan anda gunakan di situs hosting file (image) seperti photobucket. Jika belum punya account disana anda bisa daftar di photobucket.com atau tinypicSetelah upload gambar anda akan mendapakan url gambar tersebut.(Catatan: gambar yang anda upload sebaiknya ukuran filenya kecil, usahakan lebih kecil dari 10 kbyte) agar cepat loadingnya, saya sarankan anda upload gambarnya ke tinypic)

2. Atau jika anda ingin mencoba gambar background yang saya punya bisa pakai url berikut:http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gifhttp://i37.tinypic.com/apb69k.jpghttp://i36.tinypic.com/n1bdcz.jpg(pilih salahsatu untuk ujicoba)

3. Selanjutnya masuk ke account blogger anda:Pilih dasboard -> Tata Letak -> Edit Html

Page 49: Tampilan Di Blog

4. cari kode berikut:

body {background: $bgColor;

5. Masukkan kode berikut di bawahnya:

background: #642D8B url('url gambar anda' ) fixed repeat top left;

Hasilnya seperti di bawah ini

body {background: $bgColor;background: #642D8B url('url gambar anda') fixed repeat top left;

6. Agar background di samping header berubah, maka anda harus mengubah kode berikut:

#header-wrapper {margin:0;padding: 0;background-color: $headerCornersColor;text-align: $startSide;

Ubah menjadi:

#header-wrapper {margin:0;padding: 0;background: #642D8B url('url gambar anda') fixed repeat top left;background-color: $headerCornersColor;text-align: $startSide;

catatan;url gambar anda diganti dengan url gambar yang telah anda upload, atau diganti dengan url gambar yang saya pakai:

Page 50: Tampilan Di Blog

http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif

6. Simpan template

Update 2 januari 2010

Sejak 29 Desember, saya mengganti template menggunakan template denim + sun of moto (masih template bawaan /standar blogger), seperti yang saya gunakan di blog ini, jika ingin mencobanya bisa lakukan modifikasi script pada template anda:

a. Script untuk mengganti gambar background body

body {background: $bgColor;background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg') top center repeat-y;margin: 0;padding: 0px;

b. Script untuk mengganti gambar background header

#header-wrapper {margin:0;padding: 0;background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg')

c. Script untuk mengubah lebar content (menjadi 900 pixel)

#content-wrapper {width: 900px;

d. Script untuk mengubah lebar main (postingan)

#main-wrapper {margin-$startSide: 14px;width: 500px;

e. Script untuk mengubah lebar sidebar

#sidebar-wrapper {margin-$endSide: 10px;

Page 51: Tampilan Di Blog

width: 360px;

Contoh template denim yang sudah saya ubah bisa dilihat disiniComputer dummy atauBlog kalongKomputer SEO

Contoh template minima yang sudah saya ubah bisa dilihat disinidummy-ku

Cara update posting twitter secara otomatis menggunakan feed hootsuite

Ini bagian kelima dari cara promosi blog di twitter

Buat teman-teman yang sering menggunakan twitter (kadang salah tulis twiter untuk keyword seo).Kelebihan dari cara update twitter secara otomatis ini adalah anda tidak perlu repot lagi mengaupdate postingan, karena setiap ada update pada postingan blog anda secara otomatis hootsuite akan mendirect dan mengupdate twitter. Anda hanya perlu melakukan konfigurasi feed blog anda di hootsuite

Untuk update postingan (posting) twitter secara otomatis lakukan prosedur berikut:

1. Login ke hootsuite

2. Pada bagian dashboard, pilih tabulasi RSS Atom FeedsKlik tombol Add new Feed

Page 52: Tampilan Di Blog

catatan:(hootsuite versi gratis hanya mengizinkan 5 buah feed, artinya hanya 5 buah blog anda yang bisa anda update otomatis di twitter, selebihnya harus diupdate secara manual, atau jika ingin unlimited feed bisa gunakan layanan berbayarnya)

2. masukkan url feed blog andabiasanya formatnya seperti ini:http://namadomain.blogspot.com/feeds/posts/defaultsContoh:http://artikelkomputerku.blogspot.com/feeds/posts/defaultatauhttp://mycomputerdummies.blogspot.com/feeds/posts/default

Klik Save

3. Jika sukses maka akan terlihat logo berwarna merah (pause) di depan nama feed

Page 53: Tampilan Di Blog

Contoh hasilnya bisa dilihat disini : Twitter

Silahkan lihat kelanjutannya di bagian ke enam (cara follow /mengikuti tweeter orang lain)

Cara update postingan (posting) di twitter secara manual

Ini adalah bagian keempat, silahkan lihat bagian pertamanya disini cara promosi blog di twitter

update postingan (posting)secara manual di twitter kalo diingriskan mungkin begini "manually tweets twitter" jadi ingat burung tweety di Kenali dan Kunjungi Objek Wisata di Pandeglang

Update secara manual terkadang diperlukan, dalam kasus tertentu, seperti jika saat mendaftar postingan di blog anda anda sudah lebih dari 25 postingan. Biasanya rss feed hanya merekam 25 postingan terbaru. Misalkan postingan di blog anda ada 30 buah saat mendaftar di twitter, maka jika memanfaat update otomatis hootsuite, maka twitter hanya bisa menampilkan 25 postingan terakhir, kelebihannya sebanyak 5 buah postingan harus anda update (posting) di twitter secara manual.

1. Login ke hootsuite

Page 54: Tampilan Di Blog

2. Di Bagian dashboardKetik teks postingan yang akan ditampilkan, misalnya:Kenali dan Kunjungi Objek Wisata di Pandeglangdi bagian bawahnya masukkan url link halaman yang akan dihubungkan dengan postingan (tweets), misalnya:http://artikelkomputerku.blogspot.com/2009/08/kenali-dan-kunjungi-objek-wisata-di.htmlKlik "Shrink It"

3. Jika sukses maka dibelakang tulisan pstingan akan muncul sebuah linkKlik "Submit Tweet"

4. Jika sukses maka akan muncul postingan di halaman twitter anda,

Contohnya bisa dilihat disini : Twitter

Silahkan lihat kelanjutannya di bagian ke lima (cara update secara otomatis)

Page 55: Tampilan Di Blog

Cara daftar di hootsuite

Ini adalah bagian ketiga dari cara promosi blog di twitter, silahkan mulai dari bagian awal

Untuk memanfaatkan fasilitas dari hootsuite anda harus daftar, biaya pendaftarannya gratis, dan anda tidak dibebani biaya penggunaan (semauanya gratis)

Untuk mendaftar ke hootsuite

1. Buka halaman hootsuite, bisa klik disini hootsuite atau di old hootsuite (saya menggunakan old hootsuite)Isi form pendaftaranEmail, nama, password,timezone,dstKlik Create account

2. Pada bagian :a. twitter login : isi dengan username yang telah anda buat di twitterb. masukkan passwordKlik add

Page 56: Tampilan Di Blog

2. Jika sukses akan muncul link twitter anda seperti gambar di bawahKlik Finish

3. Akan muncul halaman aktivasi.Cek email untuk mengambil kode aktivasi yang terkirim di email anda

Contoh isi Email konfirmasi

Page 57: Tampilan Di Blog

5. Di halaman hootsuite, klik tombol Confirm

6. Jika sukses anda akan punya account di hootsuite,

Silahkan lihat kelanjutannya di bagian keempat (cara update twitter)

Cara daftar (buat account) di twitter

Ini adalah bagian kedua tentang cara promosi blog di twitter, silahkan lihat bagian pertamanya disini : Cara promosi blog di twitter

Sebagaimana yang diketahui twitter merupakan situs jejaring sosial dan microblogging. dapat digunakan sebagai sarana promosi blog. Untuk menggunakannya anda harus mendaftar dan membuat account.

Prosedurnya:

1. Daftar ke twitter, bisa klik disini TwitterKlik Join

Page 58: Tampilan Di Blog

2. isi form pendaftaran berikutFullname : nama anda (bisa pakai nama samaran)Username : nama ini akan anda pakai untuk loginPassword : usahakan beda dengan password email agar email anda tetap amanEmail : isi dgn email andaKode capctha contoh: (eler retool)Klik Create my account

Jika sukses maka akan muncul pesan agar anda melakukan konfirmasi. Email konfirmasi dari twitter akan terkirim otomatis ke email anda.Buka email anda, klik link konfirmasi dari tweeter untuk mengaktifkan account twitter.

Sampai disini anda sudah punya halaman /web twitter, namun anda tidak bisa mengupdate atau membuat postingan di twitter,karena sampai saat ini tweeter belum menyediakan fasilitas update postingan di web-nya, jadi anda harus menggunakan layanan pihak ketiga seperti hootsuite (gratis).

Page 59: Tampilan Di Blog

Cara promosi blog di twitter (microblogging)

Mungkin ada diantara teman-teman yang sering menggunakan twitter untuk membuat postingan atau mempromosikan tulisan (layaknya sebuah blog). Twitter merupakan salah satu situs yang memadukan antara jejaring sosial dan blog. Postingan yang ditampilkan akan meyesuaikan dengan urutan waktu postingannya, jadi postingan yang dibuat pada tanggal yg lebih baru otomatis akan berada pada posisi teratas dari tampilan web twitter. Namun karena jumlah karakter yang ditampilkan dibatasi jadi twitter hanya mampu menampilkan penggalan postingan jika postingan terlalu panjang.

Ada beberapa cara untuk mengupdate twitter anda:1. Dengan menggunakan hp (saya sampai sekarang belum tahu cara ini, dan juga malas mencari tahu cara menggunakan hp untuk update twitter karena tombol hp yang kecil dan susah untuk mengetik postingan di hp).2. Dengan menggunakan situs gratisan yang bisa anda lakukan secara online, salahsatu situs yang menyediakan layanan update tweeter secara gratis adalah hootsuite.

Dalam bahasan kali ini saya akan mencoba memberikan gambaran kepada teman-teman yang masih awam tentang cara mengupdate twitter menggunakan situs hootsuite, dan kegiatan apa saja yang bisa anda lakukan di twitter :

1. Daftar ke twitter untuk membuat account, 2. Daftar ke hootsuite untuk membuat account, 3. Konfigurasi hootsuite dan twitter (untuk melakukan koneksi dan sinkronisasi antara twitter dan hootsuite4. Update postingan secara manual (optional)5. Update postingan secara otomatis dengan menggunakan rss feed6. Hapus tweets (postingan)7. Follow (mengikuti)twitter orang lain

Karena ada beberapa tahap, jika saya jaikan satu postingan maka waktu loadingnya akan lama karena gambarnya ada puluhan, jadi saya membagi menjadi beberapa bagian agar lebih mudah membuka halamannya, yaitu:1. Cara daftar ke twitter, 2. Cara daftar ke hootsuite, 3. Cara Update postingan twitter secara manual4. cara Update postingan twitter secara otomatis dengan menggunakan hootsuite (rss feed)5. cara follow (mengikuti)twitter orang lain

Catatan:Ada beberapa istilah yang digunakan dalam twitter, yaitu:

Page 60: Tampilan Di Blog

a. Tweets kalo dalam blogger (blogspot) dinamakan postinganb. Following adalah situs twitter orang lain yang anda ikutic. Follewer adalah orang yang mengikuti situs twitter andad. Retweets adalah istilah membuat postingan (update) postingan di twittere. Follow adalah perintah atau tindakan untuk mengikuti twitter orang lain.