Professional Documents
Culture Documents
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.
1. Login ke account blogger anda, pilih dashboard , tata letak , elemen halaman
3. Pada tampilan berikut, klik browse untuk memilih file gambar atau foto yang akan di upload
Jika suatu saat anda ingin mengubah efek slideshow anda bisa login ke akun slideshow,
kemudian pilih edit slideshow.
Hasilnya bisa dilihat seperti pada blog Dummy atau contoh lain dengan efek yang beda pada
blog membuat slideshow 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.jpg
http://i47.tinypic.com/2u4sheu.jpg
http://i48.tinypic.com/2502hjc.jpg
2. Login ke dasboard blogger, buat entri baru atau add gadget html/javascript
Masukkan kode berikut:
Kode:
<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"><img
src="http://i49.tinypic.com/2n7pmwx.jpg" />
</marquee>
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:
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
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 slideshow
contohnya bisa dilihat di bawah ini
Secara umum cara buat teks berjalan bisa menggunakan kode dasar seperti di bawah ini
Kode
<marquee> Membuat teks berjalan </marquee>
Hasil :
Kode:
<marquee behavior="scroll" direction="right" height="50" width="auto">Teks berjalan dari kiri
ke kanan</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:
Contoh tampilan:
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:
Contoh 2
Kecepatannya 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>
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)
<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:
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
<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:
Contoh 3:
<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>
<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.
Contoh judul postingan yang di-ubah background-nya bisa dilihat seperti gambar di bawah ini.
Untuk mengubah /membuat background judul postingan lakukan prosedur berikut:
line-height: 2.1em;
border: 4px solid #000099;
background-color: #000099;
atau
line-height: 2.1em;
border: 4px solid yellow;
background-color: yellow;
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
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).
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;
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.
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
<style type='text/css'>
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
</style>
<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
Video youtube yang anda pasang /tambah ke blog anda juga bisa membuat postingan semakin
menarik dan bisa membuat postingan lebih informatif.
Agar videonya bisa simetris letaknya, atau berada di tengah-tengah bisa tambahkan script
<center> ------ </center> menjadi seperti di bawah ini
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:
Contoh widget google transtalor logo bendera bisa dilihat seperti di bawah ini:
Info selengkapnya tentang script google translator di atas bisa dilhat disini Free
widget google translator
Jadi bigung membuat kata-kata yang cocok buat menjelaskannya. Untuk lebih jelasnya bisa
dilihat disini blog dummy
1. Login ke dasboard
]]></b:skin>
</head>
<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>
]]></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.
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:
<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 >
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
5. Selanjutnya, Pada dashboard pilih Elemen halaman
Pada bagian Posting Blog ,klik Edit
Catatan:
1.Teks sebelum script "more" akan ditampilkan, sedangkan teks setelah script "more" akan
disembunyikan
2. 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
Contoh blog saya yang memakai script ini bisa dilihat disini blog dummy
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.
Buat yang tertarik pasang lagu di blog bisa lakukan prosedur berikut:
1. Buka situs layanan mp3 online
2. Copy kode html yang tersedia
3. Logn ke account blogger anda
Pilih Dashboard -> tata letak -> elemen halaman
Pilih Tambah Gadget
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.
Contoh hasilnya bisa dilihat disini : blog dummy
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 variabelnya
tagcloud", "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 ,
bisa dilihat disini daftar warna
3. so.addVariable("tcolor", "#ffffff"); dimana , #ffffff warna teks hitam. warna teks lain yang
bisa anda gunakan:
Contoh di bawah ini adalah script tag berputar background berwarna biru, dan teks berwarna
putih:
Contoh tag berputar warna biru bisa dilihat disini tag berputar
Ada banyak cara untuk mencari teman (mengikuti twitter) orang lain, beberapa
contohnya:
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 anda
Klik Sign in
3. Secara default, orang yang anda follow akan muncul di list follow anda jika
mereka sudah menyetujui.
2. masukkan keyword, miasalnya nama negara, nama sekolah, atau nama artis dan
lain-lain
Klik search
2. Atau jika anda ingin mencoba gambar background yang saya punya bisa pakai url berikut:
http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif
http://i37.tinypic.com/apb69k.jpg
http://i36.tinypic.com/n1bdcz.jpg
(pilih salahsatu untuk ujicoba)
body {
background: $bgColor;
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:
http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif
6. Simpan template
body {
background: $bgColor;
background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg') top center repeat-y;
margin: 0;
padding: 0px;
#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;
#main-wrapper {
margin-$startSide: 14px;
width: 500px;
#sidebar-wrapper {
margin-$endSide: 10px;
width: 360px;
Contoh template denim yang sudah saya ubah bisa dilihat disini
Computer dummy atau
Blog kalong
Komputer SEO
Contoh template minima yang sudah saya ubah bisa dilihat disini
dummy-ku
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 Feeds
Klik tombol Add new Feed
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)
Klik Save
3. Jika sukses maka akan terlihat logo
berwarna merah (pause) di depan nama feed
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
2. Di Bagian dashboard
Ketik teks postingan yang akan ditampilkan, misalnya:
Kenali dan Kunjungi Objek Wisata di Pandeglang
di 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.html
Klik "Shrink It"
1. Buka halaman hootsuite, bisa klik disini hootsuite atau di old hootsuite (saya
menggunakan old hootsuite)
Isi form pendaftaran
Email, nama, password,timezone,dst
Klik Create account
2. Pada bagian :
a. twitter login : isi dengan username yang telah anda buat di twitter
b. masukkan password
Klik add
2. Jika sukses akan muncul link twitter anda seperti gambar di bawah
Klik Finish
3. Akan muncul halaman aktivasi.
Cek email untuk mengambil kode aktivasi yang terkirim di email anda
Prosedurnya:
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).
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 :
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 manual
4. 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:
a. Tweets kalo dalam blogger (blogspot) dinamakan postingan
b. Following adalah situs twitter orang lain yang anda ikuti
c. Follewer adalah orang yang mengikuti situs twitter anda
d. Retweets adalah istilah membuat postingan (update) postingan di twitter
e. Follow adalah perintah atau tindakan untuk mengikuti twitter orang lain.